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
  • 01Services
  • 02Work
  • 03About
  • 04Contact
Start a project