Slopless Design

nav.constructivist-slab-bar · Slab bar

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

Rule

A full-bleed black slab: boxed wordmark in 1–3 and slash-separated capital links across 5–12, in the paper colour.

Slots

siteName, pages

Grid areas

logo 1-3 · links 5-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #EFE6D2 · text #16130F · heading #16130F · accent #C8102E · accent2 #FF7777 · Anton / Barlow Semi Condensed · radius 0px · space unit 8px (full list in design/tokens.json)

Section

background heading · full-bleed · vertical padding step 2

Pattern notes

A full-bleed black slab (`bg: heading`): a boxed wordmark on 1–3 and slash-separated links in capitals across 5–12, both in the paper colour. The current link is red-underlined 4 px.

Northfold

Services
/
Work
/
About
/
Contact