Slopless Design

nav.dot-pill-bar · Pill bar

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

Rule

Signal dot and wordmark left, pill links in the middle, a small red primary pill right, all on the page ground over a hairline.

Slots

siteName, pages, cta

Tokens

bg #000000 · text #E6E6E6 · heading #FFFFFF · accent #D71921 · accent2 #FFFFFF · Doto / Space Grotesk · radius 24px · space unit 4px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

On the page ground over a 1 px hairline: the red signal dot beside the wordmark left, pill links in the middle (current page a filled `surface` pill), a small red primary pill right (the record button). Links scroll sideways on phones.

Northfold

Services
Work
About
Contact

Start a project