Slopless Design

nav.neobrutal-boxed-bar · Boxed bar

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

Rule

The whole nav is one bordered white bar with the hard shadow: boxed logo left, pill links in the middle, a small primary button right.

Slots

siteName, pages, cta

Grid areas

bar 1-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

One bordered white bar with the hard shadow and the radius token, spaced away from the page edges. Boxed logo on the left, links as bordered pills in the middle (current page filled accent), a small primary button on the right. Phone: links scroll horizontally inside the bar.

Northfold

Services
Work
About
Contact

Start a project