nav.neobrutal-split-tabs · Split tabs

A nav pattern from Neo-Brutalism, 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.neobrutal-split-tabs". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Three touching bordered tabs: a pink logo tab on 1–3, a white link tab on 4–10, a yellow action tab on 11–12.
Slots
siteName, pages, cta
Grid areas
logo 1-3 · links 4-10 · cta 11-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FFF4DE · text #111111 · heading #000000 · accent #FF5FA2 · accent2 #00BCA1 · Archivo Black / Space Grotesk · radius 8px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 3

Pattern notes

  • Three bordered tabs that share their borders: an accent tab on 1–3 with the wordmark in onAccent, a white tab on 4–10 with underlined links, and a yellow tab on 11–12 with a small ghost button and arrow. Phone: the CTA tab hides, the link tab scrolls horizontally.
Northfold
  • Services
  • Work
  • About
  • Contact