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

• Desktop 1440
• Tablet 834
• Phone 390