Design

Working surface for the unified benchy.shop design system. Every block below is composed from primitives in components/primitives and styled with tokens from styles/tokens.css.

Foundations

The token scales the rest of the system leans on, shown applied rather than enumerated. Hover any motion chip to feel its easing.

TYPE

--text-7xl

Display

--text-5xl

Title

--text-3xl

Heading

--text-xl

Subheading

--text-md

Body

--text-sm

Caption

SPACE

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

RADIUS

xs

sm

md

lg

xl

2xl

3xl

full

SURFACES

Surface

--color-bg-elevated

Primary content surface.

Muted

--color-bg-muted

Secondary grouping.

Ink

marketing-ink

Ink accents and footers.

Blue accent

120° gradient

Hero panels + footer.

MOTION

Surfaces & rhythm

The shell language — nav pill, section card, accent panel, footer strip — stacked so the section rhythm is legible at a glance.

NAV · glass pill · backdrop-blur

SECTION CARD · white surface · radius-2xl

A framed section

The card wrapper uses the same radius, padding, and border as /about and /lab. Content rhythm comes from Stack gaps alone.

ACCENT PANEL · linear-gradient 120° · radial highlights

Marketing accent surface

Same gradient as the homepage phone-preview panel and the footer strip.

FOOTER · full-bleed gradient shell

Compositions

Small, real UI moments built from the primitives — the same pieces assembled the way they would appear in product.

HERO · Heading + Text + pill Buttons

A cleaner starting point.

The hero pattern reuses pill buttons in two weights, the same headline type scale as /home, and a single Stack for vertical rhythm.

LIST · Card + Stack + Badge

Recent activity

Three representative list rows.

New primitive merged

shipped

Token scale audit

in review

Breakpoint regression

blocked

CONTROLS · Input + Switch + Badge + Kbd + Button

⌘K

Notifications

beta