Component Color Tokens

Take approved role or semantic colors, then map them into concrete aliases for buttons, cards, inputs, nav, badges, or content blocks before the final handoff.

This page sits after role colors look believable. It is for component alias naming, not for the first accessibility pass or the raw export layer alone.

Other languages 日本語 | English

How to use

  1. Start after role colors are already acceptable enough for product, docs, or marketing work.
  2. Choose the component preset that matches the handoff target, then review button, card, input, nav, or badge aliases first.
  3. Copy the CSS vars or JSON block once the alias layer is clear enough to enter design-system docs or code review.

Wave 59 expansion

Move from semantic roles into component aliases

This page fills the gap between “the role colors look fine” and “engineering needs concrete component token names.”

Map role colors into concrete component aliases before export.

Light aliases
Dark aliases
CSS vars

        
JSON

      

      
    

  

  
How to choose between nearby pages
Use Accessible Color Palette when role colors are still moving. Use Semantic Color Tokens when naming the semantic roles is still the main job. Use Color Token Preview and Color Token Audit when the set still needs visual sign-off or cleanup. Use State Color Tokens when component aliases already look acceptable and the remaining question is how hover, active, focus, disabled, or selected states should be named. Use Color Token Export when a role-level bundle is already enough. Use this page between those steps, when semantic colors now need concrete button, card, input, nav, badge, or content-block aliases.

  
FAQ
What does this page generate?
It turns approved role colors into component aliases such as button, card, input, nav, quote, or badge tokens, then exports CSS variables and JSON.
When should I use this instead of Semantic Color Tokens?
Use Semantic Color Tokens when the main task is naming the roles themselves. Use this page after that, when those named colors now need concrete component aliases for design-system or engineering handoff.
When should I use this instead of Color Token Export?
Use Color Token Export when a role-based token bundle is already enough for handoff. Use this page first when teams still need button, card, input, or badge alias names before the final export.
What is stored in the share URL?
The share URL stores the base color, token prefix, contrast goal, selected component preset, and whether dark aliases are included.