Single-page reference generated from design.md — color palette, typography, spacing, and every core component in its default / hover / active / disabled states. Nothing here introduces a token that isn't already defined.
Seven root tokens. Every new element must resolve to one of these — never a new hex value.
Inter, all weights via variable font. Negative tracking only above 34px. Uppercase reserved for labels/captions.
No numbered token scale in code yet — these are the exact literal values already in use. Reuse them; don't invent new numbers.
Four-tier system. Never mix a tier — buttons are always 999px, cards always var(--radius).
Pill radius, glow-on-hover, arrow nudge on primary. Active/disabled states extend the same tokens — no new colors.
Static informational surface. Hover/active are proposed extensions for future interactive card use (e.g. clickable feature tiles) — not yet used on production pages.
Assemble interfaces in minutes.
Assemble interfaces in minutes.
Assemble interfaces in minutes.
Assemble interfaces in minutes.
8px radius — a third tier distinct from cards (14px) and buttons (999px). Focus/active state lightens the border, nothing else.
Used inline in data tables (see `.table-row`). No hover/active — status pills are non-interactive; disabled/muted variant shown for inactive rows.