Data Visualization
Sandworm's chart palette system — Chroma-Charts Rakis. Value-count-indexed, surface-aware, re-balanced at every series count.
The Rakis surface rule
Bright palette on dark. Muted palette on light.
Counter-intuitive but correct. Muted colors read muddy on dark backgrounds; bright colors blow out on light pages. The CSS :root block ships the bright variants for dark dashboards; the .dark block ships the muted variants for light pages. Never swap them.
Categorical Palette
The first 7 stops of the Rakis sequence, shown for each surface. The default 5-value dashboard palette uses stops 1–5.
Dark surface — bright palette (1 → 7)
Light surface — muted palette (1 → 7)
Value-Count Palettes
Pick the palette for your exact series count — do not extend a smaller one by appending a color. Each count re-balances all stops.
2-series chart
Dark surface — bright palette
Light surface — muted palette
3-series chart
Dark surface — bright palette
Light surface — muted palette
4-series chart
Dark surface — bright palette
Light surface — muted palette
5-series chart
Dark surface — bright palette
Light surface — muted palette
6-series chart
Dark surface — bright palette
Light surface — muted palette
7-series chart
Dark surface — bright palette
Light surface — muted palette
Radar Chart Palette
The 3-axis radar (HexRadarChart) uses a distinct palette from the dashboard canon — brighter -400 stops because the polygon fills are semi-transparent and need saturation to register.
Source: HexRadarChart.tsx:37-41 — sand-300 / red-400 / violet-400. Not interchangeable with the 5-value dashboard palette (which uses red-500 / violet-300).
Chart-Type Guidance
Rakis is a palette system — pick the chart form by data shape, then apply the value-count palette and surface rule.
Line / Area — time series
Default dashboard form (CloudMetricsCarousel). One series per metric; use the N-value palette for N lines. lineWidth: 2, pointRadius: 4. For area fills, drop the series color to a low alpha so overlapping bands stay legible. Gridlines whisper-quiet: stone-800 on dark / stone-150 on light.
Bar / Stacked Bar — categorical
barRadius: 4px. Grouped bars index the value palette across groups; stacked bars index it across stack segments. Keep stacks to ~6–7 segments — past that, re-cut the data rather than reaching for a 12-color palette.
Donut / Pie — part-to-whole
Value-count palette by slice count. Cap at ~5–6 slices; roll the tail into a single stone-400 "Other." Prefer a stacked bar unless part-to-whole is explicitly the story.
Radar — multi-axis profile
Use the dedicated 3-axis radar palette (sand-300 / red-400 / violet-400), not the 5-value default. One palette per overlaid profile.
Scatter / Bubble
Single-series: sand-300 (dark) / sand-400 (light). Multi-series: value-count palette. Lower point opacity on dense clusters to surface density.
Single Big Number / Sparkline
No palette needed for the number itself (stone-025 dark / stone-900 light). The sparkline takes sand-300 (dark) / sand-400 (light).
Chart Chrome
Gridlines, axes, labels, and tooltips use the stone scale. Two rules: gridlines must whisper (stone-800 dark / stone-150 light), and legends use the mono-caps label style — signals "this is structural metadata, not content."
Dark surface
Light surface
Canon rule
Do not invent palettes alongside Rakis.
No categorical sequence starting with magenta-600. No alert series at position 6. No diverging cool-warm palette. If a chart needs a treatment Rakis does not cover, surface it as a gap to fix in Rakis-chart-colors.css — not as a parallel system in the consuming component.