nav.claymorphism-chip-trio · Chip trio

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

Rule
Three separate clay pieces on one row: the boxed monogram and wordmark on an accent chip, plain links in a surface pill, and a primary pill button.
Slots
siteName, pages, cta
Grid areas
logo 1-3 · links 4-10 · cta 11-12 (12-column grid, 1-based inclusive spans)
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

Pattern notes

  • Three separate clay pieces on one row: the monogram on an accent chip in 1–3, plain links centred in a white pill in 4–10, and a primary pill button in 11–12 (hidden on phones).
NNorthfold
  • Services
  • Work
  • About
  • Contact
Start a project