Design Tokens

Semantic Chart Themes

One unified design token model. CSS variables map smoothly to Recharts stroke props, D3 scale ranges, and Google Charts option dictionaries.

High-contrast cyber emerald paired with neutral slate gridlines.

#10b981

#34d399

#6ee7b7

#a7f3d0

#059669

// CSS Variable Assignment

--chart-1: #10b981;

--chart-2: #34d399;

--chart-3: #6ee7b7;

Cool blue palette ideal for SaaS dashboards and telemetry metrics.

#0284c7

#38bdf8

#7dd3fc

#bae6fd

#0369a1

// CSS Variable Assignment

--chart-1: #0284c7;

--chart-2: #38bdf8;

--chart-3: #7dd3fc;

Vibrant warm hues for alert states, activity density, and financial volumes.

#d97706

#fbbf24

#fde68a

#fef3c7

#b45309

// CSS Variable Assignment

--chart-1: #d97706;

--chart-2: #fbbf24;

--chart-3: #fde68a;

Deep amethyst gradients for luxury analytics and executive views.

#9333ea

#c084fc

#e9d5ff

#f3e8ff

#7e22ce

// CSS Variable Assignment

--chart-1: #9333ea;

--chart-2: #c084fc;

--chart-3: #e9d5ff;

Live Themed Visualization

Preview the default responsive ChartContainer adapting automatically to system theme variables.