# Literal Labs brand navigation

LL-DS / 06 NAVIGATION V1.0 · APR 2026

PIPELINE · LIST · PREV–NEXT NEWCASTLE · UK

\[ 05:14:22 \] NAVIGATION SYSTEM · LITERAL LABS REGISTERED · ® LL-DS-NAV

# Navigation,  
_always a way out_.

**PIPELINE STRIP** · LIST NAV  
**PREV – NEXT** · ANCHOR LINKS  
Wayfinding / Hierarchy

® LL-DS SERIAL · 7536U-141-781 · CYCLE 0421 OP·2 V1.0

MONOSPACE LABELS · ARROW AFFORDANCE · 0 RADIUS WAYFINDING ALWAYS VISIBLE · NEVER HIDDEN REF: LL-DS-NAV

01 • Pipeline strip

**Live example** Numbered steps · arrow separator · anchor links

[1 Import](#) → [2 Annotate](#) → [3 Target](#) → [4 Train](#) → [5 Test](#) → [6 Deploy](#)

**Anatomy** Step number · label · arrow

N Step label →

**Specs**

| Property | Value |
| --- | --- |
| Step number bg | `--dark-blue` |
| Step number bg (hover) | `--bright-orange` |
| Step label colour | `--dark-blue` |
| Step label colour (hover) | `--bright-orange` |
| Arrow opacity | 0.4 |
| Number size | 22×22 px · border-radius 50% |
| Usage | Multi-step product flows — see ModelMill |

**Usage**

Use at the top of multi-step product or process pages to orient the user and provide jump-links to each stage. Steps are numbered sequentially; arrows are decorative separators only. Never omit step numbers — they carry the ordinal meaning.

02 • Stacked list navigation

**Live example** Nested orange container · row links · arrow icon

**[Tsetlin Machine benchmark: image classification](#)**

[](#)

**[Logic-Based Networks on edge hardware](#)**

[](#)

**[Energy efficiency of propositional logic models](#)**

[](#)

**Specs**

| Property | Value |
| --- | --- |
| Container nesting | 4 levels of `.research-orange-outer` |
| Innermost class | `._bofinal` — applies flat orange bg |
| Resting bg (outer) | `rgba(255,110,59, 0.1)` |
| Hover bg (outer) | `rgba(255,110,59, 0.3)` |
| Resting bg (.\_bofinal) | `rgb(255,232,219)` |
| Row separator | `1px solid --grey` on each `.columns` |
| Arrow icon | `.outline-box-arrow-icon` · hide on touch via `.is-hidden-touch` |
| Link colour | `--orange` |
| Usage | Research / benchmark / curated link-list pages |

**Usage**

Use on research, benchmark, and curated link-list pages. The four-level nesting creates a layered depth effect with no JavaScript. Always use exactly four levels: three outer wrappers plus the innermost `._bofinal`. The arrow icon is hidden on touch devices; the full row remains clickable regardless.

03 • Prev / Next navigation

**Live example** Back · Forward · offset layout

[Previous page](#)

[Next page](#)

**Specs**

| Property | Value |
| --- | --- |
| Container | `.columns` with two `.column.is-one-third` children |
| Forward link offset | `.is-offset-one-third` — pushes to right third |
| Arrow (back) | `.millpic-cta-arrow:first-of-type` rotates 180° |
| Label alignment (back) | right |
| Label alignment (forward) | left |
| Border | `1px solid --border-default` |
| Background | `#ffffff` |
| Usage | Bottom of every brand guide section page |

**Usage**

Place at the bottom of every brand guide section page inside `#branding-navigation`. Back link occupies the left third; forward link occupies the right third offset by one third. If only one direction is available, omit the absent link entirely — never disable or grey it out.

[Components](https://www.literal-labs.ai/about/brand-guide-components.html)

[Iconography](https://www.literal-labs.ai/about/brand-guide-iconography.html)