Design system

Studio › Design system holds the site's design tokens — colours, typography, radius, spacing — and the CSS derived from them (setup/design).

Tabs#

The open tab is part of the page address (?tab=brand, ?tab=properties, ?tab=code; Preview has none), so a copied link opens the same tab.

• Preview — a live specimen of the tokens on real components.
• Properties — direct editing: the seeds (brand colour, type pairing, shape, layout), every derived token and your own custom tokens, one section at a time from the rail on the left. On a wide screen the live preview stays beside the form and scrolls to the section you edit (fold it away with the split button; drag the divider to resize). Expands deterministically — no model, no credits.
  • Editing values: type and press Enter (Escape reverts); in a number field ↑ / ↓ steps the value (Shift ×10, Alt ÷10), or drag the field's label sideways. Colours open a picker from their swatch.
  • Pinned values: a value you set over the derived one is marked in lime (a lime dot or tint, no outline); the lime ↺ or Reset returns it to derived, and n pinned in the section header resets the whole section.
  • Undo: Ctrl/⌘+Z and Ctrl/⌘+Shift+Z (or the footer buttons) step through your edits; Ctrl/⌘+S saves.
  • Fonts (top of Typography): the typefaces the site loads, saved at once. Upload takes any font files (WOFF2, WOFF, TTF, OTF — the licence is yours to hold); the family, weight and style are read from the font file itself (from its name when the file does not say) and stay editable. Google font adds a Google family either self-hosted (recommended: the files are copied into the project, so visitors never contact Google) or linked from Google — both work; a linked Google family shows a hint with a one-click Switch to self-hosted, which you can dismiss. A family with a weight axis is added as one variable file per character set; latin and latin-ext are ticked by default. Link stylesheet takes an Adobe Fonts project (its ID, URL or embed code), a Bunny / Fontshare / Google URL or any https font stylesheet; the families are read from it (or typed, when the host does not allow reading). With the cookie bar on, Google, Adobe, Bunny and Fontshare load for every visitor; a stylesheet from any other host would wait for marketing consent, so the dialog offers (ticked) to treat that host as a necessary font service — an override on the Consent page that is removed again with the link. The heading, body and button fields take any family name and say when the one named is not among the project's fonts. The fonts become a generated block of @font-face rules at the top of the stylesheet and of <link>s in the site's Head tags — both rewritten on every save, never edited by hand; fonts a project already loads in its own CSS or head tags keep working, count as loaded in the heading / body / button fields, and are listed under the Fonts group as Also loaded outside this list (head tags: Google, Adobe, Bunny and Fontshare stylesheets).
• Code — the stylesheet, editable. Besides the generated tokens it may hold the project's own rules — component styles, extra theme tokens, a theme poured from a repository. When the stylesheet has rules of its own, saving Properties (or an assistant commit) changes it only where your edit changes a token: that token's value is rewritten where it stands, a new token is added, a removed one is dropped — every other line stays exactly as written, including token values you set by hand for settings you did not touch. Properties says when a project's stylesheet is handled this way. A stylesheet that is only the generated tokens is regenerated whole, as before.

The assistant is the same general assistant as everywhere in the console (pick its model as usual); on this page it does the design work: it proposes palettes and type from the brand, previews them in place, and commits when you accept. It sees your unsaved edits in Properties and builds on them, and you can drop a .zip HTML template into the chat to derive the design from it. Interactive colour, font and radius pickers pause the agent for your choice. One Save button writes both surfaces.

The design version is what every template bundle and element render against; committing a new version invalidates the render servers' caches through the templates/elements hooks.

Needs the web capability.

Writing CSS against these tokens: Site CSS & tokens. A project still on tokens v1 shows a Migrate card at the top of Properties: Tokens v2 migration.