Hero card — the pattern break01
21
deg · sat cloudy Saint-Petesburg
Content cards02
Today

Design system locked

All 11 pages render on the same styles.css. No ad-hoc CSS.

3 min read
Yesterday

Token ramps regenerated

OKLCH-based 100–900 across neutral + accent. Perceptually even.

2 min read
Accent card — one per screen, maximum03
Live

Ship / land / deploy

The one place a bold accent block belongs — the primary CTA row on a landing page or the “now playing” card in a media surface. Use sparingly.

01 usage rule
Elevation — opt-in, for cards on colored ground04
Elev

Small

Elev

Medium

Elev

Large

Default cards are flat with border separation. Use .elev-* only when a card floats above a non-default ground.