Slopless Design

nav.y2k-chrome-pill-bar · Pill bar

A nav pattern from Y2K Chrome, 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.y2k-chrome-pill-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A floating capsule on the surface colour with a glow: wordmark left, pill links in the middle, a small primary pill button right.

Slots

siteName, pages, cta

Tokens

bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)

Section

vertical padding step 2

Pattern notes

One capsule-shaped bar (full radius, 2 px border, glow shadow) inset from the page edge: the chrome wordmark on the left, page links as pills (the current one filled with accent) in the middle, and a small primary pill button on the right. At phone width the links scroll horizontally inside the capsule and the button hides.

Northfold

Services
Work
About
Contact

Start a project