Token Types
Every token has a type. It tells Token Designer (and anything consuming your tokens downstream) what kind of value is stored there.
The types
Color is for anything that holds a color value. Raw palette hex codes, semantic color aliases, UI role mappings, all of it.
Dimension covers sizes and distances: spacing, padding, radius, border width, icon sizes. Dimension tokens have a unit (px or rem).
Font Family is for font names and stacks, like "Inter", sans-serif or "Roboto Mono".
Font Weight is for numeric weights like 400 or 700, or named values like Semi.
Duration is for animation and transition times, like 150ms or 0.3s.
Number is for plain numbers with no unit attached, things like z-index, opacity, or line-height ratios.
Units for Dimension tokens
Two options:
| Unit | When to use it |
|---|---|
px | Fixed sizes. Good for border widths, precise measurements. |
rem | Scales with the root font size. Better for spacing and type sizes that should respect user preferences. |
Click the unit cell in any Dimension row to switch between them.
Changing a type
Click the Type cell in any row to get the dropdown. Worth noting: if you change the type on a token that's already referenced somewhere, you may need to update the value to match what the new type expects.