Colors
Semantic color tokens defined as CSS custom properties in HSL format. All tokens adapt automatically to light and dark modes.
Brand
primary
bg-primary
primary-foreground
text-primary-foreground
secondary
bg-secondary
secondary-foreground
text-secondary-foreground
Surface
background
bg-background
foreground
text-foreground
card
bg-card
card-foreground
text-card-foreground
popover
bg-popover
popover-foreground
text-popover-foreground
Interactive
accent
bg-accent
accent-foreground
text-accent-foreground
muted
bg-muted
muted-foreground
text-muted-foreground
Status
info
bg-info
info-foreground
text-info-foreground
info-muted
bg-info-muted
success
bg-success
success-foreground
text-success-foreground
success-muted
bg-success-muted
warning
bg-warning
warning-foreground
text-warning-foreground
warning-muted
bg-warning-muted
danger
bg-danger
danger-foreground
text-danger-foreground
danger-muted
bg-danger-muted
Feedback (Legacy)
destructive
bg-destructive
destructive-foreground
text-destructive-foreground
Border & Input
border
border-border
input
border-input
ring
ring-ring
Charts
chart-1
text-chart-1
chart-2
text-chart-2
chart-3
text-chart-3
chart-4
text-chart-4
chart-5
text-chart-5
How It Works
Colors are defined in globals.css as HSL values without the hsl() wrapper. Tailwind references these via tailwind.config.ts, enabling native opacity modifiers like bg-primary/50. The .dark class swaps the values for dark mode, handled by next-themes.