Checked against the product’s code on 7 November 2026.
Open Site → Catalogs → Themes, then Edit to inspect a theme in Theme Studio. A token is a named design value. A role describes the job that value is intended to do. Individual sections and imported layouts can carry more specific styling.
Theme Studio sections
Section titled “Theme Studio sections”| Section | Values |
|---|---|
| Colors | Canvas, surfaces, brand, call to action, header and footer colour roles. |
| Typography | Sans, Heading, Interface and Mono font families, size steps, weights, line heights and heading letter spacing. |
| Spacing | Eight shared spacing steps. |
| Radius & shadows | Corner radii and shadow values. |
| Layout | The shared content width. |
| Modes | Named sets of overrides on the base tokens. |
| Developer | The theme definition as JSON, including tokens without a dedicated control. |
The tables show the standard (canonical) CSS variable names and their roles. The value column is the Clean theme’s supplied base value. It is a reference example, not the value guaranteed on a hosted site. Another theme, a mode or a saved change can use different values.
Canonical tokens
Section titled “Canonical tokens”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Accent | --color-accent |
highlights and secondary emphasis | #2563eb |
| Primary | --color-primary |
primary buttons, brand ink | #0f172a |
| Primary contrast | --color-primary-contrast |
ink on Primary | #ffffff |
Canvas
Section titled “Canvas”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Background | --color-bg |
the page canvas | #ffffff |
| Heading | --color-heading |
display and section headings | #0a1122 |
| Link | --color-link |
inline links | #075985 |
| Muted | --color-muted |
captions, secondary copy | #4a5568 |
| Text | --color-text |
body copy | #131c2e |
Surfaces
Section titled “Surfaces”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Border | --color-border |
card and control edges | #d4dbe4 |
| Surface | --color-surface |
cards and panels | #f2f5f9 |
Conversion
Section titled “Conversion”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| CTA | --color-cta |
the call to action fill | #1d4ed8 |
| CTA text | --color-cta-text |
ink on CTA | #ffffff |
Site chrome
Section titled “Site chrome”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Footer background | --color-footer-bg |
the footer band | #0e1524 |
| Footer heading | --color-footer-heading |
footer column headings | #ffffff |
| Footer muted | --color-footer-muted |
footer secondary copy | #8593a6 |
| Footer text | --color-footer-text |
footer body copy | #c7d0dd |
| Header background | --color-header-bg |
translucent nav band | rgba(255,255,255,.9) |
Typography
Section titled “Typography”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Heading | --font-heading |
display and headings | Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif |
| Sans | --font-sans |
body and interface copy | Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif |
| 2xl | --font-size-2xl |
section headings | clamp(1.6rem, 3vw, 2.35rem) |
| 3xl | --font-size-3xl |
display | clamp(2.1rem, 5vw, 3.6rem) |
| base | --font-size-base |
body copy | 1rem |
| lg | --font-size-lg |
leads and pull quotes | 1.125rem |
| sm | --font-size-sm |
secondary copy | .9rem |
| xl | --font-size-xl |
card headings | 1.35rem |
| xs | --font-size-xs |
captions and fine print | .78rem |
| Body weight | --font-weight-body |
Not described in Theme Studio | 400 |
| Heading weight | --font-weight-heading |
Not described in Theme Studio | 680 |
| Nav weight | --font-weight-nav |
Not described in Theme Studio | 500 |
| Heading letter spacing | --letter-heading |
Not described in Theme Studio | -0.022em |
| Body line height | --line-height-body |
Not described in Theme Studio | 1.6 |
| Heading line height | --line-height-heading |
Not described in Theme Studio | 1.14 |
Layout
Section titled “Layout”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Content width | --maxw |
the page’s content column | 1200px |
Additional shared tokens
Section titled “Additional shared tokens”| Our name for it | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Reading measure | --measure |
Width of the reading column, commonly expressed in characters. | 56ch |
| Section rule | --section-rule |
Border between adjacent native sections. | 0 none |
| Section spacing | --section-y |
Shared vertical spacing used by native section layouts. | 3.5rem |
| Heading ratio | --type-ratio |
Ratio used with the base font size to size ordinary native headings. | 1.20 |
Radius and shadows
Section titled “Radius and shadows”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Radius | --radius |
cards and controls | .5rem |
| Radius CTA | --radius-cta |
call to action buttons | .5rem |
| Radius lg | --radius-lg |
large panels | .875rem |
| Radius sm | --radius-sm |
chips and small controls | .375rem |
| Shadow | --shadow |
cards | 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.07) |
| Shadow md | --shadow-md |
floating panels | 0 2px 4px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.10) |
| Shadow sm | --shadow-sm |
chips, subtle lift | 0 1px 2px rgba(15,23,42,.05) |
Spacing
Section titled “Spacing”| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| space-1 | --space-1 |
Not described in Theme Studio | .25rem |
| space-2 | --space-2 |
Not described in Theme Studio | .5rem |
| space-3 | --space-3 |
Not described in Theme Studio | .75rem |
| space-4 | --space-4 |
Not described in Theme Studio | 1rem |
| space-5 | --space-5 |
Not described in Theme Studio | 1.5rem |
| space-6 | --space-6 |
Not described in Theme Studio | 2rem |
| space-7 | --space-7 |
Not described in Theme Studio | 3rem |
| space-8 | --space-8 |
Not described in Theme Studio | 4.75rem |
The additional shared tokens are present in the catalog even though Theme Studio has no dedicated row for them. Inspect them in Developer. A role is not a guarantee that every component consumes that token.
Library themes derive text colours for the header name, native header menu links and accent-filled controls. Their very tight heading letter spacing is kept for display sizes and relaxed below them; these are rendering adjustments, not new Theme Studio fields. A newly created custom theme or an imported theme does not receive those library-only adjustments.
On a site that was not migrated, an unset native header background falls back to the page background. An unset page-body line height falls back to 1.6. A header background or body line height the theme sets keeps its value. These defaults also reach custom themes on those sites.
Text wrapping and empty-state rules also apply on a site that was not migrated, including one using a custom theme. If the site’s migration record cannot be read, these added rules do not apply to a custom or imported theme on that page.
Further supplied roles
Section titled “Further supplied roles”Interface and Mono are optional font rows in Typography. The Stage roles have their own Stage band group under Colors. Accent ink, footer brand colour, secondary text and section label width have no dedicated Studio row; use Developer to inspect their stored values. Not set below means Clean does not store the token. It is separate from a rendering fallback or a value offered by a Set button. See Layout styles for rendering fallbacks.
| Role | CSS variable | Intended use | Clean base value |
|---|---|---|---|
| Accent ink | --color-accent-ink |
Small accent text. | #2563eb |
| Footer brand colour | --color-footer-brand |
The site name in the Columns footer. | Not set |
| Stage accent | --color-stage-accent |
the primary button, links and the headline’s emphasis | Not set |
| Stage accent text | --color-stage-accent-text |
ink on the stage accent | Not set |
| Stage ground | --color-stage-bg |
The dark ground of a Stage band. | Not set |
| Stage line | --color-stage-border |
rules and outlines on the band | Not set |
| Stage glow | --color-stage-glow |
the soft light at the band’s top corner | Not set |
| Stage heading | --color-stage-heading |
headings on the band | Not set |
| Stage muted | --color-stage-muted |
secondary copy on the band | Not set |
| Stage card | --color-stage-surface |
cards and panels on the band | Not set |
| Stage text | --color-stage-text |
body copy on the band | Not set |
| Secondary text | --color-text-secondary |
An additional secondary text colour. | #4a5568 |
| Interface | --font-interface |
menus, buttons, labels and form fields | Not set |
| Mono | --font-mono |
figures, small labels and code | Not set |
| Section label width | --section-label-width |
Width of the section number and label column. | 14rem |
Accepted token paths
Section titled “Accepted token paths”The theme reader accepts the following named paths for the same standard variables. A CSS variable name can also be used directly in a flat token definition.
| CSS variable | Accepted paths |
|---|---|
--color-accent |
color.accent |
--color-bg |
color.bg, color.background |
--color-border |
color.border |
--color-cta |
color.cta |
--color-cta-text |
color.cta.text, color.cta-text |
--color-footer-bg |
color.footer.bg, color.footer-bg |
--color-footer-heading |
color.footer.heading, color.footer-heading |
--color-footer-muted |
color.footer.muted, color.footer-muted |
--color-footer-text |
color.footer.text, color.footer-text |
--color-header-bg |
color.header.bg, color.header-bg |
--color-heading |
color.heading, color.headings |
--color-link |
color.link, color.links |
--color-muted |
color.muted |
--color-primary |
color.primary |
--color-primary-contrast |
color.primary.contrast, color.primary-contrast |
--color-surface |
color.surface |
--color-text |
color.text, color.foreground |
--font-heading |
font.heading, typography.font.heading, typography.family.heading |
--font-sans |
font.sans, typography.font.sans, typography.family.sans |
--font-size-2xl |
font.size.2xl, font-size.2xl, typography.scale.2xl, type.scale.2xl |
--font-size-3xl |
font.size.3xl, font-size.3xl, typography.scale.3xl, type.scale.3xl |
--font-size-base |
font.size.base, font-size.base, typography.scale.base, type.scale.base |
--font-size-lg |
font.size.lg, font-size.lg, typography.scale.lg, type.scale.lg |
--font-size-sm |
font.size.sm, font-size.sm, typography.scale.sm, type.scale.sm |
--font-size-xl |
font.size.xl, font-size.xl, typography.scale.xl, type.scale.xl |
--font-size-xs |
font.size.xs, font-size.xs, typography.scale.xs, type.scale.xs |
--font-weight-body |
font.weight.body, font-weight.body |
--font-weight-heading |
font.weight.heading, font-weight.heading |
--font-weight-nav |
font.weight.nav, font-weight.nav |
--letter-heading |
letter.heading, letter-spacing.heading |
--line-height-body |
line.height.body, line-height.body |
--line-height-heading |
line.height.heading, line-height.heading |
--maxw |
layout.maxw, size.maxw, maxw |
--measure |
measure, typography.measure, layout.measure |
--radius |
radius |
--radius-cta |
radius.cta |
--radius-lg |
radius.lg |
--radius-sm |
radius.sm |
--section-rule |
section.rule, section-rule |
--section-y |
section.y, section-y, spacing.section |
--shadow |
shadow |
--shadow-md |
shadow.md |
--shadow-sm |
shadow.sm |
--space-1 |
space.1, spacing.1 |
--space-2 |
space.2, spacing.2 |
--space-3 |
space.3, spacing.3 |
--space-4 |
space.4, spacing.4 |
--space-5 |
space.5, spacing.5 |
--space-6 |
space.6, spacing.6 |
--space-7 |
space.7, spacing.7 |
--space-8 |
space.8, spacing.8 |
--type-ratio |
type.ratio, type-ratio, typography.ratio |
--color-accent-ink |
color.accent.ink, color.accent-ink |
--color-footer-brand |
color.footer.brand, color.footer-brand |
--color-stage-accent |
color.stage.accent |
--color-stage-accent-text |
color.stage.accent.text |
--color-stage-bg |
color.stage.bg |
--color-stage-border |
color.stage.border |
--color-stage-glow |
color.stage.glow |
--color-stage-heading |
color.stage.heading |
--color-stage-muted |
color.stage.muted |
--color-stage-surface |
color.stage.surface |
--color-stage-text |
color.stage.text |
--color-text-secondary |
color.text.secondary, color.text-secondary |
--font-interface |
font.interface, typography.font.interface, typography.family.interface |
--font-mono |
font.mono, typography.font.mono, typography.family.mono |
--section-label-width |
section.label.width, section-label-width |
Values, modes and fonts
Section titled “Values, modes and fonts”Colour values and lengths must be valid for the CSS property that uses them. Type sizes can use fluid clamp() values. Font weights and line heights are separate values; increasing the font size does not select a different font file.
A mode starts with the base tokens and overrides the tokens it names. Inspect the mode as well as the base before activation. A missing token on an imported theme can use a rendering fallback. The Clean values in these tables are not a universal fallback list.
A font family name alone does not supply a font file. Where the platform’s font library holds the selected family, the public page includes its font files. Otherwise the ordered list of font names tells the browser which substitute to use. Check the real page, not only the theme preview.
Saving and activation
Section titled “Saving and activation”A draft theme can be saved without changing the active theme. Activating a saved theme requires approval and can offer Undo. Saving changed tokens on an active theme requires a live change confirmation. Theme Studio’s save and delete controls do not provide the same Undo as the governed theme requests.
A page type’s default theme remains reserved. The public renderer at this check date does not select a theme per page type.
See Themes and tokens for the editing workflow and copilot site settings requests for their approval and Undo contracts.