Theme preview
Every token the theme editor changes, on one page. Open the editor and watch.
Open the Theme panel (bottom right) and edit — this page is the target. The panel is modeless (no scrim, no light-dismiss), so you can keep clicking around while it's open.
Colour
A role resolves to tokens named --color-<target>-<role>[-<variant>], not to a ramp. The labels below are the class names — the token name minus--color-. A surface role has a bare bg- and the full range; achromatic role has tints and solids and no bare bg-. Dark mode re-points each token; the solid family stays mode-stable so a filled button keeps its identity, andtext-on-<role> is computed for contrast against it.
neutral surface
bg-neutralbg-neutral-mutedbg-neutral-x-mutedbg-neutral-boldbg-neutral-x-boldbg-neutral-solidbg-neutral-solid-boldbg-neutral-solid-x-boldtext-on-neutralborder-neutral-mutedborder-neutralborder-neutral-boldicon-neutralicon-neutral-mutedtext-neutraltext-neutral-boldtext-neutral-mutedtext-neutral-x-mutedtext-neutral-xx-muted
surface surface
bg-surfacebg-surface-mutedbg-surface-x-mutedbg-surface-boldbg-surface-x-boldbg-surface-solidbg-surface-solid-boldbg-surface-solid-x-boldtext-on-surfaceborder-surface-mutedborder-surfaceborder-surface-boldicon-surfaceicon-surface-mutedtext-surfacetext-surface-boldtext-surface-mutedtext-surface-x-mutedtext-surface-xx-muted
ui-primary chromatic
bg-ui-primary-x-mutedbg-ui-primary-mutedbg-ui-primary-solidbg-ui-primary-solid-boldbg-ui-primary-solid-x-boldtext-on-ui-primaryborder-ui-primaryborder-ui-primary-boldicon-ui-primarytext-ui-primarytext-ui-primary-bold
ui-secondary chromatic
bg-ui-secondary-x-mutedbg-ui-secondary-mutedbg-ui-secondary-solidbg-ui-secondary-solid-boldbg-ui-secondary-solid-x-boldtext-on-ui-secondaryborder-ui-secondaryborder-ui-secondary-boldicon-ui-secondarytext-ui-secondarytext-ui-secondary-bold
ui-accent chromatic
bg-ui-accent-x-mutedbg-ui-accent-mutedbg-ui-accent-solidbg-ui-accent-solid-boldbg-ui-accent-solid-x-boldtext-on-ui-accentborder-ui-accentborder-ui-accent-boldicon-ui-accenttext-ui-accenttext-ui-accent-bold
brand-primary chromatic
bg-brand-primary-x-mutedbg-brand-primary-mutedbg-brand-primary-solidbg-brand-primary-solid-boldbg-brand-primary-solid-x-boldtext-on-brand-primaryborder-brand-primaryborder-brand-primary-boldicon-brand-primarytext-brand-primarytext-brand-primary-bold
brand-secondary chromatic
bg-brand-secondary-x-mutedbg-brand-secondary-mutedbg-brand-secondary-solidbg-brand-secondary-solid-boldbg-brand-secondary-solid-x-boldtext-on-brand-secondaryborder-brand-secondaryborder-brand-secondary-boldicon-brand-secondarytext-brand-secondarytext-brand-secondary-bold
info chromatic
bg-info-x-mutedbg-info-mutedbg-info-solidbg-info-solid-boldbg-info-solid-x-boldtext-on-infoborder-infoborder-info-boldicon-infotext-infotext-info-bold
success chromatic
bg-success-x-mutedbg-success-mutedbg-success-solidbg-success-solid-boldbg-success-solid-x-boldtext-on-successborder-successborder-success-boldicon-successtext-successtext-success-bold
warning chromatic
bg-warning-x-mutedbg-warning-mutedbg-warning-solidbg-warning-solid-boldbg-warning-solid-x-boldtext-on-warningborder-warningborder-warning-boldicon-warningtext-warningtext-warning-bold
danger chromatic
bg-danger-x-mutedbg-danger-mutedbg-danger-solidbg-danger-solid-boldbg-danger-solid-x-boldtext-on-dangerborder-dangerborder-danger-boldicon-dangertext-dangertext-danger-bold
Utility classes
Typography
Semantic roles, not sizes. Each is a bundle of family, size, weight, leading, tracking and transform — so changing heading changes every heading, everywhere.
.font-displayThe quick brown fox jumps over the lazy dog
.font-titleThe quick brown fox jumps over the lazy dog
.font-headingThe quick brown fox jumps over the lazy dog
.font-leadThe quick brown fox jumps over the lazy dog
.font-bodyThe quick brown fox jumps over the lazy dog
.font-quoteThe quick brown fox jumps over the lazy dog
.font-captionThe quick brown fox jumps over the lazy dog
.font-eyebrowThe quick brown fox jumps over the lazy dog
.font-footnoteThe quick brown fox jumps over the lazy dog
.font-codeThe quick brown fox jumps over the lazy dog
.font-tagThe quick brown fox jumps over the lazy dog
Scales
Both scales are fluid: each step is a clamp() that interpolates with viewport width, so resizing the window moves them too.
Type scale
--text-2xs2xs · Aa--text-xsxs · Aa--text-ss · Aa--text-mm · Aa--text-ll · Aa--text-xlxl · Aa--text-2xl2xl · Aa--text-3xl3xl · Aa--text-4xl4xl · Aa--text-5xl5xl · Aa--text-6xl6xl · Aa--text-7xl7xl · AaSpace scale
--space-2xs--space-xs--space-s--space-m--space-l--space-xl--space-2xl--space-3xl--space-4xl--space-5xl--space-6xl--space-7xlVertical rhythm
.rhythm spaces siblings by element pair (heading→para differs from para→para), scaled by --rhythm-scale — the dial in the editor's Layout section.
A heading
A paragraph after a heading sits closer than one after a paragraph.
A second paragraph, to show the pair spacing differ.
Layout
Tracks (.centered)
A track grid: children land in measure by default, and opt out to a wider track. Widths are the --width-* knobs in the editor.
Split ratios
Cluster
Auto grid
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Patterns
Geometry (padding, radius, border, shadow, size) resolves through each pattern's group, so the editor's Pattern groups section moves whole families at once and Componentsoverrides just one. Retune a group here and every pattern in it follows.
The components themselves — buttons, labels, cards, overlays, navigation and the progressively-enhanced elements — live on Patterns, where each one is interactive. They used to be duplicated here, which meant two galleries to keep in step and neither of them complete.