Design tokens

A design token is a named value: Primary Blue instead of #3b82f6 , Body Serif instead of a font list. Define it once for the site and reference it everywhere; change it once and everywhere updates. Tokens are what keep a growing site on one palette instead of thirty slightly different blues.

Define tokens

Tokens are your site's CSS custom properties: the -- keys of the style block in project.json . You edit them in the Variables view of the Styles workspace, which is where the workspace opens: click Styles in the Command Bar ( ⌘4 , or Go to Styles from ⌘K ). In Project settings , the Moved footnote's Colors and fonts button opens the same view.

The Styles panel beside it lists every token the project defines, by its name and grouped as the view groups them, with a count on each group and a swatch on each color. Click a token to jump to its row with the value ready to edit, or a group to jump to that group. Add variable jumps to the add row, so a new token is named and stored the same way as one added in the view. From the Elements view, any of these switches you back to Variables first. See Project Styles .

Tokens are grouped by what they name:

• Colors : each row has a color swatch (click it for a native picker), the token's name as CSS spells it ( --color-accent ), and its value. Edits appear on the canvas immediately.

• Fonts : each font renders a preview sentence in its own face below the row.

• Sizes & Spacing : widths, gaps, and radii.

• Other : anything that doesn't fit the groups above. It appears only once something lands in it.

To add a token, type a friendly name and a value in the group's empty row and click Add . Studio derives the stored variable name from the group and your name, so "Primary Blue" in Colors becomes --color-primary-blue . The trash button removes a token; anything still referencing it falls back to nothing, so remove with care.

A token can be built from another one: give it the value var(--color-brand) and the row grows a chip naming --color-brand , with the color that reference ends up at. Studio follows the chain to its end, so an alias of an alias still shows a color rather than more syntax.

One token, several values

A token can hold a different value in any rendering context the project declares, like a color that darkens in the dark scheme or spacing that tightens on phones:

• Every color token carries a row per declared color scheme , whether or not it has a value there, because "what is this color in dark mode" is a question a palette is always answering. Leave the row empty to inherit the base value.

• Any token can be given a value in any other declared context from the Add override… picker under its row: a breakpoint, a scheme, or a feature query. The picker offers only the contexts that token has no row for yet.

• Clearing an override's field removes it, and the token goes back to inheriting its base value.

Contexts are declared in one place, Project settings › Advanced › Contexts , described in Breakpoints . The Manage contexts… button at the top of the Variables view opens Project settings on that section, and a project with no color scheme yet gets the same button under the Colors group.

Use tokens while styling

Tokens surface right inside the Style inspector 's controls:

• The color picker lists your color tokens under its sliders, each by the name you gave it. Pick one and the field holds the reference, var(--color-primary-blue) , with that swatch marked as the chosen one and the swatch beside the value showing the token's color.

• The font family box lists your font tokens first, each previewed in its own face. Picking one of the ready-made presets creates a matching font token automatically, so even your first font choice becomes reusable.

• Any field accepts a token typed directly as var(--color-primary-blue) , useful for the occasional property without a picker.

A field holding a token reference is following the token: edit the token in the Variables view and every element using it updates. The edit lands in place on every live canvas, the page you had open and the Project Styles catalog alike, so tuning a token shows the design changing rather than describing it.

In Project Styles , a value that arrives from your project's site-wide style rather than from the open file wears an inherited chip reading from site tokens , so an element default that comes with the project is never mistaken for one written in this file.

Studio also nudges toward tokens in the other direction: when its AI assistant writes styles, hard-coded values that duplicate an existing token are flagged with the token to use instead.

Next

• Pair tokens with element defaults in Project Styles .

• Make size tokens shift per screen with Breakpoints .