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/architecture
Tip

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