How to use
- Start with a base color that already works well enough for accessible role colors.
- Choose the naming preset that matches the handoff target: product UI, docs/content, or marketing/CTA.
- Review the semantic token map first, then copy the CSS or JSON block if the naming layer looks clear enough to export.
Wave 58 expansion
Move from role colors into semantic names
This page fills the gap between “the role colors look acceptable” and “the engineering handoff needs named semantic tokens.”
How to choose between nearby pages
Use Accessible Color Palette when role colors are still moving. Use Color Token Preview when the next job is one last UI sign-off. Use Color Token Audit when the set still needs cleanup. Use Color Token Diff when you need a before/after compare. Use this page after those steps, when the remaining question is how to name the roles as semantic tokens before Component Color Tokens or the final Color Token Export handoff.
FAQ
What does this page generate?
It turns one approved base color into a semantic token map for product UI, content/docs, or marketing/CTA presets, then outputs CSS variables and JSON.
When should I use this instead of Accessible Color Palette?
Use Accessible Color Palette when role colors are still moving. Use this page after those role colors already look believable and the next job is naming them as semantic tokens.
When should I use this instead of Color Token Export?
Use Color Token Export when you already want the final role-token handoff. Use this page first when semantic naming and mapping still need to be clarified.
Does this replace design-system review?
No. It is a lightweight mapping aid for naming and handoff, not a replacement for broader product or brand review.