Slopless Design

nav.organic-leaf-bar · Leaf bar

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

Rule

Wordmark on 1–3, underlined links on 5–10, a small secondary pill button on 11–12; no rule under the bar.

Slots

siteName, pages, cta

Grid areas

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

Tokens

bg #F3EBDD · text #2E2A22 · heading #2A1F14 · accent #BC572B · accent2 #A56B00 · Fraunces / Karla · radius 28px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 3

Pattern notes

Wordmark on 1–3 in the heading serif; links on 5–10 with a soft underline on hover and on the current page; a small secondary pill button on 11–12 (hidden on phone). No rule, no background: the bar sits on the page.

Northfold

Services
Work
About
Contact

Start a project