# Generating A Colour System That Survives Dark Mode

> Ask for semantic tokens, not a palette.

- **Author:** [Camille Dubois (@camille_dubois)](https://www.promptabide.com/camille_dubois)
- **Published:** 2026-03-21
- **Updated:** 2026-08-22
- **Tags:** `design`, `css`, `dark-mode`, `accessibility`
- **Views:** 4153
- **Likes:** 122

## Prompt

```
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.
```

---

Canonical HTML: https://www.promptabide.com/bides/colour-system-dark-mode-camille-dubois-2
Agent guide: https://www.promptabide.com/llms.txt · https://www.promptabide.com/agent-instructions.md
Sitemap: https://www.promptabide.com/sitemap.xml