Zaid Bin Haris Available for new work
All work

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

demo.kaizenware.deLive, open it in a new tab

Client demo front end
A seven-colour categorical palette, capped by measurement The seven Okabe-Ito categorical colours used for charts. An eighth was removed because its perceptual distance from the warm members collapsed under deuteranopia simulation. orangeskygreenyellowbluevermillionpurple stops at seven · an eighth measured 0.017 apart under deuteranopia · now a regression test

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