Colors
Semantic tokens and their usage roles.
Primary
Action, links, focus rings, and brand emphasis
primary
#2787ff
on primary-foreground
primary-50
#eff6ff
on foreground
primary-100
#dbeafe
on foreground
primary-200
#bfdbfe
on foreground
primary-300
#93c5fd
on foreground
primary-400
#60a5fa
on foreground
primary-500
#2787ff
on primary-foreground
primary-600
#1d6feb
on primary-foreground
primary-700
#1d4ed8
on primary-foreground
primary-800
#1e40af
on primary-foreground
primary-900
#1e3a8a
on primary-foreground
Surfaces
Backgrounds, accents, and borders
background
#ffffff
on foreground
foreground
#171717
on background
muted
#f5f5f5
on muted-foreground
muted-foreground
#737373
on muted
accent
#f5f5f5
on accent-foreground
accent-foreground
#171717
on accent
border
#e5e5e5
on foreground
input
#e5e5e5
on foreground
ring
#2787ff
on foreground
Secondary
Navigation, headers, and high-contrast surfaces
secondary
#0f1b3d
on secondary-foreground
secondary-foreground
#ffffff
on secondary
Semantic
Status, feedback, and validation
destructive
#dc2626
on destructive-foreground
destructive-foreground
#ffffff
on destructive
success
#16a34a
on success-foreground
success-foreground
#ffffff
on success
warning
#d97706
on warning-foreground
warning-foreground
#ffffff
on warning
info
#2563eb
on info-foreground
info-foreground
#ffffff
on info