yBlocks

Four theses

Why a gallery from many original authors reads as one product.

Consistency is the asset

Every card — whoever designed the original — is translated into the same semantic tokens: one accent, one grey ramp, one radius and elevation system. A single beautiful card is a style; a gallery sharing one gene pool is a product.

Density is tamed by a two-font rhythm

Big figures in the default sans; every label, unit and status in small tracked mono. Two clearly separated reading layers let a card carry a headline, a chart, a table and a status without turning to noise.

Color is earned

Every colored pixel carries information: the accent means brand or primary action, green/red mean outcome, palette hues mean data categories — bound one hue per category across every appearance. Decoration-only color is deleted.

One signature element per card

Each card keeps exactly one memorable visual — a tick meter, a waveform, a radar, a glowing sparkline. Identity comes from that one element; unity comes from everything else submitting to the shared language.

The two-font rhythm

Live samples — each row is rendered with the exact classes the language prescribes.

HEADLINE FIGURE$485,970

EYEBROW / SECTION LABELMONTHLY EXPENSES · LAST 4 WEEKS

ROW TITLEHarborview Loft

DELTA / STATUS CAPTION↑ +4.2% VS LAST MONTH

Color discipline

Priority order — a color that carries no information is deleted.

Semantic tokens first: one --primary accent; muted-foreground for secondary text; border tokens for lines.
Green/red only for outcomes: gains and losses, pass and fail, above and below target.
Palette hues only to differentiate data categories — one hue per category, across every appearance (dot, bar, chip, chart).
Category chips use the soft recipe — a /15 tint circle with a colored glyph — never solid fills with white glyphs.

The upgrade rubric

Six steps that turn an ordinary design into this language — earlier steps buy the most.

1Confiscate the paletteMap every color to a token or delete it: one accent, outcome green/red, one hue per data category, greys for the rest.
2Impose the two-font rhythmPromote the key figure to a tabular-nums headline; demote every label and unit to the mono recipe.
3Raise the densityReplace hero padding with context — a delta with a compare caption, an updated-at line, a dashed summary strip.
4Pick one signature elementKeep or invent a single distinctive visual; convert everything else to shared primitives and idioms.
5Add semantic motionCount-ups on figures, crossfades on state swaps, one simulation clock if the card is live. Motion explains change.
6Rewrite the contentInvented names, numbers that reconcile, deterministic seeds. A reader who checks the math must win.

Anti-patterns

If one of these appears, the language is losing.

A second accent color, or the brand color copied literally
Decorative gradients; colored headline text; solid category chips with white glyphs
A hardcoded shadow and a visible border on the same surface
Uppercase or mono swallowing body text — the rhythm dies when one layer eats the other
Motion on everything at once, or springs where a 150ms fade belongs
Real brands or people in mock data; numbers that don't reconcile
Hero padding as a stand-in for hierarchy

FULL NORMATIVE REFERENCE: docs/card-design-language.md · APPLIED BY THE REPLICATE-UI SKILL

See it applied — 22 cards →

Design Language

Four theses

Consistency is the asset

Density is tamed by a two-font rhythm

Color is earned

One signature element per card

The two-font rhythm

Color discipline

The upgrade rubric

Anti-patterns

Design Language

Four theses

Consistency is the asset

Density is tamed by a two-font rhythm

Color is earned

One signature element per card

The two-font rhythm

Color discipline

The upgrade rubric

Anti-patterns