Button
Prompt users to take action with primary, secondary, and ghost styles.
Card
Group related content together with three depth levels to choose from.
Clear Components
Map workflows, proof, receipts, and governed states with Performance Lab clarity.
Navigation
Help users find their way with headers, sidebars, breadcrumbs, and tabs.
How We Build These
We test each component against three questions before shipping it.
Use CatalogCard for catalog entries with a clear destination and proof summary.
Use CrossPropertyLink when a route intentionally moves the user between CREATE
SOMETHING properties and the destination must remain explicit.
One Pattern, One Place
If a component already exists, use it. No duplicates.
Earn Your Place
Every prop and variant must solve a real problem.
Disappear When Working
Good tools get out of the way. You should focus on your work, not ours.
Design Tokens
Use these variables for colors, spacing, and motion. They keep your design consistent automatically.
Colors
--color-bg-surface --color-fg-primary --color-border-defaultMotion
--duration-micro --ease-standardSpacing
--space-xs --space-sm --space-mdBorders
--radius-sm --radius-md --radius-lg