Colors
OKLCH theme tokens grouped by role. Click any token to copy its CSS variable name. Light and dark values shown side by side.
Primary
Used by: button (default), badge (default), links
Secondary
Used by: button (secondary), badge (secondary)
Destructive
Used by: button (destructive), badge (destructive), alert (destructive)
Success
Used by: alert (success), badge (success)
Warning
Used by: alert (warning)
Info
Used by: alert (info)
Background
Used by: page background, default text color
Muted
Used by: disabled states, placeholder text, secondary text
Accent
Used by: hover states, active sidebar items
Card
Used by: card, dialog, dropdown-menu
Popover
Used by: popover, hover-card, command
Border & Input
Used by: input borders, card borders, focus rings
Charts
Used by: chart
Sidebar
Used by: sidebar
Layout
Used by: all components with rounded corners