Every primitive × variant × state. Not indexed. Development only.
01
Six states. Three sizes. Four variants. Dark overrides.
02
Passive chips describe. Interactive chips link — enforces 44px tap.
03
Surface primitive. Variants × padding × interactive.
bg-surface border-edge, non-interactive.
bg-surface-muted — subdued card on white.
bg-surface-accent border-brand/20.
bg-ink — inverted card on any surface.
Hover lifts, focus rings, no underline.
interactive={true} without href/to.
04
Measure-enforced long-form wrapper. Three sizes.
Small prose. Used for sidebar explanations or footnotes. Max 65ch measure.
Links render in brand. Strong pushes weight without color shift.
Default body prose. The workhorse. 16px base, 1.625 line-height, 65ch measure.
Two paragraphs here test the inter-paragraph rhythm. Check descenders and ascenders read cleanly.
Large prose. For hero intros and primary content that needs weight. 18px base.
05
align=center|left, as=h1|h2|h3|h4, dark boolean.
Default — center, h2
The landing-page default. max-w-xl, mx-auto.
align=left, as=h1
For sub-pages where the SectionHeader IS the page title.
Dark
dark prop flips all tokens for bg-ink sections.
06
Mono uppercase label. The atom that signals what's about to be said.
Section label
Another label
When
So I get
Section label
Text with inline eyebrow inside prose.
07
Vertical stack with a fixed-token gap. Replaces ad-hoc space-y-*.
tight (12px)
Label + value pair
Same idea, close together
Third line, still tight
base (24px)
Sibling block A
Sibling block B
Sibling block C
loose (48px)
Distinct concept A
Distinct concept B
08
Mono number + label. bare (default) or card variant. Replaces StatCard.
$25.8K
M12 Cumulative
Base case
M4
Break-even
Base case
$800
Monthly Burn
$25.8K
M12 Cumulative
Base case
M4
Break-even
$800
Monthly Burn
Fixed costs
94%
Uptime
30-day rolling
12ms
p95 latency
$0
Starting cash
Bootstrapped
09
Thin rule with optional eyebrow caption. Segments without nesting a Section.
10
Miller minus two enforced. Show 5, fold the rest.