Colors
The Monarch color system — dark-first, semantic, and purposeful.
Brand
The Monarch brand is anchored by indigo — matching the logo's gradient (#6366f1 → #818cf8). Extended with violet for softer accents.
Indigo
#6366f1
--monarch-brand-purple
Indigo Light
#818cf8
--monarch-brand-purple-light
Violet
#a78bfa
--monarch-brand-pink
Brand Gradient
--monarch-brand-gradient
Semantic
Purpose-driven colors for states, feedback, and categorization.
Success
#22C55E
--monarch-success
Warning
#F59E0B
--monarch-warning
Danger
#EF4444
--monarch-danger
Info
#3B82F6
--monarch-info
Backgrounds
Three elevation levels create depth and hierarchy. These values switch automatically between dark and light modes.
Base
--monarch-bg-base
Dark: #0D0F1A · Light: #FAFBFC
Surface
--monarch-bg-surface
Dark: #131525 · Light: #FFFFFF
Elevated
--monarch-bg-elevated
Dark: #1A1D2E · Light: #F1F5F9
Text
Borders
Subtle
--monarch-border-subtle
Medium
--monarch-border-medium
Strong
--monarch-border-strong
Usage Guidelines
• Use brand purple for primary actions, active states, and key UI accents
• Reserve gradients for emphasis — hero text, primary CTAs, featured cards
• Use semantic colors consistently — green always means success, red always means danger
• Background elevation creates depth — base is the canvas, surface is content, elevated is interactive
• Never use pure black (#000) or pure white (#FFF) as backgrounds — use the token values