Slopless Design

nav.swiss-split-columns · Split columns

A nav pattern from Swiss International, drawn alone below with this design's tokens and sample copy. Used in this design on: every page, as the nav. Give the section root data-pattern="nav.swiss-split-columns". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Wordmark in columns 1–3, page links start exactly at column 7; a hairline closes the bar. No buttons, no logo icon.

Slots

siteName, pages

Grid areas

logo 1-3 · links 7-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

Wordmark (no symbol) in 1–3; page links start exactly on the column-7 line, plain, in body size, with the current page underlined. A 1 px hairline closes the bar. No buttons, no hamburger on desktop; at phone width the links scroll horizontally on one line.

Northfold

Services
Work
About
Contact