diff --git a/docs/e2e/feature-matrix.md b/docs/e2e/feature-matrix.md
index 067659035..cbdb0e37f 100644
--- a/docs/e2e/feature-matrix.md
+++ b/docs/e2e/feature-matrix.md
@@ -169,6 +169,7 @@ VERSION-001 note: `tests/e2e/version-history.e2e.ts` creates and opens a page of
 | SITE-018 | P1 | ✅ | Templates | Author a post template with data bindings | Posts collection exists | Site panel → New template → binding picker → publish post | Canvas previews currentEntry title/body and the public post route renders the published row through the custom template | seeded-template priority, unresolved tokens, missing outlet, save/publish ordering |
 | SITE-019 | P1 | ✅ | Saved Layouts | Save and reuse a styled layout subtree | Page with authored section | Layer context menu → Save as layout → Module inserter → Layouts → manage menu → publish | Layout validation is inline, saved layout insertion preserves content/styles, rename/delete manage the saved item only, and already-inserted content persists and publishes | stale page selection, mobile category labels, context-menu layering, duplicate names |
 | SITE-017 | P1 | ✅ | Visual Components | Convert authored content into a reusable component with editable slot fills | Page with editable node | Componentize, add slot outlet, fill slot, save, publish | Public route includes component body and slot fill without editor slot labels | component/page save ordering, slot lock friction, stale refs |
+| SITE-027 | P1 | ✅ | Canvas fidelity | Site custom properties that share an admin token name (`--radius`, `--text`) render with the site's values in the canvas | Page with a site stylesheet setting those properties on `:root` | Code panel → New stylesheet → insert Container → publish | Canvas `:root`, body, and published page agree on the site values; the empty-Container placeholder chrome keeps the editor radius | editor tokens shadowing site tokens, chrome losing its admin styling, canvas/published mismatch |
 
 Visual builder note: `visual-builder.e2e.ts` inserts notch and picker modules, searches the full module picker and inserts by keyboard while verifying Recent/list-view persistence, drags a picker module into a canvas Container target, selects layers, edits text/button props, reorders layers from the DOM panel and canvas drag handle, exercises undo/redo buttons and shortcuts with redo-branch clearing and reload reset, validates locked slot-instance structure while allowing slot content insertion, applies spacing/color/typography controls, verifies tablet-width insertion, authors a post template with currentEntry bindings, validates and manages saved layouts, and publishes a freshly componentized page with filled slot content.
 
@@ -186,6 +187,8 @@ SITE-018 note: `visual-builder.e2e.ts` first publishes a disposable post, create
 
 SITE-019 note: `visual-builder.e2e.ts` saves a styled Container subtree as a layout, verifies blank and duplicate-name validation, confirms the Layouts category remains reachable at 390px, inserts the saved layout into another page with its captured class styling, renames and deletes the saved layout from the inserter manage menu, saves/reloads, publishes, and verifies anonymous public output. DEF-20260623-SITE019-001 fixed stale node selection on `addPage`; DEF-20260623-SITE019-002 fixed count-only mobile category buttons; DEF-20260623-SITE019-003 fixed the saved-layout manage menu z-index under the spotlight inserter.
 
+SITE-027 note: `canvas-chrome-tokens.e2e.ts` creates a site stylesheet that sets `--radius` and `--text` on `:root` and applies them to `body`, inserts an empty Container so the module placeholder chrome renders, and reads computed values in real Chromium: the canvas iframe `:root` and `body` use the site values, the placeholder still uses the editor's `--radius`, and an anonymous visitor of the published route sees the same body values as the canvas. Bun-level `editorChromeInjector.test.tsx` separately fails if the chrome stylesheet declares or reads any custom property outside `--chrome-*`; the unit DOM cannot model `@layer`, which is why the browser spec exists. Run against `main`'s injector on 2026-10-13, it failed with canvas `--radius` 6px and text `#ededed`.
+
 ## Site Runtime And Code
 
 | ID | Priority | Auto | Area | User Goal | Setup | Path | Expected Outcome | Watch For |
