Color System
A sophisticated dark-first color palette that supports both dark and light themes while maintaining excellent contrast and accessibility.
Background Colors
Layered backgrounds create depth and visual hierarchy.
Primary
--bg-primary Main page background
Dark theme: #09090b, Light theme: #ffffff
Secondary
--bg-secondary Alternate sections
Dark theme: #0f0f12, Light theme: #f8fafc
Tertiary
--bg-tertiary Elevated elements
Dark theme: #16161a, Light theme: #f1f5f9
Card
--bg-card Card backgrounds
Dark theme: #0f1113, Light theme: #ffffff
Text Colors
Hierarchical text colors for optimal readability.
Primary Text
--text-primary Headlines, important text
Dark theme: #f4f4f5, Light theme: #0f172a
Secondary Text
--text-secondary Body text
Dark theme: rgba(244,244,245,0.72), Light theme: rgba(15,23,42,0.75)
Tertiary Text
--text-tertiary Captions, meta
Dark theme: rgba(244,244,245,0.52), Light theme: rgba(15,23,42,0.55)
Muted Text
--text-muted Disabled, hints
Dark theme: rgba(244,244,245,0.36), Light theme: rgba(15,23,42,0.35)
Accent Colors
Primary and secondary accents for emphasis and interaction.
Primary Accent
--accent-primary Links, CTAs, highlights
Dark theme: #fb923c, Light theme: #ea580c
Cool Accent
--accent-cool Secondary emphasis
Dark theme: #60a5fa, Light theme: #2563eb
Violet
--accent-violet Secondary accent
Dark theme: #a78bfa, Light theme: #7c3aed
Rose
--accent-rose Tertiary accent
Dark theme: #f472b6, Light theme: #db2777
Semantic Colors
Status and feedback colors with consistent meaning.
Success
--color-success Positive outcomes, savings
Dark theme: #4ade80, Light theme: #16a34a
Warning
--color-warning Caution, attention
Dark theme: #fbbf24, Light theme: #d97706
Error
--color-error Negative, expensive
Dark theme: #f87171, Light theme: #dc2626
Info
--color-info Informational callouts
Dark theme: #60a5fa, Light theme: #2563eb
Border Colors
Subtle borders for structure without distraction.
Subtle
--border-subtle Medium
--border-medium Strong
--border-strong Theme Comparison
All colors adapt automatically when the theme is switched. Toggle the theme to see the changes in action.
Dark Theme
Default experience for engineers
Light Theme
Accessibility & preference option