Colors
Complete color palette with semantic tokens for both light and dark modes.
Primary Brand Colors
Brand Primary
#1a6fa3
Brand Hover
#1580be
Brand Foreground
#ffffff
Light Mode - Semantic Colors
UI Backgrounds
Background
#ffffff
Surface Subtle
#f7f7f7
Surface Glass
rgba(255, 255, 255, 0.95)
Text Colors
Foreground
#0e1e35
Primary
#0078d4
Muted Text
#666666
Interactive States
Border
#c5d3e0
Input Background
#ffffff
Input Border
#d0d0d0
Status & Feedback
Primary/Info
#0078d4
Success/Accent
#107c10
Error/Destructive
#da3b01
Nav & Footer
Nav Background
rgba(14, 30, 53, 0.85)
Nav Text Hover
#ffffff
Nav Active
rgba(87, 189, 233, 0.15)
Dark Mode - Semantic Colors
UI Backgrounds
Background
#0d0f12
Surface Subtle
#10141b
Surface Glass
rgba(0, 0, 0, 0.3)
Text Colors
Foreground
#e2e8f0
Primary
#57bde9
Muted Text
#8896a8
Interactive States
Border
#222833
Input Background
#0d0f12
Input Border
#222833
Status & Feedback
Primary/Info
#57bde9
Success/Accent
#4dc962
Error/Destructive
#ff3838
Nav & Footer
Nav Background
rgba(0, 0, 0, 0.3)
Nav Text Hover
#ffffff
Nav Active
rgba(255, 255, 255, 0.15)
Extended Color Palette
Chart/Data Colors
Chart 1
oklch(0.87 0 0)
Chart 2
oklch(0.556 0 0)
Chart 3
oklch(0.439 0 0)
Chart 4
oklch(0.371 0 0)
Chart 5
oklch(0.269 0 0)
Gradients
Light Mode App Gradient
Dark Mode App Gradient
Color Usage Guidelines
Primary Brand Color
Use for primary actions, links, and key UI elements that require user attention.
Semantic Colors
Use status colors to communicate states: success (green), error (red), warning (orange), and info (blue).
Dark Mode Support
All colors automatically adapt based on theme. Test components in both light and dark modes before deployment.
Accessibility
Ensure text color contrast meets WCAG AA standards (4.5:1 for normal text, 3:1 for large text). Avoid relying solely on color to convey information.