nav.hairline-mono-index · Hairline mono index

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

Rule
Two tiers split by full-width hairlines: a mono uppercase status line with a mono note right, then wordmark, numbered links and a small dark pill CTA.
Slots
eyebrow, meta, siteName, pages, cta
Grid areas
logo 1-3 · links 4-10 · cta 11-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

  • Two tiers, each closed by a full-width hairline: a 32 px status line (mono uppercase eyebrow left, mono note right, both `textMuted`), then the wordmark in 1–3, numbered links (01 Product, 02 Pricing…) in 4–10 and a small dark pill CTA in 11–12.

Brand & product studio

Booking projects from June 2026

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