Slopless Design

nav.midcentury-pill-bar · Pill bar

A nav pattern from Mid-Century Modern, 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.midcentury-pill-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Boxed wordmark in 1–3, pill-shaped page links in 5–9, a primary CTA in 11–12.

Slots

siteName, pages, cta

Grid areas

logo 1-3 · links 5-9 · cta 11-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #F3E9D6 · text #2B231B · heading #2B231B · accent #C9552A · accent2 #0099BE · League Spartan / Jost · radius 20px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

A boxed wordmark in 1–3, the page links as pills in 5–9 (current page filled with accent), a small primary pill CTA in 11–12, all vertically centred.

Northfold

Services
Work
About
Contact

Start a project