How to use
- Start after semantic, component, state, and theme layers already look directionally acceptable.
- Try the separator, root labels, theme placement, and state style that match your design-system contract.
- Compare the sample key lists, then copy JSON, plain text, or the summary once the naming pattern feels stable enough for audit or export.
Wave 62 expansion
Move from token structure into a naming contract
This page fills the gap between “the token layers exist” and “the team agrees on the exact key pattern.”
How to choose between nearby pages
Use Semantic Color Tokens, Component Color Tokens, State Color Tokens, and Theme Color Tokens when the token structure itself is still moving. Use this page when the remaining question is how those keys should be named consistently. Use Token Category Mapper after naming when the remaining question is which layer should own a role across semantic, component, state, or theme space. Use Color Token Audit, Color Token Diff, and Color Token Export after the naming contract already feels stable enough to review, compare, or hand off.
FAQ
What does this page generate?
It generates sample semantic, component, state, and theme token keys so you can compare separator style, root naming, theme placement, and state layering before audit or export.
When should I use this instead of Theme Color Tokens?
Use Theme Color Tokens when the main question is how one palette branches into light, dark, or contrast bundles. Use this page when the remaining question is how those token keys should be named consistently.
When should I use this instead of Color Token Export?
Use Color Token Export when the naming contract is already decided and the next job is handing tokens to code. Use this page when the naming contract still needs one more pass before export or audit.
What is stored in the share URL?
The share URL stores prefix, separator, root labels, theme placement, state style, and whether theme or state samples are included.