---
title: "Use your design tokens on the canvas"
description: "Where the tokens parsed from your codebase show up on the canvas, how a fill or spacing points at one, and what Sync tokens does."
url: https://help.modeinspect.com/en/articles/36-use-your-design-tokens-on-the-canvas
collection: "Canvas"
updated: 2026-10-29
language: en
---

# Use your design tokens on the canvas

Where the tokens parsed from your codebase show up on the canvas, how a fill or spacing points at one, and what Sync tokens does.

Design tokens are the colors, type sizes, spacing, radii and shadows your codebase defines. Modeinspect reads them when it sets up the codebase. A fill or a padding on the canvas can then point at a token instead of holding a loose value, and the agent builds with the same names.

![The Design Tokens view with the color group selected: the Groups list on the left, token names and their light and dark values on the right](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/jHdWqDhFwVppiQ6cqj7v4AUe4sy9VVDLqS7Rzkuhw5Iu5XlwT8AiwuFEO95PlR3EHgwxCDl8MZp.png)

## Where the tokens come from

Setup parses the codebase's Tailwind theme into a token document, and every canvas of that codebase gets its own copy. The codebase page names what setup found next to **Design System**.

## Where they show

The **Design Tokens** button at the bottom of the left rail opens a full-screen view over the canvas. **Groups** lists the groups with their counts. The demo codebase has breakpoint, color, css, effect, font, motion, radius, shadow, sizing, spacing and typography. Click a group to list its tokens.

In the design panel, click the swatch of a color field and open the **Design Tokens** tab, or the small arrow next to a size or spacing value. Pick a token, and the field shows its name on a pill instead of a value. **Detach token** in the same list goes back to a plain value.

![The color popover of a fill with the Design Tokens tab selected, listing red/50 to red/950 with their swatches](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/wY9ETHlmjDJaaz2tOsNGCyAh1VpGer5v9XPKuxbe7zNWQetlK4sIt80ldLhCeKT3skJXT73ts9H.png)

A token keeps its name, so **Sync tokens** can refresh it. When the agent builds, it writes the token's class or variable instead of a raw color or pixel value.

## Sync tokens

**Sync tokens** is in the canvas menu, under the **…** next to the canvas name. It shows on every canvas with a token document. On a new canvas it appears once the codebase has started for the first time and you reload the page.

A blue dot means the codebase's tokens were read again since this canvas loaded. Click it: the canvas takes the newer document and rewrites every value that drifted from its token. The toast says **Tokens are in sync** or how many layers it touched. Nothing is written to the codebase.

## What it does not do

-   It does not edit tokens. Change them in the codebase.
    
-   A codebase without tokens shows **No design tokens yet**. Its canvases work with plain values only.
    

## Next

-   [Place components from your codebase](https://help.modeinspect.com/en/articles/34-components-panel.md)
    
-   [Write design guidelines for the agent](https://help.modeinspect.com/en/articles/18-write-design-guidelines.md)
    
-   [Work with layers](https://help.modeinspect.com/en/articles/39-layers.md)

## Related

- [Create a canvas](https://help.modeinspect.com/en/articles/35-create-a-canvas.md)
- [Rename, duplicate and delete canvases](https://help.modeinspect.com/en/articles/40-rename-duplicate-and-delete-canvases.md)
- [Duplicate a canvas](https://help.modeinspect.com/en/articles/37-duplicate-a-canvas.md)
- [Start a canvas from a branch or pull request](https://help.modeinspect.com/en/articles/38-start-a-canvas-from-a-branch-or-pull-request.md)
- [Canvas controls and keyboard shortcuts](https://help.modeinspect.com/en/articles/32-canvas-controls-and-keyboard-shortcuts.md)