Slopless Design

nav.neo-grotesk-hairline · Hairline

A nav pattern from Neo-grotesk Minimal, 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.neo-grotesk-hairline". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Small wordmark on 1–2, a muted one-line descriptor on 4–6, small links on 9–12; one hairline beneath. Everything at body size or smaller.

Slots

siteName, tagline, pages

Grid areas

logo 1-2 · descriptor 4-6 · links 9-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

A small wordmark (body size, weight 500) on 1–2, a muted descriptor at step −1 on 4–6 (hidden at phone width), page links at small size on 9–12 with 24 px gaps and the current page in the text colour (others muted). One 1 px hairline closes the bar. No buttons.

Northfold

Strategy and design for companies that make things

Services
Work
About
Contact