nav.claymorphism-floating-pill · Floating pill

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

Rule

One floating surface clay pill: wordmark left, pill links in the middle, a small primary pill button right.

Slots

siteName, pages, cta

Tokens

bg #F2EDFF · text #2B2340 · heading #1E1733 · accent #FF64AC · accent2 #00C09F · Fredoka / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 3

• Desktop 1440
• Tablet 834
• Phone 390