Colors, tokens and themes
Name your colors once and use them everywhere. A color in the palette (a token, such as Accent or Ink) can be linked to any layer's color. Change the token, and every linked layer changes with it. Add themes, and one click turns the whole piece from one set of colors to another.

Start a palette
Any of these adds a named color:
- Select a layer and choose Menu › Colors › Save fill as color….
- In a color field, click the + beside the swatches (Save this color as a token) and name it. The layer is linked to it straight away.
- Import a token file: Menu › Colors › Import tokens (JSON)…. See Design tokens.
- Use a design system, which brings its colors. See Design systems.
Link a layer to a color
Beside every color field, the palette's colors show as swatches. Click one to link the layer to it. Or choose Menu › Colors and pick a color, to apply it to the selected layer.
A linked layer follows its token: change the token's value, and every layer linked to it changes.
Important
Typing a hex code or picking a color in the picker replaces the link with a plain color. That layer no longer follows the palette.
Edit the palette
Choose Menu › Colors › Edit palette….

- Change a color with its swatch or hex code. Every linked layer follows.
- Remove a color with its ✕.
Themes
A theme is a value for every color in the palette. The first is Default; add more, such as a Dark or a sub-brand.
- In the palette, click +. The new theme starts with the current colors.
- Rename it in the name field, such as
Dark. - With it chosen in the theme list, change its colors.
Pick a theme in the list to switch the whole piece to it. Every linked layer follows; colors typed in as hex codes don't. A change you make to a color belongs to the theme that's chosen.
An embed can pick a theme too, so a page can show your piece in its own light or dark mode. See Embed API.