diff --git a/docs/e2e/feature-validation.tsv b/docs/e2e/feature-validation.tsv
index c161a921b..3870e4d83 100644
--- a/docs/e2e/feature-validation.tsv
+++ b/docs/e2e/feature-validation.tsv
@@ -54,6 +54,7 @@ SITE-023	Site AI agent panel	As a site editor, I want an AI assistant in the sit
 SITE-024	Canvas contexts and conditional layers	As a site editor, I want to author conditional visibility and preview request contexts so pages can vary by state without duplicating structures.	CanvasContextSelector switches request/condition contexts, ConditionBuilder edits node conditions, conditional layer actions update node condition state, and dynamic detection/publisher respects request-dependent output.	Missing context; invalid condition expression; conditions on locked/slot nodes; context switch with selected node; public cache mismatch.	Condition schemas and store actions validate condition trees; dynamic detection determines request-dependent holes; style/content/structure caps govern edits.	src/admin/pages/site/canvas/CanvasContextSelector.tsx; src/admin/pages/site/canvas/ConditionBuilder.tsx; src/admin/pages/site/store/slices/site/conditionalLayerActions.ts; src/core/publisher/dynamicDetection.ts	Some context behaviours surface through public holes rather than static HTML.	Happy: add condition and preview alternate context. Error: invalid condition rejected. Boundary: default context. Invalid: stale condition field. Permission: structure/content edit as implemented. Performance: context switch quick. Mobile: selector usable.	Automated baseline, build, lint, bundle, and Playwright E2E passed; manual exploratory pending	0	None		2026-06-21
 SITE-025	Clipboard, multi-select, inline edit, and rename workflows	As a site editor, I want to copy/paste, multi-select, inline edit text, and rename layers/pages so repetitive edits are fast.	Editor store supports clipboard subtree clone/remap, multi-selection inspector/actions, inline text editing wiring for modules with inlineTextEdit, and canvas/explorer rename dialogs.	Copy locked/slot nodes; paste into invalid parent; multi-select across trees; inline edit loses focus; duplicate scoped class IDs.	Clipboard and clone helpers remap node ids/scoped classes; inline edit updates declared prop only; rename routes through centralized mutations/dialog validation.	src/admin/pages/site/store/slices/clipboard; src/admin/pages/site/panels/PropertiesPanel/MultiSelectionInspector.tsx; src/admin/pages/site/store/slices/inlineEditSlice.ts; src/admin/pages/site/canvas/CanvasRenameDialog.tsx	Some behaviours have unit coverage and need browser focus checks.	Happy: copy/paste and inline edit text. Error: invalid paste ignored. Boundary: multi-select zero/one/many. Invalid: stale clipboard node. Permission: structure/content caps by action. Performance: paste large subtree acceptable. Mobile: inline editing usable.	Automated baseline, build, lint, bundle, and Playwright E2E passed; manual exploratory pending	0	None		2026-06-21
 SITE-026	Plugin editor extensions	As a site editor, I want enabled plugins to contribute editor panels, canvas overlays, toolbar actions, and modules so extension UI works inside the editor.	PanelRail shows plugin editor panels, PluginEditorPanel renders plugin content through host hooks, PluginCanvasOverlayLayer renders overlays, plugin module factory renders sandboxed module packs, and toolbar/runtime hooks execute through plugin host.	Plugin disabled mid-session; activation error; missing runtime asset; overlay measuring wrong iframe; module dependency missing.	Plugin host imports respect boundaries; grantedPermissions control SDK surfaces; module pack VM validates payloads and dependencies.	src/admin/pages/site/panels/PluginEditorPanel; src/admin/pages/site/canvas/PluginCanvasOverlayLayer; src/admin/pages/site/canvas/pluginModuleComponentFactory.tsx; server/plugins/modulePackVm.ts	Requires fixture plugin with editor contributions.	Happy: fixture plugin panel/overlay/module renders. Error: activation error shown. Boundary: disabled plugin removes contribution. Invalid: malformed module pack. Permission: plugin granted permissions. Performance: plugin failure does not crash editor. Mobile: panel/overlay does not block controls.	Automated baseline, build, lint, bundle, and Playwright E2E passed; manual exploratory pending	0	None		2026-06-21
