Skip to content

palette: a chart's series and statuses, one set held on both pages - #29

Merged
aledbf merged 1 commit into
mainfrom
chart/series-palette
Nov 9, 2026
Merged

aledbf merged 1 commit into
mainfrom
chart/series-palette

Conversation

@aledbf

@aledbf aledbf commented Nov 9, 2026

Copy link
Copy Markdown
Member

The installation's Grafana dashboards (spin's internal/controlplane/grafana) draw in Grafana's classic palette: the brand has no colour for a chart, so none of theirs is the brand's. This adds one.

[chart] in palette.toml, written to tokens.json as chart:

series eight hues in a fixed order, the mark's blue (#2F6BE3) first, then orange, teal, ochre, magenta, green, violet, red. A ninth series folds into "other", never a generated hue
good, warning, critical a threshold's steps. Never a series; a value in one is always printed beside it

One set for both modes. A Grafana dashboard is one JSON drawn in whichever theme the viewer picked (spin's Metrics page passes the page's theme), and a colour in it is one hex. So every chart colour sits in the middle lightness band:

  • Contrast: each one holds 3:1 as a line (WCAG 1.4.11) on dark's page #111827 and on light's #FFFFFF. The lowest is teal on white, 3.32:1.
  • Distance: each series is held apart from the next one, and each status from the other two, at the existing meaning tier: ΔE00 20 as drawn and 10 in the worst view. The worst series pair is ochre/magenta under tritanopia at 11.6. The worst status pair is good/warning under protan on the IPS panel at 10.5.

The method came from a categorical-palette validator: lightness band, chroma floor, adjacent-pair CVD separation and a normal-vision floor. It passed in both modes before cmd/palette checked it here.

Proved the check can fail: with series 2 set to the cyan #27BFE8, go run ./cmd/palette -check reports FAIL light non-text series 2 on page 2.16:1 (floor 3.0) and exits 1.

dist/dashboard.css, tokens.css, starlight.css and logos/ do not change. Only tokens.json (and perception.js, the preview's list of pairs) do.

Consumer: spin's Grafana dashboards, in a PR that copies tokens.json at this commit and holds every colour in the dashboards to it.

🤖 Generated with Claude Code

The installation's Grafana dashboards drew in Grafana's classic palette: no
colour in them was the brand's, because the brand had none for a chart. A
dashboard is one JSON drawn in whichever theme the viewer chose, so [chart] is
one set for both modes: eight series in a fixed order (the mark's blue first)
and the three steps a threshold climbs through. Each holds 3:1 as a line on
dark's page and on light's, each series is apart from the next and each status
from the others at the meaning tier, in every view. tokens.json carries them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@aledbf
aledbf merged commit ad9d32e into main Nov 9, 2026
2 checks passed
@aledbf
aledbf deleted the chart/series-palette branch November 9, 2026 16:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant