Data color

Charts get their own colours, separate from the accent and the tones. Six categorical series for things that are different, a five-step heat scale for amounts, and the three status colours for health. Each has one job; mixing them is how a chart starts to lie.

Series

--s-1 and --s-2 are the purple and amber pair from fin1te.com's stats page, unchanged (--s-work and --s-personal still work). Teal, magenta and navy extend them; --s-6 is a warm grey for "other", the baseline, or the series that matters least. Use them in order. In markup, .s1 to .s6 set --c, and every chart part reads --c.

Checked for colour-vision deficiency

The same six, light and dark, as people with each of the three common deficiencies see them. Simulated at build time with the Machado matrices. Distances were measured in OKLab: the closest pair is --s-3 and --s-6 under deuteranopia. That is why charts with three or more series label lines directly or keep the legend beside the plot.

Heat

Five steps of the accent hue for amounts: counts per cell in a heatmap or a calendar. Light mode runs light to dark and dark mode the other way, so more is always more contrast.

Status

Green, amber and red mean healthy, degraded and down, nothing else. In charts they mark thresholds, incidents, failed builds and error rates. A series that happens to be about errors is still a series: colour it red only when red is the point.

<ul class="ch-legend">
  <li class="s1">passed</li><li class="c-down">failed</li><li class="c-warn">flaky</li><li class="s6">skipped</li>
</ul>