Slopless Design

nav.technical-hairline-bar · Technical hairline bar

A nav pattern from Technical Hairline, 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.technical-hairline-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Wordmark left, plain links from column 4, a text link and a small dark pill CTA right; a full-width 1 px hairline closes the bar edge to edge.

Slots

siteName, pages, cta2, cta

Grid areas

logo 1-3 · links 4-8 · actions 9-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #FAFAF8 · text #2E2E2B · heading #0B0B0A · accent #111110 · accent2 #7A7A7A · Geist / Geist · radius 12px · space unit 4px (full list in design/tokens.json)

Section

full-bleed · vertical padding step 0

Pattern notes

Wordmark left (columns 1–3), plain links from column 4 at weight 400, a text link and a small dark pill CTA right-aligned in 9–12. A full-width 1 px hairline closes the bar edge to edge. Sticky with the page colour behind it. Phone: wordmark, pill CTA and a menu toggle only.

Northfold

Start a project