color-background
Main canvas surface.
Color
Semantic tokens
color-foreground
Primary text color.
color-border
Default stroke and rule color.
color-muted
Secondary surface fill.
color-muted-foreground
Supporting text color.
Palette scales
Gray
9 swatches
Primary
9 swatches
Secondary
9 swatches
Accent
9 swatches
Destructive
9 swatches
Info
9 swatches
Warning
9 swatches
Success
9 swatches
Typography
Aa4xl — Display
Aa3xl — Heading 1
Aa2xl — Heading 2
Aaxl — Heading 3
Aalg — Heading 4
Aabase — Body
Aasm — Small / Caption
Aaxs — Fine print
The quick brown fox jumps over the lazy dog. This is body text using the base font size and normal line height.
Smaller supporting text using the muted foreground color and relaxed line height for comfortable reading.
const token = "mono font specimen";
Spacing
xs
sm
md
lg
xl
2xl
3xl
4xl
Border
Radius
border-radius-sm
border-radius-md
border-radius-lg
border-radius-full
Border widths
border-width-sm
border-width-md
border-width-lg
Sizing
Component heights
size-component-sm
Small component height
size-component-md
Medium component height
size-component-lg
Large component height
Icon sizes
size-icon-sm
Small icon
size-icon-md
Medium icon
size-icon-lg
Large icon
Elevation
Shadow scale
shadow-sm
Subtle shadow
shadow-md
Medium shadow
shadow-lg
Large shadow
shadow-xl
Extra large shadow
Applied surfaces
Popover
A compact floating surface for menus and quick actions.
P
Panel
A general-purpose card shadow for content blocks and tool drawers.
P
Dialog
The strongest elevation for modal surfaces that need clear separation.
D
Motion
Durations
Easings
Opacity
Interaction states
opacity-disabled
Disabled state
Supporting copy that should recede.
opacity-muted
Muted/subtle state
Supporting copy that should recede.
opacity-overlay
Overlay backdrop
Supporting copy that should recede.
opacity-full
Fully opaque
Supporting copy that should recede.
Overlay layering
Buttons
Solid
Subtle
Outline
Ghost & states
Badges / Tags
Solid
PrimarySecondaryAccentDestructiveInfoWarningSuccess
Subtle
PrimarySecondaryAccentDestructiveInfoWarningSuccess
Form Inputs
Textareas
Selects / Dropdowns
Checkboxes
Radio Buttons
Switches / Toggles
Cards / Surfaces
Default
Background + border surface.
Muted
Uses muted surface token.
Primary tint
primary-50 bg, primary-200 border.
Secondary tint
secondary-50 bg, secondary-200 border.
Accent tint
accent-50 bg, accent-200 border.
Alerts / Notifications
Heads up
Your session will expire in 10 minutes. Save your work before continuing.
Proceed with caution
This action will affect all users in the organisation. Review carefully before saving.
Changes saved
Your design tokens were exported successfully and are ready to use.
Something went wrong
We could not save your changes. Please check your input and try again.