Colors
Our color system is built with semantic tokens that provide consistent theming across light and dark modes. Instead of using raw color values, we use semantic names that describe the purpose of each color.
Base
Aa
background
Light: hsl()
Dark: hsl()
Default page background
Aa
foreground
Light: hsl()
Dark: hsl()
Default text color
Components
Aa
primary
Light: hsl()
Dark: hsl()
Primary brand color for key elements
Aa
primary-foreground
Light: hsl()
Dark: hsl()
Text color on primary background
Aa
secondary
Light: hsl()
Dark: hsl()
Secondary color for less prominent elements
Aa
secondary-foreground
Light: hsl()
Dark: hsl()
Text color on secondary background
Aa
accent
Light: hsl()
Dark: hsl()
Accent color for highlights and emphasis
Aa
accent-foreground
Light: hsl()
Dark: hsl()
Text color on accent background
Aa
muted
Light: hsl()
Dark: hsl()
Muted color for subtle backgrounds
Aa
muted-foreground
Light: hsl()
Dark: hsl()
Text color on muted background
Status
Aa
destructive
Light: hsl()
Dark: hsl()
Color for error states and destructive actions
Aa
destructive-foreground
Light: hsl()
Dark: hsl()
Text color on destructive background
Aa
success
Light: hsl()
Dark: hsl()
Color for success states and confirmations
Aa
success-foreground
Light: hsl()
Dark: hsl()
Text color on success background
Aa
warning
Light: hsl()
Dark: hsl()
Color for warning states and alerts
Aa
warning-foreground
Light: hsl()
Dark: hsl()
Text color on warning background
Aa
info
Light: hsl()
Dark: hsl()
Color for informational messages
Aa
info-foreground
Light: hsl()
Dark: hsl()
Text color on info background
UI Elements
Aa
card
Light: hsl()
Dark: hsl()
Background color for card components
Aa
card-foreground
Light: hsl()
Dark: hsl()
Text color on card background
Aa
popover
Light: hsl()
Dark: hsl()
Background color for popovers and dropdowns
Aa
popover-foreground
Light: hsl()
Dark: hsl()
Text color on popover background
Utility
Aa
border
Light: hsl()
Dark: hsl()
Color for borders and dividers
Aa
input
Light: hsl()
Dark: hsl()
Background color for input fields
Aa
ring
Light: hsl()
Dark: hsl()
Color for focus rings and outlines
Gradients
gradient-base
Light: hsl()
Dark: hsl()
Base gradient color
gradient-1
Light: hsl()
Dark: hsl()
First accent gradient color
gradient-2
Light: hsl()
Dark: hsl()
Second accent gradient color
gradient-3
Light: hsl()
Dark: hsl()
Third accent gradient color