Tailwind colors
Brand colors are defined in globals.css
Colors
Color palette for the brand visual identity.
Primary
bg-primaryOn white: #0F4C81 · 8.9:1
On black: #F0B37E · 8.2:1
Secondary
bg-secondaryOn white: #1D8381 · 4.5:1
On black: #1D8381 · 4.6:1
Accent
bg-brand-accentOn white: #E0295F · 4.5:1
On black: #E0295F · 4.7:1
Backgrounds
Page and surface backgrounds.
Page
bg-muted/40Surface
bg-backgroundSubtle
bg-mutedHover
bg-accentPrimary tint
bg-primary/10Secondary tint
bg-secondary/15Borders
Dividers and container borders.
Default
bg-borderLayout
bg-border/80Input
bg-inputWarning
bg-warningError
bg-destructiveText
Typography colors.
Heading
bg-foregroundBody
bg-foreground/80Muted
bg-muted-foregroundIcon
bg-muted-foreground/80Disabled
bg-muted-foreground/70Status
Badge and pill color pairs used across the app.
Success
Success
bg-success/15text-success-foregroundWarning
Warning
bg-warning/15text-warning-foregroundInfo
Info
bg-info/15text-info-foregroundError
Error
bg-destructive/15text-destructiveInactive
Inactive
bg-mutedtext-muted-foregroundNeutral
Neutral
bg-mutedtext-muted-foregroundFeedback
Alerts and highlighted panels.
Error surface
bg-destructive/20Error border
bg-destructiveWarning surface
bg-warning/15Warning border
bg-warningToggle active
bg-primary