Colors
Semantic tokens defined in @korp/ui/globals.css. All components reference these CSS variables.
Core palette
Background
--background
hsl(41 100% 97%)
Page and app shell background — warm cream
Foreground
--foreground
hsl(0 0% 3.9%)
Primary text and icons
Primary
--primary
hsl(0 0% 3.9%)
Primary actions, buttons, and emphasis
Accent
--accent
hsl(41 95% 57%)
Korp gold — brand highlight, loader, sidebar active
Secondary
--secondary
hsl(41 60% 90%)
Secondary surfaces and button variants
Muted
--muted
hsl(41 60% 83%)
Subtle backgrounds, skeletons, disabled states
Destructive
--destructive
hsl(16 90% 52%)
Errors, destructive actions, blockers
Border
--border
hsl(41 60% 88%)
Dividers, card edges, input borders
Card
--card
hsl(0 0% 100%)
Elevated surfaces on cream background
Usage
Prefer semantic tokens over raw hex values in components.
className="bg-background text-foreground" className="bg-accent text-accent-foreground" className="border-border bg-card"