Design System
A three-tier token architecture built on Tailwind CSS v4 — from primitive values to semantic aliases to component-scoped tokens.
Architecture
Three-Tier Token System
Every design decision flows through three layers — raw values become purposeful semantics, which compose into component-specific tokens.
Primitive
Raw, unaliased values — hex codes, rems, and unitless numbers. Never referenced directly by components.
Semantic
Purpose-driven aliases that give intent to a primitive. Respond automatically to theme switching.
Component
Component-scoped tokens that consume a semantic. Isolated to a single component surface.
Foundations
Color
Eight primitive palettes and a full set of semantic aliases that respond to light and dark themes automatically.
Primitive Palettes
Neutral
Cool gray with a slight blue undertone
Brand
Zinc scale — black primary
Accent
Orange — secondary accent
Success
Green — positive states
Warning
Amber — cautionary states
Error
Red — destructive states
Info
Blue — informational states
Semantic Tokens
Background
--color-bg-primary
Page background
--color-bg-secondary
Subtle panels
--color-bg-tertiary
Muted areas
--color-bg-inverse
Dark overlay
Surface
--color-surface-default
Cards, panels
--color-surface-raised
Elevated surfaces
--color-surface-overlay
Modal scrim
Text
--color-text-primary
Body text
--color-text-secondary
Secondary labels
--color-text-tertiary
Placeholder text
--color-text-disabled
Disabled state
--color-text-inverse
Light on dark
--color-text-accent
Accent highlights
Border
--color-border-default
Default borders
--color-border-subtle
Subtle dividers
--color-border-strong
Emphasis borders
--color-border-focus
Focus rings
--color-border-error
Error state
Action
--color-action-primary
Primary button
--color-action-primary-hover
Primary hover
--color-action-secondary
Secondary button
--color-action-secondary-hover
Secondary hover
--color-action-destructive
Destructive actions
--color-action-disabled
Disabled actions
Status
--color-status-success
Success
--color-status-success-subtle
Success background
--color-status-warning
Warning
--color-status-warning-subtle
Warning background
--color-status-error
Error
--color-status-error-subtle
Error background
--color-status-info
Info
--color-status-info-subtle
Info background
Foundations
Typography
A 28-step type scale spanning display, heading, body, label, caption, overline, and code styles — all mapped to semantic tokens.
DISPLAY
HEADING
BODY
LABEL
CAPTION
OVERLINE
CODE
Foundations
Spacing, Radius & Shadows
A rem-based spacing scale, a nine-step border-radius ramp, shadow elevations, and component size tokens.
Spacing Scale
Border Radius
Shadows
Component Sizes
Coming Soon
Component Tokens
The third tier — scoped to a single component and always resolved through semantic tokens. Inspect the full resolution chain for any token.
Component tokens are the third tier — scoped directly to a single UI element and always resolved through semantic tokens. The upcoming component token explorer will let you inspect every token for any component and trace its full resolution chain.
Filterable by component·Full resolution chain·Live theme preview