nav.swiss-index-bar · Index bar

A nav pattern from Swiss International, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="nav.swiss-index-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Four column zones: wordmark 1–2, a one-line descriptor 4–6, numbered links 7–10, a text CTA in 11–12. Everything on one baseline.
Slots
siteName, tagline, pages, cta
Grid areas
logo 1-2 · descriptor 4-6 · links 7-10 · cta 11-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #E2271D · accent2 #850001 · Inter Tight / Hanken Grotesk · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 2

Pattern notes

  • Four zones on one baseline: wordmark 1–2, a one-line muted descriptor 4–6 (hidden at phone width), numbered links (01 Work, 02 About…) 7–10 and an underlined text CTA in 11–12.
Northfold

Strategy and design for companies that make things

  • 01Services
  • 02Work
  • 03About
  • 04Contact
Start a project