Tool
Semantic Token Mapper
Turn a palette into a working color system. Assign colors to design roles, preview the result, and export tokens ready for your codebase.
From palette to system
What semantic tokens do
A color palette is a starting point. Semantic tokens turn those colors into a functional system — mapping each value to a role in your interface. Instead of referencing raw hex codes, your design uses names like --color-primary or--color-background. This makes themes interchangeable and intentions clear.
How to think about roles
Start with the three essentials: background,text, andprimary. These alone define the visual foundation of most interfaces. Then layer in surface, muted, and accent as your palette and design complexity require. Not every role needs a mapping — a three-color palette works fine with three tokens.
Using the output
Export as CSS custom properties for direct use in stylesheets, JSON for design token pipelines like Style Dictionary or Tokens Studio, or Tailwind config to extend your theme. The token names are standard enough to drop into most systems without renaming.
Pairing with contrast
After mapping tokens, check your text-on-background and primary-on-surface pairings in the contrast checker to verify they meet accessibility standards.
Open Contrast Checker