Design System
Manage your whole project's styling at once with color & typography tokens and themes
2 min read
The Design System is a project-wide collection of color and typography tokens. Define colors and fonts as tokens, then bind components to a token instead of setting values one by one — change a token once and everything that uses it updates together. It replaces the old Colors tab.
Tokens and Themes
- Token — a single color or typography value. e.g.
color.brand.primary,typography.title. - Theme — one set of token values. Create several brand/mode variants, and switching the Active Theme re-skins the whole project at once.
Each token holds a value per theme, so the same color.brand.primary can be a different color in Theme A and Theme B.
Adding tokens
From the Design System tab's + menu:
- Add New Theme — add a new theme (seeded from the last theme)
- Add Color — add a color token
- Add Typography — add a typography token
Color tokens can carry both a Light and a Dark value; the preview swatch in the list shows light on top, dark on the bottom.
Binding a token to a component
In the Inspector, bind a component's colors and fonts to a token. A bound component follows the active theme, so switching themes updates it automatically.
Duplicating a theme
To vary a specific theme, open its item menu in the theme list → Duplicate to create a new theme that copies all of its values. Rename it inline in the detail pane.
The active theme is separate from the list selection. Picking an item in the list only changes what you edit; to actually apply it to the project, switch the active theme with the Apply button in the detail pane.