Slopless Design

nav.bauhaus-shape-bar · Shape bar

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

Rule

Three small primary shapes (circle, square, triangle) precede the lowercase wordmark in 1–4; links start at column 7; a 4 px bar closes the nav.

Slots

siteName, pages

Grid areas

mark 1-4 · links 7-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 2

Pattern notes

A row of three 16 px shapes — circle (accent), square (accent2), triangle (yellow) — then the lowercase wordmark, all in columns 1–4. Page links in lowercase start on the column-7 line, plain, body size. A 4 px bar in the heading colour spans the full grid underneath. At phone width the links scroll horizontally.

Northfold

Services
Work
About
Contact