The complete catalog of design tokens declared in src/styles/globals.css. Every color, radius, shadow, font, font size, spacing value, and z-index used by the admin / editor / UI primitives is here. CSS Modules in src/admin/, src/admin/pages/site/, and src/ui/ MUST reference these via var(--*) — hardcoded hex / rgb / hsl is gated by css-token-policy.test.ts, hardcoded font-size pixels are gated by admin-typography-token-policy.test.ts, and hardcoded margin / padding / gap pixels are gated by admin-spacing-token-policy.test.ts.

• One file: src/styles/globals.css.
• Grouped by role: fonts/fluid type, fluid spacing, core surfaces/text/borders, overlays/scrims, identity accents, semantic state, radii, shadows, canvas, syntax, and z-index.
• Two-layer color model: achromatic base + semantic / categorical color layer on top. See docs/design.md for the rationale.
• Add a new token by editing globals.css. Reference it with var(--your-token) in CSS Modules.
• The src/modules/ directory is exempt from the no-hardcoded-color rule — module CSS ships to published pages where admin tokens are not guaranteed to exist.

--font-sans: "Inter Variable", system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

Token names: --font-sans, --font-mono.

Inter Variable is loaded via a targeted @font-face declaration in globals.css — Latin subset only (unicode-range: U+0000-00FF, …), with font-display: swap. Non-Latin characters fall back to system-ui. The monospace stack is entirely system-native; no custom monospace font is loaded.

If the admin UI needs broader character coverage, add a second @font-face block in globals.css with the appropriate unicode-range pointing at the matching subset file under @fontsource-variable/inter/files/.

Admin UI font sizes use the Core Framework-style --text-* scale directly. These tokens are fluid across viewport width but intentionally narrow for dense admin chrome. Use the nearest semantic step instead of introducing one-off pixel sizes.

Settings → Preferences can remap the scale through data-editor-text-scale on the document and layout roots. The small, large, and extra-large options shift the same token names down or up the base scale, so component CSS continues to say font-size: var(--text-s) rather than branching per preference.

Each visible token has a stable base token used by those preference remaps: --text-3xs-base, --text-2xs-base, --text-xs-base, --text-s-base, --text-m-base, --text-l-base, --text-xl-base, --text-2xl-base, --text-3xl-base, --text-4xl-base, --text-5xl-base, --text-6xl-base, --text-7xl-base.

These are admin tokens. The published-site Framework engine also emits short names such as --text-s; those belong to the generated site CSS, not admin chrome. Editor chrome injected into the canvas iframe maps admin sizes to --chrome-text-* before using them so it cannot override the site's Framework typography.

Admin UI spacing uses the Core Framework-style --space-* scale directly. Use these tokens for CSS-authored margin, padding, gap, row-gap, column-gap, and SVG width/height values in admin and shared UI CSS modules. Keep true hairlines on --space-px.

These are admin tokens. The published-site Framework engine also emits short names such as --space-s; those belong to the generated site CSS, not admin chrome. Editor chrome injected into the canvas iframe maps admin spacing to --chrome-space-* before using it so it cannot override the site's Framework spacing.

Six surface tones for depth. Lighter is higher in the stack.

The default values below are the dark theme. data-editor-theme="light" on the document or layout root overrides the same token names in globals.css, so component CSS stays theme-agnostic.

Tile/card hovers change tone, not border. Compact interactive chrome — buttons, segmented controls, toolbar chips, selected rows, and pressed states — uses --overlay-5/10/20/30 for state fills so light and dark themes keep the same visible hierarchy.

Five tones, each a different meaning level.

Add a new text tone only by adding a new token here.

Scrollbars are admin chrome, not identity. Keep them achromatic so the panel rail remains the dominant colored vertical affordance.

globals.css applies these through scrollbar-color for Firefox and ::-webkit-scrollbar for WebKit/Blink. Scrollable panel layouts that place rail navigation beside content should use scrollbar-gutter: stable.

Foreground overlays are used for selected rows, pressed states, borders, compact control tracks, and subtle surface lifts. The dark theme uses white overlays; the light theme swaps the same token names to dark overlays. Black scrims are used for shadows and modal backdrops. Suffixes are alpha x 100.

Overlay tokens: --overlay, --overlay-5, --overlay-10, --overlay-20, --overlay-30, --overlay-40, --overlay-50, --overlay-60, --overlay-70, --overlay-80, --overlay-90.

Scrim tokens: --scrim, --scrim-10, --scrim-20, --scrim-30, --scrim-40, --scrim-50, --scrim-60, --scrim-70, --scrim-80, --scrim-90.

Token-backed identity colors for widget categories, panel rails, sidebar icons, tag pills, and storage breakdown segments. Panel rails assign these automatically from the full panel identity with repeat avoidance inside the visible rail group.

Each accent also has a standard 10% tint for soft backgrounds: --accent-1-10, --accent-2-10, --accent-3-10, --accent-4-10, --accent-5-10, --accent-6-10, --accent-7-10, --accent-8-10, --accent-9-10, --accent-10-10. Used by Widget (tint prop), the rail accent helper (src/ui/railAccent.ts), TagPill, and the storage breakdown chart. The light theme overrides the same accent token names with darker foreground-safe variants, so shared rail icons and badge text stay readable on white surfaces. Adding another identity color requires a new token — don't inline a color.

TagPill maps the first meaningful alphanumeric character of its label to a stable numbered accent. This keeps selector punctuation from driving the color while giving class names, HTML tags, and badges enough visual variety without creating a second tag-specific tint scale.

