Design tokens are the handful of colors a project keeps reusing — a brand purple, an accent, the color of every caption bar. Save them once and they appear as the first row of swatches in every color picker in the editor, so you never retype a hex or eyedrop the same shade twice.
Tokens are saved with the project, so each project carries its own palette, and switching projects switches the palette.
Add a token
Deselect everything (click empty timeline space, or the gear in the player info bar) so the right panel shows the project settings, then find PROJECT · DESIGN TOKENS under the background section.
- Click + to add a token. It arrives with a starting color, and the next + picks a different one so repeat clicks never stack identical swatches.
- Click a token’s badge to open the normal color picker and dial it in — hex field, eyedropper, alpha, everything the other pickers have.
- Hover a badge and click the × in its corner to remove it.
Up to 24 tokens per project.
Use a token
Open any color picker in the editor — text color, shape fill, caption bar, project background, an effect’s color, a gradient stop — and your tokens are the round swatches on the first line, above the standard 20-color palette. Click one to apply it.
A token that was saved with transparency (an rgba(…) value) brings its transparency with it wherever alpha is supported; the stock palette swatches keep whatever alpha the picker is already on.
Tokens are a palette, not a link
A token is a shortcut for picking a color, not a live reference. Recoloring a token does not retint the layers you already painted with it — change those layers too (or use Group editing to hit several at once). This is deliberate: it means a token can never surprise you by silently changing a finished shot, and renders never depend on the palette.
For the same reason, tokens never appear in a render. They exist only while you author.
Tokens and agents
Tokens are stored in the project data as a flat colorTokens array of color strings, so GLEA and headless agents can read your palette and build with it:
{ "colorTokens": ["#8b5cf6", "#0ea5e9", "rgba(0, 0, 0, 0.6)"] }Ask for “captions in our accent color” and the agent can look the value up instead of guessing. Agents can also add tokens — when one introduces a color the project will reuse, it appears in your pickers on the next reload.
Where to go next
- Timeline and Layers
- Borders, Shadows and Shapes — shape fills and backgrounds
- Captions — text color, highlight and caption-bar colors
- Agent-Driven Editing
Leave a Reply