Slopless Design

nav.neumorphism-pill-tray · Pill tray

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

Rule

One raised tray: wordmark left, pill links in the middle, a raised secondary key (hidden on phones) and a small accent primary right.

Slots

siteName, pages, cta2, cta

Tokens

bg #E3E8EF · text #28303B · heading #161C25 · accent #3F5BD9 · accent2 #794EBA · Plus Jakarta Sans / Plus Jakarta Sans · radius 22px · space unit 4px (full list in design/tokens.json)

Section

vertical padding step 4

Pattern notes

One raised tray across the page (radius 22 px, padding 12 × 20 px): wordmark left, pill links in the middle (the current page pressed in), a raised secondary key (hidden on phones) and a small accent primary right.

Northfold

Services
Work
About
Contact

Start a project