How to use
- Start after the palette already has believable semantic, component, and state aliases.
- Choose the preset and bundle switches that match the target design system.
- Review the theme cards first, then copy CSS or JSON once the bundle boundary is clear enough for docs and engineering handoff.
Wave 61 expansion
Move from one token system into multiple theme bundles
This page fills the gap between “the token names look fine” and “the product now needs light, dark, alternative-brand, and contrast-ready bundles.”
How to choose between nearby pages
Use Accessible Color Palette when role colors are still moving. Use Semantic Color Tokens, Component Color Tokens, and State Color Tokens when naming still needs to be fixed inside one token system. Use this page after those layers already look believable and the next question is how to ship separate theme bundles. Use Color Token Preview, Color Token Audit, Color Token Diff, and Color Token Export when the main job is review, comparison, or final package output rather than bundle design.
FAQ
What does this page generate?
It turns one approved base color into bundled theme token sets such as light, dark, brand-alt, and high-contrast, then exports CSS variables and JSON.
When should I use this instead of State Color Tokens?
Use State Color Tokens when hover, active, focus, disabled, or selected aliases are still the main job. Use this page when those token layers already look believable and the next task is bundling them into multiple theme modes.
When should I use this instead of Color Token Export?
Use Color Token Export when a single token bundle is enough for handoff. Use this page when engineering or design needs separate light, dark, alt-brand, or high-contrast bundles from the same base.
What is stored in the share URL?
The share URL stores the base color, prefix, accessibility goal, selected preset, and whether dark, alt-brand, and high-contrast bundles are included.