| 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 |
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.
| 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 |
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.
| 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 |
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.