Foundations

Data visualization

The place the palette earns its keep. Colour carries meaning, never decoration — a defect→fixed severity ramp (the immune story), an ordered sequence, or status. Personality comes from the genome language: a green "surveillance" target line, mono "lab readout" axes, and a calm draw-on reveal — tasteful, on-brand.

Every chart is decorative SVG paired with a legend or table for the real values, uses only var(--ds-*) tokens (so it re-themes), and honours prefers-reduced-motion. A single-series chart is one hue — the rainbow is for categories, never to decorate one number.

Colour roles in charts

meaning first

Severity ramp — defect → fixed (the immune narrative)

Major Minor Patch Completed

Ordered sequence — e.g. versions (the rainbow as a scale)

Java 8+ Java 11+ Java 17+ Java 21+ Completed

Status — discrete states

Success Warning Error Info Neutral

Chart types

draw-on · mono axes · green target line

Stacked area

+12%

Major Minor Completed Target

Stacked bar

At risk In progress Remediated

Line + target

single series = one hue

Donut

Remediated 62% In progress 23% At risk 15%

Sparkline

44,827,161

Lines of code · last 90 days

Parliament (hemicycle dots)

One dot per item, filled left→right along the red→green ramp — the migration distance to completion. Reveals in sequence, ending on green (fixed).

Major Minor Patch Completed N/A · No LST

Principles

Colour = meaning. Severity (red→green = defect→fixed), sequence (the rainbow as an ordered scale), or status. Never a rainbow on one series.
The green target line is the genome "surveillance line" — the watched goal a campaign is converging on.
Mono axes & numerals give the "lab readout" texture; values are always available in a legend or table, not colour alone.
Draw-on, once. A calm reveal on load (the marketing site's stroke-on motion) — never looping, always reduced-motion safe.