Charts are design. Color carries meaning — categorical, sequential, diverging — and each carries it differently. This page defines the three viz palettes, pairing rules, and a small set of chart primitives built on top of Akku's existing tokens.
For unordered, unrelated series. Hue changes; lightness stays close. Start with 3 — the brand ramps — then extend to 6 by sampling softer steps.
Iris, coral, teal at step 500. This is the right choice 90% of the time. If you need more, pair down or aggregate first.
When you truly need 6, alternate anchor (step 500) and soft (step 300) for each hue. Dark-light-dark rhythm keeps neighbors distinguishable.
For ordered values from low to high — heatmaps, choropleths, density. Single hue, lightness encodes magnitude.
The default for brand-aligned magnitude views. Skip the 50 step for surface-mounted charts so the lowest bin is still legible on white.
Alternate when the chart needs to stay distinct from UI accents that are already iris.
For data with a meaningful midpoint — sentiment, deviation from average, profit vs loss. Two hues, neutral center.
Warm-to-cool reads as "below ↔ above" almost universally. The rule near 500 stays visible against white surfaces; reserve steps 100 and 900 for dense small multiples.
Charts often need to call out a single value or provide a quiet baseline. Use state tokens for semantic call-outs (not for categorical series), and slate for grid lines, axes, and baselines.
Six reference charts built only with tokens. Copy the SVG, swap the data.
Line · 3 series
Stacked area · 3 series
Grouped bar · 2 series
Sparkline · 1 series
Heatmap · sequential iris
Donut · 3 slices
Short list. Do this, not that.
Iris, coral, teal at step 500 is always the first choice. Three series is almost always enough — if you need more, aggregate first.
Success-green, warning-amber and danger-red carry meaning. Never use them as generic chart colors — keep them for call-outs like targets, thresholds, or breach indicators.
Sequential data (a scale, not categories) should use a single hue. Let lightness do the work — 100 to 900 within iris or teal.
Resist the urge to add a fourth, fifth, sixth brand hue. If a chart genuinely needs 7+ series, it probably wants a different chart.
End-of-line labels beat legends. Color is support, not the only signal — the name of the series should be the primary identifier.
Pair color with shape, dash, or position for anyone with color-vision differences. Diverging palettes especially need a clearly marked midpoint.
Wire these aliases in components; never read raw ramps directly from charts.
/* Categorical */ --viz-cat-1: var(--iris-500); --viz-cat-2: var(--coral-500); --viz-cat-3: var(--teal-500); --viz-cat-4: var(--iris-300); --viz-cat-5: var(--coral-300); --viz-cat-6: var(--teal-300); /* Sequential — iris */ --viz-seq-0: var(--iris-100); --viz-seq-1: var(--iris-200); --viz-seq-2: var(--iris-300); --viz-seq-3: var(--iris-500); --viz-seq-4: var(--iris-600); --viz-seq-5: var(--iris-700); --viz-seq-6: var(--iris-900); /* Diverging — coral ↔ teal */ --viz-div-neg-2: var(--coral-700); --viz-div-neg-1: var(--coral-500); --viz-div-neg-0: var(--coral-200); --viz-div-mid: #F1F5F9; --viz-div-pos-0: var(--teal-200); --viz-div-pos-1: var(--teal-500); --viz-div-pos-2: var(--teal-700); /* Chart scaffolding */ --viz-grid: var(--rule); /* #E2E8F0 */ --viz-axis: #CBD5E1; --viz-label: var(--ink-subtle); /* #64748B */ --viz-target: var(--teal-500);
