/ style
Every component, every variant, every state. The squint test lives here — run it before shipping any primitive change.
Design token palette. Source: src/css/custom.css.
Surface
Text
Status
Brand + Edge
Type scale tokens. Defined in tailwind.config.js.
Design System
Passive pill or interactive link. 44px tap target.
Passive variants
Interactive (to= / href=)
Surface primitive. Variants × padding × interactive states.
Variants
bg-surface border-edge
bg-surface-muted
bg-surface-accent
bg-ink
hover lift + focus ring
interactive={'{true}'}
Padding scale
Mono uppercase label. The signal before the heading.
tone=accent (default)
Section label
Another label
tone=subtle
When
So I get
Not
dark=true
On dark background
as=span (inline)
Prose with inline eyebrow inside running text.
Mono number + label. bare or card variant. StatCard = compat alias.
variant=bare (default)
$25.8K
M12 Cumulative
Base case
M4
Break-even
Base case
94%
Uptime
variant=card
$25.8K
M12 Cumulative
Base case
M4
Break-even
$800
Monthly Burn
Fixed costs
StatCard (compat alias)
$25.8K
M12 Cumulative
Base case
M4
Break-even
dark=true
94%
Uptime
30-day rolling
12ms
p95 latency
$0
Starting cash
Bootstrapped
Vertical stack with fixed-token gap. Replaces ad-hoc space-y-* classes.
All three gaps
tight
Block A — 12px — label/value pairs
Block B
Block C
base
Block A — 24px — sibling blocks
Block B
Block C
loose
Block A — 48px — distinct concepts
Block B
Block C
Miller minus two. Show 5, fold the rest. Dev console warns when > 5.
as=col (7 items — 2 folded)
as=grid
as=row gap=tight
Thin rule with optional centered eyebrow caption.
Plain
With caption
Section break
dark=true
Measure-enforced long-form wrapper. sm / md / lg sizes.
size=sm
Small — sidebar explanations, footnotes. Max 65ch.
Two paragraphs test the inter-paragraph rhythm. Strong and links included.
size=md (default)
Medium (default) — workhorse body. 16px / 1.625 / 65ch.
Two paragraphs test the inter-paragraph rhythm. Strong and links included.
size=lg
Large — hero intros, primary content that needs weight. 18px.
Two paragraphs test the inter-paragraph rhythm. Strong and links included.
UI Atoms
Generic label chip. Domain badges (PRDStatusBadge, ConvictionBadge) compose this.
Variants
Status box for inline alerts, outcomes, signals.
All variants
Outcome achieved
Kill signal breached
Below threshold
Context note
Structural note
Trigger/tag badge with data-variant. Named presets for JTBD taxonomy.
Named variants
Data Display
Numbered stage label with done/total progress bar.
Progress states
Label + horizontal bar + value. Capability scores 0–max.
Score range 0–5
Feature Matrix
Stacked L0–L4 progress bar. Used on Vessel overview.
Mixed — 202 features
All L4 — fully commissioned
All L0 — spec only
L0–L4 commissioning state pill.
All levels
Venture
HIGH / MEDIUM / LOW / NONE conviction level pill.
Levels
VALIDATED / PROJECTED / UNVALIDATED venture metric status.
Statuses
Circular SVG progress ring. sm / md / lg sizes.
Sizes × values
current / target bar with animated fill.
current vs target
Vision
Five-block bar for conviction level (1–5). Optional probability readout.
Conviction 1–5
With probability readout
size=sm