`nav.frosted-split-capsules` · Split capsules

A nav pattern from Frosted Glass, 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.frosted-split-capsules". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule: Two separate frosted capsules: the wordmark alone on 1–3, the links and a ghost button together on 7–12.
Slots: siteName, pages, cta
Grid areas: logo 1-3 · links 7-12 (12-column grid, 1-based inclusive spans)
Tokens: bg #0A0F1F · text #E4EAF6 · heading #FFFFFF · accent #6E8BFF · accent2 #A67AE8 · Sora / Manrope · radius 22px · space unit 8px (full list in design/tokens.json)
Section: vertical padding step 3

Pattern notes

Two frosted capsules on one line: wordmark alone on 1–3; links and a small ghost button together on 7–12. Columns 4–6 stay empty so the backdrop shows between them. The ghost button hides on phone.

Northfold

Services
Work
About
Contact

Start a project