+SITE-027	Canvas renders site custom properties that share admin token names	As a site editor, I want my site's own custom properties to render in the canvas exactly as they publish, even when they share a name with an editor token such as --radius or --text.	The canvas iframe's editor-chrome stylesheet forwards admin tokens only under the --chrome-* namespace, so a site :root rule setting --radius or --text in @layer user-authored resolves to the site's value in the canvas and on the published page, while editor chrome (module placeholder, slot instance, unknown-module fallback) keeps the admin values.	Site property named like any forwarded admin token (--text-subtle, --bg-surface, --border, --danger); site Framework tokens --text-* and --space-*; chrome rules reading an un-namespaced var; placeholder chrome inside user content.	EditorChromeInjector declares and reads only --chrome-* custom properties on the iframe :root; the forwarded token set is derived from the var(--chrome-*) references in its rules; author CSS stays in @layer user-authored.	src/admin/pages/site/canvas/EditorChromeInjector.tsx; src/admin/pages/site/canvas/IframeFrameSurface.tsx; src/admin/pages/site/canvas/ClassStyleInjector.tsx; src/admin/pages/site/canvas/UserStylesheetInjector.tsx; tests/e2e/canvas-chrome-tokens.e2e.ts; src/__tests__/canvas/editorChromeInjector.test.tsx	happy-dom does not implement cascade layers, so the cascade itself is only provable in the Playwright browser spec; the Bun test guards the namespace invariant.	Happy: site stylesheet sets --radius/--text and canvas plus published body match the site values. Error: editor value shadows site value (fails on pre-fix main). Boundary: empty Container placeholder chrome keeps the editor radius. Invalid: chrome CSS declaring or reading a non --chrome-* property fails the Bun gate. Permission: Site edit and publish as owner. Performance: n/a. Mobile: n/a.	canvas-chrome-tokens.e2e.ts and editorChromeInjector.test.tsx passed 2026-10-13; both fail against the pre-fix injector	1	P2 fixed	Defect found 2026-10-13 while verifying fragment inserts: canvas computed --radius was 6px although the site :root set 12px. Fixed by namespacing every forwarded chrome token as --chrome-*.	2026-10-13
 PUBLISH-001	Publish now	As a site publisher, I want to publish draft changes so visitors see the current site.	Publish button uses step-up, POST /publish builds site CSS/runtime assets/static artifacts, swaps current slot, bumps publish version, and returns status.	Concurrent publish lock; disk write failure with DB fallback; no pages; unpublished drafts; long publish.	Publish route requires pages.publish and step-up; publish pipeline validates/sanitizes page tree and assets; cache version bumps on success.	src/admin/pages/site/toolbar/PublishButton.tsx; server/handlers/cms/publish.ts; server/publish/publishSite.ts; server/publish/staticArtefact.ts; server/publish/publishState.ts	Use disposable uploads dir; public assertions must use fresh visitor context.	Happy: publish homepage and public route updates. Error: publish failure shows message. Boundary: no-op publish. Invalid: invalid site doc blocks. Permission: publisher cap + step-up. Performance: progress prevents duplicate clicks. Mobile: publish action reachable.	Manual core lifecycle passed 2026-06-22; automated/build/lint/bundle/Playwright E2E passed; broader exploratory pending	0	None	Manual run 2026-06-22 core-owner-lifecycle passed; see docs/e2e/runs/2026-06-22-core-owner-lifecycle.md.	2026-06-22
 PUBLISH-002	Scheduled publish	As a publisher, I want to schedule the active page or post row for future publication so content can go live later without an immediate publish click.	Site toolbar scheduling opens SchedulePublishDialog for the active page or post row, captures a local future datetime, posts the ISO time to the row schedule endpoint, marks the row scheduled, surfaces scheduled pages in the dashboard Pages count and Publish lineup, and tickPublishScheduler publishes due rows as a system actor.	Past datetime; local timezone conversion; close/cancel without mutation; multiple scheduled rows; server restart; advisory lock duplicate prevention; due row already changed before tick.	Dialog requires a date/time value and blocks past times; RowScheduleBodySchema requires scheduledPublishAt; handler requires publisher permission and canPublishDataRow; repository lists due scheduled rows; scheduler uses advisory locking and a system publisher.	src/admin/modals/SchedulePublishDialog/SchedulePublishDialog.tsx; src/admin/pages/site/toolbar/PublishButton.tsx; src/admin/pages/dashboard/widgets/PagesWidget.tsx; src/admin/pages/dashboard/widgets/PublishQueueWidget.tsx; server/handlers/cms/data/rows.ts; server/repositories/data/rows/schedule.ts; server/publish/publishScheduler.ts; src/__tests__/server/publishScheduler.test.ts; tests/e2e/page-management.e2e.ts	Site scheduling targets the active page row rather than a whole-site static publish; the editor Page shape does not currently prefill scheduledPublishAt in the dialog; dashboard widgets are the user-visible scheduled status surface.	Happy: schedule active page from Site toolbar and verify dashboard scheduled count plus Publish lineup route. Error: past time is rejected by dialog/server. Boundary: local datetime serializes to ISO near timezone boundaries. Invalid: missing datetime disables scheduling. Permission/security: publisher permission and data-row publish gate. Performance: dashboard lineup refreshes from summary endpoint. Mobile: dialog and publish menu remain reachable on narrow viewport.	Focused PUBLISH-002 page scheduling Playwright regression and scheduler tick Bun regression passed 2026-06-23	0	None	Commands: bun run test:e2e -- --project=e2e tests/e2e/page-management.e2e.ts -g "PUBLISH-002"; bun test src/__tests__/server/publishScheduler.test.ts. Run log: docs/e2e/runs/2026-06-23-publish002-page-scheduling.md.	2026-06-23
 PUBLISH-003	Publish cache, artifacts, and status	As an operator, I want publish state and cache invalidation to be correct so visitors do not see stale or mixed pages.	Static artifacts serve disk-first from uploads/published/current, render cache keys include publishVersion, version bump evicts dynamic cache, and status endpoint reports current publish state.	Partial artifact slot; stale CSS hash; dynamic route cache after publish; unpublish artifact removal.	Two-slot symlink swap; namespace routes 404 unknown assets; renderCache keyed by url, query, version.	server/publish/staticArtefact.ts; server/publish/renderCache.ts; server/publish/publishState.ts; server/handlers/cms/publish.ts	Requires filesystem permissions in uploads dir.	Happy: publish then cache updates. Error: stale asset hash 404. Boundary: simultaneous visitor during swap. Invalid: bad status method. Permission: status read as configured. Performance: static route disk-first. Mobile: N/A.	Manual core lifecycle partially covered 2026-06-22; automated/build/lint/bundle/Playwright E2E passed; broader exploratory pending	0	None	Manual run 2026-06-22 core-owner-lifecycle passed; see docs/e2e/runs/2026-06-22-core-owner-lifecycle.md.	2026-06-22
