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
11 swatches
Primary
9 swatches
Secondary
11 swatches
Accent
11 swatches
Destructive
11 swatches
Info
11 swatches
Warning
11 swatches
Success
11 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