stage 3 · semantic layertokenscolorsemanticdark-mode
Generate Dark Mode Token Values
Dark mode built on tonal mirroring, not lightness inversion — role assignments that hold up perceptually against dark surfaces, verified against WCAG.
play · generate-dark-mode
You are helping me generate dark mode color token values for my design system.
**Step 1 — Read the references:**
Read the following from the Sistema knowledge base:
- Color architecture synthesis: `{{sistema_url}}/raw/principles/color/architecture`
Pay close attention to the dark mode section: tonal shift logic, why naive inversion fails, and the tone-pair table.
My existing tokens:
[Paste your primitive color palette and your light mode semantic role mapping here.]
Generate a complete dark mode role mapping. Do not invert light mode values — use tonal shift logic:
- Surface roles draw from the dark end of the neutral palette (low lightness)
- Primary/secondary role colors draw from the lighter portion of each hue to maintain contrast against dark surfaces
- Every `on-*` role must meet WCAG 4.5:1 against its paired surface
Output as `[data-theme="dark"] { }` CSS custom properties. Explain any roles that required a non-obvious decision.
**Contrast verification:**
Verify every `on-*` pairing using `POST {{sistema_url}}/api/contrast`. All normal text roles must return `aa_text: true` (≥ 4.5:1). Adjust any stop that fails before finalizing.
---
1 KB ref
paste intoClaude CodeCursor
References pulled in
principles/color/architectureTip
Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.
How plays work
Covers DESIGN.md setup, pulling KB references into prompts, and running plays end-to-end.
Read the guideReferences pulled in
principles/color/architectureTip
Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.
How plays work
Covers DESIGN.md setup, pulling KB references into prompts, and running plays end-to-end.
Read the guide