diff --git a/docs/editor.md b/docs/editor.md
index 69a8b69f8..36b858988 100644
--- a/docs/editor.md
+++ b/docs/editor.md
@@ -433,7 +433,9 @@ Each iframe `<head>` receives five `<style>` elements (three from `ClassStyleInj
 
 The **unlayered-vs-layered** split is the cascade isolation mechanism: CSS rules outside any `@layer` always beat rules inside `@layer`-d blocks, regardless of specificity. Author CSS (both the class registry and user stylesheets) goes into `@layer user-authored`, so it can never override the editor chrome even with a high-specificity selector.
 
-`EditorChromeInjector` targets chrome elements via **stable data-attribute selectors** (`data-canvas-module-placeholder`, `data-instatic-slot-instance`, `data-instatic-unknown-module`, etc.) rather than hashed CSS-Module class names, which only exist in the parent document. At mount, it copies the required safe design tokens (`--text-subtle`, `--canvas-placeholder-bg`, `--radius`, etc.) from the parent document's `:root` onto the iframe's `:root` so `var(...)` references resolve correctly inside the iframe. Admin font, text-size, and spacing tokens are remapped to `--chrome-font-sans`, `--chrome-text-*`, and `--chrome-space-*` before use; they are never copied as `--font-sans`, `--text-*`, or `--space-*`, because those short names belong to the rendered site's Framework tokens inside the canvas.
+`EditorChromeInjector` targets chrome elements via **stable data-attribute selectors** (`data-canvas-module-placeholder`, `data-instatic-slot-instance`, `data-instatic-unknown-module`, etc.) rather than hashed CSS-Module class names, which only exist in the parent document. At mount, it copies the admin design tokens the chrome reads from the parent document's `:root` onto the iframe's `:root`, every one renamed into the reserved `--chrome-*` namespace: `--radius` becomes `--chrome-radius`, `--text-subtle` becomes `--chrome-text-subtle`, `--font-sans` becomes `--chrome-font-sans`, and so on. The chrome rules read only `var(--chrome-*)`, and the forwarded set is derived from those references, so it cannot drift from what the rules use.
+
+No admin token is ever declared on the iframe `:root` under its own name. The chrome stylesheet is unlayered, so a declaration of `--radius`, `--text`, or `--space-s` there would beat the site's own custom property of the same name in `@layer user-authored`, and the canvas would render the site with the editor's values while the published page used the site's. `editorChromeInjector.test.tsx` fails if the chrome sheet declares or reads any custom property outside `--chrome-*`.
 
 Full details: [`docs/features/canvas-iframe-per-frame.md`](features/canvas-iframe-per-frame.md).
 
diff --git a/docs/features/canvas-iframe-per-frame.md b/docs/features/canvas-iframe-per-frame.md
index 7b8f31f87..0ddaea944 100644
--- a/docs/features/canvas-iframe-per-frame.md
+++ b/docs/features/canvas-iframe-per-frame.md
@@ -123,7 +123,7 @@ Five `<style>` elements are injected per iframe (three from `ClassStyleInjector`
 
 | Injector | `id` attribute | Cascade layer | Purpose |
 |---|---|---|---|
-| `EditorChromeInjector` | `instatic-editor-chrome` | **unlayered** | Editor chrome: placeholder, slot-instance, unknown-module styles. Copies safe required design tokens from parent `:root` onto iframe `:root`. The editor UI font, admin text-size tokens, and admin spacing tokens are forwarded as **chrome-namespaced** `--chrome-font-sans`, `--chrome-text-*`, and `--chrome-space-*` aliases, not as `--font-sans`, `--text-*`, or `--space-*`, because the injector is unlayered and would otherwise clobber the site's own Framework tokens. |
+| `EditorChromeInjector` | `instatic-editor-chrome` | **unlayered** | Editor chrome: placeholder, slot-instance, unknown-module styles. Copies the admin tokens the chrome reads from parent `:root` onto iframe `:root`, every one under the **chrome namespace** (`--radius` → `--chrome-radius`, `--text` → `--chrome-text`, `--font-sans` → `--chrome-font-sans`, `--space-s` → `--chrome-space-s`). It never declares an admin token under its own name, because the injector is unlayered and would otherwise override any site custom property with the same name. |
 | `ClassStyleInjector` | `mc-classes` | `@layer user-authored` | Publisher reset + framework CSS (incl. the opt-in `html { font-size }` rule) + class registry CSS |
 | `ClassStyleInjector` | `mc-classes-preview` | `@layer user-authored` | Higher-specificity preview rule (doubled selector) while a property control is hovered. Empty for state-pseudo rules — those use `mc-classes-force-state` instead. |
 | `ClassStyleInjector` | `mc-classes-force-state` | `@layer user-authored` | Force-paints the active state-pseudo rule (`.btn:hover`, `.card:focus`, etc.) onto the selected node via a doubled `[data-node-id]` selector so the state is visible/editable without physically triggering it. Mirrors the full `contextStyles` emission per breakpoint and condition. |
diff --git a/src/__tests__/canvas/editorChromeInjector.test.tsx b/src/__tests__/canvas/editorChromeInjector.test.tsx
index 240a4a4de..aca536222 100644
--- a/src/__tests__/canvas/editorChromeInjector.test.tsx
+++ b/src/__tests__/canvas/editorChromeInjector.test.tsx
@@ -59,3 +59,43 @@ describe('EditorChromeInjector font isolation', () => {
     expect(css).not.toContain('var(--space-xl)')
   })
 })
+
+/**
+ * Regression guard: no admin token may be declared on the iframe `:root` under
+ * its own name.
+ *
+ * The chrome stylesheet is unlayered and the site's CSS sits in
+ * `@layer user-authored`, so any custom property the chrome declares wins over
+ * the site's declaration of the same name. A site with `:root { --radius: 12px }`
+ * or its own `--text` rendered with the editor's 6px radius and text colour in
+ * the canvas, while the published page used the site's values. Every token the
+ * chrome declares or reads must live under the reserved `--chrome-` namespace.
+ */
+describe('EditorChromeInjector token namespace', () => {
+  it('declares and reads only chrome-namespaced custom properties', () => {
+    const root = document.documentElement
+    root.style.setProperty('--radius', '6px')
+    root.style.setProperty('--text', 'rgb(230, 230, 230)')
+    root.style.setProperty('--text-subtle', 'rgb(120, 120, 120)')
+    root.style.setProperty('--bg-surface', 'rgb(30, 30, 30)')
+    root.style.setProperty('--canvas-placeholder-bg', 'rgb(40, 40, 40)')
+
+    const target = document.implementation.createHTMLDocument('iframe')
+    render(<EditorChromeInjector targetDocument={target} parentDocument={document} />)
+    const css = target.getElementById('instatic-editor-chrome')?.textContent ?? ''
+
+    const declared = Array.from(css.matchAll(/(--[\w-]+)\s*:/g), (m) => m[1])
+    const read = Array.from(css.matchAll(/var\(\s*(--[\w-]+)/g), (m) => m[1])
+    expect(declared.length).toBeGreaterThan(0)
+    expect(read.length).toBeGreaterThan(0)
+    expect(declared.filter((name) => !name.startsWith('--chrome-'))).toEqual([])
+    expect(read.filter((name) => !name.startsWith('--chrome-'))).toEqual([])
+
+    // Admin values still reach the chrome, under the namespaced names.
+    expect(css).toContain('--chrome-radius: 6px;')
+    expect(css).toContain('--chrome-text: rgb(230, 230, 230);')
+    expect(css).toContain('--chrome-text-subtle: rgb(120, 120, 120);')
+    expect(css).toContain('border-radius: var(--chrome-radius);')
+    expect(css).toContain('background: var(--chrome-canvas-placeholder-bg);')
+  })
+})
diff --git a/src/admin/pages/site/canvas/EditorChromeInjector.tsx b/src/admin/pages/site/canvas/EditorChromeInjector.tsx
index 2b9c4c18b..a64aca84f 100644
--- a/src/admin/pages/site/canvas/EditorChromeInjector.tsx
+++ b/src/admin/pages/site/canvas/EditorChromeInjector.tsx
@@ -15,8 +15,9 @@
  *
  * Two-part fix implemented here:
  *   1. Copy the tokens the chrome needs from the parent document's :root onto
- *      the iframe's :root at mount time — so `var(--text-subtle)` etc.
- *      resolve correctly inside the chrome CSS.
+ *      the iframe's :root at mount time, renamed into the `--chrome-*`
+ *      namespace — so `var(--chrome-text-subtle)` etc. resolve inside the
+ *      chrome CSS without shadowing the site's own custom properties.
  *   2. Style editor chrome via STABLE data-attribute selectors
  *      (data-canvas-module-placeholder, data-instatic-slot-instance, etc.) instead
  *      of hashed CSS-Module class names which will never match inside the iframe.
@@ -43,77 +44,6 @@ import { useEffect } from 'react'
 
 const STYLE_TAG_ID = 'instatic-editor-chrome'
 
-/**
- * Design tokens to forward from the parent document's :root onto the iframe's
- * :root. These are exactly the tokens referenced in CHROME_RULES below.
- * Copying at runtime keeps globals.css as the single source of truth — no
- * duplicated literal values anywhere.
- */
-const CHROME_TOKENS = [
-  '--radius',
-  '--radius-sm',
-  '--text-subtle',
-  '--text-disabled',
-  '--text-muted',
-  '--text',
-  '--text-bright',
-  '--canvas-placeholder-bg',
-  '--bg-surface',
-  '--bg-surface-2',
-  '--bg-surface-3',
-  '--bg-body',
-  '--border-muted',
-  '--border',
-  '--danger',
-] as const
-
-/**
- * Admin typography and spacing tokens, forwarded into the iframe for CHROME
- * elements ONLY.
- *
- * Read from the parent's admin tokens but WRITTEN under chrome-namespaced
- * variables. Setting `--font-sans` or `--text-s` itself on the iframe `:root`
- * or `--space-s` itself on the iframe `:root` clobbers the SITE's matching
- * Framework tokens — the chrome injector is unlayered, and unlayered always
- * beats the site's tokens in `@layer user-authored`.
- */
-const CHROME_TOKEN_ALIASES = [
-  ['--font-sans', '--chrome-font-sans'],
-  ['--text-3xs', '--chrome-text-3xs'],
-  ['--text-2xs', '--chrome-text-2xs'],
-  ['--text-xs', '--chrome-text-xs'],
-  ['--text-s', '--chrome-text-s'],
-  ['--text-m', '--chrome-text-m'],
-  ['--text-l', '--chrome-text-l'],
-  ['--text-xl', '--chrome-text-xl'],
-  ['--text-2xl', '--chrome-text-2xl'],
-  ['--text-3xl', '--chrome-text-3xl'],
-  ['--text-4xl', '--chrome-text-4xl'],
-  ['--text-5xl', '--chrome-text-5xl'],
-  ['--text-6xl', '--chrome-text-6xl'],
-  ['--text-7xl', '--chrome-text-7xl'],
-  ['--space-px', '--chrome-space-px'],
-  ['--space-4xs', '--chrome-space-4xs'],
-  ['--space-3xs', '--chrome-space-3xs'],
-  ['--space-2xs', '--chrome-space-2xs'],
-  ['--space-xs', '--chrome-space-xs'],
-  ['--space-s', '--chrome-space-s'],
-  ['--space-m', '--chrome-space-m'],
-  ['--space-l', '--chrome-space-l'],
-  ['--space-xl', '--chrome-space-xl'],
-  ['--space-2xl', '--chrome-space-2xl'],
-  ['--space-3xl', '--chrome-space-3xl'],
-  ['--space-4xl', '--chrome-space-4xl'],
-  ['--space-5xl', '--chrome-space-5xl'],
-  ['--space-6xl', '--chrome-space-6xl'],
-  ['--space-7xl', '--chrome-space-7xl'],
-  ['--space-8xl', '--chrome-space-8xl'],
-  ['--space-9xl', '--chrome-space-9xl'],
-  ['--space-10xl', '--chrome-space-10xl'],
-  ['--space-11xl', '--chrome-space-11xl'],
-  ['--space-12xl', '--chrome-space-12xl'],
-] as const
-
 interface EditorChromeInjectorProps {
   /** The iframe document to inject the chrome stylesheet into. */
   targetDocument: Document
@@ -121,30 +51,6 @@ interface EditorChromeInjectorProps {
   parentDocument: Document
 }
 
-/**
- * Read the listed tokens from parentDoc's computed :root and return a
- * `:root { ... }` block that sets them on the iframe's root. Only tokens
- * that resolve to a non-empty value are included. Admin typography aliases are
- * mapped onto chrome-namespaced variables so they never override the site's own
- * Framework tokens.
- *
- * Module-scope so the React Compiler doesn't flag the getComputedStyle call
- * as a side-effect inside a component body.
- */
-function buildTokenBlock(parentDoc: Document): string {
-  const parentStyles = getComputedStyle(parentDoc.documentElement)
-  const declarations = CHROME_TOKENS.flatMap((token) => {
-    const value = parentStyles.getPropertyValue(token).trim()
-    return value ? [`  ${token}: ${value};`] : []
-  })
-  for (const [source, target] of CHROME_TOKEN_ALIASES) {
-    const value = parentStyles.getPropertyValue(source).trim()
-    if (value) declarations.push(`  ${target}: ${value};`)
-  }
-  if (declarations.length === 0) return ''
-  return `:root {\n${declarations.join('\n')}\n}`
-}
-
 /**
  * Editor-chrome CSS rules targeting stable data-* attributes.
  *
@@ -170,9 +76,9 @@ const CHROME_RULES = `
   display: block;
   box-sizing: border-box;
   min-width: 0;
-  border-radius: var(--radius);
-  background: var(--canvas-placeholder-bg);
-  color: var(--text-subtle);
+  border-radius: var(--chrome-radius);
+  background: var(--chrome-canvas-placeholder-bg);
+  color: var(--chrome-text-subtle);
   font-size: var(--chrome-text-s);
   font-family: var(--chrome-font-sans);
   font-weight: 400;
@@ -238,7 +144,7 @@ const CHROME_RULES = `
   flex: 0 0 auto;
   margin: 0;
   padding: 0;
-  color: var(--text-disabled);
+  color: var(--chrome-text-disabled);
   font-size: inherit;
   font-weight: inherit;
   line-height: 1;
@@ -258,7 +164,7 @@ const CHROME_RULES = `
   display: block;
   margin: 0;
   padding: 0;
-  color: var(--text-muted);
+  color: var(--chrome-text-muted);
   font-size: var(--chrome-text-s);
   font-family: var(--chrome-font-sans);
   font-weight: 600;
@@ -278,7 +184,7 @@ const CHROME_RULES = `
   max-width: 36ch;
   margin: 0;
   padding: 0;
-  color: var(--text-subtle);
+  color: var(--chrome-text-subtle);
   font-size: var(--chrome-text-xs);
   font-family: var(--chrome-font-sans);
   font-weight: 500;
@@ -302,10 +208,10 @@ const CHROME_RULES = `
 [data-canvas-module-placeholder] [data-instatic-placeholder-actions] button {
   height: 28px;
   padding: 0 var(--chrome-space-xl);
-  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--chrome-text) 14%, transparent);
   border-radius: 999px;
