1 · What we start from
Everything below is read from the files in this project, not from memory of the legacy brand.
Heatmap ramp (approved Frost look) approved
From the three Frost heatmap pages. Hatched cell = zero. s4 was nudged to pass 4.5:1.
Frost status badges approved
From Frost-status-badges-final.html. Note danger is magenta-pink, not red, and warning is a deep orange. Storybook still lists a separate red failure/destructive token; see the open question in the spec.
Approved left-nav rails (10) approved
From left-nav-gradients-spec-final.html: blue-green through violet to rose, plus a gray internal rail. No gold. This replaces the 64 tuner presets I showed earlier.
2 · Role ramps for heatmap groups
One 5-step ramp per role, built on the same lightness steps as the approved blue ramp so a cell at "level 3" means the same intensity in every role. Hue identifies the role; darkness always means more.
2b · "Students and teachers" role: three options proposal
The one extra role we know of. It has to read as its own group, not as "All roles" (blue) and not as Students or Teachers alone. Same Huerta/Lincoln sample data in each.
3 · Three strategies, same four charts
Chart types and layout are identical across columns. Only color, stroke, fill, label and chrome treatment change.
Role-coded heatmaps (shared by A, B and C)
The approved Frost heatmap, unchanged in structure, with the ramp chosen by role. The role chip names the role in text, so hue is a second cue, not the only one.
4 · Research → rules
What each trusted source contributes and where it lands in A/B/C. “Checked” means I read it this session; “not verified” means I only have a secondary summary.
| Source | What we take | Where it shows up | Status |
|---|---|---|---|
| Datawrapper — colors in style guides | 2 lighter + 2 darker shades per hue; equal lightness steps; tinted grays; fixed color order; 3:1 for marks and 4.5:1 for text; larger areas less saturated than lines | Role ramps; gridline/axis/label gray tiers; bar vs line saturation | Checked (first 100k chars) |
| Datawrapper — fewer colors | One color when position already separates categories; emphasize one; label directly; shades instead of hues | Strategy C; progress bars and column charts default to one brand hue | Checked |
| Lisa Charlotte Muth — choosing colors | Light = low, dark = high; build gradients with lightness not just hue; use gray deliberately; same color for same variable | Heatmap ramps; role color stays fixed across every chart | Search summary only |
| IBM Carbon | Curated categorical sequence applied strictly in order; dedicated sequential/diverging scales | Fixed role order: All, Students, Teachers, Admins, Other | Search summary only |
| Atlassian | Separate chart tokens from text/border tokens; per-theme values | Token plan (open question 3); dark mode later | Search summary only |
| Okabe & Ito (CUD) | Vary lightness as well as hue; darker blue/orange for thin lines and small text; alternate warm and cool when mixing; avoid low-saturation, low-brightness pairs | Why role hues differ in lightness at each step; line strokes use s4/s5, not s2 | Checked principles. The page shows its palette only as an image; the hex list I've seen elsewhere is secondary and unverified. |
| ColorBrewer | Sequential schemes: light for low, dark for high, 3–9 classes; multi-hue vs single-hue options | 5-class ramps; supports teal/gold as single-hue sequential | Search summary only |
| Financial Times | Reported order: dark blue first, magenta second, green last; light chart colors must contrast with the pink page | Supports "brand blue first" ordering | Not verified: no FT primary source found, and the o-colors hex values weren't read |
5 · Decisions to make
Recommendation
A as the token foundation (roles, grays, strokes), B only for single-series fills (progress, area, hero tiles) where a rail-derived gradient helps and contrast isn't at risk, and C numerals for KPI heroes. They layer; they don't conflict.
Decided
- Students = teal, Admins = gold, Other staff = slate (accepted)
- Chart colors stay local to each page for now; a semantic chart system comes after direction is set
- Flat fallback for gradients: deferred, still in discovery
Still open
- Pick an option for "Students and teachers" (2b)
- Pick A / B / C mix, or ask for a variation
- Any further roles beyond the four known?
Not done yet
- CVD simulation of the role ramps
- Dark mode (parked, per your note)
- Spec in Max Spec format (after a direction is picked)
- Reconcile with the Storybook colors page once readable