nav.bauhaus-block-tabs · Block tabs

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

Rule
The wordmark sits boxed in a solid accent block on 1–3; the links run on a yellow band across 4–12. No gap between the two blocks.
Slots
siteName, pages
Grid areas
logo 1-3 · links 4-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #0050CC · accent2 #AF0029 · Jost / Jost · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 0

Pattern notes

  • Two blocks with no gutter: the wordmark in a solid accent block (onAccent text) on 1–3, and the page links on a yellow (surfaceAlt) band across 4–12, plain, lowercase, evenly spaced. Both blocks are the same height (≈64 px). At phone width the band scrolls horizontally beneath the logo block.
Northfold
  • Services
  • Work
  • About
  • Contact