-  background: var(--bg-surface);
-  color: var(--text-bright);
+  background: var(--chrome-bg-surface);
+  color: var(--chrome-text-bright);
   font-size: var(--chrome-text-xs);
   font-family: var(--chrome-font-sans);
   font-weight: 600;
@@ -316,12 +222,12 @@ const CHROME_RULES = `
 }
 
 [data-canvas-module-placeholder] [data-instatic-placeholder-actions] button:hover {
-  background: var(--bg-surface-2);
-  border-color: color-mix(in srgb, var(--text) 22%, transparent);
+  background: var(--chrome-bg-surface-2);
+  border-color: color-mix(in srgb, var(--chrome-text) 22%, transparent);
 }
 
 [data-canvas-module-placeholder] [data-instatic-placeholder-actions] button:active {
-  background: var(--bg-surface-3);
+  background: var(--chrome-bg-surface-3);
 }
 
 /* ── base.slot-instance ─────────────────────────────────────────────────────
@@ -335,12 +241,12 @@ const CHROME_RULES = `
  */
 
 [data-instatic-slot-instance] {
-  border: 1px solid var(--border-muted);
-  border-radius: var(--radius);
-  background: var(--bg-surface);
+  border: 1px solid var(--chrome-border-muted);
+  border-radius: var(--chrome-radius);
+  background: var(--chrome-bg-surface);
   overflow: hidden;
   box-sizing: border-box;
-  color: var(--text-subtle);
+  color: var(--chrome-text-subtle);
   font-size: var(--chrome-text-xs);
   font-family: var(--chrome-font-sans);
   font-weight: 400;
@@ -354,9 +260,9 @@ const CHROME_RULES = `
   align-items: center;
   gap: var(--chrome-space-2xs);
   padding: var(--chrome-space-4xs) var(--chrome-space-s);
-  background: var(--bg-body);
-  border-bottom: 1px dashed var(--border);
-  color: var(--text-subtle);
+  background: var(--chrome-bg-body);
+  border-bottom: 1px dashed var(--chrome-border);
+  color: var(--chrome-text-subtle);
   font-size: var(--chrome-text-xs);
   font-family: var(--chrome-font-sans);
   font-weight: 400;
@@ -371,7 +277,7 @@ const CHROME_RULES = `
 }
 
 [data-instatic-slot-instance-header] [data-instatic-slot-label] {
-  color: var(--text-muted);
+  color: var(--chrome-text-muted);
   font-size: var(--chrome-text-xs);
   font-style: italic;
   font-family: var(--chrome-font-sans);
@@ -393,7 +299,7 @@ const CHROME_RULES = `
  */
 
 [data-instatic-list-placeholder] {
-  color: var(--text-subtle);
+  color: var(--chrome-text-subtle);
   margin-bottom: var(--chrome-space-xs);
   font-family: var(--chrome-font-sans);
   font-weight: initial;
@@ -409,9 +315,9 @@ const CHROME_RULES = `
  */
 
 [data-instatic-unknown-module] {
-  outline: 1px dashed var(--danger);
+  outline: 1px dashed var(--chrome-danger);
   padding: var(--chrome-space-3xs);
-  color: var(--text-subtle);
+  color: var(--chrome-text-subtle);
   font-family: var(--chrome-font-sans);
   font-size: var(--chrome-text-s);
   font-weight: 400;
@@ -422,6 +328,45 @@ const CHROME_RULES = `
 }
 `.trim()
 
+/**
+ * Admin design tokens the chrome reads, forwarded from the parent document's
+ * :root onto the iframe's :root at mount time. Copying at runtime keeps
+ * globals.css as the single source of truth — no duplicated literal values.
+ *
+ * Every token is WRITTEN under the `--chrome-` namespace (`--radius` →
+ * `--chrome-radius`, `--text-s` → `--chrome-text-s`), never under its admin
+ * name. This stylesheet is unlayered and the site's CSS sits in
+ * `@layer user-authored`, so a chrome declaration of `--radius`, `--text` or
+ * `--space-s` on :root would beat the site's own token of the same name and
+ * the canvas would render the site with editor values.
+ *
+ * Derived from the `var(--chrome-*)` references in CHROME_RULES, so the
+ * forwarded set always matches what the rules read.
+ */
+const CHROME_TOKEN_PREFIX = '--chrome-'
+const CHROME_TOKENS = [
+  ...new Set(Array.from(CHROME_RULES.matchAll(/var\(--chrome-([\w-]+)\)/g), (match) => match[1])),
+]
+
+/**
+ * Read each chrome token's admin value (`--<name>`) from parentDoc's computed
+ * :root and return a `:root { ... }` block that sets it as `--chrome-<name>`
+ * on the iframe's root. Only tokens that resolve to a non-empty value are
+ * included.
+ *
+ * Module-scope so the React Compiler doesn't flag the getComputedStyle call
+ * as a side-effect inside a component body.
+ */
+function buildTokenBlock(parentDoc: Document): string {
+  const parentStyles = getComputedStyle(parentDoc.documentElement)
+  const declarations = CHROME_TOKENS.flatMap((name) => {
+    const value = parentStyles.getPropertyValue(`--${name}`).trim()
+    return value ? [`  ${CHROME_TOKEN_PREFIX}${name}: ${value};`] : []
+  })
+  if (declarations.length === 0) return ''
+  return `:root {\n${declarations.join('\n')}\n}`
+}
+
 export function EditorChromeInjector({ targetDocument, parentDocument }: EditorChromeInjectorProps) {
   useEffect(() => {
     let styleEl = targetDocument.getElementById(STYLE_TAG_ID) as HTMLStyleElement | null
diff --git a/tests/e2e/canvas-chrome-tokens.e2e.ts b/tests/e2e/canvas-chrome-tokens.e2e.ts
new file mode 100644
index 000000000..e1eaf4902
--- /dev/null
+++ b/tests/e2e/canvas-chrome-tokens.e2e.ts
@@ -0,0 +1,98 @@
+import { expect, test } from '@playwright/test'
+import {
+  ANONYMOUS_STATE,
+  PUBLIC_BASE_URL,
+  canvasFrame,
+  createPage,
+  createStylesheet,
+  insertNotchModule,
+  login,
+  openSiteEditor,
+  publishDraft,
+} from './helpers'
+
+/**
+ * The editor-chrome stylesheet in the canvas iframe is unlayered, and the site's
+ * CSS lives in `@layer user-authored`. Any custom property the chrome declares
+ * on `:root` therefore beats a site property of the same name. A site defining
+ * `--radius` or `--text` used to render with the editor's values in the canvas
+ * and its own values on the published page. Real Chromium is needed here: the
+ * unit DOM does not implement cascade layers.
+ */
+const SITE_RADIUS = '12px'
+const SITE_TEXT = 'rgb(200, 30, 40)'
+
+test.describe('canvas editor chrome tokens', () => {
+  test.use({ storageState: ANONYMOUS_STATE })
+
+  test('site custom properties named like admin tokens render the same in canvas and on the published page (SITE-027)', async ({
+    page,
+    browser,
+  }) => {
+    test.setTimeout(90_000)
+
+    await login(page)
+    const suffix = Date.now().toString(36)
+    const pageName = `Chrome tokens ${suffix}`
+    const slug = `chrome-tokens-${suffix}`
+
+    await openSiteEditor(page)
+    await createPage(page, pageName, slug)
+    await page.getByRole('treeitem', { name: `Open page ${pageName}` }).click()
+    await createStylesheet(page, `chrome-tokens-${suffix}`, `
+:root {
+  --radius: ${SITE_RADIUS};
+  --text: ${SITE_TEXT};
+}
+html body {
+  border-top-left-radius: var(--radius);
+  color: var(--text);
+}
+`)
+    // An empty Container renders editor chrome (the module placeholder).
+    await insertNotchModule(page, 'container')
+    const frame = canvasFrame(page)
+    await expect(frame.locator('[data-canvas-module-placeholder]').first()).toBeVisible()
+
+    const editorRadius = await page.evaluate(() =>
+      getComputedStyle(document.documentElement).getPropertyValue('--radius').trim(),
+    )
+    expect(editorRadius).not.toBe(SITE_RADIUS)
+
+    const canvas = await frame.locator('body').evaluate((body) => {
+      const doc = body.ownerDocument
+      const root = getComputedStyle(doc.documentElement)
+      const placeholder = doc.querySelector('[data-canvas-module-placeholder]')!
+      return {
+        rootRadius: root.getPropertyValue('--radius').trim(),
+        rootText: root.getPropertyValue('--text').trim(),
+        bodyRadius: getComputedStyle(body).borderTopLeftRadius,
+        bodyColor: getComputedStyle(body).color,
+        placeholderRadius: getComputedStyle(placeholder).borderTopLeftRadius,
+      }
+    })
+
+    // The site's own values win inside the canvas…
+    expect(canvas.rootRadius).toBe(SITE_RADIUS)
+    expect(canvas.rootText).toBe(SITE_TEXT)
+    expect(canvas.bodyRadius).toBe(SITE_RADIUS)
+    expect(canvas.bodyColor).toBe(SITE_TEXT)
+    // …while editor chrome still renders with the admin token value.
+    expect(canvas.placeholderRadius).toBe(editorRadius)
+
+    await publishDraft(page)
+    const context = await browser.newContext()
+    const visitor = await context.newPage()
+    try {
+      const response = await visitor.goto(`${PUBLIC_BASE_URL}/${slug}`)
+      expect(response?.status()).toBe(200)
+      const published = await visitor.locator('body').evaluate((body) => ({
+        bodyRadius: getComputedStyle(body).borderTopLeftRadius,
+        bodyColor: getComputedStyle(body).color,
+      }))
+      expect(published).toEqual({ bodyRadius: canvas.bodyRadius, bodyColor: canvas.bodyColor })
+    } finally {
+      await context.close()
+    }
+  })
+})
diff --git a/tests/e2e/helpers/editor.ts b/tests/e2e/helpers/editor.ts
index 16356f3f7..85c477d74 100644
--- a/tests/e2e/helpers/editor.ts
+++ b/tests/e2e/helpers/editor.ts
@@ -114,6 +114,36 @@ export async function openCodePanel(page: Page): Promise<void> {
   ).toBeVisible()
 }
 
+/**
+ * Create a site stylesheet from the Code Explorer and type `css` into it.
+ * Returns once the Code Editor shows the text and the store has synced it.
+ */
+export async function createStylesheet(page: Page, name: string, css: string): Promise<void> {
+  await openCodePanel(page)
+  const newStylesheet = page.getByRole('button', { name: 'New stylesheet', exact: true })
+  await newStylesheet.scrollIntoViewIfNeeded()
+  await newStylesheet.click()
+
+  const dialog = page.getByRole('dialog', { name: 'New stylesheet' })
+  await expect(dialog).toBeVisible()
+  await dialog.getByLabel('Name').fill(name)
+  await dialog.getByRole('button', { name: 'Create' }).click()
+  await expect(dialog).toBeHidden()
+
+  await expect(page.getByRole('complementary', { name: 'Code Editor' })).toBeVisible()
+  await expect(page.getByLabel('Stylesheet settings')).toBeVisible()
+
+  const editor = page.locator('[data-codemirror-container] .cm-content')
+  await expect(editor).toBeVisible({ timeout: 15_000 })
+  await editor.click()
+  const text = css.trim()
+  await page.keyboard.insertText(text)
+
+  // CodeMirror syncs into the editor store through a short debounce.
+  await expect(editor).toContainText(text.split('\n')[0]!)
+  await page.waitForTimeout(300)
+}
+
 /** Select a layer in the DOM/layers tree by its display name. */
 export async function selectTreeLayer(page: Page, name: string): Promise<void> {
   await page.getByRole('treeitem', { name }).first().click()
diff --git a/tests/e2e/site-files.e2e.ts b/tests/e2e/site-files.e2e.ts
index 1a01db262..d7b89b4c8 100644
--- a/tests/e2e/site-files.e2e.ts
+++ b/tests/e2e/site-files.e2e.ts
@@ -1,10 +1,10 @@
-import { expect, test, type Page } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 import {
   ANONYMOUS_STATE,
   PUBLIC_BASE_URL,
   createPage,
+  createStylesheet,
   login,
-  openCodePanel,
   openSiteEditor,
   publishDraft,
 } from './helpers'
@@ -49,28 +49,3 @@ html body {
     }
   })
 })
-
-async function createStylesheet(page: Page, name: string, css: string): Promise<void> {
-  await openCodePanel(page)
-  const newStylesheet = page.getByRole('button', { name: 'New stylesheet', exact: true })
-  await newStylesheet.scrollIntoViewIfNeeded()
-  await newStylesheet.click()
-
-  const dialog = page.getByRole('dialog', { name: 'New stylesheet' })
-  await expect(dialog).toBeVisible()
-  await dialog.getByLabel('Name').fill(name)
-  await dialog.getByRole('button', { name: 'Create' }).click()
-  await expect(dialog).toBeHidden()
-
-  await expect(page.getByRole('complementary', { name: 'Code Editor' })).toBeVisible()
-  await expect(page.getByLabel('Stylesheet settings')).toBeVisible()
-
-  const editor = page.locator('[data-codemirror-container] .cm-content')
-  await expect(editor).toBeVisible({ timeout: 15_000 })
-  await editor.click()
-  await page.keyboard.insertText(css.trim())
-
-  // CodeMirror syncs into the editor store through a short debounce.
-  await expect(editor).toContainText('background-color')
-  await page.waitForTimeout(300)
-}