Skip to main content

Token Editor

Click any group in the left sidebar and the center panel opens a table showing every token in that group. This is where you spend most of your time in Token Designer.

The token table

Each row is one token. Here's what the columns mean:

ColumnWhat it is
Token NameThe full dot-separated name, like base.border.radius.md
Export NameThe name used when tokens are exported or published. You can customize it separately from the token name.
ScaleA short step label like sm, md, lg, or 2xl
ValueThe raw value
Unitpx or rem, if applicable
TypeColor, Dimension, Font Family, etc.
DescriptionAn optional note about what the token is for

Editing

Click any cell to edit it. Value fields let you type directly. Type and unit fields open a dropdown. Changes save as you go.

Adding tokens

Hit the + button at the top right of the table to add a new row. Fill it in from left to right.

Themes and overrides

When you switch to a non-default theme using the Context selector in the sidebar, the table gets two extra columns: Default Value (read-only, for reference) and Value (your override for the active theme). Rows with an override show the value and an unlink icon. Rows without one show an empty checkbox and inherit from the default.

See Component Themes for how the whole theme system works.