Design tokens

What this accomplishes

Apply a generated colour palette and typography across your project in one step.

Design tokens are the source of truth for a Canvas project’s design — named colour, spacing, radius, font, and shadow values that every component reads from rather than hard-coded values. Changing a token changes every element that uses it.

This page is the design token system. 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

A project’s design tokens are a DesignTokens object with six groups:

• Colour — each role (e.g. primary, surface, accent) carries separate light, dark, and high-contrast values.
• Font — a role (body, heading, and so on) with a font family and a list of weights.
• Radius, Spacing, Shadow — named values (sm/md/lg and similar).
• Motion — named duration/easing pairs.

Every generated component reads from this token set rather than hard-coded values, so changing a token updates every component that uses it.

Generating a design direction

Rather than picking from a fixed palette list, describe what you want and Canvas generates three starting directions to choose from:

• Minimal — restrained, white-space-heavy, Inter throughout.
• Vibrant — bold colour, rounded corners, quicker motion, Plus Jakarta Sans.
• Editorial — serif headings (Playfair Display) over a serif body (Source Serif 4), muted earth-toned accents.

Each variant is a complete token set (colour, font, radius, spacing, shadow, motion) plus its own starter components. Pick one to apply it to the project; the agent’s canvas_edit tool (kind: 'set-tokens') can replace the whole set later if you want to regenerate.

Don’t confuse this with Settings → Appearance’s Daylight / Midnight / High contrast / Match system choice — that’s the theme for Miton’s own interface, not your project’s design tokens.

What the design token system does not cover

• A browsable library of named palettes — there’s no catalogue of pre-made palettes beyond the three generated directions; you regenerate from a new prompt instead of picking from a list.
• Multi-project sync — a token set applies to the project you generated or set it in; there’s no automatic sync of a token set across projects.
• Accessibility or consistency validation — nothing in Canvas checks contrast ratios or scale consistency for you.

What success looks like

A project whose components share one token set stays visually coherent as it grows. Generate a direction close to what you want, then keep the resulting token set as the source of truth for the whole project rather than layering ad hoc values on top.

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.