Bare colour variants (*-ring-color) are for surfaces that need an outline / border-color / custom shadow geometry rather than the full inset-ring shorthand. Keep them in sync with the shorthands. The selector ring (#ff8800) is a third distinct identity so a "show me everything this selector touches" sweep reads differently from selection (green) and hover (pink).

--canvas-placeholder-bg:
    repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--text-subtle) 6%, transparent) 0 6px,
        transparent 6px 12px
    ),
    color-mix(in srgb, var(--text-subtle) 4%, transparent);

The shared diagonal-stripe pattern used by every module's "empty" placeholder (image, video, container, slot-outlet, VC ref placeholders). Strictly achromatic. Edit once, retune everywhere.

Used inside CodeMirror only. Don't reach for these in editor chrome.

Use --shadow-panel directly when you need a floating-panel feel. Don't recompose from the sub-tokens.

background: var(--bg-surface);
border: 1px solid var(--overlay-10);
border-radius: var(--panel-radius);
backdrop-filter: blur(var(--panel-blur));
box-shadow: var(--shadow-panel);

Used by spotlight, popovers, modals — anything that floats above the editor with a blur backdrop.

background: var(--scrim-30);

Used by the Code primitive for inline code chip backgrounds. Don't reuse for block-level code editors (that's CodeMirror, which uses the --syntax-* tokens).

A sculpted, top-lit dark mechanical keycap. The face is a vertical gradient; the box-shadow stack fakes a raised cap — top highlight, concave inner shadow, a solid bottom edge, and a soft drop shadow. All values are achromatic, sitting inside the editor surface ramp.

These tokens are scoped to Kbd and ShortcutKeys. Don't reach for them in other components.

background: transparent;
border: 1px solid var(--overlay-20);
border-radius: var(--input-radius);
color: var(--text);

.field:hover { border-color: var(--overlay-30); }
.field:focus { border-color: var(--overlay-50); box-shadow: var(--shadow-input-focus); }

Cards are filled and borderless; inputs are unfilled and bordered. That's the load-bearing visual distinction between containers and controls.

Four global tokens cover the layered surfaces that float above the editor:

--z-dropdown:           20;
--spotlight-z-index:  9000;
--toast-z-index:     10000;
--tooltip-z-index:   10001;

Token names: --z-dropdown, --spotlight-z-index, --toast-z-index, --tooltip-z-index.

--tooltip-z-index is deliberately the highest token so tooltips are never occluded by the surface their trigger lives on. --toast-z-index sits above modal layers and below tooltips. --spotlight-z-index is reused by several modal-level surfaces that need to sit above the editor chrome.

Global modal layer (all raw values in the shared admin stacking context):

The gap between 9001 (Settings dialog) and 9050 (MediaPickerModal) is intentional headroom for any future sub-dialogs inside Settings. The gap between 9050 and 10000 (BodySlashMenu) keeps the slash menu above all modal layers. Do not add new raw values into these ranges without updating this table.

The visual editor uses additional raw z-index values that are not tokenised. They fall into two independent stacking contexts:

Editor layout context (shared stacking context for the editor chrome):

Canvas-internal context (confined inside CanvasRoot's z-index: 0):

CanvasRoot declares z-index: 0; position: relative to establish the isolation. Without it, the canvas-internal z-index 51 would escape into the layout context and paint over floating panels at z-index 50. See docs/editor.md → "Canvas stacking context isolation" for the full explanation.

Raw canvas-internal values are intentional exceptions — they cannot be tokens because they are relative to an isolated stacking context, not the global one. Do not add new raw z-index values outside this established ladder.

Tooltip chrome uses --bg-body, --text-bright, --overlay-5, --shadow-tooltip, --tooltip-radius, and --tooltip-z-index directly.

Spotlight has only layout/z-index tokens of its own. Its colors come from the same global overlay, scrim, text, and semantic state tokens as the rest of the admin UI.

These tokens are narrow, named exceptions for authored surfaces that need a specific translucent treatment and cannot be expressed as a reusable semantic state.

Default chart tint, series colors, glow halos, empty-segment styling. Used by dashboard widgets and the framework scale UI.

globals.css includes a non-negotiable reduced-motion override:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

The two !important declarations here are the only legitimate !important usages in globals.css. Constraint #189.

1. Pick the right group in src/styles/globals.css (color → semantic group; radius → radius group; z-index → z-index group).
2. Add the custom property with a one-line comment if the meaning isn't obvious from the name.
3. Reference it via var(--*) in CSS Modules.
4. Add a row to the matching table in this doc.
5. If it introduces a new concept (not a variation of an existing group), add a paragraph explaining what it's for in this doc and in docs/design.md.

• docs/design.md — design principles + surface systems + UI primitives
• docs/reference/ui-primitives.md — which primitive uses which tokens
• Source-of-truth file: src/styles/globals.css
• Gate tests:
  • src/__tests__/architecture/css-token-policy.test.ts
  • src/__tests__/architecture/css-token-vocabulary.test.ts
  • src/__tests__/architecture/admin-typography-token-policy.test.ts
  • src/__tests__/architecture/admin-spacing-token-policy.test.ts
  • src/__tests__/architecture/noTailwindUtilities.test.ts
  • src/__tests__/architecture/no-css-var-fallbacks.test.ts
  • src/__tests__/architecture/scrollbar-chrome.test.ts — scrollbar tokens declared; both Firefox and WebKit/Blink styled; properties panel uses scrollbar-gutter: stable