Client demo front end
A palette that claimed to be colour-blind safe and was not
A reusable demo application that reskins to a new client's brand by editing one file, with the colour system enforced by the build.
- Year
- 2026
- charts, one token
- 37
- Stack
- Vite, React, Tailwind
- Status
- Live
The problem
Every client demo needs charts, tables, a plausible dataset and a brand that looks like theirs. Rebuilding that each time is waste, so this is built once and reskinned.
One accent colour generates every ramp, and a chart theme adapter carries it to all 37 charts. Reskinning is editing one file.
Keeping the system from rotting
A design system with no enforcement decays the first time someone is in a hurry. Application code may only use semantic tokens, and guard:colors fails the build on a raw palette class. Not a lint warning, a failure.
The mistake worth publishing
The categorical chart palette stops at seven colours on purpose. An eighth collapses against the warm members under simulated deuteranopia.
I know that because the palette that shipped first was wrong. Two of its colours were 0.017 apart in perceptual distance under deuteranopia simulation, while a comment directly above them asserted the set was colour-blind safe. It looked fine to me, which is exactly the problem: I am not the person it fails for.
There is now a measurement script and a regression test, so the claim is checked rather than asserted and nobody can re-open it by eye. This is the thing I would want to be judged on out of everything on this site, because the failure was invisible and the fix is permanent.
At a glance
- Routes
- 13
- Charts
- 37
- Entry bundle
- 195 KB gzipped
- Palette
- 7 colours, measured