stage 3 · semantic layertokenscolorsemanticdark-mode

Generate Dark Mode Token Values

Generates dark-mode role overrides that maintain perceptual contrast and brand coherence across both themes.

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, and flag any pairing where contrast should be manually verified. ---
1 KB ref
paste intoClaude CodeCursor

In this play

Prompt body
References1

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.