How to use
- Start after the palette already has believable semantic and component aliases.
- Choose the preset that matches the target system, then review hover, active, focus, disabled, or selected aliases first.
- Copy the CSS vars or JSON block once the state layer is clear enough for design-system docs or engineering handoff.
Wave 60 expansion
Move from component aliases into state aliases
This page fills the gap between “the component token names look fine” and “engineering now needs hover, active, focus, disabled, or selected state names.”
How to choose between nearby pages
Use Accessible Color Palette when role colors are still moving. Use Semantic Color Tokens when the semantic naming itself is still the main job. Use Component Color Tokens when button, card, input, nav, or badge aliases are still being named. Use this page after those steps, when the remaining question is how hover, active, focus, disabled, or selected states should be named before export. Use Color Token Preview, Color Token Audit, and Color Token Diff when the real question is still sign-off or comparison rather than state naming.
FAQ
What does this page generate?
It maps approved component aliases into state-level tokens such as hover, active, disabled, focus, or selected, then exports CSS variables and JSON.
When should I use this instead of Component Color Tokens?
Use Component Color Tokens when button, card, input, nav, or badge aliases are still the main job. Use this page after that, when teams now need state aliases built on top of those component aliases.
When should I use this instead of Color Token Export?
Use Color Token Export when role-level tokens are already enough for handoff. Use this page when state alias names still need to be fixed before final export.
What is stored in the share URL?
The share URL stores the base color, token prefix, accessibility goal, selected state preset, and whether dark aliases are included.