Skip to main content

Organizing Your Tokens

Token Designer organizes everything through groups, which show up in the left sidebar as a collapsible tree. A well-structured group hierarchy makes your system a lot easier to navigate, both for you and for developers consuming the tokens.

Groups​

A group is a named container for tokens. You can nest groups inside other groups as deep as you need. The group path becomes part of each token's name, so tokens inside base > border > radius end up named base.border.radius.sm and so on.

To add a top-level group, click the + next to GROUPS in the sidebar. To add a subgroup, use the add option within an existing group. Click any group to open it in the editor.

The CONTEXT section​

Above the group tree you'll see a CONTEXT section. This is where themes live.

The dropdown shows your active theme. By default it's default. From here you can:

  • Add a new theme with the + button next to CONTEXT
  • Switch between themes by clicking the dropdown
  • Rename or delete a theme from the ... menu next to the theme name

Switching to a non-default theme updates the token table to show a Default Value column alongside Value so you can set per-theme overrides. The full breakdown is in Component Themes.

Naming​

Token Designer doesn't enforce any naming scheme, but a dot-separated path that mirrors your group hierarchy tends to work well:

base.color.green.500          <- primitive/base token
semantic.color.success        <- semantic token pointing to a base token
component.button.bg.primary   <- component-level token

Pick something consistent and stick with it. It helps with navigation, makes the AI assistant more useful, and gives developers a predictable structure to work with.