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.

The same card in two themes: amber in Default, pale blue in Dark, its color linked to the Accent token

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.

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….

The Palette: the theme list set to Default, the theme name, + for a new theme, and the colors Accent, Ground and Ink with their hex codes
  • 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.

  1. In the palette, click +. The new theme starts with the current colors.
  2. Rename it in the name field, such as Dark.
  3. 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.