Color tokens

What color tokens store

A color token stores a single color value — including hex, RGB, HSL, or a color with opacity — under a named key. In the current editor, color tokens are managed in the Design Tokens panel and can be copied into fill, stroke, or text color fields when you need to reuse the value.

How to create a color token

1. Open Design Tokens from the editor toolbar.
2. Select or create a token set.
3. Click + and choose Color.
4. Enter a name for the token (see naming tips below).
5. Click the color swatch to pick a color, or paste a hex value.
6. Click the create/save button in the popover footer.

Naming color tokens

Name tokens by their semantic role, not their literal color. This makes tokens easier to maintain when the design changes.

Good naming examples:

• color.brand.primary — the primary brand color
• color.text.default — the default body text color
• color.background.surface — the main surface background
• color.status.error — the color used for error states

Avoid names like blue-500 or #1A73E8 — these describe the color, not its purpose, and become misleading when the color changes.

How to use a color token value

1. Open Design Tokens from the editor toolbar.
2. Find the color token you want to reuse.
3. Copy its raw value.
4. Paste that value into a fill, stroke, or text color field in the inspector.

Tips

• Use separate token sets for light and dark themes so the source values stay organized.
• Group tokens with a common prefix (e.g. color.text.*) to keep the token panel organized.
• Color tokens support any CSS-compatible color format, including hex with alpha (e.g. #FF000080).

Related articles

• Apply tokens in design
• Token sets
• Fills