Design tokens in a structured canvas
A design token is a named value — a colour, a spacing step, a type size — that nodes reference instead of copying. In a structured document the reference is real, so renaming or retheming updates every consumer rather than requiring a search.
The idea
Without tokens, a colour appears in the file two hundred times as two hundred independent copies, and four of them are one hex digit off because somebody eyedropped instead of pasting. Changing the brand colour becomes an archaeology exercise.
A token turns the value into a name. Nodes hold a reference to accent, not a copy of #2440e6. Change the token and everything that referenced it changes, because it never held the value in the first place.
What tokens cover
The usual set, and each answers a question that otherwise gets answered ad hoc every time:
- Colour — surfaces, text, borders, accents, states.
- Spacing — a scale, so padding and gaps land on it rather than near it.
- Typography — families, sizes, weights, line heights, tracking.
- Radius — one scale, so a card and a button agree on how round things are.
- Shadow and elevation.
Themes are token sets
Once values are named, a theme is a second set of values under the same names. Light and dark stop being two designs and become one design resolved twice, which is why a themed structured document does not double in size or drift out of sync.
The same applies to a customer-branded variant: change the token set, keep the document.
Why an agent should set tokens first
This is the single highest-leverage instruction you can give an agent working on a design, and it is worth stating plainly: define the tokens before drawing anything.
An agent that starts inserting sections immediately picks a colour per section, and they will not agree. Six sections later the page has five greys, three accent blues, and spacing values that are close to a scale without being on one. Nothing is individually wrong, and the whole thing looks amateur.
An agent that calls setTokens first has a palette and a scale to reference, and every subsequent insert lands on it. The design becomes coherent for the same reason a human designer’s does: the decisions were made once, up front, rather than two hundred times under pressure.
setTokens → createComponent → insertNodes → getScreenshot → patchNodesTokens in the export
Because references survive into compilation, tokens come out the other side as CSS custom properties rather than being flattened to literals. The exported stylesheet has one place the accent colour is defined, exactly as the document did, so the structure of the design survives the trip into your codebase.
Questions
What is a design token?
A named value — a colour, spacing step, type size, radius, or shadow — that design elements reference instead of copying. Changing the token changes everything that references it.
Can an AI agent set design tokens?
Yes, through setTokens, and it should do it first. An agent that defines a palette and a spacing scale before inserting sections produces a coherent page; one that picks values per section produces five greys and three blues.
Do tokens survive code export?
Yes. They compile to CSS custom properties, so the exported code keeps one definition per value rather than flattening the reference into repeated literals.
Published 2026-08-02.