Design tokens

What this accomplishes

Apply colour palettes and typography across your app with one click.

The design token system is the source of truth for the Canvas’s design. A token is a named design value: a colour, a spacing, a border radius, a font, a font size, a line height, a shadow. The user picks a token set; the token set applies across the project. Changing a token changes every element that uses the token.

This page is the design token system. The blog post on tokens is at design tokens, not colour swaps; the canvas builder (which uses tokens) is in canvas builder.

Current availability

This page documents behaviour verified in Miton development builds. Miton is still pre-release and is not publicly downloadable; invited beta users will receive a signed desktop build with automatic updates.

Before you start

• A Miton development build, an active project and Canvas open.
• A connected model and permission to write project files when the task changes the app.

The token table

The token table is the source of truth for the design. The table has slots for every design value the Canvas uses. The slots are:

• Colour — background, surface, surface- raised, surface-overlay, text, text- secondary, text-muted, accent, accent- hover, accent-foreground, border, danger, success, warning.
• Spacing — space-1 through space-12 (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 192px, 256px).
• Radius — radius-control (6px), radius-container (10px), radius-pill (full).
• Type — body, heading, display, code. Each with font family, font size, line height, font weight, letter spacing.
• Shadow — shadow-sm, shadow-md, shadow-lg, shadow-xl.

Every visual element in the Canvas uses tokens, not raw values. The text on a button uses the accent-foreground token, not a hard-coded white. The spacing around a card uses the space-4 token, not a hard-coded 16px. The radius on a card uses the radius-container token, not a hard-coded 10px.

The built-in palettes

The Canvas ships with six built-in palettes:

• Daylight — light theme, warm accent, sans-serif body, serif heading.
• Midnight — dark theme, cool accent, sans-serif body, sans-serif heading.
• Forest — light theme, green accent, sans-serif body, sans-serif heading.
• Ocean — light theme, blue accent, sans-serif body, sans-serif heading.
• Sunset — light theme, orange accent, sans-serif body, sans-serif heading.
• Slate — dark theme, neutral accent, sans-serif body, monospace heading.

When the user picks a palette, every element that uses a colour token updates. The background changes. The text changes. The accent changes. The spacing stays the same. The border radius stays the same. The type stays the same unless the palette changes the type.

The user can also pick individual tokens. The token editor lets the user override any token in the table. The override is per project; the user can save the override as a new palette for future projects.

The token swap behaviour

The user picks a palette from the token swap surface. The palette is a named bundle of token values. The user can preview the palette before applying. The preview is a side-by-side view: the current tokens on the left, the new tokens on the right. The user can scroll through the project to see how the swap looks on every element.

The token swap is a CoW operation. The user can revert the swap with the standard undo button. The user can also save the swap as a new palette; the user can then use the saved palette across other projects.

The token swap respects the user’s component-level overrides. If a component has a local override (a colour the user set on the component itself, not the token), the token swap does not change the local override. The user can clear the local override from the component’s properties.

The custom token editor

The custom token editor is in the settings panel. The editor has a slot for every token in the table. The user can edit any token. The user can also create new tokens for project-specific needs.

A custom token is a name-value pair. The name is the token key (e.g. accent-secondary). The value is the design value (a colour, a spacing, a radius, a type, a shadow). The user can save the custom token set as a new palette for the project, or for the user’s account (so the user can reuse the palette across projects).

The custom token editor supports the same colour formats as the design tools the user already uses: hex, rgb, rgba, hsl, hsla, oklch. The editor also supports the standard CSS variable format for spacing, radius, and type. The user can paste a CSS variable from another tool and the editor will parse it.

The custom token editor is per project. The user can export the custom token set to a JSON file (in the design-tokens JSON format); the user can import the custom token set from a JSON file. The export and import are useful for sharing a token set across projects.

The token inspector

The token inspector is a CoW panel that shows the tokens the selected component uses. The user clicks a component; the inspector shows the tokens; the user can click a token to see where else the token is used in the project.

The token inspector also shows the token’s value, the token’s overrides (if any), and the token’s source (built-in palette, custom palette, or local override).

The token inspector is per-component. The inspector updates as the user selects a different component.

The token audit

The token audit is a feature in the settings panel that lists:

• Unused tokens — the tokens that are not used anywhere in the project. The user can clean up the project by removing the unused tokens.
• Overridden tokens — the tokens that are overridden locally on a component. The user can clean up the project by clearing the local overrides.
• Conflicting tokens — the tokens that conflict with the project’s default palette. The user can resolve the conflict by either updating the token’s value in the palette or by clearing the local override.

The token audit is per project. The audit is a snapshot; the user can run the audit on demand from the settings panel.

The token export

The user can export the project’s token set to a JSON file in the design-tokens JSON format. The export is a standard format that Figma, Sketch, and Adobe XD can import. The export is a one-way export; the user can import the file into the design tool, but the user cannot import a design tool’s file back into the Canvas.

The user can also export the token set to a CSS file. The CSS file is a standard CSS file with the tokens defined as CSS custom properties. The CSS file is useful for a developer who wants to use the same tokens in a developer-surface project.

The token export is per project. The user can re-export the token set at any time; the export is a snapshot of the project’s current tokens.

What the design token system does not cover

The design token system does not cover:

• Multi-project token sync — the token set is per project. The user can export a token set and import it into another project, but the token set is not automatically synced across projects.
• Token versioning — the token set is a single version; the user can update a token, but the user cannot have multiple versions of the same token.
• Token validation — the token set is not validated for accessibility (e.g. colour contrast) or for consistency (e.g., spacing scale). The user can use a third-party tool for validation.

The design token system focuses on the per-project token set. The less common cases are covered by the user’s existing tools.

What success looks like

The design token system is the right shape for design in a no-code tool. Raw values are not. A user who picks raw values creates a design that is technically working but visually incoherent. A user who picks tokens creates a design that is coherent by construction.

Use the built-in palettes as starting points. The six built-in palettes cover most design needs. The user can override individual tokens to tune the palette.

Use the custom token editor sparingly. A custom token is a commitment. The user has to maintain the token. A custom token that is not used in any element should be removed.

The token audit is the user’s friend. Run the audit before publishing. The audit catches inconsistencies the user would not see otherwise.

Common failures and recovery

• Confirm Canvas is editing the intended project and page.
• Check the selected breakpoint, project permissions and model connection.
• Reopen the last known-good project state before applying the change again.

Related next action

Return to the Canvas overview to choose the next part of the project.