Design tokens

Design tokens are your site’s shared design decisions — colors, font families and scales, spacing, radii — defined once and referenced everywhere.

Open the design system panel in the editor to:

• edit the core palette and see every place a color is used,
• define typography scales and preview real text specimens,
• generate consistent scales (e.g. a spacing or radius ladder) instead of hand-picking values,
• manage token sets and breakpoints.

Seeing every state and breakpoint at once

Every token can have its own value per interaction state (hover, focus, any custom states you define) and per breakpoint. The design system panel shows this as a grid: tokens down the side, states or breakpoints across the top, so you can compare and edit them side by side instead of opening each one in turn. A cell that’s still inheriting its value shows that value dimmed — click it to set an override for just that state or breakpoint. Opening a token’s own detail view gives you a fuller version of the same grid, alongside its description and other settings.

Picking the right token

Anywhere you can set a color or size in the properties panel, you can pick a token instead of a raw value — and the picker only offers tokens relevant to that kind of property, so you’re choosing among spacing tokens for a spacing field and color tokens for a color field, not scrolling through your entire palette. Change the token and the whole site follows — on the canvas instantly, and on the published site the next time you publish.

Once a property is bound to a token, its field shows a small pill naming the token instead of a raw value. Hover the pill to see what it resolves to, including any chain of tokens it aliases through. Click the pill to change the token, or use its ✕ to detach it — this turns the property back into a plain value without changing how it currently looks; it just stops following the token.

Recoloring in one click

Select an element or a whole section and open Selection colors in the properties panel to see every distinct color used anywhere inside it, each with a count of how many places it’s used. Pick a replacement — another token, or a new literal color — and every one of those uses updates together, as a single undo step.

Token details

Hover a token in the design system panel to reveal a small settings icon. Click it to see and edit the token’s display name and a description of how it should be used, and to mark it private — hidden from the pickers elsewhere in the editor so it doesn’t clutter them for the rest of your team. A private token still resolves, exports, and appears in the design system panel; it’s only hidden from pickers.

Renaming

Click directly on the name of a page, group, component, shared style, canvas tab, or token to rename it in place. If the rename would affect anything else — style references, aliased tokens, custom code — MATRIZ shows you what will change before committing it, as a single undo step.

Imported sites and library components arrive already wired to your tokens, so restyling them is a matter of adjusting the palette, not editing every element.