# Generating A Colour System That Survives Dark Mode

> Ask for semantic tokens, not a palette.

- **Author:** [Yui Nakamura (@yui_nakamura)](https://www.promptabide.com/yui_nakamura)
- **Published:** 2026-07-28
- **Updated:** 2026-08-22
- **Tags:** `design`, `css`, `dark-mode`, `accessibility`
- **Views:** 6403
- **Likes:** 477

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

## Output

*Produced by ChatGPT · gpt-4-turbo.*

```
--surface:        #ffffff / #0f1115
--surface-raised: #f7f8fa / #171a21   (lighter than surface in both)
--border:         #e3e6ea / #262b34
--text:           #12141a / #f2f4f7   (16.9:1 / 15.4:1)
--text-muted:     #5b6472 / #98a1b0   ( 5.1:1 /  5.6:1)
```

---

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