nav.brutalist-boxed-strip · Boxed strip

A nav pattern from Brutalist, 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.brutalist-boxed-strip". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two bordered cells touching: the boxed site name in 1–3, the links in 4–12 underlined; borders collapse like a table.
Slots
siteName, pages
Grid areas
logo 1-3 · links 4-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 0

Pattern notes

  • Two cells with 2 px borders on all sides and zero gap: 1–3 holds the boxed site name in uppercase; 4–12 holds the underlined links in a row. At phone width the cells stack and the links scroll horizontally.
Northfold
  • Services
  • Work
  • About
  • Contact