Slopless Design

nav.scandinavian-soft-pill-tray · Pill tray

A nav pattern from Scandinavian Soft, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="nav.scandinavian-soft-pill-tray". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A single rounded tray on the surface colour: wordmark left, pill links in the middle, a small primary button right.

Slots

siteName, pages, cta

Tokens

bg #FDF9F4 · text #241E16 · heading #150E06 · accent #69A382 · accent2 #5DA29C · Nunito / Nunito Sans · radius 16px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 3

Pattern notes

A single rounded tray (surface colour, `radius` token, soft shadow) inside the page width: wordmark left, pill-style links in the middle (the current page gets a bg-coloured pill), a small primary button right. Phone: wordmark and links only; links scroll horizontally.

Northfold

Services
Work
About
Contact