Generating A Colour System That Survives Dark Mode
Ask for semantic tokens, not a palette.
design
css
dark-mode
accessibility
Keywords:
design tokens
contrast ratio
dark mode
Asking for "a colour palette" gets you ten hex codes and no idea which one is a border. Then dark mode arrives and you invert everything and the borders vanish.
Ask for tokens instead:
"Define a semantic colour system as CSS custom properties. Roles, not colours: surface, surface-raised, border, border-strong, text, text-muted, accent, accent-foreground, danger, danger-foreground.
For each: a light value and a dark value. Constraints: text on surface >= 7:1, text-muted on surface >= 4.5:1, accent-foreground on accent >= 4.5:1. Report the computed ratio for each pair. Dark mode is not an inversion — surfaces get lighter with elevation, not darker."
The elevation rule is the one that makes generated dark modes look wrong when you skip it. In light mode a raised surface is whiter than the page; naive inversion makes it darker than the page, and raised things reading as recessed is exactly the uncanny feeling.