Color tokens
Reference these by utility class (bg-primary, text-muted-foreground, border-border…), never by raw hex. Each is mapped into Tailwind v4's theme and re-themes automatically in dark mode.
background
Page canvas
foreground
Primary text
card
Elevated surface
card-foreground
Text on card
muted
Muted surface
muted-foreground
Secondary text
popover
Floating surface
popover-foreground
Text on popover
border
Dividers & outlines
input
Form control border
primary
Primary action
primary-foreground
Text on primary
secondary
Secondary surface
secondary-foreground
Text on secondary
accent
Soft highlight
accent-foreground
Text on accent
destructive
Danger / delete
destructive-foreground
Text on destructive
ring
Focus ring
success
Confirm / positive
success-foreground
Text on success
warning
Caution
warning-foreground
Text on warning
Foreground on its intended background
Verify contrast pairs hold in both themes.
foreground / background
primary-foreground / primary
secondary-foreground / secondary
accent-foreground / accent
destructive-foreground / destructive
muted-foreground / muted
Radius scale
A 4-step radius scale derived from the base --radius token.
rounded-xs
rounded-sm
rounded-md
rounded-lg