Slopless Design

nav.memphis-bubble-bar · Bubble bar

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

Rule

A small accent triangle and the boxed wordmark on the left, pill links with black outlines in the middle, a small primary button on the right.

Slots

siteName, pages, cta

Tokens

bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5FA2 · accent2 #9AAE00 · Bricolage Grotesque / DM Sans · radius 12px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

One row, space-between: a 20 px triangle in accent next to the wordmark in an outlined box (surfaceAlt fill); the page links as pills with 3 px black outlines, the current one filled with accent2; a small primary button. At phone width the links scroll horizontally on their own line.

Northfold

Services
Work
About
Contact

Start a project