96
Palette Colors
8
Color Families
12
Steps per Scale
3
Token Tiers
Three-Tier Architecture
Palette (raw scales) → Semantic (purpose-driven) → Component (CVA variants)
Tier 1: Palette
design-tokens.css
8 families × 12 steps = 96 colors
Light + dark mode values
HSL channel format
Tier 2: Semantic
globals.css
Status colors (success, warning…)
Surface / elevation
Gradients / chart / data viz
--status-success: var(--haven-green-9)
Tier 3: Component
*.tsx (CVA variants)
StatCard, Badge, Card variants
Compound variant recipes
Tailwind utility classes
bg-haven-blue-2 text-haven-blue-11
Explore
Palette & Tokens
8 color families, each with 12 purposeful steps. Interactive swatch grid with click-to-copy.
Explore
Gradients
Four gradient tiers with size-aware recommendations. Subtle, accent, deep, and vivid.
Explore
Surfaces & Elevation
Layered surface system for visual depth. Higher elevation = lighter surface in dark mode.
Explore
Component Patterns
Stat cards, badges, interactive states, and the 200-step pattern for consistent color combinations.
Explore
Charts & Data Viz
Categorical, sequential, divergent, and outcome-specific color scales for data visualization.
Explore
Color Families at a Glance
Each family spans 12 steps from near-white backgrounds to near-black text.
blue
green
amber
red
violet
teal
orange
slate