Brick · design system
Canary — preset b2C8WyjFB
Every primitive bound to the canonical preset (radix-maia, mist, phosphor). If something here looks wrong, fix the preset, not the screen consuming it. See ADR-0003.
Typography
The headline
text-4xl · semibold
A page title
text-2xl · semibold
A section header
text-lg · medium
Body copy that explains what the operator is looking at and what they should do next. Three sentences max usually does the job.
text-base
Muted secondary copy for hints, helper text, metadata, status lines underneath form fields.
text-sm · muted
INV-2026-0042 · sk_test_••••5298
font-mono · text-xs
Color tokens
background
foreground
card
primary
secondary
muted
accent
destructive
border
input
ring
Buttons
Inputs
We use this for invoice receipts and notifications.
12+ characters.
Cards
Last invoice paid 3 days ago. Next recurring fires April 30.
Badges
Overlays
Tabs
Top-level summary lives here.
Skeletons
Avatars
Separator
Top half
Bottom half