Color
Color tokens
Semantic tokens taken straight from the design system. Click any chip to copy the value.
Core semantic tokens
Primary
--primary · #4F41A6
Primary CTAs, links, focus ring.
Primary FG
--primary-foreground · #FFFFFF
Text / icons on primary.
Secondary
--secondary · #F0EDFF
Soft purple surfaces, chips.
Secondary FG
--secondary-foreground · #1A0053
Text on secondary.
Accent
--accent · #C8EE6B
Lime accent — highlights, savings.
Accent FG
--accent-foreground · #121517
Text on accent.
Muted
--muted · #F8F7FE
Subtle surfaces.
Muted FG
--muted-foreground · #6B7687
Secondary text, captions.
Surface, text & system
Background
--background · #FFFFFF
Page background.
Foreground
--foreground · #121517
Primary text.
Card
--card · #FFFFFF
Card surfaces.
Destructive
--destructive · #DC2626
Errors (oklch 0.577 0.245 27.325).
Border / Input
--border / --input · rgba(26,0,83,.10)
Dividers, card outlines, inputs.
Ring
--ring · #4F41A6
Focus ring.
Success
success · #199B01
Success states.
Brand purple ramp & accents
purple-400
purple-400 · #6160B0
App design-system Purple/100.
purple · primary
purple · #4F41A6
Canonical brand purple.
purple-700
purple-700 · #40336E
Deep purple, gradient end.
purple-ink
purple-ink · #1A0053
Darkest ink purple.
lime
lime · #C8EE6B
Lime accent.
orange
orange · #FF8232
Orange accent.
success
success · #199B01
Green / success.
alert
alert · #CD0707
Alert / error red.
Canonical primary = #4F41A6. The app design-system file labels its purple Purple/100 #6160B0 — kept here as purple-400 for app-matching mockups. Radius = 0.625rem (10px).