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-primaryMain page background
Dark theme: #09090b, Light theme: #ffffff
Secondary
--bg-secondaryAlternate sections
Dark theme: #0f0f12, Light theme: #f8fafc
Tertiary
--bg-tertiaryElevated elements
Dark theme: #16161a, Light theme: #f1f5f9
Card
--bg-cardCard backgrounds
Dark theme: #0f1113, Light theme: #ffffff
Text Colors
Hierarchical text colors for optimal readability.
Primary Text
--text-primaryHeadlines, important text
Dark theme: #f4f4f5, Light theme: #0f172a
Secondary Text
--text-secondaryBody text
Dark theme: rgba(244,244,245,0.72), Light theme: rgba(15,23,42,0.75)
Tertiary Text
--text-tertiaryCaptions, meta
Dark theme: rgba(244,244,245,0.52), Light theme: rgba(15,23,42,0.55)
Muted Text
--text-mutedDisabled, 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-primaryLinks, CTAs, highlights
Dark theme: #fb923c, Light theme: #ea580c
Cool Accent
--accent-coolSecondary emphasis
Dark theme: #60a5fa, Light theme: #2563eb
Violet
--accent-violetSecondary accent
Dark theme: #a78bfa, Light theme: #7c3aed
Rose
--accent-roseTertiary accent
Dark theme: #f472b6, Light theme: #db2777
Semantic Colors
Status and feedback colors with consistent meaning.
Success
--color-successPositive outcomes, savings
Dark theme: #4ade80, Light theme: #16a34a
Warning
--color-warningCaution, attention
Dark theme: #fbbf24, Light theme: #d97706
Error
--color-errorNegative, expensive
Dark theme: #f87171, Light theme: #dc2626
Info
--color-infoInformational callouts
Dark theme: #60a5fa, Light theme: #2563eb
Border Colors
Subtle borders for structure without distraction.
Subtle
--border-subtleMedium
--border-mediumStrong
--border-strongTheme 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