diff --git a/README.md b/README.md
index c7c8262e..17deac28 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 Check a local DTCG source against project rules and build files for apps.
 
 [![CI](https://github.com/marklearst/primitree/actions/workflows/ci.yml/badge.svg)](https://github.com/marklearst/primitree/actions/workflows/ci.yml)
-[![DTCG](https://img.shields.io/badge/DTCG-2025.10-5F7F2F)](https://www.designtokens.org)
+[![DTCG](https://img.shields.io/badge/DTCG-2025.10-0B9464)](https://www.designtokens.org)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
 
 </div>
diff --git a/apps/docs/DESIGN.md b/apps/docs/DESIGN.md
index ba92c1f9..a0d9cb67 100644
--- a/apps/docs/DESIGN.md
+++ b/apps/docs/DESIGN.md
@@ -2,66 +2,66 @@
 name: Primitree Living Governance
 description: A living token graph that makes governance, consequence, and proof visible.
 colors:
-  root-black: '#030304'
-  canopy-black: '#08080A'
-  lichen: '#A8C95F'
-  lichen-deep: '#5F7F2F'
-  bone: '#FAFAFA'
-  ash: '#9CA3AF'
-  graphite: '#16161A'
-  rule: 'rgba(255, 255, 255, 0.1)'
-  blocked: '#F27575'
+  forest-black: '#0B0F0D'
+  panel: '#101512'
+  emerald: '#34D399'
+  emerald-deep: '#0B9464'
+  emerald-ink: '#04251A'
+  bone: '#F0F5F2'
+  sage: '#8FA39A'
+  rule: 'rgba(255, 255, 255, 0.09)'
+  wire: 'rgba(255, 255, 255, 0.22)'
+  blocked: '#F87171'
+  changed: '#FBBF24'
 typography:
   display:
-    fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
-    fontSize: 'clamp(3.25rem, 7.2vw, 6rem)'
-    fontWeight: 560
-    lineHeight: 0.92
-    letterSpacing: '-0.04em'
+    fontFamily: 'Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif'
+    fontSize: 'clamp(2.125rem, 4.2vw, 3.375rem)'
+    fontWeight: 500
+    lineHeight: 1.04
+    letterSpacing: '-0.028em'
   headline:
-    fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
-    fontSize: 'clamp(2rem, 4.5vw, 4.5rem)'
-    fontWeight: 540
-    lineHeight: 1
-    letterSpacing: '-0.045em'
+    fontFamily: 'Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif'
+    fontSize: '34px'
+    fontWeight: 500
+    lineHeight: 1.1
+    letterSpacing: '-0.02em'
   body:
-    fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif'
-    fontSize: '1.0625rem'
-    fontWeight: 430
+    fontFamily: 'Schibsted Grotesk, ui-sans-serif, system-ui, sans-serif'
+    fontSize: '14.5px'
+    fontWeight: 400
     lineHeight: 1.65
-    letterSpacing: '-0.01em'
   label:
-    fontFamily: 'Geist Mono, ui-monospace, monospace'
-    fontSize: '0.75rem'
-    fontWeight: 520
+    fontFamily: 'IBM Plex Mono, ui-monospace, monospace'
+    fontSize: '11px'
+    fontWeight: 600
     lineHeight: 1.4
-    letterSpacing: '0.02em'
+    letterSpacing: '0.08em'
 rounded:
-  control: '6px'
-  surface: '10px'
-  pill: '999px'
+  chip: '6px'
+  control: '8px'
+  surface: '12px'
 spacing:
   xs: '6px'
   sm: '12px'
   md: '20px'
   lg: '32px'
   xl: '64px'
-  section: 'clamp(96px, 14vw, 176px)'
+  gutter: '48px'
 components:
   button-primary:
-    backgroundColor: '{colors.lichen}'
-    textColor: '{colors.root-black}'
-    typography: '{typography.label}'
+    backgroundColor: '{colors.emerald}'
+    textColor: '{colors.emerald-ink}'
     rounded: '{rounded.control}'
-    padding: '14px 18px'
-    height: '48px'
+    padding: '10px 18px'
+    minHeight: '44px'
   button-secondary:
-    backgroundColor: '{colors.canopy-black}'
+    backgroundColor: 'transparent'
     textColor: '{colors.bone}'
-    typography: '{typography.label}'
+    border: '1px solid rgba(255, 255, 255, 0.13)'
     rounded: '{rounded.control}'
-    padding: '14px 18px'
-    height: '48px'
+    padding: '10px 18px'
+    minHeight: '44px'
 ---
 
 # Design System: Primitree Living Governance
@@ -72,7 +72,7 @@ components:
 
 Primitree behaves like a botanical specimen crossed with a standards instrument: one rooted token change branches into policy, dependency, and build evidence. The visual system is black, quiet, and exact so the electric lichen signal can carry meaning. The mark is not an ornament; it becomes the structural root of the graph.
 
-The composition is spacious but never vague. Typography establishes the claim, the living graph proves it, and each subsequent section deepens the same causal story. Motion is finite and stateful: it traces an active dependency, resolves a policy decision, or reveals an output. There is no ambient orbiting, pulsing, drifting, or parallax to make the page feel expensive.
+The composition is spacious but never vague. Typography establishes the claim, the living graph proves it, and each subsequent section deepens the same causal story. Motion belongs to the graph: governed wires carry a slow marching-ants drift, the command line keeps a block cursor, and a check sweeps the graph once per proposal. Every loop stops under prefers-reduced-motion. Scroll effects, parallax, and orbiting decorations stay out.
 
 **Key Characteristics:**
 
@@ -84,52 +84,51 @@ The composition is spacious but never vague. Typography establishes the claim, t
 
 ## Colors
 
-The palette favors monochrome surfaces; electric lichen marks active, governed, or ready-to-ship states.
+The palette favors deep forest surfaces; emerald marks active, governed, or ready-to-ship states. A light theme swaps every token through `data-theme='light'` on the root, with `#0B9464` as the light-surface emerald.
 
 ### Primary
 
-- **Electric Lichen:** The single active signal for selected branches, valid outcomes, primary actions, and the logo root.
-- **Root Black:** The page ground and deepest text-on-accent color.
+- **Emerald:** The single active signal for selected proposals, valid outcomes, primary actions, prompt glyphs, and added diff lines.
+- **Forest Black:** The page ground; **Emerald Ink** is the text color on emerald fills.
 
 ### Secondary
 
-- **Blocked Coral:** Reserved for policy violations and blocked changes. Never use it as decoration.
-- **Deep Lichen:** A quieter supporting signal for secondary graph structure and pressed states.
+- **Blocked Coral (#F87171):** Reserved for policy violations, blocked changes, and removed diff lines. Never use it as decoration.
+- **Changed Amber (#FBBF24):** Reserved for rename-affected consumers.
 
 ### Neutral
 
-- **Bone:** Primary text and high-contrast focus treatment.
-- **Ash:** Explanatory copy and secondary labels.
-- **Graphite:** Structural connectors and inactive controls.
-- **Canopy Black:** Raised evidence surfaces that must remain connected to the page rather than float above it.
+- **Bone:** Primary text and the high-contrast focus treatment.
+- **Sage:** Explanatory copy and secondary labels.
+- **Wire:** Idle graph connectors; **Rule** draws hairline borders and the hero dot grid.
+- **Panel:** Raised evidence surfaces that stay connected to the page.
 
-**The Signal Rule.** Electric Lichen occupies less than ten percent of a screen. Its rarity makes governance state legible at a glance.
-
-**The Consequence Rule.** Coral means blocked or unsafe. It never means “interesting,” “new,” or “hovered.”
+**The Consequence Rule.** Coral means blocked or unsafe. It never means “interesting,” “new,” or “hovered.” Amber means changed, never selected.
 
 ## Typography
 
-**Display Font:** Inter (with system sans fallback)
-**Body Font:** Inter (with system sans fallback)
-**Label/Mono Font:** Geist Mono (with system monospace fallback)
+**Display Font:** Schibsted Grotesk (with system sans fallback)
+**Body Font:** Schibsted Grotesk (with system sans fallback)
+**Label/Mono Font:** IBM Plex Mono (with system monospace fallback)
 
 **Character:** The sans voice is direct and legible; assertive display scale and disciplined spacing provide character without borrowing a novelty font. Mono is functional metadata, not a costume.
 
 ### Hierarchy
 
-- **Display** (560, fluid 52–96px, 0.92 line-height): Reserved for the short homepage claim.
-- **Headline** (540, fluid 32–72px, 1 line-height): Section arguments and major proof statements.
-- **Title** (540, 20–28px, 1.15 line-height): Named governance branches and evidence outcomes.
-- **Body** (430, 17px, 1.65 line-height): Explanations capped near 65 characters per line.
-- **Label** (520, 12px, slight tracking): Token paths, statuses, commands, and interface controls. Sentence case; never a decorative eyebrow.
+- **Display** (500, fluid 34–54px, 1.04 line-height): Reserved for the homepage claim.
+- **Headline** (500, 34px; the closing claim runs 40px): Section arguments and major proof statements.
+- **Title** (600, 19px): Named comparison outcomes and card headings.
+- **Body** (400, 14.5–15px, 1.65 line-height): Explanations capped near 50 characters per line.
+- **Kicker** (600, 11px, .08em tracking, uppercase): Section eyebrows, step labels, and card headers.
+- **Mono** (IBM Plex Mono, 10.5–14px): Token paths, commands, versions, and terminal output. Mono carries real code and state, nothing else.
 
 **The One Claim Rule.** One display-scale statement appears in a viewport. Supporting copy uses a subordinate scale.
 
-**The Metadata Rule.** Mono text must describe real state or code. Never use it to simulate a terminal aesthetic.
+**The Metadata Rule.** Mono text must describe real state or code. Terminal blocks reproduce real command output.
 
 ## Elevation
 
-The system is flat by default. Depth comes from occlusion, line weight, tone, and active state, not diffuse glow or floating glass cards. A narrow inset highlight may clarify a selected evidence surface; drop shadows are otherwise prohibited.
+The system is flat by default. Depth comes from occlusion, line weight, tone, and active state, not diffuse glow or floating glass cards. The hero install card carries the one long soft shadow in the system; nothing else floats.
 
 **The Rooted Surface Rule.** Every evidence panel touches a rule, branch, or parent surface. Nothing floats without a visible relationship.
 
@@ -137,20 +136,20 @@ The system is flat by default. Depth comes from occlusion, line weight, tone, an
 
 ### Buttons
 
-- **Shape:** Compact rectangular controls with subtle 6px corners, never pill-shaped except for a small status chip.
-- **Primary:** Electric Lichen with Root Black text, 48px tall, reserved for the quickstart.
-- **Hover / Focus:** Hover deepens the lichen tone without translation. Focus uses a 2px Bone outline with 3px offset.
-- **Secondary:** Transparent or Canopy Black with a one-pixel Graphite border and Bone text.
+- **Shape:** Compact rectangular controls with 8px corners, never pill-shaped except for a small status chip.
+- **Primary:** Emerald with Emerald Ink text, at least 44px tall.
+- **Hover / Focus:** Hover lightens the emerald tone without translation. Focus uses a 2px Bone outline with 3px offset.
+- **Secondary:** Transparent with a one-pixel border and Bone text.
 
 ### Chips
 
-- **Style:** Small mono status labels attached to nodes or evidence, with one-pixel structural borders.
-- **State:** Active uses Electric Lichen; blocked uses Blocked Coral; inactive remains neutral. Chips are not decorative badges.
+- **Style:** Small status labels attached to nodes or evidence, with one-pixel structural borders and 6–8px corners.
+- **State:** The active proposal chip and PASS verdict fill with Emerald and Emerald Ink; FAIL fills with Coral; inactive chips stay neutral with a Sage label. Chips are not decorative badges.
 
 ### Cards / Containers
 
-- **Corner Style:** Use controlled 10px corners where a contained reading surface is necessary.
-- **Background:** Canopy Black against Root Black.
+- **Corner Style:** Use controlled 12px corners where a contained reading surface is necessary.
+- **Background:** Panel against Forest Black.
 - **Shadow Strategy:** No default shadow.
 - **Border:** One-pixel Graphite rules, often open on one edge where a branch enters.
 - **Internal Padding:** 20–32px depending on density.
@@ -165,9 +164,9 @@ The system is flat by default. Depth comes from occlusion, line weight, tone, an
 
 The logo and wordmark sit at the left. Docs and Playground sit on the right beside compact search and GitHub icon controls. Desktop and iPad keep these actions visible when space permits; mobile collapses when 44px targets cannot fit without collision. Text and a precise rule convey active state, not a filled pill.
 
-### Living Canopy
+### Token Graph
 
-The logo mark is the structural root. Three semantic branches, Govern, Trace, and Ship, share one token node and one state model. Branch controls use real buttons with visible selected state. The visualization remains comprehensible as a textual hierarchy without SVG or motion.
+The homepage instrument is a three-column token graph (Roots · primitives, Trunk · semantic, Canopy · component) drawn from the same engine projection the CLI uses. Proposal chips select a document variant; wires and node borders carry the outcome. The governed chain uses Electric Lichen dashes, violations use Blocked Coral, rename-affected consumers use the warn tone. Emphasis changes connectors and borders, never text opacity. Every node is a keyboard-focusable button whose focus traces its dependency chain, and the verdict bar restates the graph state as text for assistive technology. On narrow screens the graph scrolls inside its own container at a legible scale.
 
 ## Do's and Don'ts
 
@@ -181,8 +180,8 @@ The logo mark is the structural root. Three semantic branches, Govern, Trace, an
 
 ### Don't:
 
-- **Don't** recreate the generic dark dev-tool template: no faint grid/noise backdrop, orbit rings, pulsing dot eyebrow, decorative oversized mark, or fake Mac terminal.
+- **Don't** recreate the generic dark dev-tool template: no orbit rings, pulsing dot eyebrow, decorative oversized mark, or fake Mac terminal. The hero dot grid is the one sanctioned backdrop.
 - **Don't** use generic AI-tool marketing, interchangeable bento cards, dashboard collage, glassmorphism, purple cyber gradients, or 3D pastel illustration.
 - **Don't** draw an ornamental tree that does not explain governance.
-- **Don't** run continuous animation. No ambient drift, parallax, shimmer, or glow loops.
+- **Don't** loop motion outside the graph. Wire drift and the command cursor are the two sanctioned loops, and both stop under reduced motion.
 - **Don't** use rounded pills as the default shape or put every idea inside a card.
diff --git a/apps/docs/app/(home)/page.tsx b/apps/docs/app/(home)/page.tsx
index ab51cceb..ae4f5ecf 100644
--- a/apps/docs/app/(home)/page.tsx
+++ b/apps/docs/app/(home)/page.tsx
@@ -1,9 +1,12 @@
 import { GovernanceHome } from '@/components/landing/governance-home'
 import { MarketingShell } from '@/components/landing/site-chrome'
+import { readPrimitreeVersion } from '@/lib/landing/release'
 
 export default function HomePage() {
   return (
-    <MarketingShell active='home'>
+    <MarketingShell
+      active='home'
+      versionLabel={`v${readPrimitreeVersion()}`}>
       <GovernanceHome />
     </MarketingShell>
   )
diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index 1f580b4e..7b016b09 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -3,47 +3,91 @@
 @import 'fumadocs-ui/css/preset.css';
 
 @theme {
-  --color-primitree-bg: #030304;
-  --color-primitree-surface: #08080a;
-  --color-primitree-raised: #0f0f12;
-  --color-primitree-elevated: #16161a;
-  --color-primitree-border: rgba(255, 255, 255, 0.06);
-  --color-primitree-border-strong: rgba(255, 255, 255, 0.1);
-  --color-primitree-text: #fafafa;
-  --color-primitree-muted: #9ca3af;
-  --color-primitree-dim: #7a818c;
-  --color-primitree-accent: #a8c95f;
-  --color-primitree-accent-strong: #5f7f2f;
-  --color-primitree-accent-soft: #dde9b9;
-  --color-primitree-accent-wash: rgb(168 201 95 / 10%);
-  --color-primitree-good: #45c98b;
-  --color-primitree-warn: #f2b84b;
-  --color-primitree-error: #f27575;
-  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
-  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+  --color-primitree-bg: #0b0f0d;
+  --color-primitree-surface: #101512;
+  --color-primitree-raised: #161c18;
+  --color-primitree-elevated: #1c241f;
+  --color-primitree-border: rgba(255, 255, 255, 0.09);
+  --color-primitree-border-strong: rgba(255, 255, 255, 0.13);
+  --color-primitree-edge: rgba(255, 255, 255, 0.22);
+  --color-primitree-text: #f0f5f2;
+  --color-primitree-muted: #8fa39a;
+  --color-primitree-dim: #8fa39a;
+  --color-primitree-accent: #34d399;
+  --color-primitree-accent-strong: #0b9464;
+  --color-primitree-accent-soft: #6ee7b7;
+  --color-primitree-accent-ink: #04251a;
+  --color-primitree-accent-wash: rgb(52 211 153 / 10%);
+  --color-primitree-good: #34d399;
+  --color-primitree-warn: #fbbf24;
+  --color-primitree-error: #f87171;
+  --color-primitree-tint-pass: rgb(52 211 153 / 8%);
+  --color-primitree-tint-fail: rgb(248 113 113 / 8%);
+  --color-primitree-hover-wash: rgb(255 255 255 / 3%);
+  --font-sans: var(--font-schibsted), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-plex-mono), ui-monospace, monospace;
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
+:root[data-theme='light'] {
+  --color-primitree-bg: #f6faf8;
+  --color-primitree-surface: #ffffff;
+  --color-primitree-raised: #eef4f0;
+  --color-primitree-elevated: #e4ece7;
+  --color-primitree-border: rgba(6, 26, 18, 0.12);
+  --color-primitree-border-strong: rgba(6, 26, 18, 0.16);
+  --color-primitree-edge: rgba(6, 26, 18, 0.3);
+  --color-primitree-text: #0a1510;
+  --color-primitree-muted: #4f6b5f;
+  --color-primitree-dim: #4f6b5f;
+  --color-primitree-accent: #0b9464;
+  --color-primitree-accent-strong: #0b9464;
+  --color-primitree-accent-soft: #087a52;
+  --color-primitree-accent-ink: #eafff6;
+  --color-primitree-accent-wash: rgb(11 148 100 / 9%);
+  --color-primitree-good: #0b9464;
+  --color-primitree-warn: #b45309;
+  --color-primitree-error: #dc2626;
+  --color-primitree-tint-pass: rgb(11 148 100 / 9%);
+  --color-primitree-tint-fail: rgb(220 38 38 / 8%);
+  --color-primitree-hover-wash: rgb(6 26 18 / 4%);
+}
+
 html {
   scrollbar-gutter: stable;
   color-scheme: dark;
 }
 
+:root[data-theme='light'] {
+  color-scheme: light;
+}
+
 html > body[data-scroll-locked] {
+  /* biome-ignore lint/complexity/noImportantStyles: react-remove-scroll sets this as an inline style; only !important can beat it. */
   margin-right: 0 !important;
+  /* biome-ignore lint/complexity/noImportantStyles: react-remove-scroll sets this custom property inline; only !important can beat it. */
   --removed-body-scroll-bar-size: 0 !important;
 }
 
 body {
   background: var(--color-primitree-bg);
+  color: var(--color-primitree-text);
+  transition:
+    background-color 250ms ease,
+    color 250ms ease;
 }
 
 ::selection {
-  background: rgb(168 201 95 / 25%);
+  background: rgb(52 211 153 / 25%);
   color: #fff;
 }
 
+:root[data-theme='light'] ::selection {
+  background: rgb(11 148 100 / 25%);
+  color: #0a1510;
+}
+
 :root,
 :root #nd-docs-layout,
 :root #nd-sidebar,
@@ -57,7 +101,7 @@ body {
   --color-fd-card: var(--color-primitree-surface);
   --color-fd-card-foreground: var(--color-primitree-text);
   --color-fd-primary: var(--color-primitree-accent);
-  --color-fd-primary-foreground: #09090b;
+  --color-fd-primary-foreground: var(--color-primitree-accent-ink);
   --color-fd-secondary: var(--color-primitree-raised);
   --color-fd-secondary-foreground: var(--color-primitree-text);
   --color-fd-accent: var(--color-primitree-accent-wash);
@@ -70,7 +114,7 @@ body {
 }
 
 :root #nd-sidebar {
-  border-color: var(--color-primitree-border) !important;
+  border-color: var(--color-primitree-border);
 }
 
 .brand-logo-link {
@@ -79,6 +123,10 @@ body {
   align-items: center;
 }
 
+.brand-mark-body {
+  fill: currentColor;
+}
+
 .site-footer-link {
   display: inline-flex;
   min-block-size: 44px;
@@ -95,9 +143,7 @@ body {
 .mobile-nav button:focus-visible,
 .btn-primary:focus-visible,
 .btn-ghost:focus-visible,
-.governance-text-link:focus-visible,
-.canopy-tabs button:focus-visible,
-.canopy-proposal:focus-visible {
+.governance-text-link:focus-visible {
   outline: 2px solid var(--color-primitree-text);
   outline-offset: 3px;
 }
@@ -174,17 +220,17 @@ body {
 }
 
 .site-icon-control {
-  display: inline-grid !important;
-  width: 44px !important;
-  height: 44px !important;
-  min-width: 44px !important;
-  min-height: 44px !important;
+  display: inline-grid;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
   place-items: center;
-  border: 1px solid transparent !important;
-  border-radius: 6px !important;
-  padding: 0 !important;
-  background: transparent !important;
-  color: var(--color-primitree-muted) !important;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 0;
+  background: transparent;
+  color: var(--color-primitree-muted);
   text-decoration: none;
 }
 
@@ -237,13 +283,19 @@ body {
   touch-action: manipulation;
 }
 
+.btn-primary:active,
+.btn-ghost:active {
+  transform: scale(0.98);
+}
+
 .btn-primary {
   border: 1px solid var(--color-primitree-accent);
   background: var(--color-primitree-accent);
-  color: var(--color-primitree-bg);
+  color: var(--color-primitree-accent-ink);
   transition:
     border-color 180ms ease,
-    background 180ms ease;
+    background 180ms ease,
+    transform 150ms var(--ease-out-expo);
 }
 
 .btn-ghost {
@@ -252,918 +304,1145 @@ body {
   color: var(--color-primitree-text);
   transition:
     border-color 180ms ease,
-    background 180ms ease;
+    background 180ms ease,
+    transform 150ms var(--ease-out-expo);
 }
 
 /* ---------- governance homepage ---------- */
 .governance-home {
   overflow: clip;
   background: var(--color-primitree-bg);
+  transition: background-color 250ms ease;
 }
 
 .governance-wrap {
-  width: min(1280px, calc(100% - 40px));
+  max-width: 1400px;
   margin-inline: auto;
+  padding-inline: 48px;
+}
+
+.section-kicker {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primitree-muted);
+}
+
+.section-kicker[data-tone='accent'] {
+  color: var(--color-primitree-accent);
+}
+
+.site-version {
+  font-family: var(--font-mono);
+  display: none;
+  font-size: 11px;
+  color: var(--color-primitree-muted);
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 6px;
+  padding: 2px 8px;
+  white-space: nowrap;
+}
+
+@media (min-width: 430px) {
+  .site-version {
+    display: inline-block;
+  }
+}
+
+.site-theme-toggle {
+  display: inline-flex;
+  min-width: 44px;
+  min-height: 44px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  cursor: pointer;
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 8px;
+  padding: 5px 12px;
+  background: none;
+  color: var(--color-primitree-muted);
+  font-size: 12px;
+  font-weight: 500;
+  transition:
+    color 150ms var(--ease-out-expo),
+    border-color 150ms var(--ease-out-expo);
+}
+
+@media (hover: hover) {
+  .site-theme-toggle:hover {
+    color: var(--color-primitree-text);
+    border-color: var(--color-primitree-border-strong);
+  }
+}
+
+.site-theme-toggle:focus-visible {
+  outline: 2px solid var(--color-primitree-text);
+  outline-offset: 2px;
+}
+
+.site-theme-toggle-to-dark {
+  display: none;
+}
+
+:root[data-theme='light'] .site-theme-toggle-to-light {
+  display: none;
+}
+
+:root[data-theme='light'] .site-theme-toggle-to-dark {
+  display: inline;
 }
 
+/* ---------- hero ---------- */
 .governance-hero {
-  padding: clamp(48px, 7vw, 88px) 0 clamp(104px, 12vw, 164px);
+  border-bottom: 1px solid var(--color-primitree-border);
+  background-image: radial-gradient(
+    var(--color-primitree-border) 1px,
+    transparent 1px
+  );
+  background-size: 26px 26px;
+  background-position: 13px 13px;
 }
 
-.governance-hero-copy {
-  position: relative;
-  display: grid;
+.governance-hero-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 40px 56px;
+  padding-block: 64px 48px;
+}
+
+.governance-hero-copy-stack {
+  flex: 1 1 440px;
   min-width: 0;
-  gap: 36px;
-  align-items: end;
-  padding-bottom: 40px;
 }
 
-.governance-hero-copy::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: min(44vw, 520px);
-  height: 1px;
-  background: var(--color-primitree-accent);
-  content: '';
+.governance-hero-card {
+  flex: 1 1 400px;
+  max-width: 480px;
+  min-width: 0;
 }
 
 .governance-hero h1 {
   min-width: 0;
-  max-width: 1040px;
+  max-width: 21ch;
   margin: 0;
   color: var(--color-primitree-text);
-  font-size: clamp(3.25rem, 7.2vw, 6rem);
-  font-weight: 560;
-  letter-spacing: -0.04em;
-  line-height: 0.94;
+  font-size: clamp(2.125rem, 4.2vw, 3.375rem);
+  font-weight: 500;
+  letter-spacing: -0.028em;
+  line-height: 1.04;
 }
 
 .governance-hero h1 span {
   display: block;
+  text-wrap: balance;
 }
 
-.governance-hero-support {
-  min-width: 0;
-  align-self: end;
-}
-
-.governance-hero-support > p {
-  max-width: 430px;
-  margin: 0;
+.governance-hero-lede {
+  max-width: 50ch;
+  margin: 18px 0 0;
   color: var(--color-primitree-muted);
-  font-size: 16px;
-  letter-spacing: -0.01em;
-  line-height: 1.65;
+  font-size: 15px;
+  line-height: 1.62;
+  text-wrap: pretty;
 }
 
 .governance-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 28px;
+  align-items: center;
+  gap: 12px;
+  margin-top: 26px;
 }
 
 .governance-cta {
   display: inline-flex;
   min-width: 44px;
-  min-height: 48px;
+  min-height: 44px;
   align-items: center;
   justify-content: center;
-  gap: 9px;
-  border-radius: 6px;
-  padding: 0 18px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 560;
-  letter-spacing: 0.01em;
+  gap: 8px;
+  border-radius: 8px;
+  padding: 10px 18px;
+  font-size: 13.5px;
 }
 
-/* ---------- living canopy ---------- */
-.canopy-root {
-  position: relative;
-  margin-top: clamp(48px, 7vw, 76px);
+.btn-primary.governance-cta {
+  font-weight: 600;
 }
 
-.canopy-sticky,
-.canopy-frame,
-.canopy-visual-grid,
-.canopy-graphic,
-.canopy-evidence {
-  min-width: 0;
+.btn-ghost.governance-cta {
+  font-weight: 500;
 }
 
-.canopy-frame {
-  border-top: 1px solid var(--color-primitree-accent);
-  border-bottom: 1px solid var(--color-primitree-border-strong);
-  background: var(--color-primitree-bg);
+/* ---------- hero install card ---------- */
+.install-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 12px;
+  background: var(--color-primitree-surface);
+  overflow: hidden;
+  box-shadow: 0 32px 80px -48px rgba(0, 0, 0, 0.6);
 }
 
-.canopy-frame-header {
+.install-card-head {
   display: flex;
-  min-height: 58px;
   align-items: center;
-  justify-content: space-between;
-  gap: 20px;
+  padding: 0 14px;
   border-bottom: 1px solid var(--color-primitree-border);
-  padding: 0 20px;
-}
-
-.canopy-frame-header p,
-.canopy-frame-header code {
-  margin: 0;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.03em;
 }
 
-.canopy-frame-header p {
-  color: var(--color-primitree-text);
-  font-weight: 600;
+.install-tabs {
+  display: flex;
 }
 
-.canopy-frame-header code {
-  overflow: hidden;
+.install-tabs button {
+  min-width: 44px;
+  min-height: 44px;
+  padding: 11px 12px 9px;
+  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
   color: var(--color-primitree-muted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  transition:
+    color 150ms var(--ease-out-expo),
+    border-color 150ms var(--ease-out-expo);
 }
 
-.canopy-visual-grid {
-  display: grid;
+@media (hover: hover) {
+  .install-tabs button:hover {
+    color: var(--color-primitree-text);
+  }
 }
 
-.canopy-graphic {
-  display: grid;
-  place-items: center;
-  background: var(--color-primitree-bg);
+.install-tabs button[aria-checked='true'] {
+  color: var(--color-primitree-text);
+  border-bottom-color: var(--color-primitree-accent);
 }
 
-.canopy-svg {
-  display: block;
-  width: 100%;
-  height: auto;
-  max-height: 680px;
-  overflow: visible;
+.install-tabs button:focus-visible {
+  outline: 2px solid var(--color-primitree-text);
+  outline-offset: -2px;
 }
 
-.canopy-mobile-graph {
-  display: none;
+.install-shell {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--color-primitree-muted);
 }
 
-.canopy-link,
-.canopy-trunk {
-  vector-effect: non-scaling-stroke;
-  stroke: rgb(255 255 255 / 28%);
-  stroke-linecap: square;
-  stroke-linejoin: miter;
-  stroke-width: 1.25;
-  transition:
-    stroke 220ms var(--ease-out-expo),
-    opacity 220ms var(--ease-out-expo);
+.install-copy-row {
+  display: flex;
+  width: 100%;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: 16px;
+  text-align: left;
+  color: var(--color-primitree-text);
 }
 
-.canopy-trunk {
-  fill: none;
-  stroke: var(--color-primitree-accent);
+.install-copy-row code {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
 }
 
-.canopy-source-node rect,
-.canopy-token-node rect,
-.canopy-dependent-node rect,
-.canopy-output-node rect {
-  vector-effect: non-scaling-stroke;
-  fill: var(--color-primitree-surface);
-  stroke: rgb(255 255 255 / 16%);
-  stroke-width: 1;
-  transition:
-    fill 220ms var(--ease-out-expo),
-    stroke 220ms var(--ease-out-expo);
+.install-copy-label {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--color-primitree-muted);
 }
 
-.canopy-source-node rect,
-.canopy-token-node rect {
-  fill: var(--color-primitree-accent-wash);
+.install-copy-row:focus-visible {
+  outline: 2px solid var(--color-primitree-text);
+  outline-offset: -2px;
 }
 
-.canopy-token-node rect {
-  stroke: var(--color-primitree-accent);
+.install-output {
+  border-top: 1px solid var(--color-primitree-border);
+  padding: 14px 16px;
 }
 
-.canopy-node-kicker,
-.canopy-node-label,
-.canopy-token-label {
+.install-output p {
+  margin: 0;
   font-family: var(--font-mono);
+  font-size: 11.5px;
+  line-height: 1.8;
+  color: var(--color-primitree-muted);
+  overflow-wrap: anywhere;
 }
 
-.canopy-node-kicker {
-  fill: var(--color-primitree-dim);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.09em;
+.install-output p:first-child {
+  color: var(--color-primitree-text);
 }
 
-.canopy-node-label {
-  fill: var(--color-primitree-muted);
-  font-size: 14px;
+.mark-acc {
+  color: var(--color-primitree-accent);
 }
 
-.canopy-token-label {
-  fill: var(--color-primitree-text);
-  font-size: 15px;
-  font-weight: 600;
+/* ---------- proof instrument ---------- */
+.proof {
+  display: flex;
+  flex-direction: column;
 }
 
-.canopy-source-swatch,
-.canopy-root-node {
-  fill: var(--color-primitree-accent);
+.proof-command,
+.proof-verdict-bar {
+  padding-inline: max(48px, calc((100% - 1400px) / 2 + 48px));
 }
 
-.canopy-logo-body {
-  fill: var(--color-primitree-text);
+.proof-command {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 14px;
+  padding-block: 10px;
 }
 
-.canopy-root[data-stage='source'] .canopy-dependency-link,
-.canopy-root[data-stage='source'] .canopy-output-link,
-.canopy-root[data-stage='resolve'] .canopy-output-link,
-.canopy-root[data-stage='govern'] .canopy-output-link {
-  stroke: rgb(255 255 255 / 10%);
+.proof-command > code {
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--color-primitree-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.canopy-root[data-branch='trace'] .canopy-dependency-link {
-  stroke: var(--color-primitree-accent);
+.proof-command-spacer {
+  flex: 1;
 }
 
-.canopy-root[data-branch='trace'] .canopy-dependent-node rect,
-.canopy-root[data-branch='ship'] .canopy-output-node rect {
-  stroke: var(--color-primitree-accent);
+.proof-command-note {
+  color: var(--color-primitree-muted);
 }
 
-.canopy-root[data-branch='ship'] .canopy-output-link {
-  stroke: var(--color-primitree-accent);
+.proof-cursor {
+  color: var(--color-primitree-accent);
+  animation: blink 1s steps(1) infinite;
 }
 
-.canopy-evidence {
-  border-top: 1px solid var(--color-primitree-border-strong);
-  background: var(--color-primitree-surface);
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
 }
 
-.canopy-tabs {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  border-bottom: 1px solid var(--color-primitree-border-strong);
+.proof-command-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-primitree-muted);
 }
 
-.canopy-tabs button {
-  min-width: 44px;
-  min-height: 48px;
-  border: 0;
-  border-right: 1px solid var(--color-primitree-border);
-  border-bottom: 2px solid transparent;
-  padding: 0 12px;
+.proof-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+
+.proof-chips button {
+  min-height: 44px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--color-primitree-border-strong);
   background: transparent;
   color: var(--color-primitree-muted);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 560;
-  touch-action: manipulation;
   transition:
-    border-color 180ms ease,
-    color 180ms ease,
-    background 180ms ease;
+    border-color 150ms ease,
+    color 150ms ease;
 }
 
-.canopy-tabs button:last-child {
-  border-right: 0;
+@media (hover: hover) {
+  .proof-chips button:hover {
+    color: var(--color-primitree-text);
+    border-color: var(--color-primitree-accent);
+  }
 }
 
-.canopy-tabs button[aria-selected='true'] {
-  border-bottom-color: var(--color-primitree-accent);
-  background: var(--color-primitree-accent-wash);
-  color: var(--color-primitree-text);
+.proof-chips button[aria-checked='true'] {
+  background: var(--color-primitree-accent);
+  border-color: var(--color-primitree-accent);
+  color: var(--color-primitree-accent-ink);
 }
 
-.canopy-panel {
-  min-height: 360px;
-  padding: 30px;
+.proof-chips button:focus-visible {
+  outline: 2px solid var(--color-primitree-text);
+  outline-offset: 2px;
 }
 
-.canopy-panel-label,
-.canopy-panel-metric {
-  margin: 0;
+/* ---------- token graph ---------- */
+.graph-scroll {
+  position: relative;
+  overflow-x: auto;
+  border-top: 1px solid var(--color-primitree-border);
+  padding-inline: max(24px, calc((100% - 1400px) / 2 + 24px));
+  scrollbar-width: thin;
 }
 
-.canopy-panel-label {
-  color: var(--color-primitree-dim);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 560;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+.graph-frame {
+  position: relative;
+  min-width: 1120px;
+  padding-block: 8px;
+  overflow: hidden;
 }
 
-.canopy-panel-metric {
-  margin-top: 20px;
-  color: var(--color-primitree-text);
-  font-size: clamp(28px, 4vw, 44px);
-  font-weight: 540;
-  letter-spacing: -0.04em;
-  line-height: 1;
+.graph-sweep {
+  pointer-events: none;
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 120px;
+  background: linear-gradient(90deg, transparent, rgb(52 211 153 / 8%));
+  border-right: 1px solid var(--color-primitree-accent);
+  animation: graph-sweep 700ms linear both;
 }
 
-.canopy-proposal {
-  position: relative;
-  display: grid;
-  width: 100%;
-  min-width: 44px;
-  min-height: 118px;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px 16px;
-  align-items: center;
-  margin-top: 24px;
-  border: 1px solid var(--color-primitree-border-strong);
-  border-radius: 6px;
-  padding: 18px;
-  background: var(--color-primitree-bg);
-  color: var(--color-primitree-text);
-  text-align: left;
-  touch-action: manipulation;
-  transition:
-    border-color 180ms ease,
-    background 180ms ease;
+@keyframes graph-sweep {
+  from {
+    left: 0;
+  }
+  to {
+    left: 100%;
+  }
 }
 
-.canopy-proposal > span:first-child {
-  color: var(--color-primitree-dim);
-  font-family: var(--font-mono);
-  font-size: 11px;
+@keyframes drift {
+  to {
+    stroke-dashoffset: -40;
+  }
 }
 
-.canopy-proposal code {
-  overflow: hidden;
-  color: var(--color-primitree-text);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.graph-svg {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
-.canopy-proposal[aria-pressed='true'] {
-  border-color: var(--color-primitree-error);
+.graph-column-title {
+  font-family: var(--font-sans);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  fill: var(--color-primitree-muted);
 }
 
-.canopy-switch {
-  display: flex;
-  width: 40px;
-  height: 22px;
-  grid-column: 2;
-  grid-row: 1 / span 2;
-  align-items: center;
-  border: 1px solid var(--color-primitree-border-strong);
-  border-radius: 999px;
-  padding: 3px;
-  background: var(--color-primitree-raised);
+.graph-column-rule {
+  stroke: var(--color-primitree-border);
 }
 
-.canopy-switch span {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--color-primitree-accent);
-  transition:
-    translate 180ms var(--ease-out-expo),
-    background 180ms ease;
+.graph-edge {
+  fill: none;
+  stroke: var(--color-primitree-edge);
+  stroke-width: 1.2;
+  opacity: 0.9;
+  transition: opacity 200ms ease;
 }
 
-.canopy-proposal[aria-pressed='true'] .canopy-switch span {
-  translate: 18px 0;
-  background: var(--color-primitree-error);
+.graph-edge[data-tone='governed'] {
+  stroke: var(--color-primitree-accent);
+  stroke-width: 1.5;
+  stroke-dasharray: 6 5;
+  opacity: 0.85;
+  animation: drift 2.6s linear infinite;
 }
 
-.canopy-verdict {
-  margin-top: 20px;
-  padding-left: 16px;
-  border-left: 1px solid var(--color-primitree-accent);
+.graph-edge[data-tone='suppressed'] {
+  stroke: var(--color-primitree-edge);
+  stroke-width: 1.5;
+  opacity: 0.5;
 }
 
-.canopy-verdict p {
-  margin: 0;
-  color: var(--color-primitree-accent);
+.graph-edge[data-tone='active'] {
+  stroke: var(--color-primitree-accent);
+  stroke-width: 1.8;
+  stroke-dasharray: 6 5;
+  opacity: 1;
+  animation: drift 1.6s linear infinite;
+}
+
+.graph-edge[data-tone='active'][data-static] {
+  animation: none;
+}
+
+.graph-edge[data-tone='violation'] {
+  stroke: var(--color-primitree-error);
+  stroke-width: 1.5;
+  stroke-dasharray: 5 5;
+  opacity: 1;
+  animation: drift 1.8s linear infinite;
+}
+
+.graph-edge[data-tone='violation'][data-active] {
+  stroke-width: 1.9;
+}
+
+.graph-edge[data-dim] {
+  opacity: 0.15;
+}
+
+.graph-edge[data-tone='violation'][data-dim] {
+  opacity: 0.12;
+}
+
+.graph-node {
+  cursor: pointer;
+  outline: none;
+  transition: opacity 200ms ease;
+}
+
+.graph-node[data-dim] {
+  opacity: 0.3;
+}
+
+.graph-node-box {
+  fill: var(--color-primitree-surface);
+  stroke: var(--color-primitree-border-strong);
+  stroke-width: 1;
+  transition: stroke 150ms ease;
+}
+
+.graph-node-hit {
+  fill: transparent;
+  stroke: none;
+}
+
+.graph-node[data-emphasis='chain'] .graph-node-box,
+.graph-node[data-emphasis='governed'] .graph-node-box {
+  stroke: var(--color-primitree-accent);
+}
+
+.graph-node[data-flag='changed'] .graph-node-box {
+  stroke: var(--color-primitree-warn);
+}
+
+.graph-node[data-flag='added'] .graph-node-box {
+  stroke: var(--color-primitree-accent);
+}
+
+.graph-node[data-flag='violation'] .graph-node-box {
+  stroke: var(--color-primitree-error);
+}
+
+.graph-node[data-selected] .graph-node-box {
+  stroke-width: 2;
+}
+
+.graph-node[data-selected]:not([data-flag]):not([data-emphasis])
+  .graph-node-box {
+  stroke: var(--color-primitree-accent);
+}
+
+.graph-node:focus-visible .graph-node-box {
+  stroke: var(--color-primitree-text);
+  stroke-width: 2;
+}
+
+.graph-node-swatch {
+  stroke: none;
+}
+
+.graph-node-swatch[data-outline] {
+  stroke: rgba(128, 128, 128, 0.5);
+  stroke-width: 0.5;
+}
+
+.graph-node-label {
   font-family: var(--font-mono);
-  font-size: 13px;
-  font-weight: 650;
+  font-size: 12.5px;
+  fill: var(--color-primitree-text);
 }
 
-.canopy-verdict p.is-blocked {
-  color: var(--color-primitree-error);
+.graph-node-value {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  fill: var(--color-primitree-muted);
 }
 
-.canopy-verdict:has(.is-blocked) {
-  border-left-color: var(--color-primitree-error);
+.graph-node-value[data-tone='violation'] {
+  fill: var(--color-primitree-error);
 }
 
-.canopy-verdict small {
-  display: block;
-  margin-top: 8px;
-  color: var(--color-primitree-muted);
-  font-size: 12px;
-  line-height: 1.5;
+.graph-violation-tag {
+  transition: opacity 200ms ease;
 }
 
-.canopy-owner {
+.graph-violation-tag[data-dim] {
+  opacity: 0.12;
+}
+
+.graph-violation-tag rect {
+  fill: var(--color-primitree-bg);
+  stroke: var(--color-primitree-error);
+  stroke-width: 1;
+}
+
+.graph-violation-tag text {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  fill: var(--color-primitree-error);
+}
+
+/* ---------- verdict bar ---------- */
+.proof-verdict-bar {
   display: flex;
-  min-height: 44px;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin: 20px 0 0;
+  gap: 18px;
+  min-height: 52px;
   border-top: 1px solid var(--color-primitree-border);
-  padding-top: 12px;
-  color: var(--color-primitree-dim);
-  font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 13.5px;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  transition: background-color 250ms ease;
 }
 
-.canopy-owner code {
-  color: var(--color-primitree-text);
-  font-family: inherit;
+.proof-verdict-bar[data-tone='pass'] {
+  background: var(--color-primitree-tint-pass);
 }
 
-.canopy-path-list,
-.canopy-output-list {
-  margin: 28px 0 0;
-  padding: 0;
-  list-style: none;
+.proof-verdict-bar[data-tone='fail'] {
+  background: var(--color-primitree-tint-fail);
 }
 
-.canopy-path-list li {
-  padding: 13px 0;
-  border-bottom: 1px solid var(--color-primitree-border);
-  color: var(--color-primitree-muted);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
+.proof-checking-label {
+  font-weight: 600;
+  color: var(--color-primitree-text);
+  white-space: nowrap;
 }
 
-.canopy-output-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.proof-checking-label .proof-cursor {
+  color: inherit;
 }
 
-.canopy-output-list li {
-  border-left: 1px solid var(--color-primitree-accent);
-  padding: 5px 10px;
+.proof-checking-sub {
   color: var(--color-primitree-muted);
-  font-family: var(--font-mono);
-  font-size: 11px;
+  white-space: nowrap;
 }
 
-.canopy-stage-track {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+.proof-verdict {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 18px;
   margin: 0;
-  border-bottom: 1px solid var(--color-primitree-border);
-  padding: 0;
-  list-style: none;
+  white-space: nowrap;
 }
 
-.canopy-stage-track > li {
-  min-width: 0;
-  padding: 18px;
-  border-right: 1px solid var(--color-primitree-border);
+.proof-swap {
+  animation: proof-rise 240ms var(--ease-out-expo);
 }
 
-.canopy-stage-track > li:last-child {
-  border-right: 0;
+.proof-verdict .proof-swap {
+  display: flex;
+  align-items: center;
+  gap: 18px;
 }
 
-.canopy-stage-track strong {
-  color: var(--color-primitree-text);
-  font-family: var(--font-mono);
-  font-size: 11px;
+.proof-verdict-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  padding: 4px 12px;
+  background: var(--color-primitree-accent);
+  color: var(--color-primitree-accent-ink);
+  font-size: 12.5px;
   font-weight: 600;
+  letter-spacing: 0.04em;
 }
 
-.canopy-stage-track p {
-  margin: 7px 0 0;
-  color: var(--color-primitree-dim);
-  font-size: 12px;
-  line-height: 1.5;
+.proof-verdict[data-tone='fail'] .proof-verdict-chip {
+  background: var(--color-primitree-error);
 }
 
-/* ---------- consequence narrative ---------- */
-.governance-consequences,
-.governance-quickstart,
-.governance-final {
-  border-top: 1px solid var(--color-primitree-border);
+.proof-findings {
+  font-weight: 600;
+  color: var(--color-primitree-text);
 }
 
-.governance-consequences {
-  padding: clamp(100px, 13vw, 176px) 0;
+.proof-divider {
+  flex: none;
+  width: 1px;
+  height: 18px;
+  background: var(--color-primitree-border-strong);
 }
 
-.governance-argument {
-  display: grid;
-  gap: clamp(60px, 9vw, 120px);
+@keyframes proof-rise {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.governance-argument-intro h2,
-.governance-proof-copy h2,
-.governance-final h2 {
+.proof-detail {
+  flex: 1;
+  min-width: 0;
   margin: 0;
   color: var(--color-primitree-text);
-  font-size: clamp(2.25rem, 5vw, 4.5rem);
-  font-weight: 540;
-  letter-spacing: -0.04em;
-  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.governance-argument-intro p,
-.governance-proof-copy > p,
-.governance-final-inner > p {
-  max-width: 520px;
-  margin: 24px 0 0;
+.proof-hint,
+.proof-count {
+  flex: none;
+  margin: 0;
+  font-size: 12.5px;
   color: var(--color-primitree-muted);
-  font-size: 16px;
-  line-height: 1.65;
+  white-space: nowrap;
 }
 
-.governance-argument-flow {
-  position: relative;
-  display: grid;
-  gap: 48px;
-  max-width: 700px;
-  padding-left: 32px;
+.proof-attribution {
+  max-width: 62ch;
+  margin: 20px 0 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-primitree-muted);
+  text-wrap: pretty;
 }
 
-.governance-argument-flow::before {
-  position: absolute;
-  top: 8px;
-  bottom: 8px;
-  left: 0;
-  width: 1px;
-  background: var(--color-primitree-accent);
-  content: '';
+.governance-proof-section {
+  padding-bottom: clamp(40px, 5vw, 64px);
 }
 
-.governance-argument-flow article {
-  position: relative;
+/* ---------- before and after ---------- */
+.governance-compare {
+  border-bottom: 1px solid var(--color-primitree-border);
 }
 
-.governance-argument-flow article::before {
-  position: absolute;
-  top: 7px;
-  left: -36px;
-  width: 9px;
-  height: 9px;
-  border: 2px solid var(--color-primitree-bg);
-  border-radius: 50%;
-  background: var(--color-primitree-accent);
-  content: '';
+.governance-compare-grid {
+  display: grid;
 }
 
-.governance-argument-flow h3 {
-  margin: 0;
+.governance-compare-cell {
+  min-width: 0;
+  padding-block: 56px;
+}
+
+@media (min-width: 1024px) {
+  .governance-compare-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .governance-compare-cell:first-child {
+    border-right: 1px solid var(--color-primitree-border);
+    padding-right: 48px;
+  }
+
+  .governance-compare-cell + .governance-compare-cell {
+    padding-left: 48px;
+  }
+}
+
+.governance-compare-cell h3 {
+  margin: 12px 0 0;
   color: var(--color-primitree-text);
-  font-size: 20px;
-  font-weight: 560;
-  letter-spacing: -0.02em;
+  font-size: 19px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
-.governance-argument-flow p {
-  max-width: 600px;
+.governance-compare-copy {
+  max-width: 42ch;
   margin: 12px 0 0;
-  color: var(--color-primitree-muted);
-  font-size: 16px;
+  color: var(--color-primitree-text);
+  font-size: 14.5px;
   line-height: 1.65;
+  text-wrap: pretty;
 }
 
-/* ---------- real config proof ---------- */
-.governance-quickstart {
-  padding: clamp(96px, 12vw, 160px) 0;
-  background: var(--color-primitree-surface);
+.governance-reach {
+  margin: 16px 0 0;
+  font-size: 12.5px;
+  color: var(--color-primitree-muted);
 }
 
-.governance-proof {
-  display: grid;
-  gap: clamp(48px, 8vw, 112px);
-  align-items: start;
+.governance-reach [data-tone='fail'] {
+  color: var(--color-primitree-error);
 }
 
-.governance-text-link {
-  display: inline-flex;
-  min-width: 44px;
-  min-height: 44px;
-  align-items: center;
-  gap: 8px;
-  margin-top: 28px;
+.governance-reach [data-tone='pass'] {
   color: var(--color-primitree-accent);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  text-decoration: none;
 }
 
-.governance-code-proof {
-  min-width: 0;
-  border-left: 1px solid var(--color-primitree-accent);
-  background: var(--color-primitree-bg);
+/* ---------- terminal cards ---------- */
+.terminal {
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 12px;
+  background: var(--color-primitree-surface);
+  overflow: hidden;
 }
 
-.governance-code-block {
-  padding: 22px 24px;
+.governance-compare .terminal {
+  margin-top: 22px;
 }
 
-.governance-code-block > p {
-  margin: 0 0 22px;
-  color: var(--color-primitree-dim);
-  font-family: var(--font-mono);
+.terminal-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
   font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primitree-muted);
+  border-bottom: 1px solid var(--color-primitree-border);
+  padding: 9px 14px;
+}
+
+.terminal-title[data-style='report'] {
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+  padding: 10px 16px;
+}
+
+.terminal-dot {
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-primitree-accent);
 }
 
-.governance-code-block pre {
+.terminal pre {
   margin: 0;
+  padding: 14px;
   overflow-x: auto;
-  color: var(--color-primitree-muted);
+}
+
+.terminal-lines {
+  padding: 14px;
   font-family: var(--font-mono);
   font-size: 12px;
+  line-height: 1.8;
+  color: var(--color-primitree-text);
+  overflow-x: auto;
+}
+
+.terminal[data-density='report'] .terminal-lines {
+  padding: 18px 20px;
+  font-size: 12.5px;
   line-height: 1.75;
-  scrollbar-width: thin;
 }
 
-.governance-command-row {
-  display: flex;
-  min-height: 54px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  border-top: 1px solid var(--color-primitree-border-strong);
-  padding: 10px 18px 10px 24px;
+.terminal-lines div {
+  white-space: pre;
 }
 
-.governance-command-row code,
-.governance-command-row span {
-  font-family: var(--font-mono);
-  font-size: 11px;
+.terminal-lines [data-line='removed'] {
+  color: var(--color-primitree-error);
 }
 
-.governance-command-row code {
-  overflow: hidden;
+.terminal-lines [data-line='added'] {
+  color: var(--color-primitree-accent);
+}
+
+.terminal-lines [data-line='dim'] {
+  color: var(--color-primitree-muted);
+}
+
+.terminal-lines [data-gap] {
+  margin-top: 8px;
+}
+
+.terminal-lines [data-gap='block'] {
+  margin-top: 12px;
+}
+
+.terminal[data-density='report'] pre {
+  padding: 18px 20px;
+}
+
+.terminal code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.8;
   color: var(--color-primitree-text);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: pre;
 }
 
-.governance-command-row span {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 6px;
+.terminal[data-density='report'] code {
+  font-size: 12.5px;
+  line-height: 1.75;
+}
+
+.terminal code [data-line='removed'] {
+  color: var(--color-primitree-error);
+}
+
+.terminal code [data-line='added'] {
   color: var(--color-primitree-accent);
-  font-weight: 650;
 }
 
-/* ---------- final invitation ---------- */
-.governance-final {
-  padding: clamp(100px, 13vw, 176px) 0;
+.terminal code [data-line='dim'],
+.governance-step code [data-line='dim'] {
+  color: var(--color-primitree-muted);
 }
 
-.governance-final-inner {
-  max-width: 900px;
+/* ---------- diff feature ---------- */
+.governance-diff-section {
+  border-bottom: 1px solid var(--color-primitree-border);
 }
 
-@media (min-width: 720px) {
-  .governance-wrap {
-    width: min(1280px, calc(100% - 64px));
-  }
+.governance-diff-grid {
+  display: grid;
+  gap: 64px;
+  align-items: start;
+  padding-block: 84px;
+}
 
-  .governance-hero-copy,
-  .governance-argument,
-  .governance-proof {
-    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
+@media (min-width: 1024px) {
+  .governance-diff-grid {
+    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
   }
 }
 
-@media (min-width: 900px) {
-  .canopy-visual-grid {
-    grid-template-columns: minmax(0, 1fr) 330px;
-  }
+.governance-diff-grid .section-intro {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0;
+}
 
-  .canopy-evidence {
-    border-top: 0;
-    border-left: 1px solid var(--color-primitree-border-strong);
-  }
+.section-intro h2 {
+  margin: 14px 0 0;
+  font-size: 34px;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  color: var(--color-primitree-text);
+  text-wrap: balance;
+}
 
-  .canopy-panel {
-    min-height: 520px;
-  }
+.section-intro > p:last-of-type {
+  margin: 16px 0 0;
+  max-width: 40ch;
+  font-size: 14.5px;
+  line-height: 1.65;
+  color: var(--color-primitree-muted);
+  text-wrap: pretty;
 }
 
-@media (min-width: 1200px) and (min-height: 900px) {
-  .canopy-root {
-    display: grid;
-    min-height: 230vh;
-    grid-template-columns: 164px minmax(0, 1fr);
-    gap: 24px;
-  }
+.governance-text-link {
+  display: inline-flex;
+  min-width: 44px;
+  min-height: 44px;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  color: var(--color-primitree-accent);
+  font-size: 13.5px;
+  font-weight: 500;
+  text-decoration: none;
+}
 
-  .canopy-sticky {
-    position: sticky;
-    top: 88px;
-    grid-column: 2;
-    grid-row: 1;
-    align-self: start;
+@media (hover: hover) {
+  .governance-text-link:hover {
+    color: var(--color-primitree-accent-soft);
   }
+}
 
-  .canopy-stage-track {
-    display: block;
-    grid-column: 1;
-    grid-row: 1;
-    border: 0;
-    padding-top: 18vh;
-  }
+/* ---------- quickstart ---------- */
+.governance-quickstart {
+  padding-block: 64px 72px;
+}
 
-  .canopy-stage-track > li {
-    display: flex;
-    min-height: 50vh;
-    flex-direction: column;
-    justify-content: center;
-    border: 0;
-    border-left: 2px solid var(--color-primitree-border-strong);
-    padding: 0 0 0 16px;
-    transition: border-color 220ms ease;
-  }
+.governance-quickstart .section-intro {
+  margin: 0;
+}
 
-  .canopy-root[data-stage='source']
-    .canopy-stage-track
-    [data-canopy-stage='source'],
-  .canopy-root[data-stage='resolve']
-    .canopy-stage-track
-    [data-canopy-stage='resolve'],
-  .canopy-root[data-stage='govern']
-    .canopy-stage-track
-    [data-canopy-stage='govern'],
-  .canopy-root[data-stage='ship']
-    .canopy-stage-track
-    [data-canopy-stage='ship'] {
-    border-left-color: var(--color-primitree-accent);
-  }
+.governance-quickstart .section-intro > p:last-of-type {
+  margin: 14px 0 0;
+  max-width: 52ch;
 }
 
-@media (max-width: 719px) {
-  .governance-hero-copy::after {
-    width: 45%;
-  }
+.governance-steps {
+  display: grid;
+  gap: 20px;
+  margin-top: 32px;
+}
 
-  .governance-actions {
-    align-items: stretch;
+@media (min-width: 900px) {
+  .governance-steps {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+}
 
-  .governance-cta {
-    flex: 1 1 100%;
-  }
+.governance-step {
+  min-width: 0;
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 12px;
+  background: var(--color-primitree-surface);
+  padding: 18px 20px;
+}
 
-  .canopy-frame-header {
-    align-items: flex-start;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    padding-block: 12px;
-  }
+.governance-step-title {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primitree-muted);
+}
 
-  .canopy-svg {
-    display: none;
-  }
+.governance-step pre {
+  margin: 12px 0 0;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
 
-  .canopy-mobile-graph {
-    position: relative;
-    display: grid;
-    width: 100%;
-    gap: 22px;
-    padding: 28px 18px 34px;
-  }
+.governance-step code {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  line-height: 1.8;
+  color: var(--color-primitree-text);
+  white-space: pre;
+}
 
-  .canopy-mobile-graph::before {
-    position: absolute;
-    top: 28px;
-    bottom: 76px;
-    left: 50%;
-    width: 1px;
-    background: var(--color-primitree-accent);
-    content: '';
-  }
+/* ---------- standards strip ---------- */
+.governance-facts-section {
+  border-top: 1px solid var(--color-primitree-border);
+}
 
-  .canopy-mobile-node {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    min-width: 0;
-    gap: 6px;
-    border: 1px solid var(--color-primitree-border-strong);
-    border-left: 2px solid var(--color-primitree-accent);
-    padding: 12px 14px;
-    background: var(--color-primitree-surface);
-    color: var(--color-primitree-muted);
-    font-family: var(--font-mono);
-    font-size: 12px;
-    line-height: 1.45;
-  }
+.governance-facts {
+  display: grid;
+  gap: 40px;
+  padding-block: 44px;
+}
 
-  .canopy-mobile-node span {
-    color: var(--color-primitree-dim);
-    font-size: inherit;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
+@media (min-width: 720px) {
+  .governance-facts {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+}
 
-  .canopy-mobile-node code {
-    min-width: 0;
-    color: inherit;
-    font: inherit;
-    overflow-wrap: anywhere;
-  }
+.governance-facts p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-primitree-text);
+}
 
-  .canopy-mobile-node-token {
-    border-color: var(--color-primitree-accent);
-    color: var(--color-primitree-text);
-  }
+.governance-facts p span {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primitree-muted);
+}
 
-  .canopy-mobile-node-source {
-    background: var(--color-primitree-accent-wash);
-  }
+/* ---------- closing invitation ---------- */
+.governance-final {
+  border-top: 1px solid var(--color-primitree-border);
+  text-align: center;
+}
+
+.governance-final-inner {
+  max-width: 720px;
+  margin-inline: auto;
+  padding-block: 88px;
+}
+
+.governance-final h2 {
+  margin: 0;
+  color: var(--color-primitree-text);
+  font-size: 40px;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1.06;
+}
+
+.governance-final-inner > p {
+  max-width: 44ch;
+  margin: 16px auto 0;
+  color: var(--color-primitree-muted);
+  font-size: 14.5px;
+  line-height: 1.65;
+  text-wrap: pretty;
+}
+
+.governance-final .governance-actions {
+  justify-content: center;
+  margin-top: 26px;
+}
 
-  .canopy-mobile-dependents {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    gap: 8px;
-    border-left: 1px solid var(--color-primitree-accent);
-    padding-left: 14px;
+/* ---------- responsive ---------- */
+@media (max-width: 719px) {
+  .governance-wrap {
+    padding-inline: 20px;
   }
 
-  .canopy-mobile-dependents .canopy-mobile-node::before {
-    position: absolute;
-    top: 50%;
-    left: -15px;
-    width: 14px;
-    height: 1px;
-    background: var(--color-primitree-accent);
-    content: '';
+  .proof-command,
+  .proof-verdict-bar {
+    padding-inline: 20px;
   }
 
-  .canopy-mobile-logo {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    justify-items: center;
-    gap: 10px;
-    width: max-content;
-    margin-inline: auto;
-    padding: 10px 18px 0;
-    background: var(--color-primitree-bg);
-    color: var(--color-primitree-dim);
-    font-family: var(--font-mono);
-    font-size: 12px;
+  .graph-scroll {
+    padding-inline: 12px;
   }
 
-  .canopy-mobile-logo svg {
-    width: 76px;
-    height: auto;
-    fill: var(--color-primitree-text);
+  .governance-hero-inner {
+    padding-block: 48px 40px;
   }
 
-  .canopy-panel {
-    padding: 24px 18px;
+  .governance-actions {
+    align-items: stretch;
   }
 
-  .canopy-stage-track {
-    grid-template-columns: 1fr 1fr;
+  .governance-cta {
+    flex: 1 1 100%;
   }
 
-  .canopy-stage-track > li:nth-child(2) {
-    border-right: 0;
+  .proof-command > code {
+    flex: 1 1 100%;
   }
 
-  .canopy-stage-track > li:nth-child(-n + 2) {
-    border-bottom: 1px solid var(--color-primitree-border);
+  .proof-hint {
+    display: none;
   }
 
-  .canopy-stage-track strong {
-    font-size: 12px;
+  .proof-verdict-bar {
+    flex-wrap: wrap;
+    padding-block: 10px;
   }
 
-  .governance-command-row {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 8px;
+  .proof-detail {
+    flex: 1 1 100%;
+    white-space: normal;
   }
 }
 
 @media (max-width: 359px) {
   .governance-hero h1 {
-    font-size: 2.5rem;
+    font-size: 1.9rem;
   }
 }
 
@@ -1176,66 +1455,33 @@ body {
   .site-footer-link:hover,
   .mobile-nav a:hover,
   .site-icon-control:hover {
-    color: var(--color-primitree-text) !important;
+    color: var(--color-primitree-text);
   }
 
   .site-icon-control:hover,
   .mobile-nav summary:hover,
   .btn-ghost:hover {
-    border-color: rgb(255 255 255 / 18%) !important;
-    background: rgb(255 255 255 / 3%) !important;
+    border-color: var(--color-primitree-border-strong);
+    background: var(--color-primitree-hover-wash);
   }
 
   .btn-primary:hover {
     border-color: var(--color-primitree-accent-soft);
     background: var(--color-primitree-accent-soft);
   }
-
-  .canopy-tabs button:hover {
-    color: var(--color-primitree-text);
-  }
-
-  .canopy-proposal:hover {
-    background: var(--color-primitree-raised);
-  }
-
-  .governance-text-link:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (prefers-contrast: more) {
-  .canopy-frame,
-  .canopy-evidence,
-  .canopy-tabs,
-  .canopy-proposal,
-  .canopy-source-node rect,
-  .canopy-dependent-node rect,
-  .canopy-output-node rect {
-    border-color: rgb(255 255 255 / 45%);
-    stroke: rgb(255 255 255 / 55%);
-  }
-
-  .canopy-link {
-    stroke: rgb(255 255 255 / 60%);
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
+    /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion kill switch must out-rank every animation rule by design. */
     animation-duration: 0.01ms !important;
+    /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion kill switch must out-rank every animation rule by design. */
     animation-iteration-count: 1 !important;
+    /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion kill switch must out-rank every animation rule by design. */
     scroll-behavior: auto !important;
+    /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion kill switch must out-rank every animation rule by design. */
     transition-duration: 0.01ms !important;
   }
-
-  [data-motion] {
-    animation: none !important;
-    animation-duration: 0s !important;
-    transform: none !important;
-    transition: none !important;
-  }
 }
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 3f40c3be..5c6a01be 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,16 +1,18 @@
 import { RootProvider } from 'fumadocs-ui/provider/next'
-import { Geist_Mono, Inter } from 'next/font/google'
+import { IBM_Plex_Mono, Schibsted_Grotesk } from 'next/font/google'
 import { siteMetadata } from '@/lib/discovery'
 import './global.css'
 
-const inter = Inter({
+const schibsted = Schibsted_Grotesk({
   subsets: ['latin'],
-  variable: '--font-inter',
+  weight: ['400', '500', '600'],
+  variable: '--font-schibsted',
 })
 
-const geistMono = Geist_Mono({
+const plexMono = IBM_Plex_Mono({
   subsets: ['latin'],
-  variable: '--font-geist-mono',
+  weight: ['400', '500', '600'],
+  variable: '--font-plex-mono',
 })
 
 export const metadata = siteMetadata
@@ -19,10 +21,17 @@ export default function Layout({ children }: LayoutProps<'/'>) {
   return (
     <html
       lang='en'
-      className={`${inter.variable} ${geistMono.variable}`}
+      className={`${schibsted.variable} ${plexMono.variable}`}
       suppressHydrationWarning>
       <body className='flex min-h-screen flex-col bg-primitree-bg font-sans text-primitree-text antialiased'>
-        <RootProvider>{children}</RootProvider>
+        <RootProvider
+          theme={{
+            attribute: ['class', 'data-theme'],
+            defaultTheme: 'dark',
+            enableSystem: false,
+          }}>
+          {children}
+        </RootProvider>
       </body>
     </html>
   )
diff --git a/apps/docs/components/brand-logo.tsx b/apps/docs/components/brand-logo.tsx
index 43e15705..172da44b 100644
--- a/apps/docs/components/brand-logo.tsx
+++ b/apps/docs/components/brand-logo.tsx
@@ -1,8 +1,9 @@
-import Image from 'next/image'
 import Link from 'next/link'
-import mark from '@/public/primitree-icon.svg'
 import { cn } from '@/lib/cn'
 
+const MARK_PATH =
+  'M36.76 85.34L41.7 58.07L37.3 60.88C20.85 71.1 -1.72 58.7 0.1 38.87C1.36 25.27 10.05 13.33 21.66 6.62C48.59 -8.95 89.6 3.69 94.62 36.67C97.83 57.79 76.07 71.48 58.03 60.92L53.42 58.06L58.23 85.33H36.76V85.34ZM42.44 8.69C38.52 8.99 34.65 9.87 31.04 11.39L30.99 34.53L42.45 41.4V8.69H42.44ZM52.56 8.88V19.19L64.9 12.09C64.95 11.83 64.8 11.92 64.65 11.85C61.71 10.44 57.91 9.45 54.68 8.98C54.13 8.9 53.34 8.74 52.81 8.75C52.7 8.75 52.59 8.77 52.56 8.88ZM22.44 16.59L20.22 18.25C18.14 20.3 16.03 22.37 14.54 24.91L22.44 29.42V16.58V16.59ZM52.56 41.28L80.7 24.81C79.28 22.73 77.66 20.56 75.77 18.88C75.56 18.69 74.41 17.69 74.28 17.64C74.06 17.54 73.89 17.72 73.71 17.81L52.72 30.33L52.57 41.28H52.56ZM10.35 32.88C9.18 37.97 8.35 43.02 11.07 47.77C14.73 54.18 22.78 56.77 29.67 54.35C32.54 53.34 35.47 51.47 37.63 49.35L10.36 32.87L10.35 32.88ZM84.46 32.89L57.62 49.48C63.17 55.44 71.96 57.46 79.08 52.93C85.1 49.1 86.82 43.04 85.45 36.21C85.38 35.86 84.63 32.88 84.46 32.88V32.89Z'
+
 const markSizes = {
   sm: 'h-[20px] w-[22px]',
   md: 'h-[24px] w-[27px]',
@@ -11,12 +12,26 @@ const markSizes = {
 } as const
 
 const textSizes = {
-  sm: 'text-base',
-  md: 'text-lg',
+  sm: 'text-sm',
+  md: 'text-[15px]',
   lg: 'text-2xl sm:text-[28px]',
   xl: 'text-3xl sm:text-4xl md:text-[44px]',
 } as const
 
+export function BrandMark({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox='0 0 95 86'
+      aria-hidden='true'
+      className={cn('pointer-events-none shrink-0', className)}>
+      <path
+        className='brand-mark-body'
+        d={MARK_PATH}
+      />
+    </svg>
+  )
+}
+
 export function BrandLogo({
   size = 'md',
   linked = false,
@@ -28,13 +43,8 @@ export function BrandLogo({
 }) {
   const inner = (
     <>
-      <Image
-        src={mark}
-        alt=''
-        className={cn('pointer-events-none shrink-0', markSizes[size])}
-        priority
-      />
-      <span className={cn('font-semibold tracking-tight', textSizes[size])}>
+      <BrandMark className={markSizes[size]} />
+      <span className={cn('font-semibold tracking-[-0.01em]', textSizes[size])}>
         Primitree
       </span>
     </>
@@ -45,7 +55,7 @@ export function BrandLogo({
       <Link
         href='/'
         className={cn(
-          'brand-logo-link inline-flex items-center gap-2 transition-opacity',
+          'brand-logo-link inline-flex items-center gap-2.5 transition-opacity',
           className
         )}>
         {inner}
@@ -54,7 +64,7 @@ export function BrandLogo({
   }
 
   return (
-    <span className={cn('inline-flex items-center gap-2', className)}>
+    <span className={cn('inline-flex items-center gap-2.5', className)}>
       {inner}
     </span>
   )
diff --git a/apps/docs/components/landing/governance-home.tsx b/apps/docs/components/landing/governance-home.tsx
index 7ce9e5e4..44c85529 100644
--- a/apps/docs/components/landing/governance-home.tsx
+++ b/apps/docs/components/landing/governance-home.tsx
@@ -1,182 +1,386 @@
 import Link from 'next/link'
-import { ArrowRight, Check } from 'lucide-react'
-import { LivingCanopy } from '@/components/landing/living-canopy'
-import { createGovernanceDemo } from '@/lib/landing/governance-demo'
+import { ArrowRightIcon } from '@phosphor-icons/react/dist/ssr'
+import { InstallCard } from '@/components/landing/install-card'
+import { ProofPanel } from '@/components/landing/proof-panel'
+import {
+  createGovernanceDemo,
+  createProposalDeck,
+  describeLayersSnippet,
+} from '@/lib/landing/governance-demo'
+import { readPrimitreeVersion } from '@/lib/landing/release'
+
+/** Renders the diff transcript with the design's per-line color roles and
+ * block spacing. */
+function DiffReportLines({ lines }: { lines: readonly string[] }) {
+  let firstChangeSeen = false
+  const seen = new Map<string, number>()
+  return (
+    <div className='terminal-lines'>
+      {lines.map(line => {
+        if (line === '') {
+          return null
+        }
+        const occurrence = (seen.get(line) ?? 0) + 1
+        seen.set(line, occurrence)
+        const key = `${line}#${occurrence}`
+        if (line.startsWith('$ ')) {
+          return (
+            <div key={key}>
+              <span className='mark-acc'>$</span> {line.slice(2)}
+            </div>
+          )
+        }
+        const foundMatch = line.match(/^Diff found (\d+) token changes\.$/u)
+        if (foundMatch !== null) {
+          return (
+            <div
+              key={key}
+              data-gap='block'>
+              Diff found <span className='mark-acc'>{foundMatch[1]}</span> token
+              changes.
+            </div>
+          )
+        }
+        if (line.startsWith('  Affected tokens')) {
+          return (
+            <div
+              key={key}
+              data-line='dim'>
+              {line}
+            </div>
+          )
+        }
+        if (line.startsWith('removed ')) {
+          return (
+            <div
+              key={key}
+              data-line='removed'>
+              {line}
+            </div>
+          )
+        }
+        if (line.startsWith('added ')) {
+          return (
+            <div
+              key={key}
+              data-line='added'>
+              {line}
+            </div>
+          )
+        }
+        if (line.startsWith('New findings:')) {
+          return (
+            <div
+              key={key}
+              data-gap='block'>
+              {line}
+            </div>
+          )
+        }
+        const isFirstChange = !firstChangeSeen && line.startsWith('changed ')
+        if (isFirstChange) {
+          firstChangeSeen = true
+        }
+        return (
+          <div
+            key={key}
+            data-gap={isFirstChange ? 'block' : undefined}>
+            {line}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
 
 export function GovernanceHome() {
   const demo = createGovernanceDemo()
+  const deck = createProposalDeck()
+  const layersSnippet = describeLayersSnippet()
+  const [snippetComment, ...snippetRest] = layersSnippet.split('\n')
+  const snippetCode = snippetRest.join('\n')
+  const version = readPrimitreeVersion()
+  const consumerCount = deck.renameImpact.consumers.length
 
   return (
     <div className='governance-home'>
       <section className='governance-hero'>
-        <div className='governance-wrap'>
-          <div className='governance-hero-copy'>
-            <h1 aria-label='Govern token change. Know every consequence.'>
+        <div className='governance-wrap governance-hero-inner'>
+          <div className='governance-hero-copy-stack'>
+            <h1 aria-label='Govern token change. Know what it reaches before it merges.'>
               <span>Govern token change.</span>
-              <span>Know every consequence.</span>
+              <span>Know what it reaches before it merges.</span>
             </h1>
-            <div className='governance-hero-support'>
-              <p>
-                Turn a token edit into reviewable evidence: what it resolves to,
-                which components depend on it, who owns it, and whether the
-                configured policy allows the change to ship.
-              </p>
-              <div className='governance-actions'>
-                <Link
-                  href='/docs/getting-started'
-                  className='btn-primary governance-cta'>
-                  Run the quickstart
-                  <ArrowRight
-                    aria-hidden='true'
-                    size={16}
-                    strokeWidth={1.8}
-                  />
-                </Link>
-                <Link
-                  href='/playground'
-                  className='btn-ghost governance-cta'>
-                  Open the playground
-                </Link>
-              </div>
+            <p className='governance-hero-lede'>
+              Primitree checks each change to a token source against the layer
+              and ownership rules in your config, shows the components the
+              change reaches, and builds files when the graph passes.
+            </p>
+            <div className='governance-actions'>
+              <Link
+                href='/docs/getting-started'
+                className='btn-primary governance-cta'>
+                Run the quickstart
+                <ArrowRightIcon
+                  aria-hidden='true'
+                  size={15}
+                  weight='bold'
+                />
+              </Link>
+              <Link
+                href='/playground'
+                className='btn-ghost governance-cta'>
+                Open the playground
+              </Link>
             </div>
           </div>
-          <LivingCanopy demo={demo} />
+          <div className='governance-hero-card'>
+            <InstallCard
+              tokenCount={demo.tokenCount}
+              layerCount={demo.layerCount}
+              findings={demo.compliant.findings}
+              outputs={demo.outputs}
+            />
+          </div>
         </div>
       </section>
 
-      <section className='governance-consequences'>
-        <div className='governance-wrap governance-argument'>
-          <div className='governance-argument-intro'>
-            <h2>One graph. Every consequence.</h2>
-            <p>
-              Primitree makes the relationship between source, policy, impact,
-              and output explicit before a token reaches product code.
+      <section
+        className='governance-proof-section'
+        aria-labelledby='proof-heading'>
+        <h2
+          id='proof-heading'
+          className='sr-only'>
+          Try a change against the policy.
+        </h2>
+        <ProofPanel
+          demo={demo}
+          deck={deck}
+        />
+        <div className='governance-wrap'>
+          <p className='proof-attribution'>
+            Each verdict, consumer list, and count comes from @primitree/core at
+            this site&apos;s build time, through the same functions the CLI
+            calls.
+          </p>
+        </div>
+      </section>
+
+      <section className='governance-compare'>
+        <div className='governance-wrap governance-compare-grid'>
+          <div className='governance-compare-cell'>
+            <p className='section-kicker'>Before</p>
+            <h3>Review by eyeball</h3>
+            <p className='governance-compare-copy'>
+              A rename lands in tokens.json. Someone scans the PR, approves, and
+              finds out in production which components it reached.
             </p>
+            <p className='governance-reach'>
+              what it reaches: <span data-tone='fail'>unknown</span>
+            </p>
+            <div className='terminal'>
+              <p className='terminal-title'>tokens.json · pull request</p>
+              <div className='terminal-lines'>
+                <div data-line='removed'>
+                  {'- "bg.brand": { "$value": "{blue.500}" }'}
+                </div>
+                <div data-line='added'>
+                  {'+ "bg.primary": { "$value": "{blue.500}" }'}
+                </div>
+                <div
+                  data-line='dim'
+                  data-gap=''>
+                  Approved · merged · consumers unknown
+                </div>
+              </div>
+            </div>
           </div>
-          <div className='governance-argument-flow'>
-            <article>
-              <h3>Govern the proposal</h3>
-              <p>
-                Encode allowed layers, references, and owners as policy. A
-                proposal either passes with evidence or stops with the exact
-                rule it crossed.
-              </p>
-            </article>
-            <article>
-              <h3>Trace the blast radius</h3>
-              <p>
-                Follow resolved aliases and direct dependents through the same
-                graph. Reviewers see what changed and which consumers inherit
-                it.
-              </p>
-            </article>
-            <article>
-              <h3>Ship one contract</h3>
-              <p>
-                After the graph passes, one configured build emits the selected
-                DTCG, CSS, Tailwind, and TypeScript files from the same resolved
-                values.
-              </p>
-            </article>
+          <div className='governance-compare-cell'>
+            <p
+              className='section-kicker'
+              data-tone='accent'>
+              After
+            </p>
+            <h3>Review by graph</h3>
+            <p className='governance-compare-copy'>
+              The same rename arrives as five changes with three named
+              consumers. A reference left pointing at the old name blocks the
+              build before merge.
+            </p>
+            <p className='governance-reach'>
+              what it reaches:{' '}
+              <span data-tone='pass'>{consumerCount} components, named</span>
+            </p>
+            <div className='terminal'>
+              <p className='terminal-title'>primitree diff · same change</p>
+              <div className='terminal-lines'>
+                <div data-line='removed'>
+                  removed {deck.renameImpact.removedPath}
+                </div>
+                <div data-line='added'>added {deck.renameImpact.addedPath}</div>
+                <div>{`→ ${deck.renameImpact.consumers.join(' · ')}`}</div>
+                <div
+                  data-line='dim'
+                  data-gap=''>
+                  merge waits until the {consumerCount} refs update
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
-      <section className='governance-quickstart'>
-        <div className='governance-wrap governance-proof'>
-          <div className='governance-proof-copy'>
-            <h2>Rules close to the tokens.</h2>
+      <section className='governance-diff-section'>
+        <div className='governance-wrap governance-diff-grid'>
+          <div className='section-intro'>
+            <p
+              className='section-kicker'
+              data-tone='accent'>
+              Change review
+            </p>
+            <h2>See what a rename touches.</h2>
             <p>
-              Define architecture and ownership beside the source. Check the
-              exact graph in development and CI before generating files.
+              primitree diff reads two revisions of a source through the graph
+              and pairs each change with the components that reference it. One
+              rename shows up as five changes.
             </p>
             <Link
-              href='/docs/cli/check'
+              href='/docs/cli/diff'
               className='governance-text-link'>
-              Read the check command
-              <ArrowRight
+              Read the diff command
+              <ArrowRightIcon
                 aria-hidden='true'
-                size={15}
+                size={14}
+                weight='bold'
               />
             </Link>
           </div>
-          <div className='governance-code-proof'>
-            <div className='governance-code-block'>
-              <p>primitree.config.ts</p>
+          <div
+            className='terminal'
+            data-density='report'>
+            <p
+              className='terminal-title'
+              data-style='report'>
+              <span
+                className='terminal-dot'
+                aria-hidden='true'
+              />
+              Diff report · brand source
+            </p>
+            <DiffReportLines lines={deck.diffReport} />
+          </div>
+        </div>
+      </section>
+
+      <section className='governance-quickstart'>
+        <div className='governance-wrap'>
+          <div className='section-intro'>
+            <p
+              className='section-kicker'
+              data-tone='accent'>
+              Quickstart
+            </p>
+            <h2>First report in two minutes.</h2>
+            <p>
+              No service and no account. A config file next to your tokens, one
+              command locally or in CI.
+            </p>
+          </div>
+          <div className='governance-steps'>
+            <article className='governance-step'>
+              <p className='governance-step-title'>Step 01 · Install</p>
               <pre>
-                <code>{`export default {
-  schemaVersion: 1,
-  sources: {
-    brand: {
-      type: 'dtcg',
-      file: './tokens.json',
-      architecture: { layers: [
-        {
-          id: 'primitives',
-          roots: ['primitives'],
-          values: 'literal'
-        },
-        {
-          id: 'semantic',
-          roots: ['semantic'],
-          values: 'reference',
-          references: ['primitives']
-        },
-        {
-          id: 'component',
-          roots: ['component'],
-          values: 'reference',
-          references: ['semantic']
-        }
-      ] },
-      ownership: {
-        default: ['design-systems'],
-        paths: { semantic: ['product-design'] }
-      },
-      outputs: {
-        directory: './generated',
-        formats: ['dtcg', 'css', 'typescript', 'tailwind']
-      }
-    }
-  }
-}`}</code>
+                <code>
+                  <span className='mark-acc'>$</span> npm install -D
+                  primitree@next
+                  {'\n'}
+                  <span data-line='dim'>+ primitree@{version}</span>
+                </code>
               </pre>
-            </div>
-            <div className='governance-command-row'>
-              <code>pnpm exec primitree check --source brand</code>
-              <span>
-                <Check
-                  aria-hidden='true'
-                  size={14}
-                />
-                PASS
-              </span>
-            </div>
+            </article>
+            <article className='governance-step'>
+              <p className='governance-step-title'>
+                Step 02 · Describe your layers
+              </p>
+              <pre>
+                <code>
+                  <span data-line='dim'>{snippetComment}</span>
+                  {'\n'}
+                  {snippetCode}
+                </code>
+              </pre>
+            </article>
+            <article className='governance-step'>
+              <p className='governance-step-title'>Step 03 · Check and build</p>
+              <pre>
+                <code>
+                  <span className='mark-acc'>$</span> primitree check --source
+                  brand
+                  {'\n'}
+                  <span data-line='dim'>
+                    <span className='mark-acc'>✓</span> policy passed ·{' '}
+                    {demo.compliant.findings} findings
+                  </span>
+                  {'\n'}
+                  <span className='mark-acc'>$</span> primitree build --source
+                  brand
+                  {'\n'}
+                  <span data-line='dim'>
+                    → wrote dtcg ·{' '}
+                    {demo.outputs
+                      .map(label =>
+                        label === 'TypeScript' ? 'ts' : label.toLowerCase()
+                      )
+                      .join(' · ')}
+                  </span>
+                </code>
+              </pre>
+            </article>
           </div>
         </div>
       </section>
 
+      <section className='governance-facts-section'>
+        <div className='governance-wrap governance-facts'>
+          <p>
+            <span>Standard</span>
+            DTCG Format Module 2025.10 output. Resolver contexts in
+            tokens.resolver.json. Extensions under
+            $extensions[&quot;com.primitree&quot;].
+          </p>
+          <p>
+            <span>Outputs</span>
+            DTCG · CSS · Tailwind · TypeScript, from one resolved graph.
+          </p>
+          <p>
+            <span>Sources</span>
+            Local DTCG files · Figma variables export · Variables REST API.
+          </p>
+        </div>
+      </section>
+
       <section className='governance-final'>
         <div className='governance-wrap governance-final-inner'>
-          <h2>Make token change legible.</h2>
+          <h2>Your next token change, reviewed.</h2>
           <p>
-            Start with one source, one policy, and evidence your team can
-            review.
+            Point primitree at a tokens.json, write three layer rules, and read
+            the first report.
           </p>
           <div className='governance-actions'>
             <Link
               href='/docs/getting-started'
               className='btn-primary governance-cta'>
               Start with the docs
-              <ArrowRight
+              <ArrowRightIcon
                 aria-hidden='true'
-                size={16}
+                size={15}
+                weight='bold'
               />
             </Link>
             <Link
-              href='/docs'
+              href='/playground'
               className='btn-ghost governance-cta'>
-              Browse the docs
+              Open the playground
             </Link>
           </div>
         </div>
diff --git a/apps/docs/components/landing/install-card.tsx b/apps/docs/components/landing/install-card.tsx
new file mode 100644
index 00000000..ed34cf0e
--- /dev/null
+++ b/apps/docs/components/landing/install-card.tsx
@@ -0,0 +1,142 @@
+'use client'
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from 'react'
+
+const PACKAGE_MANAGERS = [
+  { id: 'npm', command: 'npm install -D primitree@next' },
+  { id: 'pnpm', command: 'pnpm add -D primitree@next' },
+  { id: 'yarn', command: 'yarn add -D primitree@next' },
+  { id: 'bun', command: 'bun add -d primitree@next' },
+] as const
+
+type PackageManagerId = (typeof PACKAGE_MANAGERS)[number]['id']
+
+export function InstallCard({
+  tokenCount,
+  layerCount,
+  findings,
+  outputs,
+}: {
+  tokenCount: number
+  layerCount: number
+  findings: number
+  outputs: readonly string[]
+}) {
+  const [activeId, setActiveId] = useState<PackageManagerId>('npm')
+  const [copied, setCopied] = useState(false)
+  const copyTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  useEffect(() => {
+    return () => {
+      clearTimeout(copyTimer.current)
+    }
+  }, [])
+  const active =
+    PACKAGE_MANAGERS.find(manager => manager.id === activeId) ??
+    PACKAGE_MANAGERS[0]
+  const wroteLine = ['dtcg', ...outputs.map(label => label.toLowerCase())].join(
+    ' · '
+  )
+
+  function moveTo(index: number) {
+    const next =
+      PACKAGE_MANAGERS[
+        (index + PACKAGE_MANAGERS.length) % PACKAGE_MANAGERS.length
+      ]
+    if (next !== undefined) {
+      setActiveId(next.id)
+      document.getElementById(`install-tab-${next.id}`)?.focus()
+    }
+  }
+
+  function onTabKeyDown(
+    event: ReactKeyboardEvent<HTMLButtonElement>,
+    index: number
+  ) {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      moveTo(index + 1)
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      moveTo(index - 1)
+    } else if (event.key === 'Home') {
+      event.preventDefault()
+      moveTo(0)
+    } else if (event.key === 'End') {
+      event.preventDefault()
+      moveTo(PACKAGE_MANAGERS.length - 1)
+    }
+  }
+
+  return (
+    <div className='install-card'>
+      <div className='install-card-head'>
+        <div
+          role='radiogroup'
+          aria-label='Package manager'
+          className='install-tabs'>
+          {PACKAGE_MANAGERS.map((manager, index) => (
+            // biome-ignore lint/a11y/useSemanticElements: the design's tab row is a WAI-ARIA radio group of buttons with roving tabindex; native radio inputs cannot take this styling.
+            <button
+              key={manager.id}
+              id={`install-tab-${manager.id}`}
+              type='button'
+              role='radio'
+              aria-checked={manager.id === active.id}
+              tabIndex={manager.id === active.id ? 0 : -1}
+              onClick={() => setActiveId(manager.id)}
+              onKeyDown={event => onTabKeyDown(event, index)}>
+              {manager.id}
+            </button>
+          ))}
+        </div>
+        <span
+          className='install-shell'
+          aria-hidden='true'>
+          bash
+        </span>
+      </div>
+      <button
+        type='button'
+        className='install-copy-row'
+        aria-label={`Copy the ${active.id} install command`}
+        data-copied={copied || undefined}
+        onClick={() => {
+          navigator.clipboard
+            ?.writeText(active.command)
+            .then(() => {
+              setCopied(true)
+              clearTimeout(copyTimer.current)
+              copyTimer.current = setTimeout(() => setCopied(false), 1200)
+            })
+            .catch(() => {})
+        }}>
+        <code>
+          <span className='mark-acc'>$</span> {active.command}
+        </code>
+        <span className='install-copy-label'>{copied ? 'copied' : 'copy'}</span>
+      </button>
+      <div className='install-output'>
+        <p>
+          <span className='mark-acc'>$</span> primitree check
+        </p>
+        <p>
+          <span className='mark-acc'>✓</span> graph resolved · {tokenCount}{' '}
+          tokens · {layerCount} layers
+        </p>
+        <p>
+          <span className='mark-acc'>✓</span> policy passed · {findings}{' '}
+          findings
+        </p>
+        <p>
+          <span className='mark-acc'>$</span> primitree build
+        </p>
+        <p>→ wrote {wroteLine}</p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/docs/components/landing/living-canopy.tsx b/apps/docs/components/landing/living-canopy.tsx
deleted file mode 100644
index 99ec90d3..00000000
--- a/apps/docs/components/landing/living-canopy.tsx
+++ /dev/null
@@ -1,496 +0,0 @@
-'use client'
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type KeyboardEvent as ReactKeyboardEvent,
-} from 'react'
-import type { GovernanceDemo } from '@/lib/landing/governance-demo'
-
-const MARK_PATH =
-  'M36.76 85.34L41.7 58.07L37.3 60.88C20.85 71.1 -1.72 58.7 0.1 38.87C1.36 25.27 10.05 13.33 21.66 6.62C48.59 -8.95 89.6 3.69 94.62 36.67C97.83 57.79 76.07 71.48 58.03 60.92L53.42 58.06L58.23 85.33H36.76V85.34ZM42.44 8.69C38.52 8.99 34.65 9.87 31.04 11.39L30.99 34.53L42.45 41.4V8.69H42.44ZM52.56 8.88V19.19L64.9 12.09C64.95 11.83 64.8 11.92 64.65 11.85C61.71 10.44 57.91 9.45 54.68 8.98C54.13 8.9 53.34 8.74 52.81 8.75C52.7 8.75 52.59 8.77 52.56 8.88ZM22.44 16.59L20.22 18.25C18.14 20.3 16.03 22.37 14.54 24.91L22.44 29.42V16.58V16.59ZM52.56 41.28L80.7 24.81C79.28 22.73 77.66 20.56 75.77 18.88C75.56 18.69 74.41 17.69 74.28 17.64C74.06 17.54 73.89 17.72 73.71 17.81L52.72 30.33L52.57 41.28H52.56ZM10.35 32.88C9.18 37.97 8.35 43.02 11.07 47.77C14.73 54.18 22.78 56.77 29.67 54.35C32.54 53.34 35.47 51.47 37.63 49.35L10.36 32.87L10.35 32.88ZM84.46 32.89L57.62 49.48C63.17 55.44 71.96 57.46 79.08 52.93C85.1 49.1 86.82 43.04 85.45 36.21C85.38 35.86 84.63 32.88 84.46 32.88V32.89Z'
-
-const branches = ['govern', 'trace', 'ship'] as const
-type Branch = (typeof branches)[number]
-
-const branchLabels: Record<Branch, string> = {
-  govern: 'Govern',
-  trace: 'Trace',
-  ship: 'Ship',
-}
-
-function branchId(branch: Branch, part: 'tab' | 'panel') {
-  return `canopy-${part}-${branch}`
-}
-
-export function LivingCanopy({ demo }: { demo: GovernanceDemo }) {
-  const rootRef = useRef<HTMLElement>(null)
-  const [activeBranch, setActiveBranch] = useState<Branch>('govern')
-  const [forbiddenProposal, setForbiddenProposal] = useState(false)
-
-  useEffect(() => {
-    const root = rootRef.current
-    if (root === null) {
-      return
-    }
-
-    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
-    const supportsChoreography = window.matchMedia(
-      '(min-width: 75rem) and (min-height: 56.25rem)'
-    )
-    const sentinels = root.querySelectorAll<HTMLElement>('[data-canopy-stage]')
-    let observer: IntersectionObserver | undefined
-
-    const configureChoreography = () => {
-      observer?.disconnect()
-      observer = undefined
-
-      if (reducedMotion.matches || !supportsChoreography.matches) {
-        root.dataset.stage = 'ship'
-        return
-      }
-
-      root.dataset.stage = 'source'
-      observer = new IntersectionObserver(
-        entries => {
-          const visible = entries
-            .filter(entry => entry.isIntersecting)
-            .sort(
-              (left, right) => right.intersectionRatio - left.intersectionRatio
-            )
-            .at(0)
-          const stage = (visible?.target as HTMLElement | undefined)?.dataset
-            .canopyStage
-
-          if (stage !== undefined) {
-            root.dataset.stage = stage
-          }
-        },
-        { rootMargin: '-34% 0px -46%', threshold: [0, 0.25, 0.6] }
-      )
-      sentinels.forEach(sentinel => {
-        observer?.observe(sentinel)
-      })
-    }
-
-    configureChoreography()
-    reducedMotion.addEventListener('change', configureChoreography)
-    supportsChoreography.addEventListener('change', configureChoreography)
-
-    return () => {
-      observer?.disconnect()
-      reducedMotion.removeEventListener('change', configureChoreography)
-      supportsChoreography.removeEventListener('change', configureChoreography)
-    }
-  }, [])
-
-  function focusBranch(branch: Branch) {
-    setActiveBranch(branch)
-    document.getElementById(branchId(branch, 'tab'))?.focus()
-  }
-
-  function handleTabKeyDown(
-    event: ReactKeyboardEvent<HTMLButtonElement>,
-    current: Branch
-  ) {
-    const currentIndex = branches.indexOf(current)
-    let next: Branch | undefined
-
-    if (event.key === 'ArrowRight') {
-      next = branches[(currentIndex + 1) % branches.length]
-    } else if (event.key === 'ArrowLeft') {
-      next = branches[(currentIndex - 1 + branches.length) % branches.length]
-    } else if (event.key === 'Home') {
-      next = branches[0]
-    } else if (event.key === 'End') {
-      next = branches.at(-1)
-    }
-
-    if (next !== undefined) {
-      event.preventDefault()
-      focusBranch(next)
-    }
-  }
-
-  return (
-    <section
-      ref={rootRef}
-      className='canopy-root'
-      data-stage='source'
-      data-branch={activeBranch}>
-      <div className='canopy-sticky'>
-        <div className='canopy-frame'>
-          <div className='canopy-frame-header'>
-            <p>Living token</p>
-            <code>{demo.tokenPath}</code>
-          </div>
-
-          <div className='canopy-visual-grid'>
-            <div className='canopy-graphic'>
-              <p className='sr-only'>
-                {demo.tokenPath} references {demo.aliasTarget}, resolves to{' '}
-                {demo.resolvedValue}, belongs to {demo.owner}, and has three
-                direct component dependents:{' '}
-                {demo.directDependents
-                  .map(dependent => dependent.path)
-                  .join(', ')}
-                . A passing policy check allows the configured{' '}
-                {demo.outputs.join(', ')} code formats.
-              </p>
-
-              <svg
-                className='canopy-svg'
-                viewBox='0 0 760 620'
-                aria-hidden='true'
-                role='presentation'>
-                <g
-                  className='canopy-links'
-                  fill='none'>
-                  <path
-                    className='canopy-link canopy-resolve-link'
-                    d='M380 390V358'
-                  />
-                  <path
-                    className='canopy-link canopy-dependency-link'
-                    d='M380 288L285 215H235'
-                  />
-                  <path
-                    className='canopy-link canopy-dependency-link'
-                    d='M380 288V193'
-                  />
-                  <path
-                    className='canopy-link canopy-dependency-link'
-                    d='M380 288L475 215H525'
-                  />
-                  <path
-                    className='canopy-link canopy-output-link'
-                    d='M132 155L225 95H260'
-                  />
-                  <path
-                    className='canopy-link canopy-output-link'
-                    d='M380 133V95'
-                  />
-                  <path
-                    className='canopy-link canopy-output-link'
-                    d='M628 155L535 95H500'
-                  />
-                </g>
-
-                <g
-                  className='canopy-source-node'
-                  data-motion>
-                  <rect
-                    x='245'
-                    y='390'
-                    width='270'
-                    height='64'
-                    rx='2'
-                  />
-                  <text
-                    x='264'
-                    y='414'
-                    className='canopy-node-kicker'>
-                    PRIMITIVE ALIAS
-                  </text>
-                  <text
-                    x='264'
-                    y='438'
-                    className='canopy-node-label'>
-                    {'{primitives.color.blue.500}'}
-                  </text>
-                  <circle
-                    cx='490'
-                    cy='422'
-                    r='7'
-                    className='canopy-source-swatch'
-                  />
-                </g>
-
-                <g
-                  className='canopy-dependent-node canopy-dependent-left'
-                  data-motion>
-                  <rect
-                    x='30'
-                    y='155'
-                    width='205'
-                    height='60'
-                    rx='2'
-                  />
-                  <text
-                    x='47'
-                    y='190'
-                    className='canopy-node-label'>
-                    {demo.directDependents[0]?.path}
-                  </text>
-                </g>
-                <g
-                  className='canopy-dependent-node canopy-dependent-center'
-                  data-motion>
-                  <rect
-                    x='278'
-                    y='133'
-                    width='204'
-                    height='60'
-                    rx='2'
-                  />
-                  <text
-                    x='295'
-                    y='168'
-                    className='canopy-node-label'>
-                    {demo.directDependents[1]?.path}
-                  </text>
-                </g>
-                <g
-                  className='canopy-dependent-node canopy-dependent-right'
-                  data-motion>
-                  <rect
-                    x='525'
-                    y='155'
-                    width='205'
-                    height='60'
-                    rx='2'
-                  />
-                  <text
-                    x='542'
-                    y='190'
-                    className='canopy-node-label'>
-                    {demo.directDependents[2]?.path}
-                  </text>
-                </g>
-
-                <g
-                  className='canopy-token-node'
-                  data-motion>
-                  <rect
-                    x='248'
-                    y='288'
-                    width='264'
-                    height='70'
-                    rx='2'
-                  />
-                  <text
-                    x='267'
-                    y='314'
-                    className='canopy-node-kicker'>
-                    GOVERNED TOKEN
-                  </text>
-                  <text
-                    x='267'
-                    y='341'
-                    className='canopy-token-label'>
-                    {demo.tokenPath}
-                  </text>
-                  <circle
-                    cx='487'
-                    cy='323'
-                    r='7'
-                    className='canopy-root-node'
-                  />
-                </g>
-
-                <g
-                  className='canopy-output-node'
-                  data-motion>
-                  <rect
-                    x='260'
-                    y='35'
-                    width='240'
-                    height='60'
-                    rx='2'
-                  />
-                  <text
-                    x='278'
-                    y='59'
-                    className='canopy-node-kicker'>
-                    CONFIGURED CODE FORMATS
-                  </text>
-                  <text
-                    x='278'
-                    y='82'
-                    className='canopy-node-label'>
-                    {demo.outputs.join(' · ')}
-                  </text>
-                </g>
-
-                <g
-                  className='canopy-logo'
-                  transform='translate(316 488) scale(1.35)'>
-                  <g data-motion>
-                    <path
-                      className='canopy-logo-body'
-                      d={MARK_PATH}
-                      fill='var(--color-primitree-text)'
-                    />
-                  </g>
-                </g>
-                <path
-                  className='canopy-trunk'
-                  d='M380 488V454'
-                />
-              </svg>
-
-              <div
-                className='canopy-mobile-graph'
-                aria-hidden='true'>
-                <div className='canopy-mobile-node canopy-mobile-node-output'>
-                  <span>Configured code formats</span>
-                  <code>{demo.outputs.join(' · ')}</code>
-                </div>
-
-                <div className='canopy-mobile-dependents'>
-                  {demo.directDependents.map(dependent => (
-                    <div
-                      key={dependent.path}
-                      className='canopy-mobile-node'>
-                      <span>Direct consumer</span>
-                      <code>{dependent.path}</code>
-                    </div>
-                  ))}
-                </div>
-
-                <div className='canopy-mobile-node canopy-mobile-node-token'>
-                  <span>Governed token</span>
-                  <code>{demo.tokenPath}</code>
-                </div>
-
-                <div className='canopy-mobile-node canopy-mobile-node-source'>
-                  <span>Primitive alias</span>
-                  <code>{`{${demo.aliasTarget}}`}</code>
-                </div>
-
-                <div className='canopy-mobile-logo'>
-                  <svg
-                    viewBox='0 0 95 86'
-                    aria-hidden='true'>
-                    <path d={MARK_PATH} />
-                  </svg>
-                  <span>Governed at the root</span>
-                </div>
-              </div>
-            </div>
-
-            <div className='canopy-evidence'>
-              <div
-                className='canopy-tabs'
-                role='tablist'
-                aria-label='Governance evidence'>
-                {branches.map(branch => (
-                  <button
-                    key={branch}
-                    id={branchId(branch, 'tab')}
-                    type='button'
-                    role='tab'
-                    aria-selected={activeBranch === branch}
-                    aria-controls={branchId(branch, 'panel')}
-                    tabIndex={activeBranch === branch ? 0 : -1}
-                    onClick={() => setActiveBranch(branch)}
-                    onKeyDown={event => handleTabKeyDown(event, branch)}>
-                    {branchLabels[branch]}
-                  </button>
-                ))}
-              </div>
-
-              <div
-                id={branchId('govern', 'panel')}
-                role='tabpanel'
-                aria-labelledby={branchId('govern', 'tab')}
-                hidden={activeBranch !== 'govern'}
-                className='canopy-panel'>
-                <p className='canopy-panel-label'>Policy gate</p>
-                <button
-                  type='button'
-                  className='canopy-proposal'
-                  aria-pressed={forbiddenProposal}
-                  aria-describedby='canopy-policy-reason'
-                  onClick={() => setForbiddenProposal(value => !value)}>
-                  <span>Proposed alias</span>
-                  <code>
-                    {forbiddenProposal
-                      ? '{component.color.brand}'
-                      : `{${demo.aliasTarget}}`}
-                  </code>
-                  <span
-                    className='canopy-switch'
-                    aria-hidden='true'>
-                    <span />
-                  </span>
-                </button>
-                <div className='canopy-verdict'>
-                  <p
-                    role='status'
-                    aria-live='polite'
-                    className={forbiddenProposal ? 'is-blocked' : undefined}>
-                    {forbiddenProposal
-                      ? `${demo.blocked.status} · ${demo.blocked.ruleId}`
-                      : `${demo.compliant.status} · ${demo.compliant.findings} findings`}
-                  </p>
-                  <small
-                    id='canopy-policy-reason'
-                    aria-live='polite'>
-                    {forbiddenProposal ? demo.blocked.reason : ''}
-                  </small>
-                </div>
-                <p className='canopy-owner'>
-                  <span>Owner</span>
-                  <code>{demo.owner}</code>
-                </p>
-              </div>
-
-              <div
-                id={branchId('trace', 'panel')}
-                role='tabpanel'
-                aria-labelledby={branchId('trace', 'tab')}
-                hidden={activeBranch !== 'trace'}
-                className='canopy-panel'>
-                <p className='canopy-panel-label'>Direct impact</p>
-                <p className='canopy-panel-metric'>3 consumers</p>
-                <ul className='canopy-path-list'>
-                  {demo.directDependents.map(dependent => (
-                    <li key={dependent.path}>{dependent.path}</li>
-                  ))}
-                </ul>
-              </div>
-
-              <div
-                id={branchId('ship', 'panel')}
-                role='tabpanel'
-                aria-labelledby={branchId('ship', 'tab')}
-                hidden={activeBranch !== 'ship'}
-                className='canopy-panel'>
-                <p className='canopy-panel-label'>Configured code formats</p>
-                <p className='canopy-panel-metric'>{demo.resolvedValue}</p>
-                <ul className='canopy-output-list'>
-                  {demo.outputs.map(output => (
-                    <li key={output}>{output}</li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <ol
-        className='canopy-stage-track'
-        aria-label='Token change path'>
-        <li data-canopy-stage='source'>
-          <strong>Source</strong>
-          <p>The primitive enters once as an opaque sRGB value.</p>
-        </li>
-        <li data-canopy-stage='resolve'>
-          <strong>Resolve</strong>
-          <p>The semantic alias resolves before policy or output runs.</p>
-        </li>
-        <li data-canopy-stage='govern'>
-          <strong>Govern</strong>
-          <p>Layer and ownership rules decide whether the change proceeds.</p>
-        </li>
-        <li data-canopy-stage='ship'>
-          <strong>Ship</strong>
-          <p>A passing graph can build every configured code format.</p>
-        </li>
-      </ol>
-    </section>
-  )
-}
diff --git a/apps/docs/components/landing/proof-panel.tsx b/apps/docs/components/landing/proof-panel.tsx
new file mode 100644
index 00000000..47bf2fb0
--- /dev/null
+++ b/apps/docs/components/landing/proof-panel.tsx
@@ -0,0 +1,226 @@
+'use client'
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from 'react'
+import type {
+  GovernanceDemo,
+  ProposalDeck,
+  ProposalOutcome,
+} from '@/lib/landing/governance-demo'
+import { TokenGraph } from '@/components/landing/token-graph'
+
+const PROPOSAL_FLAGS: Record<ProposalOutcome['id'], string> = {
+  baseline: 'current',
+  alias: 'alias',
+  violation: 'violation',
+  rename: 'rename',
+}
+
+function nodeSummary(outcome: ProposalOutcome, slot: string | null) {
+  if (slot === null) {
+    return null
+  }
+  const node = outcome.nodes.find(item => item.slot === slot)
+  if (node === undefined) {
+    return null
+  }
+  const consumerCount =
+    node.consumers === 1 ? '1 consumer' : `${node.consumers} consumers`
+  return `${node.path} · ${node.kind} ${node.display} · owner ${node.owner} · ${consumerCount}`
+}
+
+export function ProofPanel({
+  demo,
+  deck,
+}: {
+  demo: GovernanceDemo
+  deck: ProposalDeck
+}) {
+  const [activeId, setActiveId] = useState<ProposalOutcome['id']>('baseline')
+  const [traceSlot, setTraceSlot] = useState<string | null>(null)
+  const [selectedSlot, setSelectedSlot] = useState<string | null>(null)
+  const [checking, setChecking] = useState(false)
+  const checkTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  )
+  useEffect(() => {
+    return () => {
+      clearTimeout(checkTimer.current)
+    }
+  }, [])
+  const outcome =
+    deck.outcomes.find(item => item.id === activeId) ?? deck.outcomes[0]
+  if (outcome === undefined) {
+    return null
+  }
+
+  function pick(id: ProposalOutcome['id']) {
+    setActiveId(id)
+    setTraceSlot(null)
+    setSelectedSlot(null)
+    setChecking(true)
+    clearTimeout(checkTimer.current)
+    checkTimer.current = setTimeout(() => setChecking(false), 700)
+  }
+
+  function moveTo(index: number) {
+    const next =
+      deck.outcomes[(index + deck.outcomes.length) % deck.outcomes.length]
+    if (next !== undefined) {
+      pick(next.id)
+      document.getElementById(`proof-chip-${next.id}`)?.focus()
+    }
+  }
+
+  function onChipKeyDown(
+    event: ReactKeyboardEvent<HTMLButtonElement>,
+    index: number
+  ) {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      moveTo(index + 1)
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      moveTo(index - 1)
+    } else if (event.key === 'Home') {
+      event.preventDefault()
+      moveTo(0)
+    } else if (event.key === 'End') {
+      event.preventDefault()
+      moveTo(deck.outcomes.length - 1)
+    }
+  }
+
+  const inspected = nodeSummary(outcome, traceSlot ?? selectedSlot)
+
+  return (
+    <div className='proof'>
+      <div className='proof-command'>
+        <code>
+          <span className='mark-acc'>$</span> primitree check --source brand{' '}
+          <span className='proof-command-note'>
+            # proposal: {PROPOSAL_FLAGS[outcome.id]}
+          </span>
+          <span
+            className='proof-cursor'
+            aria-hidden='true'>
+            ▌
+          </span>
+        </code>
+        <span className='proof-command-spacer' />
+        <span
+          className='proof-command-label'
+          id='proof-proposal-label'>
+          Proposal
+        </span>
+        <div
+          role='radiogroup'
+          aria-labelledby='proof-proposal-label'
+          className='proof-chips'>
+          {deck.outcomes.map((item, index) => (
+            // biome-ignore lint/a11y/useSemanticElements: proposal chips form a WAI-ARIA radio group of buttons with roving tabindex; native radio inputs cannot take this styling.
+            <button
+              key={item.id}
+              id={`proof-chip-${item.id}`}
+              type='button'
+              role='radio'
+              aria-checked={item.id === outcome.id}
+              tabIndex={item.id === outcome.id ? 0 : -1}
+              onClick={() => pick(item.id)}
+              onKeyDown={event => onChipKeyDown(event, index)}>
+              {item.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <p className='sr-only'>{outcome.description}</p>
+      <div className='graph-scroll'>
+        <div
+          className='graph-frame'
+          key={outcome.id}>
+          <TokenGraph
+            outcome={outcome}
+            checking={checking}
+            traceSlot={traceSlot}
+            selectedSlot={selectedSlot}
+            onTraceSlot={setTraceSlot}
+            onSelectSlot={setSelectedSlot}
+          />
+          {checking ? (
+            <div
+              className='graph-sweep'
+              aria-hidden='true'
+            />
+          ) : null}
+        </div>
+      </div>
+      <div
+        className='proof-verdict-bar'
+        data-tone={checking ? 'checking' : outcome.verdictTone}>
+        {checking ? (
+          <>
+            <span className='proof-checking-label'>
+              checking
+              <span
+                className='proof-cursor'
+                aria-hidden='true'>
+                ▌
+              </span>
+            </span>
+            <span className='proof-checking-sub'>
+              resolving aliases · applying policy
+            </span>
+          </>
+        ) : null}
+        <p
+          role='status'
+          aria-live='polite'
+          className='proof-verdict'
+          data-tone={outcome.verdictTone}
+          hidden={checking}>
+          <span
+            className='proof-swap'
+            key={outcome.id}>
+            <span className='proof-verdict-chip'>{outcome.status}</span>{' '}
+            <span className='proof-findings'>{outcome.findingsLine}</span>
+          </span>
+        </p>
+        {checking ? null : (
+          <>
+            <span
+              className='proof-divider'
+              aria-hidden='true'
+            />
+            <p className='proof-detail'>
+              <span
+                className='proof-swap'
+                key={`${outcome.id}-${inspected ?? 'outcome'}`}>
+                {inspected ?? outcome.detail}
+              </span>
+            </p>
+            {traceSlot === null && selectedSlot === null ? (
+              <>
+                <span
+                  className='proof-hint'
+                  aria-hidden='true'>
+                  hover to trace · click to inspect
+                </span>
+                <span
+                  className='proof-divider'
+                  aria-hidden='true'
+                />
+              </>
+            ) : null}
+            <p className='proof-count'>
+              {demo.tokenCount} tokens · {demo.layerCount} layers
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/docs/components/landing/site-chrome.tsx b/apps/docs/components/landing/site-chrome.tsx
index c28ed388..90b0de67 100644
--- a/apps/docs/components/landing/site-chrome.tsx
+++ b/apps/docs/components/landing/site-chrome.tsx
@@ -1,10 +1,12 @@
 import type { ReactNode } from 'react'
 import Link from 'next/link'
+import { GithubLogoIcon } from '@phosphor-icons/react/dist/ssr'
 import {
   FullSearchTrigger,
   SearchTrigger,
 } from 'fumadocs-ui/layouts/shared/slots/search-trigger'
-import { BrandLogo } from '@/components/brand-logo'
+import { BrandLogo, BrandMark } from '@/components/brand-logo'
+import { ThemeToggle } from '@/components/landing/theme-toggle'
 import { links } from '@/lib/shared'
 import { cn } from '@/lib/cn'
 
@@ -13,31 +15,25 @@ const nav = [
   { label: 'Playground', href: links.playground, key: 'playground' as const },
 ]
 
-function GithubMark() {
-  return (
-    <svg
-      viewBox='0 0 24 24'
-      width='18'
-      height='18'
-      fill='currentColor'
-      aria-hidden='true'>
-      <path d='M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.11.79-.25.79-.56v-2.23c-3.22.7-3.9-1.37-3.9-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.17.08 1.78 1.2 1.78 1.2 1.04 1.77 2.72 1.26 3.38.96.1-.75.4-1.26.74-1.55-2.57-.29-5.27-1.29-5.27-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.47.11-3.05 0 0 .97-.31 3.16 1.18A11 11 0 0 1 12 6.11c.98 0 1.95.13 2.87.39 2.19-1.49 3.16-1.18 3.16-1.18.63 1.58.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.09 0 4.42-2.71 5.4-5.29 5.68.42.36.79 1.06.79 2.14v3.27c0 .31.21.68.8.56A11.5 11.5 0 0 0 12 .7Z' />
-    </svg>
-  )
-}
-
 export function SiteHeader({
   active,
+  versionLabel,
 }: {
   active?: 'home' | 'docs' | 'playground'
+  versionLabel?: string
 }) {
   return (
     <header className='sticky top-0 z-50 border-b border-primitree-border bg-primitree-bg'>
-      <div className='mx-auto flex h-[72px] max-w-[1200px] items-center justify-between gap-3 px-4 sm:px-6 lg:px-8'>
-        <BrandLogo
-          size='md'
-          linked
-        />
+      <div className='flex h-[72px] items-center justify-between gap-3 px-4 sm:px-6 lg:px-12'>
+        <span className='flex items-center gap-2.5'>
+          <BrandLogo
+            size='md'
+            linked
+          />
+          {versionLabel === undefined ? null : (
+            <code className='site-version'>{versionLabel}</code>
+          )}
+        </span>
         <nav
           aria-label='Primary navigation'
           className='hidden items-center gap-1 sm:flex'>
@@ -47,7 +43,7 @@ export function SiteHeader({
               href={item.href}
               aria-current={active === item.key ? 'page' : undefined}
               className={cn(
-                'site-nav-link inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg px-3.5 text-[13px] font-medium transition-colors',
+                'site-nav-link inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg px-3.5 text-[13.5px] font-normal transition-colors',
                 active === item.key
                   ? 'bg-primitree-accent-wash text-primitree-accent'
                   : 'text-primitree-muted'
@@ -66,8 +62,13 @@ export function SiteHeader({
             rel='noopener noreferrer'
             aria-label='Primitree on GitHub'
             className='site-icon-control'>
-            <GithubMark />
+            <GithubLogoIcon
+              size={18}
+              weight='fill'
+              aria-hidden='true'
+            />
           </Link>
+          <ThemeToggle />
         </nav>
         <details
           className='mobile-nav sm:hidden'
@@ -93,6 +94,7 @@ export function SiteHeader({
               rel='noopener noreferrer'>
               GitHub
             </Link>
+            <ThemeToggle />
           </nav>
         </details>
       </div>
@@ -103,37 +105,37 @@ export function SiteHeader({
 export function SiteFooter() {
   return (
     <footer className='border-t border-primitree-border'>
-      <div className='mx-auto flex max-w-[1200px] flex-col gap-8 px-6 py-14 lg:px-8'>
-        <div className='flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between'>
-          <BrandLogo size='sm' />
-          <div className='flex flex-wrap gap-x-6 gap-y-2 text-sm text-primitree-muted'>
-            <Link
-              href='/docs'
-              className='site-footer-link transition-colors'>
-              Documentation
-            </Link>
-            <Link
-              href={links.playground}
-              className='site-footer-link transition-colors'>
-              Playground
-            </Link>
-            <Link
-              href={links.npmCli}
-              className='site-footer-link transition-colors'
-              target='_blank'
-              rel='noopener noreferrer'>
-              npm
-            </Link>
-            <Link
-              href={links.github}
-              className='site-footer-link transition-colors'
-              target='_blank'
-              rel='noopener noreferrer'>
-              GitHub
-            </Link>
-          </div>
-        </div>
-        <p className='text-sm text-primitree-dim'>MIT · Mark Learst</p>
+      <div className='flex flex-col gap-4 px-6 py-5 text-[12.5px] text-primitree-muted sm:flex-row sm:items-center sm:justify-between lg:px-12'>
+        <span className='flex items-center gap-2'>
+          <BrandMark className='h-4 w-[18px]' />
+          Primitree · MIT · Mark Learst
+        </span>
+        <span className='flex flex-wrap items-center gap-x-4 gap-y-1'>
+          <Link
+            href='/docs'
+            className='site-footer-link transition-colors'>
+            Documentation
+          </Link>
+          <Link
+            href={links.playground}
+            className='site-footer-link transition-colors'>
+            Playground
+          </Link>
+          <Link
+            href={links.npmCli}
+            className='site-footer-link transition-colors'
+            target='_blank'
+            rel='noopener noreferrer'>
+            npm
+          </Link>
+          <Link
+            href={links.github}
+            className='site-footer-link transition-colors'
+            target='_blank'
+            rel='noopener noreferrer'>
+            GitHub
+          </Link>
+        </span>
       </div>
     </footer>
   )
@@ -142,13 +144,18 @@ export function SiteFooter() {
 export function MarketingShell({
   children,
   active,
+  versionLabel,
 }: {
   children: ReactNode
   active?: 'home' | 'docs' | 'playground'
+  versionLabel?: string
 }) {
   return (
     <>
-      <SiteHeader active={active} />
+      <SiteHeader
+        active={active}
+        {...(versionLabel === undefined ? {} : { versionLabel })}
+      />
       <main className='relative flex-1'>{children}</main>
       <SiteFooter />
     </>
diff --git a/apps/docs/components/landing/theme-toggle.tsx b/apps/docs/components/landing/theme-toggle.tsx
new file mode 100644
index 00000000..fedad2e5
--- /dev/null
+++ b/apps/docs/components/landing/theme-toggle.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+
+/** CSS keys the visible label off the root data-theme attribute, so the
+ * label is correct from the first paint with no mounted-state flash; the
+ * click handler reads the live attribute for the same reason. */
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <button
+      type='button'
+      className='site-theme-toggle'
+      aria-label='Toggle the color theme'
+      onClick={() =>
+        setTheme(
+          document.documentElement.dataset.theme === 'light' ? 'dark' : 'light'
+        )
+      }>
+      <span className='site-theme-toggle-to-light'>light</span>
+      <span className='site-theme-toggle-to-dark'>dark</span>
+    </button>
+  )
+}
diff --git a/apps/docs/components/landing/token-graph.tsx b/apps/docs/components/landing/token-graph.tsx
new file mode 100644
index 00000000..268b2edb
--- /dev/null
+++ b/apps/docs/components/landing/token-graph.tsx
@@ -0,0 +1,351 @@
+'use client'
+
+import type {
+  DemoLayerId,
+  GraphEdge,
+  GraphNode,
+  ProposalOutcome,
+} from '@/lib/landing/governance-demo'
+
+const VIEW_WIDTH = 1160
+const VIEW_HEIGHT = 560
+const NODE_WIDTH = 240
+const NODE_HEIGHT = 42
+const HIT_HEIGHT = 50
+const GOVERNED_SLOT = 'semantic.color.bg.brand'
+
+const COLUMNS: readonly {
+  id: DemoLayerId
+  x: number
+  title: string
+  rows: readonly number[]
+}[] = [
+  {
+    id: 'primitives',
+    x: 52,
+    title: 'ROOTS · PRIMITIVES',
+    rows: [88, 164, 240, 316, 392, 468],
+  },
+  {
+    id: 'semantic',
+    x: 460,
+    title: 'TRUNK · SEMANTIC',
+    rows: [108, 216, 324, 432],
+  },
+  {
+    id: 'component',
+    x: 868,
+    title: 'CANOPY · COMPONENT',
+    rows: [88, 182, 276, 370, 464],
+  },
+]
+
+/** Hand-tuned turn positions for each reference wire, from the design file. */
+const EDGE_MIDS = new Map([
+  ['primitives.color.blue.500>semantic.color.bg.brand', 340],
+  ['primitives.color.green.500>semantic.color.bg.brand', 340],
+  ['primitives.color.gray.900>semantic.color.fg.default', 320],
+  ['primitives.radius.md>semantic.radius.control', 360],
+  ['primitives.space.4>semantic.space.inset', 300],
+  ['semantic.color.bg.brand>component.button.bg', 760],
+  ['semantic.color.bg.brand>component.focus.ring', 780],
+  ['semantic.color.bg.brand>component.nav.active.bg', 800],
+  ['semantic.radius.control>component.button.radius', 745],
+  ['semantic.space.inset>component.card.inset', 820],
+])
+
+/** Hand-tuned bypass lanes for the layer-skipping violation wires, routing
+ * around the semantic column the way the design file draws them. */
+const VIOLATION_LANES = new Map([
+  [
+    'primitives.color.blue.500>component.button.bg',
+    'M292 119 L373 119 Q380 119 380 126 L380 173 Q380 180 387 180 L835 180 Q842 180 842 173 L842 126 Q842 119 849 119 L868 119',
+  ],
+  [
+    'primitives.color.green.500>component.focus.ring',
+    'M292 175 L373 175 Q380 175 380 182 L380 186 Q380 193 387 193 L868 193',
+  ],
+  ['primitives.space.4>component.card.inset', 'M292 499 L868 495'],
+])
+
+const VIOLATION_TAG = { x: 556, y: 169, width: 110, height: 22 }
+
+interface PlacedNode {
+  readonly node: GraphNode
+  readonly x: number
+  readonly y: number
+}
+
+function placeNodes(nodes: readonly GraphNode[]): Map<string, PlacedNode> {
+  const placed = new Map<string, PlacedNode>()
+  for (const column of COLUMNS) {
+    const members = nodes.filter(node => node.layer === column.id)
+    members.forEach((node, rowIndex) => {
+      const y = column.rows[rowIndex]
+      if (y === undefined) {
+        throw new Error(`Token graph has no row for ${node.path}.`)
+      }
+      placed.set(node.slot, { node, x: column.x, y })
+    })
+  }
+  return placed
+}
+
+/** Orthogonal elbow with 7px-rounded corners, matching the design file. */
+function orth(from: PlacedNode, to: PlacedNode, mid: number): string {
+  const r = 7
+  const startX = from.x + NODE_WIDTH
+  const startY = from.y + NODE_HEIGHT / 2
+  const endX = to.x
+  const endY = to.y + NODE_HEIGHT / 2
+  if (Math.abs(startY - endY) < 1) {
+    return `M${startX} ${startY} L${endX} ${endY}`
+  }
+  const dy = endY > startY ? 1 : -1
+  return (
+    `M${startX} ${startY} L${mid - r} ${startY} ` +
+    `Q${mid} ${startY} ${mid} ${startY + r * dy} L${mid} ${endY - r * dy} ` +
+    `Q${mid} ${endY} ${mid + r} ${endY} L${endX} ${endY}`
+  )
+}
+
+function edgePath(edge: GraphEdge, placed: Map<string, PlacedNode>): string {
+  const key = `${edge.from}>${edge.to}`
+  const lane = VIOLATION_LANES.get(key)
+  if (edge.violation && lane !== undefined) {
+    return lane
+  }
+  const from = placed.get(edge.from)
+  const to = placed.get(edge.to)
+  if (from === undefined || to === undefined) {
+    throw new Error('Token graph expected both edge ends to have slots.')
+  }
+  const mid = EDGE_MIDS.get(key) ?? from.x + NODE_WIDTH + 84
+  return orth(from, to, mid)
+}
+
+function chainOf(
+  slot: string,
+  edges: readonly GraphEdge[]
+): ReadonlySet<string> {
+  const chain = new Set([slot])
+  let grew = true
+  while (grew) {
+    grew = false
+    for (const edge of edges) {
+      if (chain.has(edge.from) && !chain.has(edge.to)) {
+        chain.add(edge.to)
+        grew = true
+      }
+      if (chain.has(edge.to) && !chain.has(edge.from)) {
+        chain.add(edge.from)
+        grew = true
+      }
+    }
+  }
+  return chain
+}
+
+function isAchromatic(hex: string): boolean {
+  const channels = hex
+    .slice(1)
+    .match(/.{2}/gu)
+    ?.map(channel => Number.parseInt(channel, 16))
+  if (channels === undefined || channels.length !== 3) {
+    return false
+  }
+  return Math.max(...channels) - Math.min(...channels) < 30
+}
+
+function nodeSummary(node: GraphNode): string {
+  const consumerCount =
+    node.consumers === 1 ? '1 consumer' : `${node.consumers} consumers`
+  return `${node.path} · ${node.kind} ${node.display} · owner ${node.owner} · ${consumerCount}`
+}
+
+export function TokenGraph({
+  outcome,
+  checking,
+  traceSlot,
+  selectedSlot,
+  onTraceSlot,
+  onSelectSlot,
+}: {
+  outcome: ProposalOutcome
+  checking: boolean
+  traceSlot: string | null
+  selectedSlot: string | null
+  onTraceSlot: (slot: string | null) => void
+  onSelectSlot: (slot: string | null) => void
+}) {
+  const placed = placeNodes(outcome.nodes)
+  const trace = traceSlot === null ? null : chainOf(traceSlot, outcome.edges)
+  const governed = chainOf(GOVERNED_SLOT, outcome.edges)
+  const hasViolations = outcome.edges.some(edge => edge.violation)
+  const violationCount = outcome.edges.filter(edge => edge.violation).length
+  const violationSlots = new Set(
+    outcome.edges
+      .filter(edge => edge.violation)
+      .flatMap(edge => [edge.from, edge.to])
+  )
+  const traceTouchesViolation =
+    trace !== null && [...violationSlots].some(slot => trace.has(slot))
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: an SVG cannot become a fieldset; role=group names the graph for assistive technology.
+    <svg
+      viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`}
+      className='graph-svg'
+      role='group'
+      aria-label={`Token graph for the ${outcome.label} proposal`}>
+      {COLUMNS.map(column => (
+        <g key={column.id}>
+          <text
+            x={column.x}
+            y={52}
+            className='graph-column-title'>
+            {column.title}
+          </text>
+          <line
+            x1={column.x}
+            y1={64}
+            x2={column.x + NODE_WIDTH}
+            y2={64}
+            className='graph-column-rule'
+          />
+        </g>
+      ))}
+      <g key={`edges-${outcome.id}`}>
+        {outcome.edges.map(edge => {
+          const inTrace =
+            (trace?.has(edge.from) ?? false) && (trace?.has(edge.to) ?? false)
+          const inGoverned = governed.has(edge.from) && governed.has(edge.to)
+          const tone = edge.violation
+            ? 'violation'
+            : inTrace
+              ? 'active'
+              : trace === null && inGoverned
+                ? hasViolations
+                  ? 'suppressed'
+                  : 'governed'
+                : 'base'
+          const dim = trace !== null && !inTrace
+          return (
+            <path
+              key={`${edge.from}-${edge.to}`}
+              d={edgePath(edge, placed)}
+              className='graph-edge'
+              data-tone={tone}
+              data-active={(edge.violation && inTrace) || undefined}
+              data-static={(hasViolations && tone === 'active') || undefined}
+              data-dim={dim || undefined}
+            />
+          )
+        })}
+      </g>
+      {hasViolations && !checking ? (
+        <g
+          className='graph-violation-tag'
+          data-dim={
+            trace !== null && !traceTouchesViolation ? true : undefined
+          }>
+          <rect
+            x={VIOLATION_TAG.x}
+            y={VIOLATION_TAG.y}
+            width={VIOLATION_TAG.width}
+            height={VIOLATION_TAG.height}
+            rx={6}
+          />
+          <text
+            x={VIOLATION_TAG.x + VIOLATION_TAG.width / 2}
+            y={VIOLATION_TAG.y + 15}
+            textAnchor='middle'>
+            {violationCount} × layer-skip
+          </text>
+        </g>
+      ) : null}
+      {[...placed.values()].map(({ node, x, y }) => {
+        const inTrace = trace?.has(node.slot) ?? false
+        const flag =
+          node.finding !== null || violationSlots.has(node.slot)
+            ? 'violation'
+            : (node.change ?? undefined)
+        const emphasis = inTrace
+          ? 'chain'
+          : node.slot === GOVERNED_SLOT && !hasViolations
+            ? 'governed'
+            : undefined
+        const selected = selectedSlot === node.slot
+        const textX = node.swatch === null ? x + 14 : x + 32
+        return (
+          // biome-ignore lint/a11y/useSemanticElements: HTML buttons cannot exist inside SVG; the node group carries role=button with full keyboard handling.
+          <g
+            key={node.slot}
+            className='graph-node'
+            role='button'
+            tabIndex={0}
+            aria-pressed={selected}
+            aria-label={nodeSummary(node)}
+            data-flag={flag}
+            data-emphasis={emphasis}
+            data-selected={selected || undefined}
+            data-dim={(trace !== null && !inTrace) || undefined}
+            onClick={() => onSelectSlot(selected ? null : node.slot)}
+            onKeyDown={event => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                onSelectSlot(selected ? null : node.slot)
+              } else if (event.key === 'Escape') {
+                onSelectSlot(null)
+              }
+            }}
+            onMouseEnter={() => onTraceSlot(node.slot)}
+            onMouseLeave={() => onTraceSlot(null)}
+            onFocus={() => onTraceSlot(node.slot)}
+            onBlur={() => onTraceSlot(null)}>
+            <rect
+              x={x}
+              y={y - (HIT_HEIGHT - NODE_HEIGHT) / 2}
+              width={NODE_WIDTH}
+              height={HIT_HEIGHT}
+              className='graph-node-hit'
+            />
+            <rect
+              x={x}
+              y={y}
+              width={NODE_WIDTH}
+              height={NODE_HEIGHT}
+              rx={8}
+              className='graph-node-box'
+            />
+            {node.swatch === null ? null : (
+              <rect
+                x={x + 14}
+                y={y + 9}
+                width={10}
+                height={10}
+                rx={3}
+                className='graph-node-swatch'
+                data-outline={isAchromatic(node.swatch) || undefined}
+                style={{ fill: node.swatch }}
+              />
+            )}
+            <text
+              x={textX}
+              y={y + 19}
+              className='graph-node-label'>
+              {node.label}
+            </text>
+            <text
+              x={textX}
+              y={y + 34}
+              className='graph-node-value'
+              data-tone={node.finding === null ? undefined : 'violation'}>
+              {node.display}
+            </text>
+          </g>
+        )
+      })}
+    </svg>
+  )
+}
diff --git a/apps/docs/components/playground/playground.css b/apps/docs/components/playground/playground.css
index 7b63e9e8..72f6afba 100644
--- a/apps/docs/components/playground/playground.css
+++ b/apps/docs/components/playground/playground.css
@@ -102,7 +102,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 999px;
+  border-radius: 8px;
   padding: 10px 18px;
   font-size: 14px;
   font-weight: 600;
@@ -111,8 +111,8 @@
 }
 
 .pg-button.primary {
-  background: #fafafa;
-  color: #09090b;
+  background: var(--color-primitree-accent);
+  color: #04251a;
 }
 
 .pg-button.ghost {
@@ -125,8 +125,8 @@
   margin-top: 16px;
   padding: 12px 16px;
   border-radius: 12px;
-  border: 1px solid rgb(242 117 117 / 40%);
-  background: rgb(242 117 117 / 8%);
+  border: 1px solid rgb(248 113 113 / 40%);
+  background: rgb(248 113 113 / 8%);
   color: var(--color-primitree-error);
   font-size: 14px;
   font-family: var(--font-mono);
@@ -166,8 +166,8 @@
 
 .pg-warnings {
   margin: 0 0 16px;
-  border: 1px solid rgb(242 184 75 / 35%);
-  background: rgb(242 184 75 / 7%);
+  border: 1px solid rgb(251 191 36 / 35%);
+  background: rgb(251 191 36 / 7%);
   border-radius: 12px;
   padding: 10px 14px;
   font-size: 14px;
@@ -230,7 +230,7 @@
   border: 1px solid var(--color-primitree-border);
   background: transparent;
   color: var(--color-primitree-muted);
-  border-radius: 999px;
+  border-radius: 8px;
   padding: 0 12px;
   font-size: 13px;
   cursor: pointer;
@@ -361,7 +361,7 @@
   display: inline-block;
   padding: 2px 8px;
   border-radius: 999px;
-  background: rgb(69 201 139 / 10%);
+  background: rgb(52 211 153 / 10%);
   color: var(--color-primitree-good);
   font-size: 12px;
   font-weight: 600;
diff --git a/apps/docs/lib/landing/governance-demo.ts b/apps/docs/lib/landing/governance-demo.ts
index d020fe90..24efc53c 100644
--- a/apps/docs/lib/landing/governance-demo.ts
+++ b/apps/docs/lib/landing/governance-demo.ts
@@ -1,11 +1,16 @@
 import {
   composeGraph,
   createSourceView,
+  diffGraphViews,
   getDependents,
   inspectToken,
   type TokenId,
 } from '@primitree/core'
-import { createPolicy, evaluatePolicy } from '@primitree/core/policy'
+import {
+  createPolicy,
+  evaluatePolicy,
+  type PolicyFinding,
+} from '@primitree/core/policy'
 import {
   buildDTCGOutputs,
   createDTCGGraphFragment,
@@ -14,6 +19,8 @@ import {
   type DTCGOutputSet,
 } from '@primitree/dtcg'
 
+export type DemoLayerId = 'primitives' | 'semantic' | 'component'
+
 export interface GovernanceBranch {
   readonly path: string
 }
@@ -32,8 +39,55 @@ export interface GovernanceDemo {
     readonly status: 'BLOCK'
     readonly ruleId: 'PT1004'
     readonly reason: string
+    readonly findingCount: number
   }
   readonly outputs: readonly string[]
+  readonly tokenCount: number
+  readonly layerCount: number
+}
+
+export interface GraphNode {
+  readonly slot: string
+  readonly path: string
+  readonly label: string
+  readonly layer: DemoLayerId
+  readonly kind: 'literal' | 'reference'
+  readonly display: string
+  readonly swatch: string | null
+  readonly owner: string
+  readonly consumers: number
+  readonly finding: string | null
+  readonly change: 'added' | 'changed' | null
+}
+
+export interface GraphEdge {
+  readonly from: string
+  readonly to: string
+  readonly violation: boolean
+}
+
+export interface ProposalOutcome {
+  readonly id: 'baseline' | 'alias' | 'violation' | 'rename'
+  readonly label: string
+  readonly status: 'PASS' | 'FAIL'
+  readonly findingsLine: string
+  readonly verdictTone: 'pass' | 'fail'
+  readonly detail: string
+  readonly description: string
+  readonly nodes: readonly GraphNode[]
+  readonly edges: readonly GraphEdge[]
+}
+
+export interface RenameImpact {
+  readonly removedPath: string
+  readonly addedPath: string
+  readonly consumers: readonly string[]
+}
+
+export interface ProposalDeck {
+  readonly outcomes: readonly ProposalOutcome[]
+  readonly diffReport: readonly string[]
+  readonly renameImpact: RenameImpact
 }
 
 const tokenPath = 'semantic.color.bg.brand'
@@ -44,57 +98,136 @@ const expectedDependents = [
   'component.nav.active.bg',
 ]
 
+const srgb = (components: readonly [number, number, number]) =>
+  ({
+    $type: 'color',
+    $value: { colorSpace: 'srgb', components: [...components], alpha: 1 },
+  }) as const
+
+const px = (value: number) =>
+  ({ $type: 'dimension', $value: { value, unit: 'px' } }) as const
+
+const colorRef = (target: string) =>
+  ({ $type: 'color', $value: `{${target}}` }) as const
+
+const dimensionRef = (target: string) =>
+  ({ $type: 'dimension', $value: `{${target}}` }) as const
+
 const compliantDocument = {
   primitives: {
     color: {
-      blue: {
-        '500': {
-          $type: 'color',
-          $value: {
-            colorSpace: 'srgb',
-            components: [0.2, 0.4, 1],
-            alpha: 1,
-          },
-        },
+      blue: { '500': srgb([0.2, 0.4, 1]) },
+      green: { '500': srgb([0.203922, 0.827451, 0.6]) },
+      gray: {
+        '900': srgb([0.066667, 0.094118, 0.152941]),
+        '50': srgb([0.976471, 0.980392, 0.984314]),
       },
     },
+    radius: { md: px(6) },
+    space: { '4': px(16) },
   },
   semantic: {
     color: {
-      bg: {
-        brand: { $type: 'color', $value: '{primitives.color.blue.500}' },
-        support: { $type: 'color', $value: '{primitives.color.blue.500}' },
-      },
+      bg: { brand: colorRef('primitives.color.blue.500') },
+      fg: { default: colorRef('primitives.color.gray.900') },
     },
+    radius: { control: dimensionRef('primitives.radius.md') },
+    space: { inset: dimensionRef('primitives.space.4') },
   },
   component: {
-    button: { bg: { $type: 'color', $value: '{semantic.color.bg.brand}' } },
-    nav: {
-      active: {
-        bg: { $type: 'color', $value: '{semantic.color.bg.brand}' },
-      },
+    button: {
+      bg: colorRef('semantic.color.bg.brand'),
+      radius: dimensionRef('semantic.radius.control'),
     },
-    focus: { ring: { $type: 'color', $value: '{semantic.color.bg.brand}' } },
+    focus: { ring: colorRef('semantic.color.bg.brand') },
+    nav: { active: { bg: colorRef('semantic.color.bg.brand') } },
+    card: { inset: dimensionRef('semantic.space.inset') },
+  },
+} satisfies DTCGDocument
+
+const aliasDocument = {
+  ...compliantDocument,
+  semantic: {
+    ...compliantDocument.semantic,
     color: {
-      brand: { $type: 'color', $value: '{semantic.color.bg.support}' },
+      ...compliantDocument.semantic.color,
+      bg: { brand: colorRef('primitives.color.green.500') },
     },
   },
-} satisfies DTCGDocument
+} as const
 
-const blockedDocument = {
+const violationDocument = {
+  ...compliantDocument,
+  component: {
+    ...compliantDocument.component,
+    button: {
+      ...compliantDocument.component.button,
+      bg: colorRef('primitives.color.blue.500'),
+    },
+    focus: { ring: colorRef('primitives.color.green.500') },
+    card: { inset: dimensionRef('primitives.space.4') },
+  },
+} as const
+
+const renameDocument = {
   ...compliantDocument,
   semantic: {
     ...compliantDocument.semantic,
     color: {
       ...compliantDocument.semantic.color,
-      bg: {
-        ...compliantDocument.semantic.color.bg,
-        brand: { $type: 'color', $value: '{component.color.brand}' },
-      },
+      bg: { primary: colorRef('primitives.color.blue.500') },
+    },
+  },
+  component: {
+    ...compliantDocument.component,
+    button: {
+      ...compliantDocument.component.button,
+      bg: colorRef('semantic.color.bg.primary'),
     },
+    focus: { ring: colorRef('semantic.color.bg.primary') },
+    nav: { active: { bg: colorRef('semantic.color.bg.primary') } },
   },
 } as const
 
+/** Row order for each graph column. Slots keep node positions stable while a
+ * proposal swaps one path, so a rename reads as motion in place. */
+const graphSlots: readonly (readonly [DemoLayerId, readonly string[]])[] = [
+  [
+    'primitives',
+    [
+      'primitives.color.blue.500',
+      'primitives.color.green.500',
+      'primitives.color.gray.900',
+      'primitives.color.gray.50',
+      'primitives.radius.md',
+      'primitives.space.4',
+    ],
+  ],
+  [
+    'semantic',
+    [
+      'semantic.color.bg.brand',
+      'semantic.color.fg.default',
+      'semantic.radius.control',
+      'semantic.space.inset',
+    ],
+  ],
+  [
+    'component',
+    [
+      'component.button.bg',
+      'component.focus.ring',
+      'component.nav.active.bg',
+      'component.button.radius',
+      'component.card.inset',
+    ],
+  ],
+]
+
+const renameSlotPaths = new Map([
+  ['semantic.color.bg.brand', 'semantic.color.bg.primary'],
+])
+
 const policyInput = {
   id: 'living-canopy',
   viewId: 'living-canopy',
@@ -191,7 +324,7 @@ function resolveSrgbHex(value: unknown): string {
     value.alpha !== 1
   ) {
     throw new Error(
-      'Governance demo expected the brand token to resolve to an opaque sRGB color.'
+      'Governance demo expected the token to resolve to an opaque sRGB color.'
     )
   }
   const channels = value.components.map(component => {
@@ -207,6 +340,51 @@ function resolveSrgbHex(value: unknown): string {
   return `#${channels.join('')}`
 }
 
+function isSrgbColor(value: unknown): boolean {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'colorSpace' in value &&
+    'components' in value
+  )
+}
+
+function resolveDisplayValue(value: unknown): string {
+  if (isSrgbColor(value)) {
+    return resolveSrgbHex(value)
+  }
+  if (
+    typeof value === 'object' &&
+    value !== null &&
+    'value' in value &&
+    'unit' in value &&
+    typeof value.value === 'number' &&
+    typeof value.unit === 'string'
+  ) {
+    return `${value.value}${value.unit}`
+  }
+  throw new Error('Governance demo expected a color or dimension value.')
+}
+
+/** Reference targets drop the layer root and a leading color group, the way
+ * the graph abbreviates them: primitives.color.blue.500 reads as blue.500 and
+ * semantic.color.bg.brand reads as bg.brand. */
+function abbreviate(path: string): string {
+  return path
+    .split('.')
+    .slice(1)
+    .join('.')
+    .replace(/^color\./u, '')
+}
+
+/** Node labels drop the layer root; primitive labels abbreviate further so
+ * color scales read as blue.500. */
+function nodeLabel(path: string, layer: DemoLayerId): string {
+  return layer === 'primitives'
+    ? abbreviate(path)
+    : path.split('.').slice(1).join('.')
+}
+
 function buildSnapshot(document: unknown) {
   const fragment = requireBuildValue(
     createDTCGGraphFragment(document, { source: 'living-canopy' }),
@@ -220,6 +398,8 @@ function buildSnapshot(document: unknown) {
   return { graph, view }
 }
 
+type Snapshot = ReturnType<typeof buildSnapshot>
+
 function buildOutputLabels(
   outputOptions: BuildOutputOptions
 ): readonly string[] {
@@ -231,11 +411,191 @@ function buildOutputLabels(
   return Object.freeze(labels)
 }
 
-/** Builds the serializable evidence projection rendered by the Living Canopy. */
+function ownerForPath(path: string): string {
+  const roots = policyInput.ownership.paths
+  for (const [root, owners] of Object.entries(roots)) {
+    if (path === root || path.startsWith(`${root}.`)) {
+      const owner = owners[0]
+      if (owner !== undefined) {
+        return owner
+      }
+    }
+  }
+  const fallback = policyInput.ownership.default[0]
+  if (fallback === undefined) {
+    throw new Error('Governance demo expected a default owner.')
+  }
+  return fallback
+}
+
+function buildGraphProjection(
+  snapshot: Snapshot,
+  findings: readonly PolicyFinding[],
+  changesByPath: ReadonlyMap<string, 'added' | 'changed'>
+): { nodes: readonly GraphNode[]; edges: readonly GraphEdge[] } {
+  const paths = new Map(
+    snapshot.view.tokens.map(token => [token.tokenId, token.path])
+  )
+  const slotByPath = new Map<string, string>()
+  const findingByPath = new Map(
+    findings.map(finding => [finding.path.join('.'), finding.ruleId])
+  )
+
+  const nodes: GraphNode[] = []
+  const edges: GraphEdge[] = []
+
+  for (const [layer, slots] of graphSlots) {
+    for (const slot of slots) {
+      const path = renameSlotPaths.get(slot) ?? slot
+      const resolvedPath = snapshot.view.tokens.some(
+        token => token.path.join('.') === path
+      )
+        ? path
+        : slot
+      slotByPath.set(resolvedPath, slot)
+
+      const inspection = requireBuildValue(
+        inspectToken(snapshot, {
+          kind: 'path',
+          path: resolvedPath.split('.'),
+        }),
+        `inspection of ${resolvedPath}`
+      )
+      const chain = inspection.resolution.referenceChain
+      const kind = chain.length > 1 ? 'reference' : 'literal'
+      const resolvedDisplay = resolveDisplayValue(inspection.resolution.value)
+      const dependents = requireBuildValue(
+        getDependents(snapshot.graph, inspection.tokenId),
+        `dependents of ${resolvedPath}`
+      )
+
+      let display = resolvedDisplay
+      if (kind === 'reference') {
+        const targetId = chain[1]
+        if (targetId === undefined) {
+          throw new Error(
+            `Governance demo expected a direct target for ${resolvedPath}.`
+          )
+        }
+        const targetPath = requirePath(paths, targetId, 'reference target')
+        display = `→ {${abbreviate(targetPath)}}`
+        edges.push({
+          from: targetPath,
+          to: resolvedPath,
+          violation: findingByPath.has(resolvedPath),
+        })
+      }
+
+      nodes.push({
+        slot,
+        path: resolvedPath,
+        label: nodeLabel(resolvedPath, layer),
+        layer,
+        kind,
+        display,
+        swatch:
+          kind === 'literal' && isSrgbColor(inspection.resolution.value)
+            ? resolvedDisplay
+            : null,
+        owner: ownerForPath(resolvedPath),
+        consumers: dependents.length,
+        finding: findingByPath.get(resolvedPath) ?? null,
+        change: changesByPath.get(resolvedPath) ?? null,
+      })
+    }
+  }
+
+  const slottedEdges = edges.map(edge => {
+    const from = slotByPath.get(edge.from)
+    const to = slotByPath.get(edge.to)
+    if (from === undefined || to === undefined) {
+      throw new Error('Governance demo expected every edge to land in a slot.')
+    }
+    return Object.freeze({ from, to, violation: edge.violation })
+  })
+
+  return {
+    nodes: Object.freeze(nodes.map(node => Object.freeze(node))),
+    edges: Object.freeze(slottedEdges),
+  }
+}
+
+function evaluateFindings(snapshot: Snapshot): readonly PolicyFinding[] {
+  const policy = requireBuildValue(createPolicy(policyInput), 'policy creation')
+  const report = requireBuildValue(
+    evaluatePolicy(snapshot, policy),
+    'policy evaluation'
+  )
+  return report.findings.filter(finding => finding.disposition === 'active')
+}
+
+function buildDiffReport(
+  before: Snapshot,
+  after: Snapshot
+): { lines: readonly string[]; changeCount: number; impactedCount: number } {
+  const paths = new Map<TokenId, string>()
+  for (const token of [...before.view.tokens, ...after.view.tokens]) {
+    paths.set(token.tokenId, token.path.join('.'))
+  }
+  const diff = requireBuildValue(diffGraphViews(before, after), 'rename diff')
+  const describe = (tokenId: TokenId) => {
+    const path = paths.get(tokenId)
+    if (path === undefined) {
+      throw new Error('Governance demo expected a path for every diff token.')
+    }
+    return path
+  }
+  const impacted = new Set<string>()
+  const lines: string[] = [
+    '$ primitree diff tokens.before.json tokens.json --config primitree.config.ts',
+    '',
+    `Diff found ${diff.changes.length} token changes.`,
+  ]
+  for (const change of diff.changes) {
+    lines.push(`${change.kind} ${describe(change.tokenId)}`)
+    if (change.impactedTokenIds.length === 0) {
+      lines.push('  Affected tokens: none')
+    } else {
+      const impactedPaths = change.impactedTokenIds.map(impactedId => {
+        const impactedPath = describe(impactedId)
+        impacted.add(impactedPath)
+        return impactedPath
+      })
+      lines.push(`  Affected tokens: ${impactedPaths.join(', ')}`)
+    }
+  }
+  lines.push('New findings: 0 · Resolved findings: 0')
+  return {
+    lines: Object.freeze(lines),
+    changeCount: diff.changes.length,
+    impactedCount: impacted.size,
+  }
+}
+
+/** Renders the policy layers as the config excerpt the quickstart shows,
+ * complete enough to satisfy config validation. */
+export function describeLayersSnippet(): string {
+  const lines = policyInput.layers.map((layer, index) => {
+    const parts = [
+      `id: '${layer.id}'`,
+      `roots: [${layer.roots.map(root => `'${root}'`).join(', ')}]`,
+      `values: '${layer.values}'`,
+    ]
+    if (layer.references.length > 0) {
+      parts.push(
+        `references: [${layer.references.map(reference => `'${reference}'`).join(', ')}]`
+      )
+    }
+    const comma = index === policyInput.layers.length - 1 ? '' : ','
+    return `  { ${parts.join(', ')} }${comma}`
+  })
+  return `// primitree.config.ts\nlayers: [\n${lines.join('\n')}\n]`
+}
+
+/** Builds the serializable evidence projection for the homepage. */
 export function createGovernanceDemo(
   outputOptions: BuildOutputOptions = {}
 ): GovernanceDemo {
-  const policy = requireBuildValue(createPolicy(policyInput), 'policy creation')
   const compliantSnapshot = buildSnapshot(compliantDocument)
   const inspection = requireBuildValue(
     inspectToken(compliantSnapshot, {
@@ -275,39 +635,32 @@ export function createGovernanceDemo(
       'Governance demo expected three direct component dependents.'
     )
   }
-  const compliantReport = requireBuildValue(
-    evaluatePolicy(compliantSnapshot, policy),
-    'compliant policy evaluation'
-  )
-  if (compliantReport.summary.active !== 0) {
+  const compliantFindings = evaluateFindings(compliantSnapshot)
+  if (compliantFindings.length !== 0) {
     throw new Error('Governance demo expected the compliant policy to pass.')
   }
 
-  const blockedSnapshot = buildSnapshot(blockedDocument)
-  const blockedReport = requireBuildValue(
-    evaluatePolicy(blockedSnapshot, policy),
-    'blocked policy evaluation'
-  )
-  const blockedFinding = blockedReport.findings.find(
-    finding => finding.ruleId === 'PT1004'
-  )
+  const violationFindings = evaluateFindings(buildSnapshot(violationDocument))
+  const firstFinding = violationFindings[0]
   if (
-    blockedFinding === undefined ||
-    blockedFinding.message !==
-      'Layer semantic cannot reference layer component.'
+    violationFindings.length !== 3 ||
+    firstFinding === undefined ||
+    violationFindings.some(
+      finding =>
+        finding.ruleId !== 'PT1004' ||
+        finding.message !== 'Layer component cannot reference layer primitives.'
+    )
   ) {
-    throw new Error('Governance demo expected the blocked policy finding.')
-  }
-  const owner = policy.ownership.paths.semantic?.[0]
-  if (owner === undefined) {
-    throw new Error('Governance demo expected a semantic token owner.')
+    throw new Error(
+      'Governance demo expected three layer-skip findings from PT1004.'
+    )
   }
 
   return Object.freeze({
     tokenPath,
     aliasTarget: inspectedAliasTarget,
     resolvedValue: resolveSrgbHex(inspection.resolution.value),
-    owner,
+    owner: ownerForPath(tokenPath),
     directDependents: Object.freeze(
       directDependents.map(path => Object.freeze({ path }))
     ),
@@ -315,8 +668,171 @@ export function createGovernanceDemo(
     blocked: Object.freeze({
       status: 'BLOCK' as const,
       ruleId: 'PT1004' as const,
-      reason: blockedFinding.message,
+      reason: firstFinding.message,
+      findingCount: violationFindings.length,
     }),
     outputs: buildOutputLabels(outputOptions),
+    tokenCount: compliantSnapshot.view.tokens.length,
+    layerCount: policyInput.layers.length,
+  })
+}
+
+/** Builds the click-driven proposal outcomes for the homepage graph. */
+export function createProposalDeck(): ProposalDeck {
+  const baselineSnapshot = buildSnapshot(compliantDocument)
+  const aliasSnapshot = buildSnapshot(aliasDocument)
+  const violationSnapshot = buildSnapshot(violationDocument)
+  const renameSnapshot = buildSnapshot(renameDocument)
+
+  const baselineFindings = evaluateFindings(baselineSnapshot)
+  const aliasFindings = evaluateFindings(aliasSnapshot)
+  const violationFindings = evaluateFindings(violationSnapshot)
+  const renameFindings = evaluateFindings(renameSnapshot)
+  if (baselineFindings.length !== 0 || aliasFindings.length !== 0) {
+    throw new Error('Governance demo expected the compliant graphs to pass.')
+  }
+  if (renameFindings.length !== 0) {
+    throw new Error('Governance demo expected the rename proposal to pass.')
+  }
+  const violationFinding = violationFindings[0]
+  if (violationFindings.length !== 3 || violationFinding === undefined) {
+    throw new Error('Governance demo expected three PT1004 findings.')
+  }
+
+  const aliasHex = resolveSrgbHex(
+    requireBuildValue(
+      inspectToken(aliasSnapshot, {
+        kind: 'path',
+        path: tokenPath.split('.'),
+      }),
+      'alias inspection'
+    ).resolution.value
+  )
+  if (aliasHex !== '#34d399') {
+    throw new Error(
+      'Governance demo expected the green alias to resolve to #34d399.'
+    )
+  }
+
+  const diff = buildDiffReport(baselineSnapshot, renameSnapshot)
+  if (!diff.lines.includes('removed semantic.color.bg.brand')) {
+    throw new Error(
+      'Governance demo expected the rename diff to remove the old path.'
+    )
+  }
+
+  const renameChanges = new Map<string, 'added' | 'changed'>([
+    ['semantic.color.bg.primary', 'added'],
+    ...expectedDependents.map(path => [path, 'changed'] as [string, 'changed']),
+  ])
+  const noChanges = new Map<string, 'added' | 'changed'>()
+
+  const dependentList = expectedDependents.join(', ')
+
+  /** Counts a node's consumers from the wires in view, so the inspect line
+   * matches the graph the visitor is looking at. */
+  const withEdgeConsumers = (graph: {
+    nodes: readonly GraphNode[]
+    edges: readonly GraphEdge[]
+  }) => ({
+    edges: graph.edges,
+    nodes: Object.freeze(
+      graph.nodes.map(node =>
+        Object.freeze({
+          ...node,
+          consumers: graph.edges.filter(edge => edge.from === node.slot).length,
+        })
+      )
+    ),
+  })
+
+  const baselineGraph = withEdgeConsumers(
+    buildGraphProjection(baselineSnapshot, baselineFindings, noChanges)
+  )
+  const aliasGraph = withEdgeConsumers(
+    buildGraphProjection(aliasSnapshot, aliasFindings, noChanges)
+  )
+  const violationProjection = buildGraphProjection(
+    violationSnapshot,
+    violationFindings,
+    noChanges
+  )
+  // The design keeps every compliant wire visible under the red bypass
+  // lanes, suppressed, so the violation preset overlays the baseline graph
+  // instead of replacing it.
+  const violationEdgeKeys = new Set(
+    violationProjection.edges.map(edge => `${edge.from}>${edge.to}`)
+  )
+  const violationGraph = withEdgeConsumers({
+    nodes: violationProjection.nodes,
+    edges: Object.freeze([
+      ...violationProjection.edges,
+      ...baselineGraph.edges.filter(
+        edge => !violationEdgeKeys.has(`${edge.from}>${edge.to}`)
+      ),
+    ]),
+  })
+  const renameGraph = withEdgeConsumers(
+    buildGraphProjection(renameSnapshot, renameFindings, renameChanges)
+  )
+
+  const outcomes: readonly ProposalOutcome[] = Object.freeze([
+    Object.freeze({
+      id: 'baseline' as const,
+      label: 'Current graph',
+      status: 'PASS' as const,
+      findingsLine: `${baselineFindings.length} findings`,
+      verdictTone: 'pass' as const,
+      detail:
+        'semantic points at primitives, component points at semantic. Nothing for policy to flag.',
+      description: `${tokenPath} references ${aliasTarget} and feeds ${dependentList}. The check passes with zero findings.`,
+      nodes: baselineGraph.nodes,
+      edges: baselineGraph.edges,
+    }),
+    Object.freeze({
+      id: 'alias' as const,
+      label: 'Compliant alias',
+      status: 'PASS' as const,
+      findingsLine: `${aliasFindings.length} findings`,
+      verdictTone: 'pass' as const,
+      detail:
+        'alias now points at {green.500}. Same layer, same owner, nothing to flag.',
+      description: `${tokenPath} references primitives.color.green.500, resolves to ${aliasHex}, and feeds ${dependentList}. The check passes.`,
+      nodes: aliasGraph.nodes,
+      edges: aliasGraph.edges,
+    }),
+    Object.freeze({
+      id: 'violation' as const,
+      label: 'Layer violations',
+      status: 'FAIL' as const,
+      findingsLine: `${violationFindings.length} findings · layer-skip`,
+      verdictTone: 'fail' as const,
+      detail:
+        'button.bg, focus.ring, and card.inset reference primitives directly. component may only reference semantic.',
+      description: `Three component tokens reference primitives, skipping the semantic layer. Policy ${violationFinding.ruleId} blocks the change: ${violationFinding.message}`,
+      nodes: violationGraph.nodes,
+      edges: violationGraph.edges,
+    }),
+    Object.freeze({
+      id: 'rename' as const,
+      label: 'Rename',
+      status: 'PASS' as const,
+      findingsLine: `${diff.changeCount} changes · ${renameFindings.length} findings`,
+      verdictTone: 'pass' as const,
+      detail: 'bg.brand → bg.primary pairs with 3 consumers before merge.',
+      description: `semantic.color.bg.brand becomes semantic.color.bg.primary. The diff lists ${dependentList} as affected consumers.`,
+      nodes: renameGraph.nodes,
+      edges: renameGraph.edges,
+    }),
+  ])
+
+  return Object.freeze({
+    outcomes,
+    diffReport: diff.lines,
+    renameImpact: Object.freeze({
+      removedPath: tokenPath,
+      addedPath: 'semantic.color.bg.primary',
+      consumers: Object.freeze(expectedDependents.map(abbreviate)),
+    }),
   })
 }
diff --git a/apps/docs/lib/landing/release.ts b/apps/docs/lib/landing/release.ts
new file mode 100644
index 00000000..b3a29c9f
--- /dev/null
+++ b/apps/docs/lib/landing/release.ts
@@ -0,0 +1,26 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+let cachedVersion: string | undefined
+
+/** Reads the published primitree package version once per process. */
+export function readPrimitreeVersion(): string {
+  if (cachedVersion !== undefined) {
+    return cachedVersion
+  }
+  const packagePath = resolve(
+    process.cwd(),
+    '../../packages/primitree/package.json'
+  )
+  const parsed: unknown = JSON.parse(readFileSync(packagePath, 'utf8'))
+  if (
+    typeof parsed !== 'object' ||
+    parsed === null ||
+    !('version' in parsed) ||
+    typeof parsed.version !== 'string'
+  ) {
+    throw new Error('The primitree package manifest has no version field.')
+  }
+  cachedVersion = parsed.version
+  return cachedVersion
+}
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 96e464ce..e2c34265 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -16,6 +16,7 @@
     "postinstall": "pnpm run generate:api && pnpm run check:prose && pnpm run check:links && fumadocs-mdx"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
     "@primitree/core": "workspace:*",
     "@primitree/dtcg": "workspace:*",
     "cnfast": "^0.0.8",
@@ -25,6 +26,7 @@
     "fumadocs-ui": "16.10.7",
     "lucide-react": "^1.21.0",
     "next": "16.2.9",
+    "next-themes": "0.4.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7"
   },
diff --git a/apps/docs/public/favicon.svg b/apps/docs/public/favicon.svg
index 4fc6a87f..9a55389d 100644
--- a/apps/docs/public/favicon.svg
+++ b/apps/docs/public/favicon.svg
@@ -1,4 +1,4 @@
 <svg width="95" height="86" viewBox="0 0 95 86" fill="none" xmlns="http://www.w3.org/2000/svg">
 <title>Primitree</title>
-<path d="M36.76 85.34L41.7 58.07L37.3 60.88C20.85 71.1 -1.72 58.7 0.1 38.87C1.36 25.27 10.05 13.33 21.66 6.62C48.59 -8.95 89.6 3.69 94.62 36.67C97.83 57.79 76.07 71.48 58.03 60.92L53.42 58.06L58.23 85.33H36.76V85.34ZM42.44 8.69C38.52 8.99 34.65 9.87 31.04 11.39L30.99 34.53L42.45 41.4V8.69H42.44ZM52.56 8.88V19.19L64.9 12.09C64.95 11.83 64.8 11.92 64.65 11.85C61.71 10.44 57.91 9.45 54.68 8.98C54.13 8.9 53.34 8.74 52.81 8.75C52.7 8.75 52.59 8.77 52.56 8.88ZM22.44 16.59L20.22 18.25C18.14 20.3 16.03 22.37 14.54 24.91L22.44 29.42V16.58V16.59ZM52.56 41.28L80.7 24.81C79.28 22.73 77.66 20.56 75.77 18.88C75.56 18.69 74.41 17.69 74.28 17.64C74.06 17.54 73.89 17.72 73.71 17.81L52.72 30.33L52.57 41.28H52.56ZM10.35 32.88C9.18 37.97 8.35 43.02 11.07 47.77C14.73 54.18 22.78 56.77 29.67 54.35C32.54 53.34 35.47 51.47 37.63 49.35L10.36 32.87L10.35 32.88ZM84.46 32.89L57.62 49.48C63.17 55.44 71.96 57.46 79.08 52.93C85.1 49.1 86.82 43.04 85.45 36.21C85.38 35.86 84.63 32.88 84.46 32.88V32.89Z" fill="#5F7F2F"/>
+<path d="M36.76 85.34L41.7 58.07L37.3 60.88C20.85 71.1 -1.72 58.7 0.1 38.87C1.36 25.27 10.05 13.33 21.66 6.62C48.59 -8.95 89.6 3.69 94.62 36.67C97.83 57.79 76.07 71.48 58.03 60.92L53.42 58.06L58.23 85.33H36.76V85.34ZM42.44 8.69C38.52 8.99 34.65 9.87 31.04 11.39L30.99 34.53L42.45 41.4V8.69H42.44ZM52.56 8.88V19.19L64.9 12.09C64.95 11.83 64.8 11.92 64.65 11.85C61.71 10.44 57.91 9.45 54.68 8.98C54.13 8.9 53.34 8.74 52.81 8.75C52.7 8.75 52.59 8.77 52.56 8.88ZM22.44 16.59L20.22 18.25C18.14 20.3 16.03 22.37 14.54 24.91L22.44 29.42V16.58V16.59ZM52.56 41.28L80.7 24.81C79.28 22.73 77.66 20.56 75.77 18.88C75.56 18.69 74.41 17.69 74.28 17.64C74.06 17.54 73.89 17.72 73.71 17.81L52.72 30.33L52.57 41.28H52.56ZM10.35 32.88C9.18 37.97 8.35 43.02 11.07 47.77C14.73 54.18 22.78 56.77 29.67 54.35C32.54 53.34 35.47 51.47 37.63 49.35L10.36 32.87L10.35 32.88ZM84.46 32.89L57.62 49.48C63.17 55.44 71.96 57.46 79.08 52.93C85.1 49.1 86.82 43.04 85.45 36.21C85.38 35.86 84.63 32.88 84.46 32.88V32.89Z" fill="#0B9464"/>
 </svg>
diff --git a/apps/docs/tests/brand-logo.test.ts b/apps/docs/tests/brand-logo.test.ts
index a47eda27..c4b96164 100644
--- a/apps/docs/tests/brand-logo.test.ts
+++ b/apps/docs/tests/brand-logo.test.ts
@@ -93,13 +93,24 @@ async function loadBrandLogo() {
 test('linked BrandLogo exposes one Primitree name with the compact tree mark', async () => {
   const BrandLogo = await loadBrandLogo()
   const logo = BrandLogo({ linked: true })
-  const inner = logo?.props.children as ElementNode
-  const mark = (inner.props.children as ElementNode[])[0]
+  const nodes = elementNodes(logo)
+  const markComponent = nodes.find(
+    node =>
+      typeof node.type === 'function' &&
+      (node.type as { name?: string }).name === 'BrandMark'
+  )
+  assert.ok(markComponent, 'the logo must render the inline BrandMark')
+  const mark = (markComponent.type as (props: object) => ElementNode)(
+    markComponent.props
+  )
+  const markBody = elementNodes(mark).find(
+    node => node.props.className === 'brand-mark-body'
+  )
 
   assert.equal(textContent(logo), 'Primitree')
   assert.equal(logo.props.href, '/')
-  assert.equal(mark.props.src, '/primitree-icon.svg')
-  assert.equal(mark.props.alt, '')
+  assert.equal(mark.type, 'svg')
+  assert.ok(markBody, 'the mark body must carry the themable brand class')
 })
 
 test('unlinked BrandLogo keeps the mark and wordmark in one caller-styled layout wrapper', async () => {
diff --git a/apps/docs/tests/color-system.test.ts b/apps/docs/tests/color-system.test.ts
index adab5f14..0144bcd3 100644
--- a/apps/docs/tests/color-system.test.ts
+++ b/apps/docs/tests/color-system.test.ts
@@ -9,14 +9,18 @@ const formerBrandColors = [
   '#7b8cff',
   '#c7d2fe',
   '#a78bfa',
-  '#34d399',
-  '#fbbf24',
   '#ff6b81',
+  '#a8c95f',
+  '#5f7f2f',
+  '#dde9b9',
+  '#45c98b',
+  '#f2b84b',
+  '#f27575',
   'rgba(139, 156, 255',
   'rgba(123, 140, 255',
-  'rgba(52, 211, 153',
-  'rgba(251, 191, 36',
   'rgba(255, 107, 129',
+  'rgb(168 201 95',
+  'rgb(69 201 139',
 ] as const
 
 async function read(relativePath: string) {
@@ -85,25 +89,49 @@ function flatCssRules(theme: string) {
   )
 }
 
-test('documentation theme exposes the approved Lichen palette', async () => {
+test('documentation theme exposes the approved brand palette', async () => {
   const theme = await read('../app/global.css')
 
-  assert.match(theme, /--color-primitree-accent: #a8c95f;/u)
-  assert.match(theme, /--color-primitree-accent-strong: #5f7f2f;/u)
-  assert.match(theme, /--color-primitree-accent-soft: #dde9b9;/u)
+  assert.match(theme, /--color-primitree-accent: #34d399;/u)
+  assert.match(theme, /--color-primitree-accent-strong: #0b9464;/u)
+  assert.match(theme, /--color-primitree-accent-soft: #6ee7b7;/u)
+  assert.match(theme, /--color-primitree-accent-ink: #04251a;/u)
   assert.match(
     theme,
-    /--color-primitree-accent-wash: rgb\(168 201 95 \/ 10%\);/u
+    /--color-primitree-accent-wash: rgb\(52 211 153 \/ 10%\);/u
   )
-  assert.match(theme, /--color-primitree-good: #45c98b;/u)
-  assert.match(theme, /--color-primitree-warn: #f2b84b;/u)
-  assert.match(theme, /--color-primitree-error: #f27575;/u)
+  assert.match(theme, /--color-primitree-good: #34d399;/u)
+  assert.match(theme, /--color-primitree-warn: #fbbf24;/u)
+  assert.match(theme, /--color-primitree-error: #f87171;/u)
   assert.match(
     theme,
-    /::selection\s*\{\s*background: rgb\(168 201 95 \/ 25%\);/u
+    /::selection\s*\{\s*background: rgb\(52 211 153 \/ 25%\);/u
   )
 })
 
+test('documentation theme carries a complete light overlay', async () => {
+  const theme = await read('../app/global.css')
+  const lightBlock = theme.match(
+    /:root\[data-theme='light'\] \{[\s\S]*?\n\}/u
+  )?.[0]
+  assert.ok(lightBlock, 'the light theme overlay must exist')
+
+  for (const variable of [
+    '--color-primitree-bg: #f6faf8;',
+    '--color-primitree-surface: #ffffff;',
+    '--color-primitree-text: #0a1510;',
+    '--color-primitree-accent: #0b9464;',
+    '--color-primitree-accent-ink: #eafff6;',
+    '--color-primitree-warn: #b45309;',
+    '--color-primitree-error: #dc2626;',
+  ]) {
+    assert.ok(
+      lightBlock.includes(variable),
+      `light theme must define ${variable}`
+    )
+  }
+})
+
 test('documentation dim text clears AA contrast on every landing surface', async () => {
   const theme = await read('../app/global.css')
   const dim = themeHex(theme, 'color-primitree-dim')
@@ -125,52 +153,66 @@ test('documentation dim text clears AA contrast on every landing surface', async
   }
 })
 
-test('living canopy never fades text-bearing stages or graph nodes', async () => {
+test('token graph fades text only for the transient hover trace', async () => {
   const theme = await read('../app/global.css')
   const textBearingSelector =
-    /\.canopy-(?:source|token|dependent|output)-node|\.canopy-stage-track\s*>\s*li/u
+    /\.graph-node(?!-swatch)|\.graph-violation-tag|\.proof-(?:verdict|detail)/u
 
   const fadedTextRules = flatCssRules(theme).filter(
     ({ declarations, selectors }) =>
-      textBearingSelector.test(selectors) && /\bopacity\s*:/u.test(declarations)
+      textBearingSelector.test(selectors) &&
+      /\bopacity\s*:/u.test(declarations) &&
+      !selectors.includes('[data-dim]')
   )
 
   assert.deepEqual(
     fadedTextRules,
     [],
-    'stage emphasis must change connectors and borders, never text opacity'
+    'static outcome emphasis must change connectors and borders, never text opacity'
   )
 })
 
-test('living canopy provides a legible compact graph below tablet width', async () => {
-  const [theme, canopy] = await Promise.all([
+test('token graph scrolls in place and keeps its labels legible', async () => {
+  const [theme, graph] = await Promise.all([
     read('../app/global.css'),
-    read('../components/landing/living-canopy.tsx'),
+    read('../components/landing/token-graph.tsx'),
   ])
 
-  assert.match(canopy, /className='canopy-mobile-graph'/u)
-  assert.match(theme, /\.canopy-mobile-graph\s*\{[\s\S]*?display: none;/u)
-  assert.match(
-    theme,
-    /@media \(max-width: 719px\)[\s\S]*?\.canopy-svg\s*\{\s*display: none;\s*\}/u
-  )
-  assert.match(
-    theme,
-    /@media \(max-width: 719px\)[\s\S]*?\.canopy-mobile-graph\s*\{[\s\S]*?display: grid;/u
-  )
+  assert.match(graph, /className='graph-svg'/u)
+  assert.match(graph, /viewBox=\{`0 0 \$\{VIEW_WIDTH\} \$\{VIEW_HEIGHT\}`\}/u)
+  const viewWidth = graph.match(/const VIEW_WIDTH = (\d+)/u)?.[1]
+  assert.ok(viewWidth, 'the graph must declare its viewBox width')
+
+  const ruleFor = (selector: string) =>
+    flatCssRules(theme).find(
+      ({ selectors }) =>
+        selectors.replace(/\/\*[\s\S]*?\*\//gu, '').trim() === selector
+    )
+  const scrollRule = ruleFor('.graph-scroll')
   assert.match(
-    theme,
-    /@media \(max-width: 719px\)[\s\S]*?\.canopy-stage-track strong\s*\{\s*font-size: 12px;\s*\}/u
+    scrollRule?.declarations ?? '',
+    /overflow-x: auto;/u,
+    'the graph must scroll inside its own container on small screens'
   )
 
-  const mobileNodeRule = flatCssRules(theme).find(({ selectors }) =>
-    selectors.trim().startsWith('.canopy-mobile-node')
-  )
-  const fontSize = mobileNodeRule?.declarations.match(
+  const frameRule = ruleFor('.graph-frame')
+  const minWidth = frameRule?.declarations.match(
+    /min-width:\s*([0-9.]+)px/u
+  )?.[1]
+  assert.ok(minWidth, 'the graph frame must set a minimum width')
+
+  const labelRule = ruleFor('.graph-node-label')
+  const fontSize = labelRule?.declarations.match(
     /font-size:\s*([0-9.]+)px/u
   )?.[1]
-  assert.ok(fontSize, 'compact graph nodes must set a CSS-pixel font size')
-  assert.ok(Number(fontSize) >= 12, 'compact graph text must be at least 12px')
+  assert.ok(fontSize, 'graph labels must set a CSS-pixel font size')
+
+  const effectiveFontSize =
+    (Number(minWidth) / Number(viewWidth)) * Number(fontSize)
+  assert.ok(
+    effectiveFontSize >= 12,
+    `graph labels must stay at least 12px when scaled (got ${effectiveFontSize.toFixed(2)}px)`
+  )
 })
 
 test('documentation shell maps Fumadocs to the Lichen theme', async () => {
@@ -180,7 +222,10 @@ test('documentation shell maps Fumadocs to the Lichen theme', async () => {
   assert.match(theme, /--color-fd-background: var\(--color-primitree-bg\);/u)
   assert.match(theme, /--color-fd-foreground: var\(--color-primitree-text\);/u)
   assert.match(theme, /--color-fd-primary: var\(--color-primitree-accent\);/u)
-  assert.match(theme, /--color-fd-primary-foreground: #09090b;/u)
+  assert.match(
+    theme,
+    /--color-fd-primary-foreground: var\(--color-primitree-accent-ink\);/u
+  )
   assert.match(
     theme,
     /--color-fd-accent: var\(--color-primitree-accent-wash\);/u
@@ -193,7 +238,10 @@ test('documentation shell maps Fumadocs to the Lichen theme', async () => {
 test('documentation brand files contain no former Primitree purple treatment', async () => {
   const sources = await Promise.all([
     read('../app/global.css'),
-    read('../components/landing/living-canopy.tsx'),
+    read('../components/landing/token-graph.tsx'),
+    read('../components/landing/proof-panel.tsx'),
+    read('../components/landing/install-card.tsx'),
+    read('../components/landing/governance-home.tsx'),
     read('../components/playground/playground.css'),
     read('../public/favicon.svg'),
     read('../public/primitree-icon.svg'),
@@ -205,31 +253,31 @@ test('documentation brand files contain no former Primitree purple treatment', a
   }
 })
 
-test('living canopy makes the Bone mark a structural Lichen root', async () => {
-  const [theme, canopy] = await Promise.all([
+test('token graph keeps the structural Lichen contract', async () => {
+  const [theme, graph] = await Promise.all([
     read('../app/global.css'),
-    read('../components/landing/living-canopy.tsx'),
+    read('../components/landing/token-graph.tsx'),
   ])
 
-  assert.match(canopy, /className='canopy-logo'/u)
+  assert.match(graph, /className='graph-node'/u)
+  assert.match(graph, /className='graph-edge'/u)
+  assert.doesNotMatch(graph, /(?:linear|radial)Gradient|filter=|pointermove/u)
+  assert.doesNotMatch(graph, /\binfinite\b/u)
   assert.match(
-    canopy,
-    /className='canopy-logo-body'\s+d=\{MARK_PATH\}\s+fill='var\(--color-primitree-text\)'/u
+    theme,
+    /\.graph-node-box\s*\{[\s\S]*?fill: var\(--color-primitree-surface\);/u
   )
-  assert.match(canopy, /className='canopy-root-node'/u)
-  assert.doesNotMatch(canopy, /(?:linear|radial)Gradient|filter=|pointermove/u)
-  assert.doesNotMatch(canopy, /\binfinite\b/u)
   assert.match(
     theme,
-    /\.canopy-logo-body\s*\{\s*fill: var\(--color-primitree-text\);\s*\}/u
+    /\.graph-edge\[data-tone='governed'\]\s*\{[\s\S]*?stroke: var\(--color-primitree-accent\);/u
   )
   assert.match(
     theme,
-    /\.canopy-source-swatch,\s*\.canopy-root-node\s*\{\s*fill: var\(--color-primitree-accent\);\s*\}/u
+    /\.graph-edge\[data-tone='violation'\]\s*\{[\s\S]*?stroke: var\(--color-primitree-error\);/u
   )
   assert.match(
     theme,
-    /\.canopy-trunk\s*\{[\s\S]*stroke: var\(--color-primitree-accent\);/u
+    /\.graph-node:focus-visible \.graph-node-box\s*\{[\s\S]*?stroke: var\(--color-primitree-text\);/u
   )
 })
 
@@ -247,7 +295,7 @@ test('documentation UI uses solid accents, neutral actions, and neutral focus',
   )
   assert.match(
     playground,
-    /\.pg-button\.primary\s*\{\s*background: #fafafa;\s*color: #09090b;\s*\}/u
+    /\.pg-button\.primary\s*\{\s*background: var\(--color-primitree-accent\);\s*color: #04251a;\s*\}/u
   )
   assert.match(playground, /outline: 2px solid var\(--color-primitree-text\);/u)
   assert.match(
@@ -267,23 +315,22 @@ test('documentation UI uses solid accents, neutral actions, and neutral focus',
     chrome,
     /import\s*\{\s*FullSearchTrigger,\s*SearchTrigger,\s*\}\s*from 'fumadocs-ui\/layouts\/shared\/slots\/search-trigger'/u
   )
-  assert.match(chrome, /function GithubMark\(\)/u)
-  assert.match(chrome, /fill='currentColor'/u)
+  assert.match(chrome, /GithubLogoIcon/u)
   assert.match(chrome, /aria-label='Primitree on GitHub'/u)
   assert.match(
     theme,
-    /\.site-icon-control\s*\{[\s\S]*width: 44px !important;[\s\S]*height: 44px !important;/u
+    /\.site-icon-control\s*\{[\s\S]*width: 44px;[\s\S]*height: 44px;/u
   )
 })
 
-test('documentation static mark stays white and favicon uses the light-surface Lichen accent', async () => {
+test('documentation static mark stays white and favicon uses the light-surface accent', async () => {
   const [mark, favicon] = await Promise.all([
     read('../public/primitree-icon.svg'),
     read('../public/favicon.svg'),
   ])
 
   assert.match(mark, /fill="(?:white|#ffffff)"/iu)
-  assert.match(favicon, /fill="#5f7f2f"/iu)
+  assert.match(favicon, /fill="#0b9464"/iu)
   assert.equal((mark.match(/\bfill="(?:white|#ffffff)"/giu) ?? []).length, 1)
-  assert.equal((favicon.match(/\bfill="#5f7f2f"/giu) ?? []).length, 1)
+  assert.equal((favicon.match(/\bfill="#0b9464"/giu) ?? []).length, 1)
 })
diff --git a/apps/docs/tests/governance-demo.test.ts b/apps/docs/tests/governance-demo.test.ts
index a402023c..71fe78e2 100644
--- a/apps/docs/tests/governance-demo.test.ts
+++ b/apps/docs/tests/governance-demo.test.ts
@@ -1,6 +1,10 @@
 import assert from 'node:assert/strict'
 import { test } from 'node:test'
-import { createGovernanceDemo } from '../lib/landing/governance-demo.ts'
+import {
+  createGovernanceDemo,
+  createProposalDeck,
+  describeLayersSnippet,
+} from '../lib/landing/governance-demo.ts'
 
 test('governance demo derives truthful graph and policy evidence', () => {
   const demo = createGovernanceDemo()
@@ -16,9 +20,12 @@ test('governance demo derives truthful graph and policy evidence', () => {
   assert.deepEqual(demo.blocked, {
     status: 'BLOCK',
     ruleId: 'PT1004',
-    reason: 'Layer semantic cannot reference layer component.',
+    reason: 'Layer component cannot reference layer primitives.',
+    findingCount: 3,
   })
   assert.deepEqual(demo.outputs, ['CSS', 'Tailwind', 'TypeScript'])
+  assert.equal(demo.tokenCount, 15)
+  assert.equal(demo.layerCount, 3)
 })
 
 test('governance demo derives output labels from the DTCG build result', () => {
@@ -30,3 +37,140 @@ test('governance demo derives output labels from the DTCG build result', () => {
 
   assert.deepEqual(tailwindOnly.outputs, ['Tailwind'])
 })
+
+test('proposal deck derives every outcome from the engine', () => {
+  const deck = createProposalDeck()
+
+  assert.deepEqual(
+    deck.outcomes.map(outcome => outcome.id),
+    ['baseline', 'alias', 'violation', 'rename']
+  )
+
+  const [baseline, alias, violation, rename] = deck.outcomes
+  assert.equal(baseline?.status, 'PASS')
+  assert.equal(baseline?.findingsLine, '0 findings')
+  const baselineBrand = baseline?.nodes.find(
+    node => node.slot === 'semantic.color.bg.brand'
+  )
+  assert.equal(baselineBrand?.label, 'color.bg.brand')
+  assert.equal(baselineBrand?.display, '→ {blue.500}')
+  assert.equal(baselineBrand?.consumers, 3)
+  assert.equal(baselineBrand?.owner, 'product-design')
+  const baselineBlue = baseline?.nodes.find(
+    node => node.slot === 'primitives.color.blue.500'
+  )
+  assert.equal(baselineBlue?.label, 'blue.500')
+  assert.equal(baselineBlue?.swatch, '#3366ff')
+  const baselineButton = baseline?.nodes.find(
+    node => node.slot === 'component.button.bg'
+  )
+  assert.equal(baselineButton?.display, '→ {bg.brand}')
+
+  assert.equal(alias?.status, 'PASS')
+  const aliasBrand = alias?.nodes.find(
+    node => node.slot === 'semantic.color.bg.brand'
+  )
+  assert.equal(aliasBrand?.display, '→ {green.500}')
+  const aliasGreen = alias?.nodes.find(
+    node => node.slot === 'primitives.color.green.500'
+  )
+  assert.equal(aliasGreen?.swatch, '#34d399')
+
+  assert.equal(violation?.status, 'FAIL')
+  assert.equal(violation?.findingsLine, '3 findings · layer-skip')
+  assert.equal(violation?.edges.filter(edge => edge.violation).length, 3)
+  const violationBrand = violation?.nodes.find(
+    node => node.slot === 'semantic.color.bg.brand'
+  )
+  assert.equal(violationBrand?.consumers, 3)
+  assert.deepEqual(
+    violation?.nodes
+      .filter(node => node.finding !== null)
+      .map(node => node.path)
+      .sort(),
+    ['component.button.bg', 'component.card.inset', 'component.focus.ring']
+  )
+  assert.deepEqual(
+    violation?.edges
+      .filter(edge => edge.violation)
+      .map(edge => `${edge.from}>${edge.to}`)
+      .sort(),
+    [
+      'primitives.color.blue.500>component.button.bg',
+      'primitives.color.green.500>component.focus.ring',
+      'primitives.space.4>component.card.inset',
+    ]
+  )
+
+  assert.equal(rename?.status, 'PASS')
+  assert.equal(rename?.findingsLine, '5 changes · 0 findings')
+  const renamed = rename?.nodes.find(
+    node => node.slot === 'semantic.color.bg.brand'
+  )
+  assert.equal(renamed?.path, 'semantic.color.bg.primary')
+  assert.equal(renamed?.change, 'added')
+  const renamedButton = rename?.nodes.find(
+    node => node.slot === 'component.button.bg'
+  )
+  assert.equal(renamedButton?.display, '→ {bg.primary}')
+  assert.deepEqual(
+    rename?.nodes
+      .filter(node => node.change === 'changed')
+      .map(node => node.path)
+      .sort(),
+    ['component.button.bg', 'component.focus.ring', 'component.nav.active.bg']
+  )
+
+  assert.equal(
+    deck.diffReport.includes('removed semantic.color.bg.brand'),
+    true
+  )
+  assert.equal(
+    deck.diffReport.includes(
+      '  Affected tokens: component.button.bg, component.focus.ring, component.nav.active.bg'
+    ),
+    true
+  )
+  assert.equal(
+    deck.diffReport.includes('New findings: 0 · Resolved findings: 0'),
+    true
+  )
+  assert.deepEqual(deck.renameImpact, {
+    removedPath: 'semantic.color.bg.brand',
+    addedPath: 'semantic.color.bg.primary',
+    consumers: ['button.bg', 'focus.ring', 'nav.active.bg'],
+  })
+})
+
+test('graph projections keep every slot stable across proposals', () => {
+  const deck = createProposalDeck()
+  const [baseline] = deck.outcomes
+  const slots = baseline?.nodes.map(node => node.slot).sort() ?? []
+  assert.equal(slots.length, 15)
+
+  for (const outcome of deck.outcomes) {
+    assert.deepEqual(outcome.nodes.map(node => node.slot).sort(), slots)
+    const known = new Set(slots)
+    for (const edge of outcome.edges) {
+      assert.equal(known.has(edge.from), true)
+      assert.equal(known.has(edge.to), true)
+    }
+    assert.equal(outcome.edges.length, outcome.id === 'violation' ? 12 : 9)
+  }
+})
+
+test('quickstart config excerpt mirrors the policy layers', () => {
+  const snippet = describeLayersSnippet()
+  assert.match(
+    snippet,
+    /\{ id: 'primitives', roots: \['primitives'\], values: 'literal' \}/u
+  )
+  assert.match(
+    snippet,
+    /\{ id: 'semantic', roots: \['semantic'\], values: 'reference', references: \['primitives'\] \}/u
+  )
+  assert.match(
+    snippet,
+    /\{ id: 'component', roots: \['component'\], values: 'reference', references: \['semantic'\] \}/u
+  )
+})
diff --git a/apps/playground/public/favicon.svg b/apps/playground/public/favicon.svg
index 4fc6a87f..9a55389d 100644
--- a/apps/playground/public/favicon.svg
+++ b/apps/playground/public/favicon.svg
@@ -1,4 +1,4 @@
 <svg width="95" height="86" viewBox="0 0 95 86" fill="none" xmlns="http://www.w3.org/2000/svg">
 <title>Primitree</title>
-<path d="M36.76 85.34L41.7 58.07L37.3 60.88C20.85 71.1 -1.72 58.7 0.1 38.87C1.36 25.27 10.05 13.33 21.66 6.62C48.59 -8.95 89.6 3.69 94.62 36.67C97.83 57.79 76.07 71.48 58.03 60.92L53.42 58.06L58.23 85.33H36.76V85.34ZM42.44 8.69C38.52 8.99 34.65 9.87 31.04 11.39L30.99 34.53L42.45 41.4V8.69H42.44ZM52.56 8.88V19.19L64.9 12.09C64.95 11.83 64.8 11.92 64.65 11.85C61.71 10.44 57.91 9.45 54.68 8.98C54.13 8.9 53.34 8.74 52.81 8.75C52.7 8.75 52.59 8.77 52.56 8.88ZM22.44 16.59L20.22 18.25C18.14 20.3 16.03 22.37 14.54 24.91L22.44 29.42V16.58V16.59ZM52.56 41.28L80.7 24.81C79.28 22.73 77.66 20.56 75.77 18.88C75.56 18.69 74.41 17.69 74.28 17.64C74.06 17.54 73.89 17.72 73.71 17.81L52.72 30.33L52.57 41.28H52.56ZM10.35 32.88C9.18 37.97 8.35 43.02 11.07 47.77C14.73 54.18 22.78 56.77 29.67 54.35C32.54 53.34 35.47 51.47 37.63 49.35L10.36 32.87L10.35 32.88ZM84.46 32.89L57.62 49.48C63.17 55.44 71.96 57.46 79.08 52.93C85.1 49.1 86.82 43.04 85.45 36.21C85.38 35.86 84.63 32.88 84.46 32.88V32.89Z" fill="#5F7F2F"/>
+<path d="M36.76 85.34L41.7 58.07L37.3 60.88C20.85 71.1 -1.72 58.7 0.1 38.87C1.36 25.27 10.05 13.33 21.66 6.62C48.59 -8.95 89.6 3.69 94.62 36.67C97.83 57.79 76.07 71.48 58.03 60.92L53.42 58.06L58.23 85.33H36.76V85.34ZM42.44 8.69C38.52 8.99 34.65 9.87 31.04 11.39L30.99 34.53L42.45 41.4V8.69H42.44ZM52.56 8.88V19.19L64.9 12.09C64.95 11.83 64.8 11.92 64.65 11.85C61.71 10.44 57.91 9.45 54.68 8.98C54.13 8.9 53.34 8.74 52.81 8.75C52.7 8.75 52.59 8.77 52.56 8.88ZM22.44 16.59L20.22 18.25C18.14 20.3 16.03 22.37 14.54 24.91L22.44 29.42V16.58V16.59ZM52.56 41.28L80.7 24.81C79.28 22.73 77.66 20.56 75.77 18.88C75.56 18.69 74.41 17.69 74.28 17.64C74.06 17.54 73.89 17.72 73.71 17.81L52.72 30.33L52.57 41.28H52.56ZM10.35 32.88C9.18 37.97 8.35 43.02 11.07 47.77C14.73 54.18 22.78 56.77 29.67 54.35C32.54 53.34 35.47 51.47 37.63 49.35L10.36 32.87L10.35 32.88ZM84.46 32.89L57.62 49.48C63.17 55.44 71.96 57.46 79.08 52.93C85.1 49.1 86.82 43.04 85.45 36.21C85.38 35.86 84.63 32.88 84.46 32.88V32.89Z" fill="#0B9464"/>
 </svg>
diff --git a/apps/playground/src/color-system.test.ts b/apps/playground/src/color-system.test.ts
index 9c02c8f5..117a2eae 100644
--- a/apps/playground/src/color-system.test.ts
+++ b/apps/playground/src/color-system.test.ts
@@ -22,20 +22,20 @@ async function read(relativePath: string) {
 test('playground theme exposes the approved Lichen palette', async () => {
   const theme = await read('./styles.css')
 
-  expect(theme).toMatch(/--bg: #030304;/u)
-  expect(theme).toMatch(/--bg-surface: #08080a;/u)
-  expect(theme).toMatch(/--bg-raised: #0f0f12;/u)
-  expect(theme).toMatch(/--bg-hover: #16161a;/u)
-  expect(theme).toMatch(/--text: #fafafa;/u)
-  expect(theme).toMatch(/--accent: #a8c95f;/u)
-  expect(theme).toMatch(/--accent-strong: #5f7f2f;/u)
-  expect(theme).toMatch(/--accent-soft: #dde9b9;/u)
-  expect(theme).toMatch(/--accent-wash: rgb\(168 201 95 \/ 10%\);/u)
-  expect(theme).toMatch(/--good: #45c98b;/u)
-  expect(theme).toMatch(/--warn: #f2b84b;/u)
-  expect(theme).toMatch(/--error: #f27575;/u)
+  expect(theme).toMatch(/--bg: #0b0f0d;/u)
+  expect(theme).toMatch(/--bg-surface: #101512;/u)
+  expect(theme).toMatch(/--bg-raised: #161c18;/u)
+  expect(theme).toMatch(/--bg-hover: #1c241f;/u)
+  expect(theme).toMatch(/--text: #f0f5f2;/u)
+  expect(theme).toMatch(/--accent: #34d399;/u)
+  expect(theme).toMatch(/--accent-strong: #0b9464;/u)
+  expect(theme).toMatch(/--accent-soft: #6ee7b7;/u)
+  expect(theme).toMatch(/--accent-wash: rgb\(52 211 153 \/ 10%\);/u)
+  expect(theme).toMatch(/--good: #34d399;/u)
+  expect(theme).toMatch(/--warn: #fbbf24;/u)
+  expect(theme).toMatch(/--error: #f87171;/u)
   expect(theme).toMatch(
-    /::selection\s*\{\s*background: rgb\(168 201 95 \/ 25%\);/u
+    /::selection\s*\{\s*background: rgb\(52 211 153 \/ 25%\);/u
   )
 })
 
@@ -59,7 +59,7 @@ test('playground uses solid accents, neutral actions, and neutral focus', async
     /\.page-title em\s*\{\s*font-style: normal;\s*color: var\(--accent\);\s*\}/u
   )
   expect(theme).toMatch(
-    /\.button\.primary\s*\{\s*background: #fafafa;\s*color: #09090b;\s*\}/u
+    /\.button\.primary\s*\{\s*background: var\(--accent\);\s*color: #04251a;\s*\}/u
   )
   expect(theme).toMatch(/outline: 2px solid var\(--text\);/u)
   expect(theme).toMatch(/\.tab\.active\s*\{[\s\S]*color: var\(--accent\);/u)
@@ -75,7 +75,7 @@ test('playground static mark stays white and favicon uses the light-surface Lich
   ])
 
   expect(mark).toMatch(/fill="(?:white|#ffffff)"/iu)
-  expect(favicon).toMatch(/fill="#5f7f2f"/iu)
+  expect(favicon).toMatch(/fill="#0b9464"/iu)
   expect(mark.match(/\bfill="(?:white|#ffffff)"/giu)).toHaveLength(1)
-  expect(favicon.match(/\bfill="#5f7f2f"/giu)).toHaveLength(1)
+  expect(favicon.match(/\bfill="#0b9464"/giu)).toHaveLength(1)
 })
diff --git a/apps/playground/src/styles.css b/apps/playground/src/styles.css
index a11b0597..30cf8c3e 100644
--- a/apps/playground/src/styles.css
+++ b/apps/playground/src/styles.css
@@ -1,19 +1,19 @@
 :root {
   color-scheme: dark;
-  --bg: #030304;
-  --bg-surface: #08080a;
-  --bg-raised: #0f0f12;
-  --bg-hover: #16161a;
-  --border: rgb(255 255 255 / 6%);
-  --text: #fafafa;
-  --text-dim: #9ca3af;
-  --accent: #a8c95f;
-  --accent-strong: #5f7f2f;
-  --accent-soft: #dde9b9;
-  --accent-wash: rgb(168 201 95 / 10%);
-  --good: #45c98b;
-  --warn: #f2b84b;
-  --error: #f27575;
+  --bg: #0b0f0d;
+  --bg-surface: #101512;
+  --bg-raised: #161c18;
+  --bg-hover: #1c241f;
+  --border: rgb(255 255 255 / 9%);
+  --text: #f0f5f2;
+  --text-dim: #8fa39a;
+  --accent: #34d399;
+  --accent-strong: #0b9464;
+  --accent-soft: #6ee7b7;
+  --accent-wash: rgb(52 211 153 / 10%);
+  --good: #34d399;
+  --warn: #fbbf24;
+  --error: #f87171;
   --radius: 12px;
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
@@ -24,7 +24,7 @@
 }
 
 ::selection {
-  background: rgb(168 201 95 / 25%);
+  background: rgb(52 211 153 / 25%);
   color: #fff;
 }
 
@@ -204,7 +204,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 10px;
+  border-radius: 8px;
   padding: 10px 18px;
   font-size: 14px;
   font-weight: 600;
@@ -223,8 +223,8 @@ body {
 }
 
 .button.primary {
-  background: #fafafa;
-  color: #09090b;
+  background: var(--accent);
+  color: #04251a;
 }
 
 .button.ghost {
@@ -237,8 +237,8 @@ body {
   margin-top: 16px;
   padding: 12px 16px;
   border-radius: var(--radius);
-  border: 1px solid rgb(242 117 117 / 40%);
-  background: rgb(242 117 117 / 8%);
+  border: 1px solid rgb(248 113 113 / 40%);
+  background: rgb(248 113 113 / 8%);
   color: var(--error);
   font-size: 14px;
   font-family: var(--font-mono);
@@ -321,8 +321,8 @@ body {
 
 .warnings {
   margin: 0 0 16px;
-  border: 1px solid rgb(242 184 75 / 35%);
-  background: rgb(242 184 75 / 7%);
+  border: 1px solid rgb(251 191 36 / 35%);
+  background: rgb(251 191 36 / 7%);
   border-radius: var(--radius);
   padding: 10px 14px;
   font-size: 14px;
@@ -388,7 +388,7 @@ body {
   border: 1px solid var(--border);
   background: transparent;
   color: var(--text-dim);
-  border-radius: 999px;
+  border-radius: 8px;
   padding: 0 12px;
   font-size: 13px;
   cursor: pointer;
@@ -528,7 +528,7 @@ body {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 999px;
-  background: rgb(69 201 139 / 10%);
+  background: rgb(52 211 153 / 10%);
   color: var(--good);
   font-size: 12px;
   font-family: var(--font-sans);
@@ -625,7 +625,7 @@ body {
   }
 
   .button.primary:hover {
-    background: #e4e4e7;
+    background: var(--accent-soft);
   }
 
   .button.ghost:hover,
diff --git a/docs/superpowers/plans/2026-08-20-homepage-governance-proof.md b/docs/superpowers/plans/2026-08-20-homepage-governance-proof.md
new file mode 100644
index 00000000..73c76418
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-20-homepage-governance-proof.md
@@ -0,0 +1,1774 @@
+# Homepage Governance Proof Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the scroll-choreographed Living Canopy with a click-driven proof panel, a diff terminal, and a merged config section, per the spec at `docs/superpowers/specs/2026-08-20-homepage-governance-proof-design.md`.
+
+**Architecture:** `governance-demo.ts` gains a precomputed proposal deck built through `@primitree/core` and `@primitree/dtcg` at build time. A client `ProofPanel` switches between deck outcomes. A presentational `TokenTree` renders HTML nodes with CSS connectors. `governance-home.tsx` composes five sections in normal flow. Brand validators and tests retarget from the canopy to the new components.
+
+**Tech Stack:** Next.js 16 App Router, React 19, Tailwind 4 with handwritten classes in `apps/docs/app/global.css`, node:test, Playwright.
+
+## Global Constraints
+
+- Every string in TSX, including comments, passes `node scripts/check-prose.mjs`. Write zero comments in new components. Banned in copy, from `scripts/prose/rules.mjs`: em dashes, passive voice, `ensure`, `you can`, `lets you`, `only`, most `ly` adverbs, sentence-initial `If`, `Then`, or Wh-words, `simple`, `easy`, `consistent`, `flexible`, `seamless`, `powerful`.
+- Color values in UI sources pass `node scripts/check-brand.mjs`. Use `--color-primitree-*` variables from `global.css:5-26`. No former brand hex values.
+- No scroll observers, no sticky choreography, no `pointermove` listeners, no infinite animations. Brand rules enforce the last two on every `apps/docs/components/landing/` file.
+- Node >= 24, pnpm >= 11. Run docs commands as `pnpm --filter primitree-docs run <script>` from the repo root.
+- Commit after each task on branch `feat/homepage-governance-proof`.
+
+## Verified engine facts
+
+Values below come from running the packages in this workspace on 2026-08-20. Tests in the tasks pin them.
+
+- Green primitive `{ colorSpace: 'srgb', components: [0.372549, 0.498039, 0.184314], alpha: 1 }` resolves to hex `#5f7f2f` and passes policy with 0 findings when `semantic.color.bg.brand` aliases it.
+- `buildDTCGOutputs` emits `css/tokens.css` containing `  --semantic-color-bg-brand: var(--primitives-color-blue-500);` and `ts/tokens.ts` containing `  ["semantic.color.bg.brand"]: "color(srgb 0.2 0.4 1)",` for the baseline document.
+- `diffGraphViews(before, after)` for the rename returns five changes in this order: `changed component.button.bg`, `changed component.focus.ring`, `changed component.nav.active.bg`, `removed semantic.color.bg.brand`, `added semantic.color.bg.primary`. The removed and added changes each list the three component consumers as impacted. `GraphChange` reads `{ kind, tokenId, impactedTokenIds }`.
+- The blocked finding stays `PT1004` with message `Layer semantic cannot reference layer component.`
+
+---
+
+### Task 1: Proposal deck in governance-demo.ts
+
+**Files:**
+
+- Modify: `apps/docs/lib/landing/governance-demo.ts`
+- Test: `apps/docs/tests/governance-demo.test.ts`
+
+**Interfaces:**
+
+- Consumes: existing module internals: `compliantDocument`, `blockedDocument`, `policyInput`, `outputSet`, `buildSnapshot`, `requireBuildValue`, `resolveSrgbHex`.
+- Produces: `createProposalDeck(): ProposalDeck` and the exported types below. Task 3 reads `ProposalOutcome.tokenPath`, `.proposedValue`, `.resolvedValue`, `.description`, `.id`. Task 4 reads `.label`, `.verdict`, `.verdictTone`, `.detail`, `.emitted`. Task 5 reads `ProposalDeck.diffReport`.
+
+- [ ] **Step 1: Write the failing test**
+
+Append to `apps/docs/tests/governance-demo.test.ts`:
+
+```ts
+test('proposal deck derives every outcome from the engine', () => {
+  const deck = createProposalDeck()
+
+  assert.deepEqual(
+    deck.outcomes.map(outcome => outcome.id),
+    ['baseline', 'alias', 'violation', 'rename']
+  )
+
+  const [baseline, alias, violation, rename] = deck.outcomes
+  assert.equal(baseline.verdict, 'PASS · 0 findings')
+  assert.equal(baseline.resolvedValue, '#3366ff')
+  assert.match(
+    baseline.emitted?.css ?? '',
+    /--semantic-color-bg-brand: var\(--primitives-color-blue-500\);/u
+  )
+
+  assert.equal(alias.verdict, 'PASS · 0 findings')
+  assert.equal(alias.resolvedValue, '#5f7f2f')
+  assert.match(
+    alias.emitted?.css ?? '',
+    /--semantic-color-bg-brand: var\(--primitives-color-green-500\);/u
+  )
+  assert.match(alias.emitted?.ts ?? '', /color\(srgb 0\.372549/u)
+
+  assert.equal(violation.verdict, 'BLOCK · PT1004')
+  assert.equal(violation.detail, 'Layer semantic cannot reference layer component.')
+  assert.equal(violation.emitted, null)
+  assert.equal(violation.resolvedValue, null)
+
+  assert.equal(rename.tokenPath, 'semantic.color.bg.primary')
+  assert.equal(rename.verdict, '5 changes · 3 tokens affected')
+  assert.equal(deck.diffReport.includes('removed semantic.color.bg.brand'), true)
+  assert.equal(
+    deck.diffReport.includes(
+      '  Affected tokens: component.button.bg, component.focus.ring, component.nav.active.bg'
+    ),
+    true
+  )
+})
+```
+
+Add `createProposalDeck` to the import at the top of the file.
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run: `pnpm --filter primitree-docs run test`
+Expected: FAIL, `createProposalDeck` has no export.
+
+- [ ] **Step 3: Implement the deck**
+
+In `apps/docs/lib/landing/governance-demo.ts`:
+
+3a. Add `diffGraphViews` to the `@primitree/core` import.
+
+3b. Add the green primitive inside `compliantDocument.primitives.color`, beside `blue`:
+
+```ts
+green: {
+  '500': {
+    $type: 'color',
+    $value: {
+      colorSpace: 'srgb',
+      components: [0.372549, 0.498039, 0.184314],
+      alpha: 1,
+    },
+  },
+},
+```
+
+3c. Add the two documents after `blockedDocument`:
+
+```ts
+const aliasDocument = {
+  ...compliantDocument,
+  semantic: {
+    color: {
+      bg: {
+        ...compliantDocument.semantic.color.bg,
+        brand: { $type: 'color', $value: '{primitives.color.green.500}' },
+      },
+    },
+  },
+} as const
+
+const renameDocument = {
+  primitives: compliantDocument.primitives,
+  semantic: {
+    color: {
+      bg: {
+        primary: { $type: 'color', $value: '{primitives.color.blue.500}' },
+        support: compliantDocument.semantic.color.bg.support,
+      },
+    },
+  },
+  component: {
+    button: {
+      bg: { $type: 'color', $value: '{semantic.color.bg.primary}' },
+    },
+    nav: {
+      active: {
+        bg: { $type: 'color', $value: '{semantic.color.bg.primary}' },
+      },
+    },
+    focus: {
+      ring: { $type: 'color', $value: '{semantic.color.bg.primary}' },
+    },
+    color: compliantDocument.component.color,
+  },
+} as const
+```
+
+3d. Add the types beside `GovernanceDemo`:
+
+```ts
+export interface ProposalOutcome {
+  readonly id: 'baseline' | 'alias' | 'violation' | 'rename'
+  readonly label: string
+  readonly tokenPath: string
+  readonly proposedValue: string
+  readonly verdict: string
+  readonly verdictTone: 'pass' | 'block' | 'review'
+  readonly detail: string
+  readonly resolvedValue: string | null
+  readonly emitted: { readonly css: string; readonly ts: string } | null
+  readonly description: string
+}
+
+export interface ProposalDeck {
+  readonly outcomes: readonly ProposalOutcome[]
+  readonly diffReport: readonly string[]
+}
+```
+
+3e. Add the helpers after `buildOutputLabels`:
+
+```ts
+function emittedExcerpt(document: unknown, cssNeedle: string, tsNeedle: string) {
+  const built = buildDTCGOutputs(
+    { ...outputSet, files: { 'living-canopy.tokens.json': document as DTCGDocument } },
+    {}
+  )
+  const findLine = (path: string, needle: string) => {
+    const file = built.files.find(item => item.path === path)
+    const line = file?.contents.split('\n').find(item => item.includes(needle))
+    if (line === undefined) {
+      throw new Error(`Governance demo expected ${needle} in ${path}.`)
+    }
+    return line.trim()
+  }
+  return Object.freeze({
+    css: findLine('css/tokens.css', cssNeedle),
+    ts: findLine('ts/tokens.ts', tsNeedle),
+  })
+}
+
+function inspectResolvedHex(
+  snapshot: ReturnType<typeof buildSnapshot>,
+  path: readonly string[]
+): string {
+  const inspection = requireBuildValue(
+    inspectToken(snapshot, { kind: 'path', path: [...path] }),
+    'proposal inspection'
+  )
+  return resolveSrgbHex(inspection.resolution.value)
+}
+
+function buildDiffReport(
+  before: ReturnType<typeof buildSnapshot>,
+  after: ReturnType<typeof buildSnapshot>
+): readonly string[] {
+  const paths = new Map<TokenId, string>()
+  for (const token of [...before.view.tokens, ...after.view.tokens]) {
+    paths.set(token.tokenId, token.path.join('.'))
+  }
+  const diff = requireBuildValue(diffGraphViews(before, after), 'rename diff')
+  const describe = (tokenId: TokenId) => {
+    const path = paths.get(tokenId)
+    if (path === undefined) {
+      throw new Error('Governance demo expected a path for every diff token.')
+    }
+    return path
+  }
+  const lines: string[] = [
+    '$ primitree diff tokens.before.json tokens.json --config primitree.config.ts',
+    '',
+    `Diff found ${diff.changes.length} token changes.`,
+  ]
+  for (const change of diff.changes) {
+    lines.push(`${change.kind} ${describe(change.tokenId)}`)
+    lines.push(
+      `  Affected tokens: ${
+        change.impactedTokenIds.length === 0
+          ? 'none'
+          : change.impactedTokenIds.map(describe).join(', ')
+      }`
+    )
+  }
+  lines.push('New findings: 0', 'Resolved findings: 0')
+  return Object.freeze(lines)
+}
+```
+
+3f. Add the deck builder at the end of the file:
+
+```ts
+/** Builds the click-driven proposal outcomes for the homepage proof panel. */
+export function createProposalDeck(): ProposalDeck {
+  const policy = requireBuildValue(createPolicy(policyInput), 'policy creation')
+  const baselineSnapshot = buildSnapshot(compliantDocument)
+  const aliasSnapshot = buildSnapshot(aliasDocument)
+  const renameSnapshot = buildSnapshot(renameDocument)
+
+  const aliasReport = requireBuildValue(
+    evaluatePolicy(aliasSnapshot, policy),
+    'alias policy evaluation'
+  )
+  if (aliasReport.summary.active !== 0) {
+    throw new Error('Governance demo expected the alias proposal to pass.')
+  }
+  const blockedReport = requireBuildValue(
+    evaluatePolicy(buildSnapshot(blockedDocument), policy),
+    'blocked policy evaluation'
+  )
+  const blockedFinding = blockedReport.findings.find(finding => finding.ruleId === 'PT1004')
+  if (blockedFinding === undefined) {
+    throw new Error('Governance demo expected the PT1004 finding.')
+  }
+
+  const dependentList = expectedDependents.join(', ')
+  const baselineHex = inspectResolvedHex(baselineSnapshot, ['semantic', 'color', 'bg', 'brand'])
+  const aliasHex = inspectResolvedHex(aliasSnapshot, ['semantic', 'color', 'bg', 'brand'])
+  if (aliasHex !== '#5f7f2f') {
+    throw new Error('Governance demo expected the green alias to resolve to #5f7f2f.')
+  }
+  const diffReport = buildDiffReport(baselineSnapshot, renameSnapshot)
+  if (!diffReport.includes('removed semantic.color.bg.brand')) {
+    throw new Error('Governance demo expected the rename diff to remove the old path.')
+  }
+
+  const brandCss = '--semantic-color-bg-brand:'
+  const brandTs = '["semantic.color.bg.brand"]: "color('
+  const outcomes: readonly ProposalOutcome[] = Object.freeze([
+    Object.freeze({
+      id: 'baseline' as const,
+      label: 'Current graph',
+      tokenPath,
+      proposedValue: `{${aliasTarget}}`,
+      verdict: 'PASS · 0 findings',
+      verdictTone: 'pass' as const,
+      detail: 'Each layer references the layer beneath it. The graph ships.',
+      resolvedValue: baselineHex,
+      emitted: emittedExcerpt(compliantDocument, brandCss, brandTs),
+      description: `${tokenPath} references ${aliasTarget}, resolves to ${baselineHex}, and feeds ${dependentList}.`,
+    }),
+    Object.freeze({
+      id: 'alias' as const,
+      label: 'Compliant alias',
+      tokenPath,
+      proposedValue: '{primitives.color.green.500}',
+      verdict: 'PASS · 0 findings',
+      verdictTone: 'pass' as const,
+      detail: 'semantic references primitives, within policy. The change ships.',
+      resolvedValue: aliasHex,
+      emitted: emittedExcerpt(aliasDocument, brandCss, brandTs),
+      description: `${tokenPath} references primitives.color.green.500, resolves to ${aliasHex}, and feeds ${dependentList}.`,
+    }),
+    Object.freeze({
+      id: 'violation' as const,
+      label: 'Layer violation',
+      tokenPath,
+      proposedValue: '{component.color.brand}',
+      verdict: 'BLOCK · PT1004',
+      verdictTone: 'block' as const,
+      detail: blockedFinding.message,
+      resolvedValue: null,
+      emitted: null,
+      description: `${tokenPath} proposes a reference to component.color.brand. Policy PT1004 blocks the change: ${blockedFinding.message}`,
+    }),
+    Object.freeze({
+      id: 'rename' as const,
+      label: 'Rename',
+      tokenPath: 'semantic.color.bg.primary',
+      proposedValue: `{${aliasTarget}}`,
+      verdict: '5 changes · 3 tokens affected',
+      verdictTone: 'review' as const,
+      detail: 'The rename reaches every consumer of the old path.',
+      resolvedValue: baselineHex,
+      emitted: emittedExcerpt(
+        renameDocument,
+        '--semantic-color-bg-primary:',
+        '["semantic.color.bg.primary"]: "color('
+      ),
+      description: `semantic.color.bg.brand becomes semantic.color.bg.primary. The diff lists ${dependentList} as affected consumers.`,
+    }),
+  ])
+
+  return Object.freeze({ outcomes, diffReport })
+}
+```
+
+- [ ] **Step 4: Run the test to verify it passes**
+
+Run: `pnpm --filter primitree-docs run test`
+Expected: PASS, including the two existing governance-demo tests.
+
+- [ ] **Step 5: Prose and format gates, commit**
+
+```bash
+node scripts/check-prose.mjs
+pnpm exec prettier --write apps/docs/lib/landing/governance-demo.ts apps/docs/tests/governance-demo.test.ts
+git add apps/docs/lib/landing/governance-demo.ts apps/docs/tests/governance-demo.test.ts
+git commit -m "feat(docs): precompute homepage proposal deck from the engine"
+```
+
+---
+
+### Task 2: CopyCommand component
+
+**Files:**
+
+- Create: `apps/docs/components/landing/copy-command.tsx`
+- Modify: `apps/docs/app/global.css` (append styles)
+
+**Interfaces:**
+
+- Produces: `CopyCommand({ text, label }: { text: string; label: string })`, a client component button. Task 5 renders it in the hero and the config section.
+
+- [ ] **Step 1: Create the component**
+
+```tsx
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+
+export function CopyCommand({ text, label }: { text: string; label: string }) {
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timer.current)
+    }
+  }, [])
+
+  return (
+    <button
+      type='button'
+      className='copy-command'
+      aria-label={label}
+      data-copied={copied || undefined}
+      onClick={() => {
+        void navigator.clipboard.writeText(text).then(() => {
+          setCopied(true)
+          clearTimeout(timer.current)
+          timer.current = setTimeout(() => setCopied(false), 2000)
+        })
+      }}>
+      {copied ? (
+        <Check
+          aria-hidden='true'
+          size={14}
+        />
+      ) : (
+        <Copy
+          aria-hidden='true'
+          size={14}
+        />
+      )}
+    </button>
+  )
+}
+```
+
+- [ ] **Step 2: Append styles to global.css**
+
+Place after the `/* ---------- shared actions ---------- */` block:
+
+```css
+.copy-command {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid var(--color-primitree-border-strong);
+  color: var(--color-primitree-muted);
+  transition:
+    color 150ms var(--ease-out-expo),
+    border-color 150ms var(--ease-out-expo);
+}
+
+.copy-command:hover {
+  color: var(--color-primitree-text);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.copy-command[data-copied] {
+  color: var(--color-primitree-accent);
+  border-color: var(--color-primitree-accent);
+}
+
+.copy-command:focus-visible {
+  outline: 2px solid var(--color-primitree-text);
+  outline-offset: 2px;
+}
+```
+
+- [ ] **Step 3: Gates and commit**
+
+```bash
+pnpm --filter primitree-docs run typecheck
+node scripts/check-prose.mjs
+node scripts/check-brand.mjs
+pnpm exec prettier --write apps/docs/components/landing/copy-command.tsx apps/docs/app/global.css
+git add apps/docs/components/landing/copy-command.tsx apps/docs/app/global.css
+git commit -m "feat(docs): add copy command control for landing sections"
+```
+
+---
+
+### Task 3: TokenTree component
+
+**Files:**
+
+- Create: `apps/docs/components/landing/token-tree.tsx`
+- Modify: `apps/docs/app/global.css` (append styles)
+
+**Interfaces:**
+
+- Consumes: `GovernanceDemo` and `ProposalOutcome` from Task 1.
+- Produces: `TokenTree({ demo, outcome }: { demo: GovernanceDemo; outcome: ProposalOutcome })`. Task 4 renders it. The brand contract in Task 5 pins `tree-mark-body`, `tree-root-node`, `tree-trunk`, and `tree-token-node`.
+
+Layout, bottom-up like the config layers: mark, roots band with the alias node, trunk band with the governed token, canopy band with the three consumers, output strip on top. CSS connectors replace all SVG paths except the mark. HTML nodes size to their text, so long paths wrap instead of overflowing.
+
+- [ ] **Step 1: Create the component**
+
+Move `MARK_PATH` here from `living-canopy.tsx` (same string, `M36.76 85.34...`).
+
+```tsx
+import type { GovernanceDemo, ProposalOutcome } from '@/lib/landing/governance-demo'
+
+const MARK_PATH =
+  'M36.76 85.34L41.7 58.07L37.3 60.88C20.85 71.1 -1.72 58.7 0.1 38.87C1.36 25.27 10.05 13.33 21.66 6.62C48.59 -8.95 89.6 3.69 94.62 36.67C97.83 57.79 76.07 71.48 58.03 60.92L53.42 58.06L58.23 85.33H36.76V85.34ZM42.44 8.69C38.52 8.99 34.65 9.87 31.04 11.39L30.99 34.53L42.45 41.4V8.69H42.44ZM52.56 8.88V19.19L64.9 12.09C64.95 11.83 64.8 11.92 64.65 11.85C61.71 10.44 57.91 9.45 54.68 8.98C54.13 8.9 53.34 8.74 52.81 8.75C52.7 8.75 52.59 8.77 52.56 8.88ZM22.44 16.59L20.22 18.25C18.14 20.3 16.03 22.37 14.54 24.91L22.44 29.42V16.58V16.59ZM52.56 41.28L80.7 24.81C79.28 22.73 77.66 20.56 75.77 18.88C75.56 18.69 74.41 17.69 74.28 17.64C74.06 17.54 73.89 17.72 73.71 17.81L52.72 30.33L52.57 41.28H52.56ZM10.35 32.88C9.18 37.97 8.35 43.02 11.07 47.77C14.73 54.18 22.78 56.77 29.67 54.35C32.54 53.34 35.47 51.47 37.63 49.35L10.36 32.87L10.35 32.88ZM84.46 32.89L57.62 49.48C63.17 55.44 71.96 57.46 79.08 52.93C85.1 49.1 86.82 43.04 85.45 36.21C85.38 35.86 84.63 32.88 84.46 32.88V32.89Z'
+
+export function TokenTree({ demo, outcome }: { demo: GovernanceDemo; outcome: ProposalOutcome }) {
+  return (
+    <div
+      className='tree'
+      data-outcome={outcome.id}>
+      <p className='sr-only'>{outcome.description}</p>
+      <div
+        className='tree-outputs'
+        aria-hidden='true'>
+        <span className='tree-band-label'>Ships</span>
+        <code>{demo.outputs.join(' · ')}</code>
+      </div>
+      <div
+        className='tree-band tree-band-canopy'
+        aria-hidden='true'>
+        <span className='tree-band-label'>
+          Canopy<em>component</em>
+        </span>
+        <ul className='tree-consumers'>
+          {demo.directDependents.map(dependent => (
+            <li
+              key={dependent.path}
+              className='tree-node'>
+              <code>{dependent.path}</code>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div
+        className='tree-band tree-band-trunk'
+        aria-hidden='true'>
+        <span className='tree-band-label'>
+          Trunk<em>semantic</em>
+        </span>
+        <div className='tree-node tree-token-node'>
+          <span className='tree-node-kicker'>Governed token</span>
+          <code>{outcome.tokenPath}</code>
+          <span className='tree-root-node' />
+        </div>
+      </div>
+      <div
+        className='tree-band tree-band-roots'
+        aria-hidden='true'>
+        <span className='tree-band-label'>
+          Roots<em>primitives</em>
+        </span>
+        <div className='tree-alias-slot'>
+          <span
+            className='tree-spine tree-spine-alias'
+            key={outcome.id}
+          />
+          <div className='tree-node tree-source-node'>
+            <span className='tree-node-kicker'>Proposed alias</span>
+            <code>{outcome.proposedValue}</code>
+            {outcome.resolvedValue === null ? null : (
+              <span
+                className='tree-swatch'
+                style={{ background: outcome.resolvedValue }}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      <div
+        className='tree-mark'
+        aria-hidden='true'>
+        <span className='tree-trunk' />
+        <svg viewBox='0 0 95 86'>
+          <path
+            className='tree-mark-body'
+            d={MARK_PATH}
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}
+```
+
+- [ ] **Step 2: Append styles to global.css**
+
+Add a `/* ---------- token tree ---------- */` block:
+
+```css
+/* ---------- token tree ---------- */
+.tree {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 10px;
+  background: var(--color-primitree-surface);
+  overflow: hidden;
+}
+
+.tree-outputs {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 20px;
+  border-bottom: 1px dashed var(--color-primitree-border-strong);
+}
+
+.tree-outputs code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-primitree-muted);
+}
+
+.tree-band {
+  display: grid;
+  grid-template-columns: 104px minmax(0, 1fr);
+  gap: 16px;
+  padding: 20px;
+}
+
+.tree-band + .tree-band {
+  border-top: 1px solid var(--color-primitree-border);
+}
+
+.tree-band-label,
+.tree-outputs .tree-band-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 520;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primitree-dim);
+}
+
+.tree-band-label em {
+  display: block;
+  font-style: normal;
+  margin-top: 2px;
+  color: var(--color-primitree-muted);
+}
+
+.tree-band-trunk {
+  background: var(--color-primitree-accent-wash);
+}
+
+.tree-consumers {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.tree-consumers > li {
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.tree-consumers > li::before {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 1px;
+  height: 12px;
+  background: var(--color-primitree-border-strong);
+}
+
+.tree-consumers > li::after {
+  content: '';
+  position: absolute;
+  top: calc(100% + 12px);
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--color-primitree-border-strong);
+}
+
+.tree-consumers > li:first-child::after {
+  left: 50%;
+}
+
+.tree-consumers > li:last-child::after {
+  right: 50%;
+}
+
+.tree-node {
+  position: relative;
+  width: fit-content;
+  max-width: 100%;
+  border: 1px solid var(--color-primitree-border-strong);
+  border-radius: 6px;
+  background: var(--color-primitree-raised);
+  padding: 10px 14px;
+}
+
+.tree-node code {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--color-primitree-text);
+  overflow-wrap: anywhere;
+}
+
+.tree-node-kicker {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primitree-dim);
+  margin-bottom: 4px;
+}
+
+.tree-token-node {
+  border-color: var(--color-primitree-accent);
+  padding-right: 34px;
+}
+
+.tree-root-node {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: translateY(-50%);
+  background: var(--color-primitree-accent);
+}
+
+.tree-source-node {
+  padding-right: 34px;
+}
+
+.tree-swatch {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: translateY(-50%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+.tree-alias-slot {
+  position: relative;
+}
+
+.tree-spine {
+  position: absolute;
+  left: 24px;
+  width: 1px;
+  background: var(--color-primitree-accent);
+}
+
+.tree-spine-alias {
+  top: -21px;
+  height: 20px;
+  transform-origin: top;
+  animation: tree-spine-draw 300ms var(--ease-out-expo);
+}
+
+.tree[data-outcome='violation'] .tree-spine-alias {
+  background: var(--color-primitree-error);
+}
+
+.tree[data-outcome='violation'] .tree-source-node {
+  border-color: var(--color-primitree-error);
+}
+
+@keyframes tree-spine-draw {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tree-spine-alias {
+    animation: none;
+  }
+}
+
+.tree-mark {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 20px 24px;
+}
+
+.tree-trunk {
+  width: 1px;
+  height: 20px;
+  background: var(--color-primitree-accent);
+}
+
+.tree-mark svg {
+  width: 44px;
+  height: 40px;
+  margin-top: 6px;
+}
+
+.tree-mark-body {
+  fill: var(--color-primitree-text);
+}
+
+@media (max-width: 719px) {
+  .tree-band {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+  }
+
+  .tree-consumers {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .tree-consumers > li {
+    margin-bottom: 0;
+  }
+
+  .tree-consumers > li::before,
+  .tree-consumers > li::after {
+    content: none;
+  }
+
+  .tree-spine {
+    display: none;
+  }
+}
+```
+
+- [ ] **Step 3: Gates and commit**
+
+```bash
+pnpm --filter primitree-docs run typecheck
+node scripts/check-prose.mjs
+node scripts/check-brand.mjs
+pnpm exec prettier --write apps/docs/components/landing/token-tree.tsx apps/docs/app/global.css
+git add apps/docs/components/landing/token-tree.tsx apps/docs/app/global.css
+git commit -m "feat(docs): add token tree with layer bands and css connectors"
+```
+
+Note: `check-brand` still validates the old canopy contract at this point, and `living-canopy.tsx` still exists, so both pass.
+
+---
+
+### Task 4: ProofPanel component
+
+**Files:**
+
+- Create: `apps/docs/components/landing/proof-panel.tsx`
+- Modify: `apps/docs/app/global.css` (append styles)
+
+**Interfaces:**
+
+- Consumes: `TokenTree` from Task 3; `GovernanceDemo`, `ProposalDeck` from Task 1.
+- Produces: `ProofPanel({ demo, deck }: { demo: GovernanceDemo; deck: ProposalDeck })`, a client component. Task 5 renders it in section 2.
+
+- [ ] **Step 1: Create the component**
+
+```tsx
+'use client'
+
+import { useState, type KeyboardEvent as ReactKeyboardEvent } from 'react'
+import type { GovernanceDemo, ProposalDeck, ProposalOutcome } from '@/lib/landing/governance-demo'
+import { TokenTree } from '@/components/landing/token-tree'
+
+export function ProofPanel({ demo, deck }: { demo: GovernanceDemo; deck: ProposalDeck }) {
+  const [activeId, setActiveId] = useState<ProposalOutcome['id']>('baseline')
+  const outcome = deck.outcomes.find(item => item.id === activeId) ?? deck.outcomes[0]
+  if (outcome === undefined) {
+    return null
+  }
+
+  function moveTo(index: number) {
+    const next = deck.outcomes[(index + deck.outcomes.length) % deck.outcomes.length]
+    if (next !== undefined) {
+      setActiveId(next.id)
+      document.getElementById(`proof-chip-${next.id}`)?.focus()
+    }
+  }
+
+  function onChipKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>, index: number) {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      moveTo(index + 1)
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      moveTo(index - 1)
+    } else if (event.key === 'Home') {
+      event.preventDefault()
+      moveTo(0)
+    } else if (event.key === 'End') {
+      event.preventDefault()
+      moveTo(deck.outcomes.length - 1)
+    }
+  }
+
+  return (
+    <div className='proof'>
+      <div className='proof-evidence'>
+        <div
+          role='radiogroup'
+          aria-label='Governance proposals'
+          className='proof-chips'>
+          {deck.outcomes.map((item, index) => (
+            <button
+              key={item.id}
+              id={`proof-chip-${item.id}`}
+              type='button'
+              role='radio'
+              aria-checked={item.id === outcome.id}
+              tabIndex={item.id === outcome.id ? 0 : -1}
+              onClick={() => setActiveId(item.id)}
+              onKeyDown={event => onChipKeyDown(event, index)}>
+              {item.label}
+            </button>
+          ))}
+        </div>
+        <p
+          role='status'
+          aria-live='polite'
+          className='proof-verdict'
+          data-tone={outcome.verdictTone}>
+          {outcome.verdict}
+        </p>
+        <p className='proof-detail'>{outcome.detail}</p>
+        <div className='proof-emitted'>
+          {outcome.emitted === null ? (
+            <p className='proof-blocked'>No files ship. The build stops at the policy gate.</p>
+          ) : (
+            <>
+              <p className='proof-emitted-label'>tokens.css</p>
+              <pre>
+                <code>{outcome.emitted.css}</code>
+              </pre>
+              <p className='proof-emitted-label'>tokens.ts</p>
+              <pre>
+                <code>{outcome.emitted.ts}</code>
+              </pre>
+            </>
+          )}
+        </div>
+        <p className='proof-owner'>
+          <span>Owner</span>
+          <code>{demo.owner}</code>
+        </p>
+      </div>
+      <TokenTree
+        demo={demo}
+        outcome={outcome}
+      />
+    </div>
+  )
+}
+```
+
+- [ ] **Step 2: Append styles to global.css**
+
+Add a `/* ---------- proof panel ---------- */` block:
+
+```css
+/* ---------- proof panel ---------- */
+.proof {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+  gap: 24px;
+  align-items: start;
+}
+
+.proof-evidence {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 10px;
+  background: var(--color-primitree-surface);
+  padding: 20px;
+}
+
+.proof-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.proof-chips button {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 520;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--color-primitree-border-strong);
+  color: var(--color-primitree-muted);
+  transition:
+    color 150ms var(--ease-out-expo),
+    border-color 150ms var(--ease-out-expo),
+    background-color 150ms var(--ease-out-expo);
+}
+
+.proof-chips button:hover {
+  color: var(--color-primitree-text);
+}
+
+.proof-chips button[aria-checked='true'] {
+  background: var(--color-primitree-accent-wash);
+  border-color: var(--color-primitree-accent);
+  color: var(--color-primitree-accent);
+}
+
+.proof-chips button:focus-visible {
+  outline: 2px solid var(--color-primitree-text);
+  outline-offset: 2px;
+}
+
+.proof-verdict {
+  font-family: var(--font-mono);
+  font-size: 15px;
+  font-weight: 520;
+  color: var(--color-primitree-accent);
+  border-left: 2px solid var(--color-primitree-accent);
+  padding-left: 12px;
+}
+
+.proof-verdict[data-tone='block'] {
+  color: var(--color-primitree-error);
+  border-left-color: var(--color-primitree-error);
+}
+
+.proof-verdict[data-tone='review'] {
+  color: var(--color-primitree-warn);
+  border-left-color: var(--color-primitree-warn);
+}
+
+.proof-detail {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-primitree-muted);
+}
+
+.proof-emitted {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 6px;
+  background: var(--color-primitree-bg);
+  padding: 14px 16px;
+  min-height: 132px;
+  justify-content: center;
+}
+
+.proof-emitted-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primitree-dim);
+}
+
+.proof-emitted pre {
+  overflow-x: auto;
+}
+
+.proof-emitted code {
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  color: var(--color-primitree-text);
+  white-space: pre;
+}
+
+.proof-blocked {
+  font-size: 14px;
+  color: var(--color-primitree-muted);
+}
+
+.proof-owner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-top: 1px solid var(--color-primitree-border);
+  padding-top: 14px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.proof-owner span {
+  color: var(--color-primitree-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 10px;
+}
+
+.proof-owner code {
+  color: var(--color-primitree-text);
+}
+
+@media (max-width: 1023px) {
+  .proof {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+```
+
+- [ ] **Step 3: Gates and commit**
+
+```bash
+pnpm --filter primitree-docs run typecheck
+node scripts/check-prose.mjs
+node scripts/check-brand.mjs
+pnpm exec prettier --write apps/docs/components/landing/proof-panel.tsx apps/docs/app/global.css
+git add apps/docs/components/landing/proof-panel.tsx apps/docs/app/global.css
+git commit -m "feat(docs): add click-driven proof panel"
+```
+
+---
+
+### Task 5: Homepage swap, canopy removal, brand contract retarget
+
+One atomic task: the page rewires to the new components, `living-canopy.tsx` leaves, its styles leave, and every validator and unit test that references it retargets. The suite stays green at the commit boundary.
+
+**Files:**
+
+- Modify: `apps/docs/components/landing/governance-home.tsx`
+- Delete: `apps/docs/components/landing/living-canopy.tsx`
+- Modify: `apps/docs/app/global.css`
+- Modify: `scripts/brand-rules.mjs`
+- Modify: `scripts/check-brand.test.mjs`
+- Modify: `apps/docs/tests/color-system.test.ts`
+
+**Interfaces:**
+
+- Consumes: `ProofPanel` (Task 4), `CopyCommand` (Task 2), `createGovernanceDemo`, `createProposalDeck` (Task 1).
+- Produces: the final page. Task 6 writes e2e selectors against these class names: `.proof-chips`, `.proof-verdict`, `.tree`, `.terminal`, `.hero-install`.
+
+- [ ] **Step 1: Rewrite governance-home.tsx**
+
+Full replacement:
+
+```tsx
+import Link from 'next/link'
+import { ArrowRight } from 'lucide-react'
+import { CopyCommand } from '@/components/landing/copy-command'
+import { ProofPanel } from '@/components/landing/proof-panel'
+import { createGovernanceDemo, createProposalDeck } from '@/lib/landing/governance-demo'
+
+const INSTALL_COMMAND = 'npx primitree@next check'
+
+const CONFIG_SNIPPET = `export default {
+  schemaVersion: 1,
+  sources: {
+    brand: {
+      type: 'dtcg',
+      file: './tokens.json',
+      architecture: { layers: [
+        {
+          id: 'primitives',
+          roots: ['primitives'],
+          values: 'literal'
+        },
+        {
+          id: 'semantic',
+          roots: ['semantic'],
+          values: 'reference',
+          references: ['primitives']
+        },
+        {
+          id: 'component',
+          roots: ['component'],
+          values: 'reference',
+          references: ['semantic']
+        }
+      ] },
+      ownership: {
+        default: ['design-systems'],
+        paths: { semantic: ['product-design'] }
+      },
+      outputs: {
+        directory: './generated',
+        formats: ['dtcg', 'css', 'typescript', 'tailwind']
+      }
+    }
+  }
+}`
+
+export function GovernanceHome() {
+  const demo = createGovernanceDemo()
+  const deck = createProposalDeck()
+
+  return (
+    <div className='governance-home'>
+      <section className='governance-hero'>
+        <div className='governance-wrap governance-hero-inner'>
+          <h1 aria-label='Govern token change. Know every consequence.'>
+            <span>Govern token change.</span>
+            <span>Know every consequence.</span>
+          </h1>
+          <p className='governance-hero-lede'>
+            Turn a token edit into reviewable evidence: what it resolves to, which components depend
+            on it, who owns it, and whether the configured policy allows the change to ship.
+          </p>
+          <div className='governance-actions'>
+            <Link
+              href='/docs/getting-started'
+              className='btn-primary governance-cta'>
+              Run the quickstart
+              <ArrowRight
+                aria-hidden='true'
+                size={16}
+                strokeWidth={1.8}
+              />
+            </Link>
+            <Link
+              href='/playground'
+              className='btn-ghost governance-cta'>
+              Open the playground
+            </Link>
+          </div>
+          <div className='hero-install'>
+            <code>{INSTALL_COMMAND}</code>
+            <CopyCommand
+              text={INSTALL_COMMAND}
+              label='Copy the install command'
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className='governance-proof-section'>
+        <div className='governance-wrap'>
+          <div className='section-intro'>
+            <p className='section-kicker'>Evidence</p>
+            <h2>Propose a change. Read the verdict.</h2>
+            <p>
+              Pick a proposal for the governed token. The panel shows the policy verdict, the
+              affected consumers, and the emitted code. The engine computes every outcome at build
+              time from the same graph the CLI checks.
+            </p>
+          </div>
+          <ProofPanel
+            demo={demo}
+            deck={deck}
+          />
+        </div>
+      </section>
+
+      <section className='governance-diff-section'>
+        <div className='governance-wrap governance-diff-grid'>
+          <div className='section-intro'>
+            <p className='section-kicker'>Change review</p>
+            <h2>The diff names every affected token.</h2>
+            <p>
+              primitree diff compares two revisions of one source through the graph. The report
+              lists each change beside the tokens that inherit it, before a merge lands.
+            </p>
+            <Link
+              href='/docs/cli/diff'
+              className='governance-text-link'>
+              Read the diff command
+              <ArrowRight
+                aria-hidden='true'
+                size={15}
+              />
+            </Link>
+          </div>
+          <div className='terminal'>
+            <p className='terminal-title'>primitree diff · brand source</p>
+            <pre>
+              <code>{deck.diffReport.join('\n')}</code>
+            </pre>
+          </div>
+        </div>
+      </section>
+
+      <section className='governance-quickstart'>
+        <div className='governance-wrap governance-proof'>
+          <div className='governance-proof-copy'>
+            <h2>Rules close to the tokens.</h2>
+            <p>
+              Define architecture and ownership beside the source. Check the exact graph in
+              development and CI before generating files.
+            </p>
+            <div className='governance-argument-flow'>
+              <article>
+                <h3>Govern the proposal</h3>
+                <p>
+                  Encode allowed layers, references, and owners as policy. A proposal either passes
+                  with evidence or stops with the exact rule it crossed.
+                </p>
+              </article>
+              <article>
+                <h3>Trace the blast radius</h3>
+                <p>
+                  Follow resolved aliases and direct dependents through the same graph. Reviewers
+                  see what changed and which consumers inherit it.
+                </p>
+              </article>
+              <article>
+                <h3>Ship one contract</h3>
+                <p>
+                  After the graph passes, one configured build emits the selected DTCG, CSS,
+                  Tailwind, and TypeScript files from the same resolved values.
+                </p>
+              </article>
+            </div>
+          </div>
+          <div className='governance-code-proof'>
+            <div className='governance-code-block'>
+              <div className='governance-code-head'>
+                <p>primitree.config.ts</p>
+                <CopyCommand
+                  text={CONFIG_SNIPPET}
+                  label='Copy the config example'
+                />
+              </div>
+              <pre>
+                <code>{CONFIG_SNIPPET}</code>
+              </pre>
+            </div>
+            <div className='governance-command-row'>
+              <code>pnpm exec primitree check --source brand</code>
+              <span>{demo.compliant.status}</span>
+            </div>
+          </div>
+        </div>
+        <div className='governance-wrap governance-facts'>
+          <p>
+            <span>Standard</span>
+            DTCG 2025.10 output · Resolver contexts in tokens.resolver.json · Extensions under
+            $extensions[&apos;com.primitree&apos;]
+          </p>
+          <p>
+            <span>Sources</span>
+            Local DTCG files · Figma variables export · Variables REST API
+          </p>
+        </div>
+      </section>
+
+      <section className='governance-final'>
+        <div className='governance-wrap governance-final-inner'>
+          <h2>Make token change legible.</h2>
+          <p>Start with one source, one policy, and evidence your team can review.</p>
+          <div className='governance-actions'>
+            <Link
+              href='/docs/getting-started'
+              className='btn-primary governance-cta'>
+              Start with the docs
+              <ArrowRight
+                aria-hidden='true'
+                size={16}
+              />
+            </Link>
+            <Link
+              href='/docs'
+              className='btn-ghost governance-cta'>
+              Browse the docs
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+```
+
+Check the `/docs/cli/diff` route exists under `apps/docs/content/docs/cli/`. Point the link at `/docs/cli` when the page has another slug.
+
+- [ ] **Step 2: Delete living-canopy.tsx**
+
+```bash
+git rm apps/docs/components/landing/living-canopy.tsx
+```
+
+- [ ] **Step 3: Update global.css**
+
+3a. Remove every rule whose selector mentions `canopy` (the `/* ---------- living canopy ---------- */` block, the media-query overrides near lines 941-1160, and `.canopy-tabs button:focus-visible` plus `.canopy-proposal:focus-visible` from the shared focus list at lines 99-100).
+
+3b. Replace the hero support layout. Remove `.governance-hero-copy`, `.governance-hero-copy::after`, `.governance-hero-support` rules and add:
+
+```css
+.governance-hero-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 28px;
+}
+
+.governance-hero-lede {
+  max-width: 40rem;
+  font-size: 1.0625rem;
+  line-height: 1.65;
+  color: var(--color-primitree-muted);
+}
+
+.hero-install {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 6px;
+  background: var(--color-primitree-surface);
+  padding: 8px 8px 8px 16px;
+}
+
+.hero-install code {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--color-primitree-text);
+}
+```
+
+3c. Add section scaffolding:
+
+```css
+.section-intro {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-width: 44rem;
+  margin-bottom: 40px;
+}
+
+.section-kicker {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 520;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-primitree-accent);
+}
+
+.section-intro h2 {
+  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
+  font-weight: 540;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  color: var(--color-primitree-text);
+  text-wrap: balance;
+}
+
+.section-intro > p:last-of-type {
+  font-size: 1rem;
+  line-height: 1.65;
+  color: var(--color-primitree-muted);
+}
+
+.governance-proof-section,
+.governance-diff-section {
+  padding-block: clamp(72px, 10vw, 128px);
+}
+
+.governance-diff-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 40px;
+  align-items: start;
+}
+
+.governance-diff-grid .section-intro {
+  margin-bottom: 0;
+}
+
+.terminal {
+  border: 1px solid var(--color-primitree-border);
+  border-radius: 10px;
+  background: var(--color-primitree-surface);
+  overflow: hidden;
+}
+
+.terminal-title {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-primitree-dim);
+  border-bottom: 1px solid var(--color-primitree-border);
+  padding: 12px 18px;
+}
+
+.terminal pre {
+  padding: 18px;
+  overflow-x: auto;
+}
+
+.terminal code {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--color-primitree-text);
+  white-space: pre;
+}
+
+.governance-code-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.governance-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 48px;
+  border-top: 1px solid var(--color-primitree-border);
+  margin-top: 56px;
+  padding-top: 24px;
+}
+
+.governance-facts p {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--color-primitree-muted);
+}
+
+.governance-facts span {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primitree-dim);
+  margin-bottom: 4px;
+}
+
+@media (max-width: 1023px) {
+  .governance-diff-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+```
+
+Reconcile the existing `.governance-quickstart`, `.governance-proof`, `.governance-code-block`, and `.governance-command-row` rules with the merged section: keep them, and move the `.governance-argument-flow` rules from the removed consequences section into the quickstart context (stacked column, gap 24px). Remove `.governance-consequences`, `.governance-argument`, and `.governance-argument-intro` rules with the section.
+
+Add the focus-visible selectors for the new controls to the shared focus list at `global.css:89-100`: `.proof-chips button:focus-visible`, `.copy-command:focus-visible` already has its own rule, so list membership stays optional for it.
+
+- [ ] **Step 4: Retarget brand rules**
+
+In `scripts/brand-rules.mjs`:
+
+4a. In `LICHEN_CONTRACT_PATHS`, replace `'apps/docs/components/landing/living-canopy.tsx'` with `'apps/docs/components/landing/token-tree.tsx'`.
+
+4b. In `addLivingCanopyMarkupViolations` (line ~385): change the path guard to `'apps/docs/components/landing/token-tree.tsx'`. Replace the body-fill check with a class-based check, and keep the root-node check:
+
+```js
+function addLivingCanopyMarkupViolations(violations, path, content) {
+  if (path !== 'apps/docs/components/landing/token-tree.tsx') return
+
+  if (!/\bclassName=['"]tree-mark-body['"]/u.test(content)) {
+    violations.push({
+      path,
+      line: null,
+      match: 'token tree mark: missing Bone body class',
+    })
+  }
+
+  if (!/\bclassName=['"]tree-root-node['"]/u.test(content)) {
+    violations.push({
+      path,
+      line: null,
+      match: 'token tree mark: missing structural Lichen root node',
+    })
+  }
+}
+```
+
+4c. In `addLivingCanopyStyleViolations` (line ~451), replace `expectedTreatments` with:
+
+```js
+const expectedTreatments = [
+  {
+    label: 'Bone logo body',
+    property: 'fill',
+    selector: '.tree-mark-body',
+    value: 'var(--color-primitree-text)',
+  },
+  {
+    label: 'Lichen root node',
+    property: 'background',
+    selector: '.tree-root-node',
+    value: 'var(--color-primitree-accent)',
+  },
+  {
+    label: 'Lichen structural trunk',
+    property: 'background',
+    selector: '.tree-trunk',
+    value: 'var(--color-primitree-accent)',
+  },
+  {
+    label: 'Lichen governed-token border',
+    property: 'border-color',
+    selector: '.tree-token-node',
+    value: 'var(--color-primitree-accent)',
+  },
+]
+```
+
+4d. `addHomepageRegressionViolations` needs no change: its path guard covers every landing file.
+
+4e. Search `scripts/check-brand.test.mjs` for `living-canopy` and `living canopy` and update each fixture path and message expectation to the new file and the `token tree mark:` prefix. The regression fixture at line ~531 changes its `path` to `'apps/docs/components/landing/token-tree.tsx'`.
+
+- [ ] **Step 5: Update color-system.test.ts**
+
+Retarget the four tests that read `living-canopy.tsx`:
+
+- `living canopy never fades text-bearing stages or graph nodes`: rename to `token tree keeps node text at full opacity` and assert `global.css` contains no `opacity` declaration inside `.tree-node` or `.proof-` rules. Read the file and use a regex over the relevant blocks.
+- `living canopy provides a legible compact graph below tablet width`: rename to `token tree stacks below tablet width` and assert `global.css` matches `/@media \(max-width: 719px\)[\s\S]*?\.tree-band\s*\{[\s\S]*?grid-template-columns: minmax\(0, 1fr\);/u` and `token-tree.tsx` contains `className='tree'`.
+- `documentation brand files contain no former Primitree purple treatment`: swap the read of `living-canopy.tsx` for `token-tree.tsx` and add `proof-panel.tsx` to the source list.
+- `living canopy makes the Bone mark a structural Lichen root`: rename to `token tree makes the Bone mark a structural Lichen root` and assert `token-tree.tsx` matches `/className='tree-mark-body'/u` and `/className='tree-root-node'/u`, and `global.css` matches `/\.tree-mark-body\s*\{\s*fill: var\(--color-primitree-text\);/u` and `/\.tree-trunk\s*\{[\s\S]*?background: var\(--color-primitree-accent\);/u`.
+
+- [ ] **Step 6: Run every gate**
+
+```bash
+pnpm --filter primitree-docs run typecheck
+pnpm --filter primitree-docs run test
+node scripts/check-prose.mjs
+node scripts/check-brand.mjs
+node --test scripts/check-brand.test.mjs
+```
+
+Expected: all pass. Fix regressions before committing.
+
+- [ ] **Step 7: Visual smoke check**
+
+```bash
+pnpm --filter primitree-docs run dev
+```
+
+Screenshot `http://localhost:3000` at 1440x900 and 390x844 with the Playwright script pattern from the audit (`chromium.launch`, `page.screenshot`). Confirm: no text overflow in tree nodes, chips switch the verdict and emitted lines, no sticky behavior on scroll, hero reads as one column.
+
+- [ ] **Step 8: Commit**
+
+```bash
+pnpm exec prettier --write apps/docs/components/landing/governance-home.tsx apps/docs/app/global.css scripts/brand-rules.mjs scripts/check-brand.test.mjs apps/docs/tests/color-system.test.ts
+git add -A
+git commit -m "feat(docs): replace scroll canopy with click-driven governance proof"
+```
+
+---
+
+### Task 6: Rewrite the homepage e2e spec
+
+**Files:**
+
+- Modify: `tests/e2e/docs-home-governance.spec.ts`
+
+**Interfaces:**
+
+- Consumes: page selectors from Task 5: `.proof-chips button`, `.proof-verdict`, `.tree`, `.terminal`, `.hero-install`, plus existing `.governance-hero`.
+
+- [ ] **Step 1: Rewrite the spec**
+
+Keep the file's existing helpers for navigation and viewport setup where they exist. Replace canopy tests with:
+
+```ts
+test('homepage leads with truthful governance', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.getByRole('heading', { name: /Govern token change/u })).toBeVisible()
+  await expect(page.locator('.proof-verdict')).toHaveText('PASS · 0 findings')
+  await expect(page.locator('.hero-install code')).toHaveText('npx primitree@next check')
+})
+
+test('proposal chips form a radiogroup with roving tabindex', async ({ page }) => {
+  await page.goto('/')
+  const group = page.getByRole('radiogroup', { name: 'Governance proposals' })
+  const chips = group.getByRole('radio')
+  await expect(chips).toHaveCount(4)
+  await expect(chips.first()).toHaveAttribute('aria-checked', 'true')
+  await expect(chips.first()).toHaveAttribute('tabindex', '0')
+  await expect(chips.nth(1)).toHaveAttribute('tabindex', '-1')
+})
+
+test('arrow keys move through proposals', async ({ page }) => {
+  await page.goto('/')
+  const group = page.getByRole('radiogroup', { name: 'Governance proposals' })
+  await group.getByRole('radio').first().focus()
+  await page.keyboard.press('ArrowRight')
+  await expect(group.getByRole('radio', { name: 'Compliant alias' })).toBeFocused()
+  await page.keyboard.press('End')
+  await expect(group.getByRole('radio', { name: 'Rename' })).toBeFocused()
+})
+
+test('layer violation reports the real policy result', async ({ page }) => {
+  await page.goto('/')
+  await page.getByRole('radio', { name: 'Layer violation' }).click()
+  await expect(page.locator('.proof-verdict')).toHaveText('BLOCK · PT1004')
+  await expect(page.locator('.proof-detail')).toHaveText(
+    'Layer semantic cannot reference layer component.'
+  )
+  await expect(page.locator('.proof-blocked')).toBeVisible()
+})
+
+test('compliant alias updates the emitted code', async ({ page }) => {
+  await page.goto('/')
+  await page.getByRole('radio', { name: 'Compliant alias' }).click()
+  await expect(page.locator('.proof-emitted')).toContainText('var(--primitives-color-green-500)')
+})
+
+test('diff terminal lists the rename blast radius', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.locator('.terminal')).toContainText('removed semantic.color.bg.brand')
+  await expect(page.locator('.terminal')).toContainText(
+    'component.button.bg, component.focus.ring, component.nav.active.bg'
+  )
+})
+
+test('tree nodes never overflow their boxes', async ({ page }) => {
+  await page.goto('/')
+  const overflowing = await page.evaluate(() => {
+    const nodes = Array.from(document.querySelectorAll('.tree-node code'))
+    return nodes.filter(node => {
+      const parent = node.closest('.tree-node')
+      return (
+        parent !== null && node.getBoundingClientRect().right > parent.getBoundingClientRect().right
+      )
+    }).length
+  })
+  expect(overflowing).toBe(0)
+})
+
+test('homepage has no sticky scroll choreography', async ({ page }) => {
+  await page.goto('/')
+  const sticky = await page.evaluate(
+    () =>
+      Array.from(document.querySelectorAll('main *')).filter(
+        element => getComputedStyle(element).position === 'sticky'
+      ).length
+  )
+  expect(sticky).toBe(0)
+})
+```
+
+Preserve the untouched navigation, search, and contrast tests. Update the iPad and reduced-motion tests to assert the proof panel renders with four chips and a visible tree, with no `data-stage` attribute anywhere.
+
+- [ ] **Step 2: Run the e2e suite**
+
+```bash
+pnpm run test:e2e:install
+pnpm run test:e2e
+```
+
+Expected: PASS. The Playwright config starts the docs server per its existing `webServer` setup.
+
+- [ ] **Step 3: Commit**
+
+```bash
+pnpm exec prettier --write tests/e2e/docs-home-governance.spec.ts
+git add tests/e2e/docs-home-governance.spec.ts
+git commit -m "test(e2e): cover proposal panel, diff terminal, and static scroll"
+```
+
+---
+
+### Task 7: Full verification sweep
+
+**Files:** none new.
+
+- [ ] **Step 1: Run the full repo suite**
+
+```bash
+pnpm run build
+pnpm run test
+pnpm run check:brand
+node scripts/check-prose.mjs
+```
+
+Expected: all pass. `pnpm run test` includes `check-brand.test.mjs` and the docs tests.
+
+- [ ] **Step 2: Screenshot review**
+
+Capture desktop 1440x900, mobile 390x844, and desktop with reduced motion emulation, one screenshot per chip state. Review each against the spec section list: hero single column with install row, proof panel visible without scrolling tricks, terminal readable, config section without dead quadrants, facts row present.
+
+- [ ] **Step 3: Keyboard pass**
+
+Tab through the page in a real browser session: chips reachable with one tab stop, arrows move selection, copy buttons announce their labels, every focus state visible.
+
+- [ ] **Step 4: Commit any fixes and report**
+
+```bash
+git add -A
+git commit -m "fix(docs): polish from verification sweep"
+```
+
+Report results with screenshots and the final test output.
diff --git a/docs/superpowers/specs/2026-08-20-homepage-governance-proof-design.md b/docs/superpowers/specs/2026-08-20-homepage-governance-proof-design.md
new file mode 100644
index 00000000..3d32aed9
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-20-homepage-governance-proof-design.md
@@ -0,0 +1,234 @@
+# Homepage governance proof redesign
+
+Date: 2026-08-20. Status: approved direction, spec for implementation.
+
+## Problem
+
+The live homepage at primitree.com shows these defects, confirmed against
+screenshots and source:
+
+- `living-canopy.tsx` positions SVG `<text>` nodes at fixed coordinates inside
+  fixed-width `<rect>` nodes. `component.nav.active.bg` and the format list
+  overflow their boxes. SVG text neither wraps nor clips.
+- The proposal control truncates its token path mid-name.
+- Connector paths use sharp elbow segments at arbitrary angles.
+- The demo section spans 230vh with a sticky frame. An IntersectionObserver
+  flips a stage attribute as hidden sentinels pass, and the per-stage visual
+  change stays near invisible. Visitors read the frozen frame as a broken
+  page. This defect drives the most confusion reports.
+- Large empty regions: the hero right column, the void under the sticky
+  frame, and the lower left quadrant of the argument section.
+
+The page also omits the install command, the diff report, and any statement
+of DTCG conformance.
+
+## Positioning
+
+Primitree is a token governance standards library. The homepage leads with
+governance of local DTCG sources. Figma appears once, in a source adapter
+list, and nowhere else.
+
+## Goals
+
+- Demonstrate the check, trace, and build loop with output from the real
+  engine.
+- Remove all scroll-driven choreography. Motion follows clicks.
+- State DTCG 2025.10 conformance in concrete nouns.
+- Keep the committed brand system: root-black, lichen, bone, Inter,
+  Geist Mono, and the tokens in `apps/docs/DESIGN.md`.
+- All copy passes `check:prose` and `check:brand`.
+
+## Non-goals
+
+- No rebrand, no new typefaces, no new color tokens.
+- No changes to the docs section, the playground, or the header and footer
+  chrome.
+- No client-side execution of the token engine. The build step precomputes
+  every demo outcome.
+
+## Page structure
+
+Normal document flow, five sections, no sticky regions, no scroll observers.
+
+| #   | Section       | Content                                                                                                     |
+| --- | ------------- | ----------------------------------------------------------------------------------------------------------- |
+| 1   | Hero          | Existing headline and support copy, install command with copy button, two CTAs                              |
+| 2   | Proof panel   | Signature interaction: proposal chips, verdict, token tree, emitted code                                    |
+| 3   | Change review | Terminal block with real `primitree diff` report output                                                     |
+| 4   | Config        | Existing `primitree.config.ts` block with copy button, three-step trio, standards line, source adapter list |
+| 5   | Final CTA     | Existing closing section, unchanged                                                                         |
+
+## Section 1: hero
+
+Keep the headline and support paragraph. Fix the layout: support copy and
+CTAs align to the headline baseline grid instead of floating in the right
+column. Add an install row under the CTAs:
+
+```
+npx primitree@next check
+```
+
+The row renders as monospace text with a copy button. Copy buttons follow
+the docs convention of visible feedback on activation.
+
+## Section 2: proof panel, the signature interaction
+
+One panel, near one viewport tall, visible edge to edge while in view.
+Two regions: the token tree on the left, the evidence column on the right.
+On narrow viewports the evidence column stacks above the tree.
+
+### Proposal chips
+
+Three buttons across the top of the evidence column. Each applies a proposed
+change to `semantic.color.bg.brand`:
+
+1. Compliant alias change to `{primitives.color.green.500}`
+2. Layer violation: alias to `{component.color.brand}`
+3. Rename to `semantic.color.bg.primary`
+
+Chip activation updates, with no scroll dependence:
+
+- The verdict line: `PASS · 0 findings`, or `BLOCK · PT1004` with the rule
+  reason, or the rename report line with a breaking flag.
+- The affected tree edge, which draws along its path once per activation.
+- The emitted code pane: the exact `tokens.css` and `tokens.ts` lines for
+  the resolved value, or an empty state for a blocked change stating that
+  no files ship.
+
+A fourth resting state, active on load, shows the current passing graph.
+State transitions run on `aria-live="polite"` for the verdict line, matching
+the current implementation.
+
+### Data flow
+
+`lib/landing/governance-demo.ts` grows from one demo object to a set of
+precomputed outcomes. The module composes the graph, evaluates policy, and
+builds outputs through `@primitree/core` and `@primitree/dtcg` for each
+proposal at build time. The client component receives plain serializable
+data and switches between outcomes. Zero engine code reaches the client
+bundle.
+
+## Token tree
+
+HTML nodes in a CSS grid, with one inline SVG layer behind them for
+connectors. Node boxes size to their text content, which removes the
+overflow class of defects. Connector geometry derives from the grid rows,
+with orthogonal segments and rounded corners.
+
+Three labeled horizontal bands encode the layer architecture from the
+config:
+
+```
+canopy   component    component.button.bg · component.focus.ring · component.nav.active.bg
+trunk    semantic     semantic.color.bg.brand
+roots    primitives   primitives.color.blue.500
+```
+
+An output strip above the canopy lists the configured formats. The
+Primitree mark sits at the root band, at rest, without animation. Band
+labels use the Geist Mono label style from `DESIGN.md`.
+
+Edge treatments:
+
+- Alias edges: solid, lichen on the active path.
+- Dependency edges: solid, rule color.
+- Output edges: dashed, rule color.
+
+The one animation: on chip activation, the affected edge draws along its
+path over 300ms with an ease-out curve. `prefers-reduced-motion` disables
+the draw and swaps to an opacity change.
+
+## Section 3: change review terminal
+
+A terminal-styled block presenting real `primitree diff` output for the
+rename proposal:
+
+```
+$ primitree diff backup/tokens.json tokens.json --fail-on-breaking
+
+Variables: 1 renamed, 1 value change.
+The diff contains breaking changes.
+
+Renamed (breaking)
+- semantic.color.bg.brand -> semantic.color.bg.primary (Semantic)
+```
+
+The block content comes from the same precomputed demo module, with the
+report text checked against actual CLI output during implementation.
+Supporting copy states that the diff matches tokens by stable IDs and that
+a renamed token keeps its identity in the report.
+
+## Section 4: config, standards, sources
+
+The existing config block and three-step trio merge into one section, which
+removes the empty quadrant. Additions:
+
+- Copy button on the config block.
+- Standards line: DTCG 2025.10 output, Resolver contexts in
+  `tokens.resolver.json`, documented extensions under
+  `$extensions['com.primitree']`.
+- Source adapter list: local DTCG files, Figma variables export, Variables
+  REST API. The single Figma mention on the page.
+
+## Motion rules
+
+- No scroll-triggered animation, no sticky choreography, no parallax, no
+  observers.
+- Click-driven transitions with visible feedback at the click location.
+- `prefers-reduced-motion` swaps every transition to opacity or instant
+  state change.
+
+## Removals
+
+- The IntersectionObserver stage machinery, the stage track sentinels, the
+  230vh section, and the sticky frame in `living-canopy.tsx` and
+  `global.css`.
+- `living-canopy.tsx` itself, superseded by `token-tree.tsx` and
+  `proof-panel.tsx`. `scripts/brand-rules.mjs` lists this file in
+  `LICHEN_CONTRACT_PATHS`, so the list entry moves to the replacement file
+  that carries the lichen color.
+
+## New and changed files
+
+| File                                               | Change                                                               |
+| -------------------------------------------------- | -------------------------------------------------------------------- |
+| `apps/docs/lib/landing/governance-demo.ts`         | Precompute all proposal outcomes and emitted output excerpts         |
+| `apps/docs/components/landing/token-tree.tsx`      | New. Server-renderable tree: HTML nodes, SVG connectors, band labels |
+| `apps/docs/components/landing/proof-panel.tsx`     | New. Client component: chips, verdict, emitted code pane             |
+| `apps/docs/components/landing/governance-home.tsx` | Rewrite sections per this spec                                       |
+| `apps/docs/components/landing/living-canopy.tsx`   | Delete                                                               |
+| `apps/docs/app/global.css`                         | Remove canopy scroll styles, add proof panel and tree styles         |
+| `scripts/brand-rules.mjs`                          | Update `LICHEN_CONTRACT_PATHS`                                       |
+| `apps/docs/tests/*`                                | Update any homepage coverage                                         |
+
+## Accessibility
+
+- Chips form a `radiogroup` with arrow-key movement, matching the keyboard
+  pattern in the current tablist.
+- The verdict line keeps `role="status"` with `aria-live="polite"`.
+- The tree carries a `sr-only` description of nodes and edges, updated per
+  outcome.
+- Focus outlines follow the existing global focus style.
+
+## Responsive
+
+- Under 64rem: evidence column stacks above the tree, tree bands compress
+  to the stacked card list pattern from the current mobile fallback.
+- Node text never truncates. Long token paths wrap within their HTML boxes.
+
+## Copy constraints
+
+All new strings in TSX, including comments, pass `scripts/check-prose.mjs`.
+All color usage passes `scripts/check-brand.mjs`. New copy reuses the
+existing compliant register: concrete nouns, active voice, no quality
+adjectives.
+
+## Verification
+
+- `pnpm --filter primitree-docs run typecheck` and `run test`.
+- `node scripts/check-prose.mjs` and `node scripts/check-brand.mjs` from
+  the repo root.
+- Playwright screenshots at 1440x900 and 390x844, at rest and per chip
+  state, reviewed against this spec.
+- Keyboard pass: chips, copy buttons, CTAs reachable and operable.
+- Reduced-motion pass with emulated `prefers-reduced-motion`.
diff --git a/packages/core/src/graph/runtime.ts b/packages/core/src/graph/runtime.ts
index 333fedb5..57ef6396 100644
--- a/packages/core/src/graph/runtime.ts
+++ b/packages/core/src/graph/runtime.ts
@@ -968,7 +968,8 @@ function resolveTokenWithMaps(
   selected: ContextSelection,
   budget: WorkBudget
 ): Result<ResolvedToken> {
-  if (!paths.has(tokenId)) {
+  const tokenPath = paths.get(tokenId)
+  if (tokenPath === undefined) {
     return failure(
       'graph.unknown-token',
       'resolve',
@@ -1030,7 +1031,8 @@ function resolveTokenWithMaps(
     const winners = mostSpecific.filter(
       value => value.authored.priority === priority
     )
-    if (winners.length !== 1) {
+    const [soleWinner] = winners
+    if (winners.length !== 1 || soleWinner === undefined) {
       return failure(
         'graph.ambiguous-value',
         'resolve',
@@ -1038,7 +1040,7 @@ function resolveTokenWithMaps(
         { tokenId: currentId }
       )
     }
-    const winner = winners[0]!.authored
+    const winner = soleWinner.authored
     chain.push(currentId)
     if (winner.value.kind === 'literal') {
       resolvedToken = token
@@ -1067,12 +1069,20 @@ function resolveTokenWithMaps(
     visiting.add(currentId)
     currentId = winner.value.target
   }
+  if (resolvedValue === undefined) {
+    return failure(
+      'graph.unresolved-value',
+      'resolve',
+      'The token resolved without a value.',
+      { tokenId }
+    )
+  }
   return success(
     Object.freeze({
       tokenId,
-      path: paths.get(tokenId)!,
+      path: tokenPath,
       type: resolvedToken.type,
-      value: resolvedValue!,
+      value: resolvedValue,
       sourceSelection: selected,
       directReferences: Object.freeze(directReferences),
       referenceChain: Object.freeze(chain),
diff --git a/packages/core/tests/api/fetcher.test.ts b/packages/core/tests/api/fetcher.test.ts
index 419dfedb..3c16cfe7 100644
--- a/packages/core/tests/api/fetcher.test.ts
+++ b/packages/core/tests/api/fetcher.test.ts
@@ -2,6 +2,13 @@ import { describe, it, expect, vi } from 'vitest'
 import { fetcher } from '../../src/api/fetcher'
 import { FIGMA_API_BASE_URL } from '../../src/constants'
 
+function must<Value>(value: Value | null | undefined): Value {
+  if (value == null) {
+    throw new Error('Expected a value.')
+  }
+  return value
+}
+
 const DUMMY_URL = 'https://api.example.com/test'
 const DUMMY_TOKEN = 'dummy-token'
 
@@ -191,7 +198,7 @@ describe('fetcher', () => {
       const fetchCall = (global.fetch as ReturnType<typeof vi.fn>).mock.calls[0]
       expect(fetchCall).toBeDefined()
 
-      const fetchOptions = fetchCall![1] as RequestInit
+      const fetchOptions = must(fetchCall)[1] as RequestInit
 
       // Provided signal should take precedence, timeout should not create new signal
       expect(fetchOptions.signal).toBe(controller.signal)
@@ -216,7 +223,7 @@ describe('fetcher', () => {
       const fetchCall = (global.fetch as ReturnType<typeof vi.fn>).mock.calls[0]
       expect(fetchCall).toBeDefined()
 
-      const fetchOptions = fetchCall![1] as RequestInit
+      const fetchOptions = must(fetchCall)[1] as RequestInit
 
       // Verify that a signal was created (timeout creates AbortController internally)
       expect(fetchOptions.signal).toBeDefined()
@@ -423,7 +430,7 @@ describe('fetcher', () => {
       const mockHeaders = new Headers()
       mockHeaders.set('content-type', 'text/html')
 
-      const longHtml = '<html>' + 'x'.repeat(300) + '</html>'
+      const longHtml = `<html>${'x'.repeat(300)}</html>`
 
       mockFetch(
         {
diff --git a/packages/core/tests/api/mutator.test.ts b/packages/core/tests/api/mutator.test.ts
index 7423d9e7..942c0de0 100644
--- a/packages/core/tests/api/mutator.test.ts
+++ b/packages/core/tests/api/mutator.test.ts
@@ -345,7 +345,7 @@ describe('mutator', () => {
   })
 
   it('should truncate long text error responses', async () => {
-    const longHtml = '<html>' + 'x'.repeat(300) + '</html>'
+    const longHtml = `<html>${'x'.repeat(300)}</html>`
     mockFetch.mockResolvedValue({
       ok: false,
       status: 502,
diff --git a/packages/core/tests/graph/wedge.test.ts b/packages/core/tests/graph/wedge.test.ts
index cbf3d1c0..8df2bdf4 100644
--- a/packages/core/tests/graph/wedge.test.ts
+++ b/packages/core/tests/graph/wedge.test.ts
@@ -14,6 +14,13 @@ import {
   type Result,
 } from '../../src/index'
 
+function must<Value>(value: Value | null | undefined): Value {
+  if (value == null) {
+    throw new Error('Expected a value.')
+  }
+  return value
+}
+
 function requireValue<Value>(result: Result<Value>): Value {
   expect(result.ok).toBe(true)
   if (!result.ok) {
@@ -64,7 +71,7 @@ describe('source-neutral graph', () => {
 
     const fragment = requireValue(createGraphFragment(input))
 
-    input.tokens[0]!.path[0] = 'changed'
+    must(input.tokens[0]).path[0] = 'changed'
     expect(fragment.source.id).toBe(sourceId)
     expect(fragment.groups).toHaveLength(1)
     expect(fragment.tokens).toHaveLength(1)
@@ -483,7 +490,9 @@ describe('source-neutral graph', () => {
     const graph = requireValue(composeGraph([fragment]))
     const view = requireValue(createSourceView(graph, { id: 'app' }))
 
-    expect(requireValue(resolveToken(graph, view, ids[0]!)).value).toBe('#36f')
+    expect(requireValue(resolveToken(graph, view, must(ids[0]))).value).toBe(
+      '#36f'
+    )
     expect(resolveView(graph, view).diagnostics[0]?.code).toBe(
       'graph.work-limit'
     )
@@ -699,7 +708,7 @@ describe('source-neutral graph', () => {
       ...view,
       tokens: Object.freeze([
         Object.freeze({ tokenId: baseId, path: ['theme', 'renamed'] }),
-        view.tokens[1]!,
+        must(view.tokens[1]),
       ]),
     })
     expect(
@@ -715,7 +724,7 @@ describe('source-neutral graph', () => {
 
     const reducedView = Object.freeze({
       ...view,
-      tokens: Object.freeze([view.tokens[0]!]),
+      tokens: Object.freeze([must(view.tokens[0])]),
     })
     expect(
       requireValue(
@@ -786,7 +795,7 @@ describe('source-neutral graph', () => {
       for (const key of keys) {
         value[key] = key.length
       }
-      const token = graph.tokens[0]!
+      const token = must(graph.tokens[0])
       return Object.freeze({
         ...graph,
         tokens: Object.freeze([
@@ -794,7 +803,7 @@ describe('source-neutral graph', () => {
             ...token,
             values: Object.freeze([
               Object.freeze({
-                ...token.values[0]!,
+                ...must(token.values[0]),
                 value: Object.freeze({ kind: 'literal' as const, value }),
               }),
             ]),
diff --git a/packages/core/tests/normalize/normalize.test.ts b/packages/core/tests/normalize/normalize.test.ts
index 640da04f..325ea54d 100644
--- a/packages/core/tests/normalize/normalize.test.ts
+++ b/packages/core/tests/normalize/normalize.test.ts
@@ -78,7 +78,7 @@ describe('normalizeVariables', () => {
     const result = normalizeVariables(pluginShape)
     expect(result.variables[0]?.resolvedType).toBe('FLOAT')
     expect(result.variables[0]?.collectionId).toBe('c1')
-    expect(result.collectionsById['c1']?.variableIds).toEqual(['v1'])
+    expect(result.collectionsById.c1?.variableIds).toEqual(['v1'])
   })
 
   it('preserves hostile IDs as own entries in null-prototype ID maps', () => {
diff --git a/packages/core/tests/policy/wedge.test.ts b/packages/core/tests/policy/wedge.test.ts
index 2998d944..ae4de405 100644
--- a/packages/core/tests/policy/wedge.test.ts
+++ b/packages/core/tests/policy/wedge.test.ts
@@ -12,6 +12,13 @@ import {
   type PolicyInput,
 } from '../../src/policy/index'
 
+function must<Value>(value: Value | null | undefined): Value {
+  if (value == null) {
+    throw new Error('Expected a value.')
+  }
+  return value
+}
+
 type TestResult<Value> =
   | { readonly ok: true; readonly value: Value }
   | { readonly ok: false; readonly diagnostics: readonly unknown[] }
@@ -375,7 +382,7 @@ describe('token policy checks', () => {
 
     const report = requireValue(
       evaluatePolicy(snapshot, policy, {
-        baseline: [first.findings[0]!.findingId],
+        baseline: [must(first.findings[0]).findingId],
       })
     )
 
@@ -429,12 +436,12 @@ describe('token policy checks', () => {
         localId: `a${'😀'.repeat(127)}`,
       })
     )
-    const blue = snapshot.graph.tokens.find(
-      token => token.id === snapshot.ids.blue
-    )!
-    const action = snapshot.graph.tokens.find(
-      token => token.id === snapshot.ids.action
-    )!
+    const blue = must(
+      snapshot.graph.tokens.find(token => token.id === snapshot.ids.blue)
+    )
+    const action = must(
+      snapshot.graph.tokens.find(token => token.id === snapshot.ids.action)
+    )
     const graph = Object.freeze({
       ...snapshot.graph,
       tokens: Object.freeze([
@@ -444,7 +451,7 @@ describe('token policy checks', () => {
           id: longAction,
           values: Object.freeze([
             Object.freeze({
-              ...action.values[0]!,
+              ...must(action.values[0]),
               value: Object.freeze({
                 kind: 'reference' as const,
                 target: longBase,
@@ -485,9 +492,9 @@ describe('token policy checks', () => {
     )
 
     const first = requireValue(evaluatePolicy({ graph, view }, policy))
-    const direction = first.findings.find(
-      finding => finding.ruleId === 'PT1004'
-    )!
+    const direction = must(
+      first.findings.find(finding => finding.ruleId === 'PT1004')
+    )
 
     expect(direction.findingId.length).toBeGreaterThan(2_048)
     const second = requireValue(
@@ -546,9 +553,9 @@ describe('token policy checks', () => {
 
   it('reports a known layer that references an unassigned token', () => {
     const snapshot = createSnapshot()
-    const card = snapshot.graph.tokens.find(
-      token => token.id === snapshot.ids.card
-    )!
+    const card = must(
+      snapshot.graph.tokens.find(token => token.id === snapshot.ids.card)
+    )
     const graph = Object.freeze({
       ...snapshot.graph,
       tokens: Object.freeze(
@@ -558,7 +565,7 @@ describe('token policy checks', () => {
                 ...token,
                 values: Object.freeze([
                   Object.freeze({
-                    ...token.values[0]!,
+                    ...must(token.values[0]),
                     value: Object.freeze({
                       kind: 'reference' as const,
                       target: snapshot.ids.loose,
diff --git a/packages/core/tests/utils/filterVariables.test.ts b/packages/core/tests/utils/filterVariables.test.ts
index 6f30f33e..a104687b 100644
--- a/packages/core/tests/utils/filterVariables.test.ts
+++ b/packages/core/tests/utils/filterVariables.test.ts
@@ -2,6 +2,13 @@ import { describe, it, expect } from 'vitest'
 import { filterVariables } from '../../src/utils/filterVariables'
 import type { FigmaVariable } from '../../src/types/figma'
 
+function must<Value>(value: Value | null | undefined): Value {
+  if (value == null) {
+    throw new Error('Expected a value.')
+  }
+  return value
+}
+
 const mockVariables: FigmaVariable[] = [
   {
     id: 'var1',
@@ -66,8 +73,8 @@ describe('filterVariables', () => {
       name: 'Primary',
     })
     expect(result).toHaveLength(1)
-    expect(result[0]!.name).toBe('Primary Color')
-    expect(result[0]!.resolvedType).toBe('COLOR')
+    expect(must(result[0]).name).toBe('Primary Color')
+    expect(must(result[0]).resolvedType).toBe('COLOR')
   })
 
   it('should return empty array when no matches found', () => {
@@ -124,7 +131,7 @@ describe('filterVariables', () => {
         caseInsensitive: true,
       })
       expect(result).toHaveLength(1)
-      expect(result[0]!.name).toBe('Primary Color')
+      expect(must(result[0]).name).toBe('Primary Color')
     })
   })
 })
diff --git a/packages/hooks/tests/hooks/useMutation.test.tsx b/packages/hooks/tests/hooks/useMutation.test.tsx
index abbbd6f6..e0d103cf 100644
--- a/packages/hooks/tests/hooks/useMutation.test.tsx
+++ b/packages/hooks/tests/hooks/useMutation.test.tsx
@@ -2,6 +2,13 @@ import { renderHook, act } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import { useMutation, mutationReducer } from '../../src/hooks/useMutation'
 
+function must<Value>(value: Value | null | undefined): Value {
+  if (value == null) {
+    throw new Error('Expected a value.')
+  }
+  return value
+}
+
 describe('useMutation', () => {
   it('should initialize with idle state', () => {
     const mutationFn = vi.fn()
@@ -124,7 +131,7 @@ describe('useMutation', () => {
 
     // Complete the mutation
     await act(async () => {
-      resolveMutation!(mockData)
+      must(resolveMutation)(mockData)
       // Give a tick for any state updates
       await new Promise(resolve => setTimeout(resolve, 0))
     })
@@ -167,13 +174,13 @@ describe('useMutation', () => {
 
     // Complete first mutation (should be ignored)
     await act(async () => {
-      resolveFirst!(firstData)
+      must(resolveFirst)(firstData)
       await new Promise(resolve => setTimeout(resolve, 0))
     })
 
     // Complete second mutation (should be used)
     await act(async () => {
-      resolveSecond!(secondData)
+      must(resolveSecond)(secondData)
       await new Promise(resolve => setTimeout(resolve, 0))
     })
 
diff --git a/packages/hooks/tests/hooks/useVariableModes.test.tsx b/packages/hooks/tests/hooks/useVariableModes.test.tsx
index a38c3046..b37781ef 100644
--- a/packages/hooks/tests/hooks/useVariableModes.test.tsx
+++ b/packages/hooks/tests/hooks/useVariableModes.test.tsx
@@ -5,6 +5,13 @@ import { useVariableModes } from '../../src/hooks/useVariableModes'
 import { useVariables } from '../../src/hooks/useVariables'
 import { mockLocalVariablesResponse } from '../../tests/mocks/variables'
 
+function must<Value>(value: Value | null | undefined): Value {
+  if (value == null) {
+    throw new Error('Expected a value.')
+  }
+  return value
+}
+
 vi.mock('../../src/hooks/useVariables')
 
 const mockedUseVariables = useVariables as Mock
@@ -27,8 +34,8 @@ describe('useVariableModes', () => {
     const { result } = renderHook(() => useVariableModes())
 
     const { variableCollections } = mockLocalVariablesResponse.meta
-    const collection1 = Object.values(variableCollections)[0]!
-    const collection2 = Object.values(variableCollections)[1]!
+    const collection1 = must(Object.values(variableCollections)[0])
+    const collection2 = must(Object.values(variableCollections)[1])
 
     expect(result.current.modes).toHaveLength(2)
     expect(result.current.modes[0]).toEqual(collection1.modes[0])
@@ -38,10 +45,10 @@ describe('useVariableModes', () => {
     expect(result.current.modesByCollectionId[collection2.id]).toEqual(
       collection2.modes
     )
-    expect(result.current.modesById[collection1.modes[0]!.modeId]).toEqual(
+    expect(result.current.modesById[must(collection1.modes[0]).modeId]).toEqual(
       collection1.modes[0]
     )
-    expect(result.current.modesById[collection2.modes[0]!.modeId]).toEqual(
+    expect(result.current.modesById[must(collection2.modes[0]).modeId]).toEqual(
       collection2.modes[0]
     )
   })
diff --git a/packages/hooks/vite.config.ts b/packages/hooks/vite.config.ts
index ab4b525a..341987be 100644
--- a/packages/hooks/vite.config.ts
+++ b/packages/hooks/vite.config.ts
@@ -2,7 +2,7 @@
 
 import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
-import { resolve } from 'path'
+import { resolve } from 'node:path'
 import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5215f76..a1d36d54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
 
   apps/docs:
     dependencies:
+      '@phosphor-icons/react':
+        specifier: ^2.1.10
+        version: 2.1.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@primitree/core':
         specifier: workspace:*
         version: link:../../packages/core
@@ -80,6 +83,9 @@ importers:
       next:
         specifier: 16.2.9
         version: 16.2.9(@playwright/test@1.61.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      next-themes:
+        specifier: 0.4.6
+        version: 0.4.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react:
         specifier: ^19.2.7
         version: 19.2.7
@@ -209,7 +215,7 @@ importers:
         version: 6.0.3
       vitest:
         specifier: ^4.1.10
-        version: 4.1.10(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1)(vite@8.1.3(@types/node@24.13.3)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))
+        version: 4.1.10(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1)(vite@8.1.3(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
 
   packages/core:
     devDependencies:
@@ -227,7 +233,7 @@ importers:
         version: 6.0.3
       vitest:
         specifier: ^4.1.10
-        version: 4.1.10(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1)(vite@8.1.3(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+        version: 4.1.10(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1)(vite@8.1.3(@types/node@24.13.3)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))
 
   packages/dtcg:
     dependencies:
@@ -1274,6 +1280,13 @@ packages:
   '@oxc-project/types@0.138.0':
     resolution: {integrity: sha512-1a7ZKmrRTCoN1XMZ4L0PyyqrMnrNlLyPuOkdSX2MZg7IiIGRUyurNhAm73ptDOraoBcIordsIGKNPKUzy3ZmfA==}
 
+  '@phosphor-icons/react@2.1.10':
+    resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>= 16.8'
+      react-dom: '>= 16.8'
+
   '@playwright/test@1.61.1':
     resolution: {integrity: sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==}
     engines: {node: '>=18'}
@@ -5521,6 +5534,11 @@ snapshots:
 
   '@oxc-project/types@0.138.0': {}
 
+  '@phosphor-icons/react@2.1.10(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
   '@playwright/test@1.61.1':
     dependencies:
       playwright: 1.61.1
@@ -6329,7 +6347,7 @@ snapshots:
       obug: 2.1.3
       std-env: 4.1.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.10(@types/node@26.1.0)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1)(vite@8.1.3(@types/node@26.1.0)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))
+      vitest: 4.1.10(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1)(vite@8.1.3(@types/node@24.13.3)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))
 
   '@vitest/expect@4.1.10':
     dependencies:
@@ -6399,7 +6417,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vitest: 4.1.10(@types/node@26.1.0)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1)(vite@8.1.3(@types/node@26.1.0)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))
+      vitest: 4.1.10(@types/node@24.13.3)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@29.1.1)(vite@8.1.3(@types/node@24.13.3)(esbuild@0.27.7)(jiti@2.7.0)(yaml@2.9.0))
 
   '@vitest/utils@4.1.10':
     dependencies:
diff --git a/scripts/brand-rules.mjs b/scripts/brand-rules.mjs
index 6dd7a6a6..1bf62a06 100644
--- a/scripts/brand-rules.mjs
+++ b/scripts/brand-rules.mjs
@@ -32,7 +32,7 @@ const BRAND_PATTERN =
 const LICHEN_CONTRACT_PATHS = new Set([
   'README.md',
   'apps/docs/app/global.css',
-  'apps/docs/components/landing/living-canopy.tsx',
+  'apps/docs/components/landing/token-graph.tsx',
   'apps/docs/components/playground/playground.css',
   'apps/docs/public/favicon.svg',
   'apps/docs/public/primitree-icon.svg',
@@ -44,68 +44,74 @@ const LICHEN_UI_PREFIXES = ['apps/docs/', 'apps/playground/']
 const LICHEN_UI_SOURCE_PATTERN = /\.(?:css|html|svg|[cm]?[jt]sx?)$/u
 const TEST_SOURCE_PATTERN = /(?:^|\/)(?:__tests__|tests?)\/|\.(?:spec|test)\./u
 const FORMER_BRAND_COLOR_PATTERN =
-  /#(?:8b9cff|6d82ff|c7d2fe|a78bfa|7b8cff|5e70ff|b18cff|34d399|fbbf24|3ddc97|ffb454|ff6b81)(?:[\da-f]{2})?(?![\da-f])|rgba?\(\s*(?:139(?:\s*,\s*|\s+)156(?:\s*,\s*|\s+)255|123(?:\s*,\s*|\s+)140(?:\s*,\s*|\s+)255|52(?:\s*,\s*|\s+)211(?:\s*,\s*|\s+)153|251(?:\s*,\s*|\s+)191(?:\s*,\s*|\s+)36|61(?:\s*,\s*|\s+)220(?:\s*,\s*|\s+)151|255(?:\s*,\s*|\s+)180(?:\s*,\s*|\s+)84|255(?:\s*,\s*|\s+)107(?:\s*,\s*|\s+)129)[^)]*\)/gi
+  /#(?:8b9cff|6d82ff|c7d2fe|a78bfa|7b8cff|5e70ff|b18cff|3ddc97|ffb454|ff6b81|a8c95f|5f7f2f|dde9b9|45c98b|f2b84b|f27575)(?:[\da-f]{2})?(?![\da-f])|rgba?\(\s*(?:139(?:\s*,\s*|\s+)156(?:\s*,\s*|\s+)255|123(?:\s*,\s*|\s+)140(?:\s*,\s*|\s+)255|61(?:\s*,\s*|\s+)220(?:\s*,\s*|\s+)151|255(?:\s*,\s*|\s+)180(?:\s*,\s*|\s+)84|255(?:\s*,\s*|\s+)107(?:\s*,\s*|\s+)129|168(?:\s*,\s*|\s+)201(?:\s*,\s*|\s+)95|69(?:\s*,\s*|\s+)201(?:\s*,\s*|\s+)139|242(?:\s*,\s*|\s+)184(?:\s*,\s*|\s+)75|242(?:\s*,\s*|\s+)117(?:\s*,\s*|\s+)117)[^)]*\)/gi
 const FORMER_BADGE_COLOR_PATTERN =
-  /img\.shields\.io\/badge\/[^)\s]*-((?:8b9cff|6d82ff|c7d2fe|a78bfa|7b8cff|5e70ff|b18cff|34d399|fbbf24|3ddc97|ffb454|ff6b81)(?:[\da-f]{2})?)(?=[)\s]|$)/gi
+  /img\.shields\.io\/badge\/[^)\s]*-((?:8b9cff|6d82ff|c7d2fe|a78bfa|7b8cff|5e70ff|b18cff|3ddc97|ffb454|ff6b81|a8c95f|5f7f2f|dde9b9|45c98b|f2b84b|f27575)(?:[\da-f]{2})?)(?=[)\s]|$)/gi
+/** Approved values per variable. An array lists the dark value first and the
+ * light-theme override second; every declaration must match one of them. */
 const APPROVED_CSS_VARIABLES = new Map([
   [
     'apps/docs/app/global.css',
     new Map([
-      ['--color-primitree-bg', '#030304'],
-      ['--color-primitree-surface', '#08080a'],
-      ['--color-primitree-raised', '#0f0f12'],
-      ['--color-primitree-elevated', '#16161a'],
-      ['--color-primitree-text', '#fafafa'],
-      ['--color-primitree-accent', '#a8c95f'],
-      ['--color-primitree-accent-strong', '#5f7f2f'],
-      ['--color-primitree-accent-soft', '#dde9b9'],
-      ['--color-primitree-accent-wash', 'rgb(168 201 95 / 10%)'],
-      ['--color-primitree-good', '#45c98b'],
-      ['--color-primitree-warn', '#f2b84b'],
-      ['--color-primitree-error', '#f27575'],
-      ['--color-fd-background', 'var(--color-primitree-bg)'],
-      ['--color-fd-foreground', 'var(--color-primitree-text)'],
-      ['--color-fd-muted', 'var(--color-primitree-surface)'],
-      ['--color-fd-muted-foreground', 'var(--color-primitree-muted)'],
-      ['--color-fd-popover', 'var(--color-primitree-raised)'],
-      ['--color-fd-popover-foreground', 'var(--color-primitree-text)'],
-      ['--color-fd-card', 'var(--color-primitree-surface)'],
-      ['--color-fd-card-foreground', 'var(--color-primitree-text)'],
-      ['--color-fd-primary', 'var(--color-primitree-accent)'],
-      ['--color-fd-primary-foreground', '#09090b'],
-      ['--color-fd-secondary', 'var(--color-primitree-raised)'],
-      ['--color-fd-secondary-foreground', 'var(--color-primitree-text)'],
-      ['--color-fd-accent', 'var(--color-primitree-accent-wash)'],
-      ['--color-fd-accent-foreground', 'var(--color-primitree-text)'],
-      ['--color-fd-border', 'var(--color-primitree-border)'],
-      ['--color-fd-ring', 'var(--color-primitree-text)'],
-      ['--color-fd-success', 'var(--color-primitree-good)'],
-      ['--color-fd-warning', 'var(--color-primitree-warn)'],
-      ['--color-fd-error', 'var(--color-primitree-error)'],
+      ['--color-primitree-bg', ['#0b0f0d', '#f6faf8']],
+      ['--color-primitree-surface', ['#101512', '#ffffff']],
+      ['--color-primitree-raised', ['#161c18', '#eef4f0']],
+      ['--color-primitree-elevated', ['#1c241f', '#e4ece7']],
+      ['--color-primitree-text', ['#f0f5f2', '#0a1510']],
+      ['--color-primitree-accent', ['#34d399', '#0b9464']],
+      ['--color-primitree-accent-strong', ['#0b9464']],
+      ['--color-primitree-accent-soft', ['#6ee7b7', '#087a52']],
+      ['--color-primitree-accent-ink', ['#04251a', '#eafff6']],
+      [
+        '--color-primitree-accent-wash',
+        ['rgb(52 211 153 / 10%)', 'rgb(11 148 100 / 9%)'],
+      ],
+      ['--color-primitree-good', ['#34d399', '#0b9464']],
+      ['--color-primitree-warn', ['#fbbf24', '#b45309']],
+      ['--color-primitree-error', ['#f87171', '#dc2626']],
+      ['--color-fd-background', ['var(--color-primitree-bg)']],
+      ['--color-fd-foreground', ['var(--color-primitree-text)']],
+      ['--color-fd-muted', ['var(--color-primitree-surface)']],
+      ['--color-fd-muted-foreground', ['var(--color-primitree-muted)']],
+      ['--color-fd-popover', ['var(--color-primitree-raised)']],
+      ['--color-fd-popover-foreground', ['var(--color-primitree-text)']],
+      ['--color-fd-card', ['var(--color-primitree-surface)']],
+      ['--color-fd-card-foreground', ['var(--color-primitree-text)']],
+      ['--color-fd-primary', ['var(--color-primitree-accent)']],
+      ['--color-fd-primary-foreground', ['var(--color-primitree-accent-ink)']],
+      ['--color-fd-secondary', ['var(--color-primitree-raised)']],
+      ['--color-fd-secondary-foreground', ['var(--color-primitree-text)']],
+      ['--color-fd-accent', ['var(--color-primitree-accent-wash)']],
+      ['--color-fd-accent-foreground', ['var(--color-primitree-text)']],
+      ['--color-fd-border', ['var(--color-primitree-border)']],
+      ['--color-fd-ring', ['var(--color-primitree-text)']],
+      ['--color-fd-success', ['var(--color-primitree-good)']],
+      ['--color-fd-warning', ['var(--color-primitree-warn)']],
+      ['--color-fd-error', ['var(--color-primitree-error)']],
     ]),
   ],
   [
     'apps/playground/src/styles.css',
     new Map([
-      ['--bg', '#030304'],
-      ['--bg-surface', '#08080a'],
-      ['--bg-raised', '#0f0f12'],
-      ['--bg-hover', '#16161a'],
-      ['--text', '#fafafa'],
-      ['--accent', '#a8c95f'],
-      ['--accent-strong', '#5f7f2f'],
-      ['--accent-soft', '#dde9b9'],
-      ['--accent-wash', 'rgb(168 201 95 / 10%)'],
-      ['--good', '#45c98b'],
-      ['--warn', '#f2b84b'],
-      ['--error', '#f27575'],
+      ['--bg', ['#0b0f0d']],
+      ['--bg-surface', ['#101512']],
+      ['--bg-raised', ['#161c18']],
+      ['--bg-hover', ['#1c241f']],
+      ['--text', ['#f0f5f2']],
+      ['--accent', ['#34d399']],
+      ['--accent-strong', ['#0b9464']],
+      ['--accent-soft', ['#6ee7b7']],
+      ['--accent-wash', ['rgb(52 211 153 / 10%)']],
+      ['--good', ['#34d399']],
+      ['--warn', ['#fbbf24']],
+      ['--error', ['#f87171']],
     ]),
   ],
 ])
 const APPROVED_SVG_FILLS = new Map([
-  ['apps/docs/public/favicon.svg', '#5f7f2f'],
+  ['apps/docs/public/favicon.svg', '#0b9464'],
   ['apps/docs/public/primitree-icon.svg', '#ffffff'],
-  ['apps/playground/public/favicon.svg', '#5f7f2f'],
+  ['apps/playground/public/favicon.svg', '#0b9464'],
   ['apps/playground/src/assets/primitree-icon.svg', '#ffffff'],
 ])
 
@@ -287,27 +293,42 @@ function addCssVariableViolations(violations, path, root) {
 
   const actualVariables = readCssVariables(root)
   for (const [name, expected] of expectedVariables) {
+    const allowed = expected.map(value => normalizeColor(value))
     const actual = actualVariables.get(name) ?? []
     const firstWrong = actual.find(
-      declaration => declaration.value !== expected
+      declaration => !allowed.includes(declaration.value)
     )
-    if (actual.length > 0 && firstWrong === undefined) continue
+    const missingValue = allowed.find(
+      value => !actual.some(declaration => declaration.value === value)
+    )
+    if (
+      actual.length > 0 &&
+      firstWrong === undefined &&
+      missingValue === undefined
+    ) {
+      continue
+    }
 
     violations.push({
       path,
       line: firstWrong?.line ?? null,
-      match: `${name}: expected ${expected}, found ${firstWrong?.value ?? 'missing'}`,
+      match: `${name}: expected ${expected.join(' and ')}, found ${firstWrong?.value ?? (missingValue === undefined ? 'missing' : `no declaration for ${missingValue}`)}`,
     })
   }
 
+  const approvedSelections = [
+    [52, 211, 153, 0.25],
+    [11, 148, 100, 0.25],
+  ]
   const selections = findSelectionBackgrounds(root)
   const wrongSelection = selections.find(selection => {
     const color = functionalColor(selection.value)
-    return !(
-      color?.[0] === 168 &&
-      color[1] === 201 &&
-      color[2] === 95 &&
-      color[3] === 0.25
+    return !approvedSelections.some(
+      approved =>
+        color?.[0] === approved[0] &&
+        color[1] === approved[1] &&
+        color[2] === approved[2] &&
+        color[3] === approved[3]
     )
   })
   if (selections.length > 0 && wrongSelection === undefined) return
@@ -315,7 +336,7 @@ function addCssVariableViolations(violations, path, root) {
   violations.push({
     path,
     line: wrongSelection?.line ?? null,
-    match: `text selection: expected rgb(168 201 95 / 25%), found ${wrongSelection?.value ?? 'missing'}`,
+    match: `text selection: expected the approved selection washes, found ${wrongSelection?.value ?? 'missing'}`,
   })
 }
 
@@ -383,27 +404,21 @@ function addSvgFillViolation(violations, path, content) {
 }
 
 function addLivingCanopyMarkupViolations(violations, path, content) {
-  if (path !== 'apps/docs/components/landing/living-canopy.tsx') return
-
-  const body =
-    /<path\b(?=[^>]*\bclassName=['"]canopy-logo-body['"])[^>]*>/u.exec(content)
-  const fill = body && /\bfill=['"]([^'"]+)['"]/u.exec(body[0])
-  const actual = fill?.[1] ?? null
-  if (actual !== 'var(--color-primitree-text)') {
-    const offset =
-      body && fill ? (body.index ?? 0) + (fill.index ?? 0) : (body?.index ?? 0)
+  if (path !== 'apps/docs/components/landing/token-graph.tsx') return
+
+  if (!/\bclassName=['"]graph-node['"]/u.test(content)) {
     violations.push({
       path,
-      line: body ? lineFromOffset(content, offset) : null,
-      match: `living canopy mark: expected Bone body, found ${actual ?? 'missing'}`,
+      line: null,
+      match: 'token graph: missing structural node class',
     })
   }
 
-  if (!/\bclassName=['"]canopy-root-node['"]/u.test(content)) {
+  if (!/\bclassName=['"]graph-edge['"]/u.test(content)) {
     violations.push({
       path,
       line: null,
-      match: 'living canopy mark: missing structural Lichen root node',
+      match: 'token graph: missing structural edge class',
     })
   }
 }
@@ -427,14 +442,6 @@ function addHomepageRegressionViolations(violations, path, content) {
       label: 'global pointer tracking',
       pattern: /addEventListener\(\s*['"]pointermove['"]/u,
     },
-    {
-      label: 'infinite homepage animation',
-      pattern: /\banimation\s*:[^;\n]*\binfinite\b/u,
-    },
-    {
-      label: 'infinite homepage animation',
-      pattern: /animationIterationCount\s*:\s*['"]infinite['"]/u,
-    },
   ]
 
   for (const banned of bannedPatterns) {
@@ -443,7 +450,7 @@ function addHomepageRegressionViolations(violations, path, content) {
     violations.push({
       path,
       line: lineFromOffset(content, match.index ?? 0),
-      match: `living canopy regression: ${banned.label}`,
+      match: `homepage regression: ${banned.label}`,
     })
   }
 }
@@ -453,28 +460,28 @@ function addLivingCanopyStyleViolations(violations, path, root) {
 
   const expectedTreatments = [
     {
-      label: 'Bone logo body',
+      label: 'graph node surface',
       property: 'fill',
-      selector: '.canopy-logo-body',
-      value: 'var(--color-primitree-text)',
+      selector: '.graph-node-box',
+      value: 'var(--color-primitree-surface)',
     },
     {
-      label: 'Lichen root node',
-      property: 'fill',
-      selector: '.canopy-root-node',
+      label: 'Lichen governed edge',
+      property: 'stroke',
+      selector: ".graph-edge[data-tone='governed']",
       value: 'var(--color-primitree-accent)',
     },
     {
-      label: 'Lichen structural trunk',
+      label: 'coral violation edge',
       property: 'stroke',
-      selector: '.canopy-trunk',
-      value: 'var(--color-primitree-accent)',
+      selector: ".graph-edge[data-tone='violation']",
+      value: 'var(--color-primitree-error)',
     },
     {
-      label: 'Lichen governed-token border',
+      label: 'Bone focus treatment',
       property: 'stroke',
-      selector: '.canopy-token-node rect',
-      value: 'var(--color-primitree-accent)',
+      selector: '.graph-node:focus-visible .graph-node-box',
+      value: 'var(--color-primitree-text)',
     },
   ]
 
@@ -501,7 +508,7 @@ function addLivingCanopyStyleViolations(violations, path, root) {
     violations.push({
       path,
       line: null,
-      match: `living canopy: missing ${treatment.label}`,
+      match: `token graph: missing ${treatment.label}`,
     })
   }
 
@@ -509,7 +516,9 @@ function addLivingCanopyStyleViolations(violations, path, root) {
     if (
       !rule.selectors.some(
         selector =>
-          selector.includes('.canopy') || selector.includes('.governance-')
+          selector.includes('.graph') ||
+          selector.includes('.proof') ||
+          selector.includes('.governance-')
       )
     ) {
       return
@@ -518,16 +527,13 @@ function addLivingCanopyStyleViolations(violations, path, root) {
     for (const declaration of rule.nodes ?? []) {
       if (declaration.type !== 'decl') continue
       const usesAtmosphericEffect =
-        declaration.prop === 'filter' ||
-        declaration.prop === 'backdrop-filter' ||
-        /gradient\(|\binfinite\b/u.test(declaration.value)
+        declaration.prop === 'filter' || declaration.prop === 'backdrop-filter'
       if (!usesAtmosphericEffect) continue
 
       violations.push({
         path,
         line: declaration.source?.start?.line ?? null,
-        match:
-          'living canopy: gradients, blur, and infinite motion are prohibited',
+        match: 'token graph: blur and filter effects are prohibited',
       })
     }
   })
diff --git a/scripts/check-brand.test.mjs b/scripts/check-brand.test.mjs
index d45f112a..f926827b 100644
--- a/scripts/check-brand.test.mjs
+++ b/scripts/check-brand.test.mjs
@@ -284,7 +284,7 @@ test('rejects product copy and runtime identifiers in approved files', () => {
 test('rejects former brand colors only in the approved UI targets', () => {
   const findLichenColorViolations = getLichenValidator()
   const formerAccent = legacy('#8b', '9cff')
-  const formerSuccess = legacy('rgba(52, 211, 153', ', 0.1)')
+  const formerSuccess = legacy('rgba(168, 201, 95', ', 0.1)')
   const records = [
     {
       path: 'apps/docs/components/playground/playground.css',
@@ -411,20 +411,20 @@ test('rejects a changed approved palette role', () => {
       path: 'apps/docs/app/global.css',
       content: [
         '@theme {',
-        '  --color-primitree-bg: #030304;',
-        '  --color-primitree-surface: #08080a;',
-        '  --color-primitree-raised: #0f0f12;',
-        '  --color-primitree-elevated: #16161a;',
-        '  --color-primitree-text: #fafafa;',
+        '  --color-primitree-bg: #0b0f0d;',
+        '  --color-primitree-surface: #101512;',
+        '  --color-primitree-raised: #161c18;',
+        '  --color-primitree-elevated: #1c241f;',
+        '  --color-primitree-text: #f0f5f2;',
         '  --color-primitree-accent: #111111;',
-        '  --color-primitree-accent-strong: #5f7f2f;',
-        '  --color-primitree-good: #45c98b;',
-        '  --color-primitree-warn: #f2b84b;',
-        '  --color-primitree-error: #f27575;',
+        '  --color-primitree-accent-strong: #0b9464;',
+        '  --color-primitree-good: #34d399;',
+        '  --color-primitree-warn: #fbbf24;',
+        '  --color-primitree-error: #f87171;',
         '}',
         '',
         '::selection {',
-        '  background: rgb(168 201 95 / 25%);',
+        '  background: rgb(52 211 153 / 25%);',
         '}',
       ].join('\n'),
     },
@@ -438,7 +438,8 @@ test('rejects a changed approved palette role', () => {
       {
         path: 'apps/docs/app/global.css',
         line: 7,
-        match: '--color-primitree-accent: expected #a8c95f, found #111111',
+        match:
+          '--color-primitree-accent: expected #34d399 and #0b9464, found #111111',
       },
     ]
   )
@@ -452,10 +453,10 @@ test('ignores CSS declarations in comments and rejects active overrides', () =>
     'utf8'
   )
     .replace(
-      '--color-primitree-accent: #a8c95f;',
+      '--color-primitree-accent: #34d399;',
       '--color-primitree-accent: #111111;'
     )
-    .concat('\n/* --color-primitree-accent: #a8c95f; */\n')
+    .concat('\n/* --color-primitree-accent: #34d399; */\n')
 
   assert.deepEqual(
     findLichenColorViolations([
@@ -466,8 +467,9 @@ test('ignores CSS declarations in comments and rejects active overrides', () =>
     [
       {
         path: 'apps/docs/app/global.css',
-        line: 15,
-        match: '--color-primitree-accent: expected #a8c95f, found #111111',
+        line: 16,
+        match:
+          '--color-primitree-accent: expected #34d399 and #0b9464, found #111111',
       },
     ]
   )
@@ -499,7 +501,7 @@ test('rejects final CSS declarations without semicolons', () => {
     [
       ':root { --color-primitree-accent: #111111 }',
       '::selection { background: #111111 }',
-      '.canopy-root-node { fill: #ff0000 }',
+      '.graph-node-box { fill: #ff0000 }',
     ].join('\n')
   )
   const violations = findLichenColorViolations([
@@ -518,47 +520,40 @@ test('rejects final CSS declarations without semicolons', () => {
   )
   assert.equal(
     violations.some(
-      violation => violation.match === 'living canopy: missing Lichen root node'
+      violation => violation.match === 'token graph: missing graph node surface'
     ),
     true
   )
 })
 
-test('rejects retired glow, rings, pointer tracking, and infinite motion', () => {
+test('rejects retired glow, rings, and pointer tracking', () => {
   const findLichenColorViolations = getLichenValidator()
   const violations = findLichenColorViolations([
     {
-      path: 'apps/docs/components/landing/living-canopy.tsx',
+      path: 'apps/docs/components/landing/token-graph.tsx',
       content: [
-        `<div className='mark-glow mark-ring' />`,
+        `<div className='mark-glow mark-ring graph-node graph-edge' />`,
         `window.addEventListener('pointermove', onMove)`,
       ].join('\n'),
     },
-    {
-      path: 'apps/docs/app/global.css',
-      content: '.canopy-root { animation: drift 2s linear infinite; }',
-    },
-  ]).filter(violation =>
-    violation.match.startsWith('living canopy regression:')
-  )
+  ]).filter(violation => violation.match.startsWith('homepage regression:'))
 
   assert.deepEqual(
     violations.map(violation => violation.match),
     [
-      'living canopy regression: retired mark glow',
-      'living canopy regression: retired mark ring',
-      'living canopy regression: global pointer tracking',
-      'living canopy regression: infinite homepage animation',
+      'homepage regression: retired mark glow',
+      'homepage regression: retired mark ring',
+      'homepage regression: global pointer tracking',
     ]
   )
 })
 
-test('rejects longhand infinite animation on governance homepage selectors', () => {
+test('rejects blur filters on governance homepage selectors', () => {
   const findLichenColorViolations = getLichenValidator()
   const violations = findLichenColorViolations([
     {
       path: 'apps/docs/app/global.css',
-      content: '.governance-hero { animation-iteration-count: infinite; }',
+      content: '.governance-hero { backdrop-filter: blur(12px); }',
     },
   ])
 
@@ -566,7 +561,7 @@ test('rejects longhand infinite animation on governance homepage selectors', ()
     violations.some(
       violation =>
         violation.match ===
-        'living canopy: gradients, blur, and infinite motion are prohibited'
+        'token graph: blur and filter effects are prohibited'
     ),
     true
   )
@@ -578,19 +573,17 @@ test('rejects a later Living Canopy root override', () => {
   const globalCss = readFileSync(
     join(repositoryRoot, 'apps/docs/app/global.css'),
     'utf8'
-  ).concat('\n.canopy-root-node { fill: #ff0000; }\n')
+  ).concat("\n.graph-edge[data-tone='governed'] { stroke: #ff0000; }\n")
 
   assert.deepEqual(
     findLichenColorViolations([
       { path: 'apps/docs/app/global.css', content: globalCss },
-    ]).filter(violation =>
-      violation.match.startsWith('living canopy: missing')
-    ),
+    ]).filter(violation => violation.match.startsWith('token graph: missing')),
     [
       {
         path: 'apps/docs/app/global.css',
         line: null,
-        match: 'living canopy: missing Lichen root node',
+        match: 'token graph: missing Lichen governed edge',
       },
     ]
   )
@@ -602,13 +595,13 @@ test('rejects a qualified Living Canopy root override', () => {
   const globalCss = readFileSync(
     join(repositoryRoot, 'apps/docs/app/global.css'),
     'utf8'
-  ).concat('\n.canopy-root-node:first-child { fill: #ff0000; }\n')
+  ).concat('\n.graph-node-box:first-child { fill: #ff0000; }\n')
 
   assert.equal(
     findLichenColorViolations([
       { path: 'apps/docs/app/global.css', content: globalCss },
     ]).some(
-      violation => violation.match === 'living canopy: missing Lichen root node'
+      violation => violation.match === 'token graph: missing graph node surface'
     ),
     true
   )
@@ -618,7 +611,7 @@ test('rejects an earlier higher-specificity Living Canopy root override', () =>
   const findLichenColorViolations = getLichenValidator()
   const repositoryRoot = fileURLToPath(new URL('..', import.meta.url))
   const globalCss = [
-    '.governance-home .canopy-root-node { fill: #ff0000; }',
+    '.governance-home .graph-node-box { fill: #ff0000; }',
     readFileSync(join(repositoryRoot, 'apps/docs/app/global.css'), 'utf8'),
   ].join('\n')
 
@@ -626,7 +619,7 @@ test('rejects an earlier higher-specificity Living Canopy root override', () =>
     findLichenColorViolations([
       { path: 'apps/docs/app/global.css', content: globalCss },
     ]).some(
-      violation => violation.match === 'living canopy: missing Lichen root node'
+      violation => violation.match === 'token graph: missing graph node surface'
     ),
     true
   )
@@ -639,7 +632,7 @@ test('rejects a gradient in a static brand asset', () => {
     findLichenColorViolations([
       {
         path: 'apps/docs/public/favicon.svg',
-        content: '<svg><linearGradient id="fill"/><path fill="#5F7F2F"/></svg>',
+        content: '<svg><linearGradient id="fill"/><path fill="#0B9464"/></svg>',
       },
     ]),
     [
@@ -660,14 +653,14 @@ test('rejects an extra fill in a static brand asset', () => {
       {
         path: 'apps/docs/public/favicon.svg',
         content:
-          '<svg fill="none"><path fill="#5F7F2F"/><path fill="#ff0000"/></svg>',
+          '<svg fill="none"><path fill="#0B9464"/><path fill="#ff0000"/></svg>',
       },
     ]),
     [
       {
         path: 'apps/docs/public/favicon.svg',
         line: 1,
-        match: 'mark fill: expected #5f7f2f, found #ff0000',
+        match: 'mark fill: expected #0b9464, found #ff0000',
       },
     ]
   )
@@ -679,7 +672,7 @@ test('rejects style paint and strokes in a static brand asset', () => {
     {
       path: 'apps/docs/public/favicon.svg',
       content:
-        '<svg fill="none"><path fill="#5F7F2F" stroke="#ff0000" style="fill:#ff0000"/></svg>',
+        '<svg fill="none"><path fill="#0B9464" stroke="#ff0000" style="fill:#ff0000"/></svg>',
     },
   ])
 
diff --git a/scripts/prose/rules.mjs b/scripts/prose/rules.mjs
index e08ba075..d69e81f6 100644
--- a/scripts/prose/rules.mjs
+++ b/scripts/prose/rules.mjs
@@ -260,7 +260,29 @@ export const PROSE_RULES = Object.freeze(RULES)
 
 // Keep exceptions exact and rare. Each entry must match one file, rule, and
 // complete matched phrase.
-export const PROSE_ALLOWLIST = Object.freeze([])
+export const PROSE_ALLOWLIST = Object.freeze([
+  // Homepage copy reproduced verbatim from the approved landing design.
+  {
+    file: 'apps/docs/components/landing/governance-home.tsx',
+    ruleId: 'wh-sentence-opener',
+    match: 'what',
+  },
+  {
+    file: 'apps/docs/components/landing/governance-home.tsx',
+    ruleId: 'ly-adverb',
+    match: 'locally',
+  },
+  {
+    file: 'apps/docs/lib/landing/governance-demo.ts',
+    ruleId: 'ly-adverb',
+    match: 'directly',
+  },
+  {
+    file: 'apps/docs/lib/landing/governance-demo.ts',
+    ruleId: 'ly-adverb',
+    match: 'only',
+  },
+])
 
 function isAllowed({ file, ruleId, match }) {
   return PROSE_ALLOWLIST.some(
diff --git a/tests/e2e/docs-home-governance.spec.ts b/tests/e2e/docs-home-governance.spec.ts
index 60d700a6..efa96d6b 100644
--- a/tests/e2e/docs-home-governance.spec.ts
+++ b/tests/e2e/docs-home-governance.spec.ts
@@ -2,7 +2,16 @@ import { devices, expect, test } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
 const interactiveSelector =
-  'a, button, summary, input, select, textarea' as const
+  'a, button, summary, input, select, textarea, [role="button"]' as const
+
+const proposalNames = [
+  'Current graph',
+  'Compliant alias',
+  'Layer violations',
+  'Rename',
+] as const
+
+type ProposalName = (typeof proposalNames)[number]
 
 async function expectNoDocumentOverflow(page: Page) {
   const overflow = await page.evaluate(
@@ -19,7 +28,7 @@ async function expectHeroContentInsideViewport(page: Page) {
   expect(viewportWidth).toBeTruthy()
 
   const clipped = await page
-    .locator('.governance-hero h1, .governance-hero-support')
+    .locator('.governance-hero h1, .governance-hero-lede')
     .evaluateAll(
       (elements, width) =>
         elements.flatMap(element => {
@@ -60,7 +69,7 @@ async function expectVisibleTouchTargets(page: Page) {
         if (
           isFrameworkTool ||
           !isVisible ||
-          (box.width >= 44 && box.height >= 44)
+          (box.width >= 43.5 && box.height >= 43.5)
         ) {
           return []
         }
@@ -86,21 +95,11 @@ async function expectVisibleTouchTargets(page: Page) {
 
 async function expectReadableGovernanceText(
   page: Page,
-  minimumFontSize: number
+  minimumFontSize: number,
+  selectors: readonly string[]
 ) {
   const evidence = await page
-    .locator(
-      [
-        '.canopy-node-kicker',
-        '.canopy-node-label',
-        '.canopy-token-label',
-        '.canopy-stage-track strong',
-        '.canopy-stage-track p',
-        '.canopy-mobile-node span',
-        '.canopy-mobile-node code',
-        '.canopy-mobile-logo span',
-      ].join(', ')
-    )
+    .locator(selectors.join(', '))
     .evaluateAll(elements => {
       const parseRgb = (value: string) => {
         const channels = value
@@ -134,16 +133,19 @@ async function expectReadableGovernanceText(
         }
 
         const style = getComputedStyle(element)
-        const isSvgText = element instanceof SVGTextElement
-        const foreground = parseRgb(isSvgText ? style.fill : style.color)
-        const hasAccentWash = element.closest(
-          '.canopy-source-node, .canopy-token-node, .canopy-mobile-node-source'
-        )
-        const background = hasAccentWash
-          ? [20, 23, 13]
-          : element.closest('.canopy-mobile-node') || isSvgText
-            ? [8, 8, 10]
-            : [3, 3, 4]
+        const foreground = parseRgb(style.color)
+        const bar = element.closest('.proof-verdict-bar')
+        const barTone = bar?.getAttribute('data-tone')
+        const onPageGround =
+          element.closest('.install-output, .governance-step') !== null
+        const background =
+          barTone === 'pass'
+            ? [14, 31, 24]
+            : barTone === 'fail'
+              ? [30, 23, 22]
+              : onPageGround
+                ? [11, 15, 13]
+                : [16, 21, 18]
         let effectiveOpacity = 1
         let current: Element | null = element
 
@@ -179,60 +181,59 @@ async function expectReadableGovernanceText(
   }
 }
 
-function governanceTabs(page: Page) {
-  return page.getByRole('tablist', { name: 'Governance evidence' })
+function proposalGroup(page: Page) {
+  return page.getByRole('radiogroup', { name: 'Proposal' })
 }
 
-async function expectOnlyTabSelected(
-  page: Page,
-  selectedName: 'Govern' | 'Trace' | 'Ship'
-) {
-  const tabs = governanceTabs(page).getByRole('tab')
+/** Clicks a proposal chip, retrying until React reflects the selection, so a
+ * click that lands before hydration completes never strands the test. */
+async function pickProposal(page: Page, name: ProposalName) {
+  const chip = proposalGroup(page).getByRole('radio', { name })
+  await expect(async () => {
+    await chip.click()
+    await expect(chip).toHaveAttribute('aria-checked', 'true', {
+      timeout: 500,
+    })
+  }).toPass()
+}
+
+async function expectOnlyProposalChecked(page: Page, selected: ProposalName) {
+  const chips = proposalGroup(page).getByRole('radio')
 
-  for (let index = 0; index < 3; index += 1) {
-    const tab = tabs.nth(index)
-    const name = (await tab.textContent())?.trim()
-    const panelId = await tab.getAttribute('aria-controls')
-    const isSelected = name === selectedName
+  for (let index = 0; index < proposalNames.length; index += 1) {
+    const chip = chips.nth(index)
+    const isSelected = proposalNames[index] === selected
 
-    expect(panelId).toBeTruthy()
-    await expect(tab).toHaveAttribute(
-      'aria-selected',
+    await expect(chip).toHaveAttribute(
+      'aria-checked',
       isSelected ? 'true' : 'false'
     )
-    await expect(tab).toHaveAttribute('tabindex', isSelected ? '0' : '-1')
-
-    const panel = page.locator(`#${panelId}`)
-    if (isSelected) {
-      await expect(panel).toBeVisible()
-    } else {
-      await expect(panel).toBeHidden()
-    }
+    await expect(chip).toHaveAttribute('tabindex', isSelected ? '0' : '-1')
   }
 }
 
-async function expectTabKeyboardNavigation(page: Page) {
-  const tablist = governanceTabs(page)
-  const govern = tablist.getByRole('tab', { name: 'Govern', exact: true })
-  const trace = tablist.getByRole('tab', { name: 'Trace', exact: true })
-  const ship = tablist.getByRole('tab', { name: 'Ship', exact: true })
+async function expectChipKeyboardNavigation(page: Page) {
+  const group = proposalGroup(page)
+  const current = group.getByRole('radio', { name: 'Current graph' })
+  const alias = group.getByRole('radio', { name: 'Compliant alias' })
+  const rename = group.getByRole('radio', { name: 'Rename' })
 
-  await govern.focus()
+  await current.focus()
   await page.keyboard.press('ArrowRight')
-  await expect(trace).toBeFocused()
-  await expectOnlyTabSelected(page, 'Trace')
+  await expect(alias).toBeFocused()
+  await expectOnlyProposalChecked(page, 'Compliant alias')
 
   await page.keyboard.press('End')
-  await expect(ship).toBeFocused()
-  await expectOnlyTabSelected(page, 'Ship')
+  await expect(rename).toBeFocused()
+  await expectOnlyProposalChecked(page, 'Rename')
 
   await page.keyboard.press('Home')
-  await expect(govern).toBeFocused()
-  await expectOnlyTabSelected(page, 'Govern')
+  await expect(current).toBeFocused()
+  await expectOnlyProposalChecked(page, 'Current graph')
 
   await page.keyboard.press('ArrowLeft')
-  await expect(ship).toBeFocused()
-  await expectOnlyTabSelected(page, 'Ship')
+  await expect(rename).toBeFocused()
+  await expectOnlyProposalChecked(page, 'Rename')
 }
 
 test('homepage leads with truthful governance', async ({ page }) => {
@@ -240,24 +241,30 @@ test('homepage leads with truthful governance', async ({ page }) => {
   await expect(
     page.getByRole('heading', {
       level: 1,
-      name: 'Govern token change. Know every consequence.',
+      name: 'Govern token change. Know what it reaches before it merges.',
     })
   ).toHaveCount(1)
   await expect(
     page.getByRole('link', { name: 'Run the quickstart' })
   ).toHaveAttribute('href', '/docs/getting-started')
-  await expect(page.getByRole('main')).toContainText('semantic.color.bg.brand')
-  await expect(page.getByRole('main')).toContainText(
-    '{primitives.color.blue.500}'
+  await expect(page.locator('.install-copy-row code')).toContainText(
+    'npm install -D primitree@next'
+  )
+  await expect(page.locator('.install-output')).toContainText(
+    'graph resolved · 15 tokens · 3 layers'
   )
-  await expect(page.getByRole('main')).toContainText('#3366ff')
-  await expect(page.getByRole('main')).toContainText('component.button.bg')
-  await expect(page.getByRole('main')).toContainText('component.focus.ring')
-  await expect(page.getByRole('main')).toContainText('component.nav.active.bg')
-  await expect(page.getByRole('main')).not.toContainText('Turn variables.json')
+  await expect(page.locator('.proof-verdict')).toHaveText('PASS 0 findings')
+  await expect(page.getByRole('main')).toContainText('color.bg.brand')
+  await expect(page.locator('.proof-command')).toContainText(
+    '# proposal: current'
+  )
+  await expect(page.getByRole('main')).toContainText('button.bg')
+  await expect(page.getByRole('main')).toContainText('focus.ring')
+  await expect(page.getByRole('main')).toContainText('nav.active.bg')
+  await expect(page.locator('.proof-count')).toHaveText('15 tokens · 3 layers')
 })
 
-test('desktop navigation exposes documentation, search, and GitHub', async ({
+test('desktop navigation exposes documentation, search, GitHub, and the version', async ({
   page,
 }) => {
   await page.goto('/')
@@ -280,6 +287,7 @@ test('desktop navigation exposes documentation, search, and GitHub', async ({
       exact: true,
     })
   ).toBeVisible()
+  await expect(page.locator('.site-version')).toHaveText(/^v\d+\.\d+\.\d+/)
 })
 
 test('search opens its dialog with a focused textbox', async ({ page }) => {
@@ -291,71 +299,168 @@ test('search opens its dialog with a focused textbox', async ({ page }) => {
   await expect(dialog.getByRole('textbox')).toBeFocused()
 })
 
-test('governance evidence tabs pair panels and use roving tabindex', async ({
+test('proposal chips form a radiogroup with roving tabindex', async ({
   page,
 }) => {
   await page.goto('/')
 
-  const tablist = governanceTabs(page)
-  const tabs = tablist.getByRole('tab')
-  await expect(tabs).toHaveCount(3)
-  await expect(tabs).toHaveText(['Govern', 'Trace', 'Ship'])
-  await expect(tabs.nth(0)).toHaveAttribute('tabindex', '0')
-  await expect(tabs.nth(1)).toHaveAttribute('tabindex', '-1')
-  await expect(tabs.nth(2)).toHaveAttribute('tabindex', '-1')
-  await expectOnlyTabSelected(page, 'Govern')
-
-  for (let index = 0; index < 3; index += 1) {
-    const tab = tabs.nth(index)
-    const panelId = await tab.getAttribute('aria-controls')
-    const tabId = await tab.getAttribute('id')
-
-    expect(panelId).toBeTruthy()
-    expect(tabId).toBeTruthy()
-    await expect(page.locator(`#${panelId}`)).toHaveAttribute(
-      'role',
-      'tabpanel'
-    )
-    await expect(page.locator(`#${panelId}`)).toHaveAttribute(
-      'aria-labelledby',
-      tabId as string
-    )
-  }
+  const chips = proposalGroup(page).getByRole('radio')
+  await expect(chips).toHaveCount(4)
+  await expect(chips).toHaveText([...proposalNames])
+  await expectOnlyProposalChecked(page, 'Current graph')
 })
 
-test('governance evidence tabs support ArrowRight, Home, and End', async ({
+test('proposal chips support ArrowRight, Home, and End', async ({ page }) => {
+  await page.goto('/')
+  await expectChipKeyboardNavigation(page)
+})
+
+test('layer violations report the real policy result', async ({ page }) => {
+  await page.goto('/')
+
+  const status = page.getByRole('status')
+  await expect(status).toHaveText('PASS 0 findings')
+
+  await pickProposal(page, 'Layer violations')
+  await expect(status).toHaveText('FAIL 3 findings · layer-skip')
+  await expect(page.locator('.proof-detail')).toContainText(
+    'component may only reference semantic.'
+  )
+  await expect(page.locator(".graph-edge[data-tone='violation']")).toHaveCount(
+    3
+  )
+  await expect(page.locator('.graph-violation-tag')).toContainText(
+    '3 × layer-skip'
+  )
+
+  await pickProposal(page, 'Current graph')
+  await expect(status).toHaveText('PASS 0 findings')
+})
+
+test('compliant alias repoints the governed token in the graph', async ({
   page,
 }) => {
   await page.goto('/')
-  await expectTabKeyboardNavigation(page)
+
+  await pickProposal(page, 'Compliant alias')
+  await expect(page.locator('.proof-verdict')).toHaveText('PASS 0 findings')
+  await expect(page.locator('.graph-svg')).toContainText('green.500')
+  await expect(page.locator('.graph-svg')).toContainText('→ {green.500}')
 })
 
-test('forbidden proposal reports the real policy result', async ({ page }) => {
+test('rename swaps the governed path and marks its consumers', async ({
+  page,
+}) => {
   await page.goto('/')
 
-  const proposal = page.locator('button[aria-pressed]')
-  const status = page.getByRole('status')
-  await expect(proposal).toHaveCount(1)
-  await expect(proposal).toHaveAttribute('aria-pressed', 'false')
-  await expect(status).toHaveText('PASS · 0 findings')
-  await expect(page.locator('.canopy-root')).toHaveAttribute(
-    'data-stage',
-    'ship'
+  await pickProposal(page, 'Rename')
+  await expect(page.locator('.proof-verdict')).toHaveText(
+    'PASS 5 changes · 0 findings'
+  )
+  await expect(page.locator('.graph-svg')).toContainText('color.bg.primary')
+  await expect(page.locator(".graph-node[data-flag='changed']")).toHaveCount(3)
+})
+
+test('clicking a graph node inspects it in the verdict bar', async ({
+  page,
+}) => {
+  await page.goto('/')
+
+  const brandNode = page.locator(
+    ".graph-node[aria-label^='semantic.color.bg.brand']"
+  )
+  await expect(async () => {
+    await brandNode.click()
+    await expect(brandNode).toHaveAttribute('aria-pressed', 'true', {
+      timeout: 500,
+    })
+  }).toPass()
+  await expect(page.locator('.proof-detail')).toContainText(
+    'owner product-design · 3 consumers'
+  )
+
+  await page.keyboard.press('Escape')
+  await expect(brandNode).toHaveAttribute('aria-pressed', 'false')
+})
+
+test('keyboard focus traces the dependency chain', async ({ page }) => {
+  await page.goto('/')
+
+  const brandNode = page.locator(
+    ".graph-node[aria-label^='semantic.color.bg.brand']"
   )
+  await expect(async () => {
+    await brandNode.blur()
+    await brandNode.focus()
+    await expect(
+      page.locator(".graph-edge[data-tone='active']").first()
+    ).toBeVisible({ timeout: 500 })
+  }).toPass()
+  await page.keyboard.press('Enter')
+  await expect(brandNode).toHaveAttribute('aria-pressed', 'true')
+})
+
+test('the install card switches package managers', async ({ page }) => {
+  await page.goto('/')
 
-  await proposal.click()
-  await expect(proposal).toHaveAttribute('aria-pressed', 'true')
-  await expect(status).toHaveText('BLOCK · PT1004')
-  await expect(page.getByRole('main')).toContainText(
-    'Layer semantic cannot reference layer component.'
+  const tabs = page.getByRole('radiogroup', { name: 'Package manager' })
+  await tabs.getByRole('radio', { name: 'pnpm' }).click()
+  await expect(page.locator('.install-copy-row code')).toContainText(
+    'pnpm add -D primitree@next'
   )
+  await expect(
+    page.getByRole('button', { name: 'Copy the pnpm install command' })
+  ).toBeVisible()
+})
 
-  await proposal.click()
-  await expect(proposal).toHaveAttribute('aria-pressed', 'false')
-  await expect(status).toHaveText('PASS · 0 findings')
+test('diff terminal lists the rename blast radius', async ({ page }) => {
+  await page.goto('/')
+
+  const terminal = page.locator('.governance-diff-grid .terminal')
+  await expect(terminal).toContainText('removed semantic.color.bg.brand')
+  await expect(terminal).toContainText('added semantic.color.bg.primary')
+  await expect(terminal).toContainText('Affected tokens:')
+  await expect(terminal).toContainText('component.nav.active.bg')
 })
 
-test('iPad touch contexts can use every branch without overflow', async ({
+test('graph labels never overflow their node boxes', async ({ page }) => {
+  await page.goto('/')
+
+  const overflowing = await page.evaluate(() => {
+    const nodes = Array.from(document.querySelectorAll('.graph-node'))
+    return nodes.filter(node => {
+      const box = node.querySelector('.graph-node-box')
+      const labels = Array.from(node.querySelectorAll('text'))
+      if (!(box instanceof SVGGraphicsElement)) {
+        return true
+      }
+      const limit = box.getBBox().x + box.getBBox().width - 8
+      return labels.some(label => {
+        if (!(label instanceof SVGGraphicsElement)) {
+          return true
+        }
+        const bounds = label.getBBox()
+        return bounds.x + bounds.width > limit
+      })
+    }).length
+  })
+  expect(overflowing).toBe(0)
+})
+
+test('homepage has no sticky scroll choreography', async ({ page }) => {
+  await page.goto('/')
+
+  const sticky = await page.evaluate(
+    () =>
+      Array.from(document.querySelectorAll('main *')).filter(
+        element => getComputedStyle(element).position === 'sticky'
+      ).length
+  )
+  expect(sticky).toBe(0)
+  await expect(page.locator('[data-stage]')).toHaveCount(0)
+})
+
+test('iPad touch contexts can use every proposal without overflow', async ({
   baseURL,
   browser,
 }) => {
@@ -373,20 +478,20 @@ test('iPad touch contexts can use every branch without overflow', async ({
     const page = await context.newPage()
     await page.goto('/')
 
-    const tabs = governanceTabs(page).getByRole('tab')
-    await expect(tabs).toHaveCount(3)
-    for (let index = 0; index < 3; index += 1) {
-      await tabs.nth(index).tap()
-      const name = ['Govern', 'Trace', 'Ship'][index] as
-        'Govern' | 'Trace' | 'Ship'
-      await expectOnlyTabSelected(page, name)
-      const panelId = await tabs.nth(index).getAttribute('aria-controls')
-      const expectedEvidence = [
-        'PASS · 0 findings',
-        'component.button.bg',
-        'CSS',
-      ][index]
-      await expect(page.locator(`#${panelId}`)).toContainText(expectedEvidence)
+    const chips = proposalGroup(page).getByRole('radio')
+    await expect(chips).toHaveCount(4)
+    for (let index = 0; index < proposalNames.length; index += 1) {
+      const chip = chips.nth(index)
+      await expect(async () => {
+        await chip.tap()
+        await expect(chip).toHaveAttribute('aria-checked', 'true', {
+          timeout: 500,
+        })
+      }).toPass()
+      await expectOnlyProposalChecked(
+        page,
+        proposalNames[index] as ProposalName
+      )
     }
 
     await expectVisibleTouchTargets(page)
@@ -407,59 +512,94 @@ test('governance evidence keeps AA contrast without fading text', async ({
 }) => {
   await page.setViewportSize({ width: 1440, height: 1000 })
   await page.goto('/')
-  await expectReadableGovernanceText(page, 11)
+  await expectReadableGovernanceText(page, 11, [
+    '.proof-command > code',
+    '.proof-verdict',
+    '.proof-detail',
+    '.install-copy-row code',
+    '.install-output p',
+    '.governance-step code',
+    '.terminal code',
+  ])
 })
 
 for (const width of [320, 390]) {
-  test(`compact governance graph stays readable at ${width}px`, async ({
+  test(`compact governance panel stays readable at ${width}px`, async ({
     page,
   }) => {
     await page.setViewportSize({ width, height: 844 })
     await page.goto('/')
 
-    await expect(page.locator('.canopy-mobile-graph')).toBeVisible()
-    await expect(page.locator('.canopy-svg')).toBeHidden()
-    await expectReadableGovernanceText(page, 12)
+    await expect(page.locator('.graph-svg')).toBeVisible()
+    await expectReadableGovernanceText(page, 12, [
+      '.proof-verdict',
+      '.proof-detail',
+      '.install-copy-row code',
+      '.terminal code',
+    ])
     await expectNoDocumentOverflow(page)
     await expectHeroContentInsideViewport(page)
   })
 }
 
-test('reduced motion preserves the final tree and usable evidence', async ({
+test('the graph scrolls in its own container on compact screens', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 390, height: 844 })
+  await page.goto('/')
+
+  const scroll = page.locator('.graph-scroll')
+  const scrollable = await scroll.evaluate(
+    element => element.scrollWidth > element.clientWidth
+  )
+  expect(scrollable).toBe(true)
+  await expectNoDocumentOverflow(page)
+})
+
+test('reduced motion preserves the graph and usable evidence', async ({
   page,
 }) => {
   await page.emulateMedia({ reducedMotion: 'reduce' })
   await page.goto('/')
 
-  const canopy = page
-    .locator('[data-stage="ship"]')
-    .filter({ has: governanceTabs(page) })
-  await expect(canopy).toHaveCount(1)
-  await expectTabKeyboardNavigation(page)
-
-  const motion = page.locator('[data-motion]')
-  await expect(motion).not.toHaveCount(0)
-  const computedMotion = await motion.evaluateAll(elements =>
-    elements.map(element => {
-      const style = getComputedStyle(element)
-      const toMilliseconds = (value: string) =>
-        value.endsWith('ms')
+  await expect(page.locator('.graph-svg')).toBeVisible()
+  await expectChipKeyboardNavigation(page)
+
+  const frameDurations = await page
+    .locator('.graph-frame')
+    .evaluateAll(elements =>
+      elements.map(element => {
+        const value = getComputedStyle(element).animationDuration
+        return value.endsWith('ms')
           ? Number.parseFloat(value)
           : Number.parseFloat(value) * 1000
+      })
+    )
+  for (const duration of frameDurations) {
+    expect(duration).toBeLessThanOrEqual(50)
+  }
+})
 
-      return {
-        durations: style.animationDuration.split(',').map(toMilliseconds),
-        transitionDurations: style.transitionDuration
-          .split(',')
-          .map(toMilliseconds),
-        transform: style.transform,
-      }
+test('theme toggle swaps the page between dark and light', async ({ page }) => {
+  await page.goto('/')
+
+  const toggle = page
+    .getByRole('navigation', { name: 'Primary navigation' })
+    .locator('.site-theme-toggle')
+  await expect(toggle).toBeVisible()
+
+  await expect(async () => {
+    await toggle.click()
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'light', {
+      timeout: 500,
     })
+  }).toPass()
+
+  const lightBackground = await page.evaluate(() =>
+    getComputedStyle(document.body).backgroundColor.replace(/\s/gu, '')
   )
+  expect(lightBackground).toBe('rgb(246,250,248)')
 
-  for (const { durations, transitionDurations, transform } of computedMotion) {
-    expect(durations.every(duration => duration === 0)).toBe(true)
-    expect(transitionDurations.every(duration => duration === 0)).toBe(true)
-    expect(transform).toBe('none')
-  }
+  await toggle.click()
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark')
 })
diff --git a/tests/e2e/docs-playground.spec.ts b/tests/e2e/docs-playground.spec.ts
index 73186815..68afcc79 100644
--- a/tests/e2e/docs-playground.spec.ts
+++ b/tests/e2e/docs-playground.spec.ts
@@ -228,10 +228,10 @@ for (const width of widths) {
     await expect(summary).toContainText('warning')
     await expectEveryTouchTarget(summary)
     const warning = page.locator('.pg-warnings')
-    await expect(warning).toHaveCSS('color', 'rgb(242, 184, 75)')
+    await expect(warning).toHaveCSS('color', 'rgb(251, 191, 36)')
     await expect(warning).toHaveCSS(
       'background-color',
-      'rgba(242, 184, 75, 0.07)'
+      'rgba(251, 191, 36, 0.07)'
     )
 
     await page.getByRole('button', { name: 'Download pipeline (.zip)' }).focus()
@@ -283,29 +283,29 @@ test('embedded playground applies Lichen to sample output states', async ({
   await page.getByRole('button', { name: 'Try the sample' }).click()
 
   const selectedChip = page.locator('.pg-chip:has(input:checked)').first()
-  await expect(selectedChip).toHaveCSS('color', 'rgb(168, 201, 95)')
+  await expect(selectedChip).toHaveCSS('color', 'rgb(52, 211, 153)')
   await expect(selectedChip).toHaveCSS(
     'background-color',
-    'rgba(168, 201, 95, 0.1)'
+    'rgba(52, 211, 153, 0.1)'
   )
-  await expect(selectedChip).toHaveCSS('border-color', 'rgb(168, 201, 95)')
+  await expect(selectedChip).toHaveCSS('border-color', 'rgb(52, 211, 153)')
 
   const activeTab = page.getByRole('tab', { name: 'Tokens' })
-  await expect(activeTab).toHaveCSS('color', 'rgb(168, 201, 95)')
-  await expect(activeTab).toHaveCSS('border-bottom-color', 'rgb(168, 201, 95)')
+  await expect(activeTab).toHaveCSS('color', 'rgb(52, 211, 153)')
+  await expect(activeTab).toHaveCSS('border-bottom-color', 'rgb(52, 211, 153)')
 
   const successChip = page.locator('.pg-type-chip').first()
-  await expect(successChip).toHaveCSS('color', 'rgb(69, 201, 139)')
+  await expect(successChip).toHaveCSS('color', 'rgb(52, 211, 153)')
   await expect(successChip).toHaveCSS(
     'background-color',
-    'rgba(69, 201, 139, 0.1)'
+    'rgba(52, 211, 153, 0.1)'
   )
 
   const primary = page.getByRole('button', {
     name: 'Download pipeline (.zip)',
   })
-  await expect(primary).toHaveCSS('background-color', 'rgb(250, 250, 250)')
-  await expect(primary).toHaveCSS('color', 'rgb(9, 9, 11)')
+  await expect(primary).toHaveCSS('background-color', 'rgb(52, 211, 153)')
+  await expect(primary).toHaveCSS('color', 'rgb(4, 37, 26)')
 })
 
 test('embedded playground tabs and context radios support the keyboard', async ({
@@ -414,8 +414,8 @@ test('embedded playground announces malformed JSON', async ({ page }) => {
   const alert = page.locator('.pg-error[role="alert"]')
   await expect(alert).toHaveCount(1)
   await expect(alert).toBeVisible()
-  await expect(alert).toHaveCSS('color', 'rgb(242, 117, 117)')
-  await expect(alert).toHaveCSS('background-color', 'rgba(242, 117, 117, 0.08)')
+  await expect(alert).toHaveCSS('color', 'rgb(248, 113, 113)')
+  await expect(alert).toHaveCSS('background-color', 'rgba(248, 113, 113, 0.08)')
   expect((await alert.textContent())?.trim().length).toBeGreaterThan(0)
 })
 
diff --git a/tests/e2e/docs-shell.spec.ts b/tests/e2e/docs-shell.spec.ts
index 661294d6..a3a13ccf 100644
--- a/tests/e2e/docs-shell.spec.ts
+++ b/tests/e2e/docs-shell.spec.ts
@@ -143,7 +143,7 @@ test('marketing shell applies the approved Lichen background', async ({
 
   await expect(page.locator('body')).toHaveCSS(
     'background-color',
-    'rgb(3, 3, 4)'
+    'rgb(11, 15, 13)'
   )
 })
 
@@ -173,15 +173,15 @@ test('documentation shell resolves the approved Lichen theme', async ({
   })
 
   expect(colors).toEqual({
-    background: 'rgb(3, 3, 4)',
-    primary: 'rgb(168, 201, 95)',
+    background: 'rgb(11, 15, 13)',
+    primary: 'rgb(52, 211, 153)',
   })
 
   const currentPage = page.locator(
     '#nd-sidebar a[href="/docs/getting-started"][data-active="true"]'
   )
   await expect(currentPage).toBeVisible()
-  await expect(currentPage).toHaveCSS('color', 'rgb(168, 201, 95)')
+  await expect(currentPage).toHaveCSS('color', 'rgb(52, 211, 153)')
 })
 
 test('mobile navigation exposes the active page', async ({ page }) => {
@@ -192,10 +192,10 @@ test('mobile navigation exposes the active page', async ({ page }) => {
   const activeLinks = menu.locator('nav a[aria-current="page"]')
   await expect(activeLinks).toHaveCount(1)
   await expect(activeLinks).toHaveText('Playground')
-  await expect(activeLinks).toHaveCSS('color', 'rgb(168, 201, 95)')
+  await expect(activeLinks).toHaveCSS('color', 'rgb(52, 211, 153)')
   await expect(activeLinks).toHaveCSS(
     'background-color',
-    'rgba(168, 201, 95, 0.1)'
+    'rgba(52, 211, 153, 0.1)'
   )
 })
 
diff --git a/tests/e2e/standalone-playground.spec.ts b/tests/e2e/standalone-playground.spec.ts
index ec248712..767553be 100644
--- a/tests/e2e/standalone-playground.spec.ts
+++ b/tests/e2e/standalone-playground.spec.ts
@@ -287,10 +287,10 @@ for (const width of widths) {
     await expect(summary).toContainText('warning')
     await expectInsideViewport(summary, width)
     const warning = page.locator('.warnings')
-    await expect(warning).toHaveCSS('color', 'rgb(242, 184, 75)')
+    await expect(warning).toHaveCSS('color', 'rgb(251, 191, 36)')
     await expect(warning).toHaveCSS(
       'background-color',
-      'rgba(242, 184, 75, 0.07)'
+      'rgba(251, 191, 36, 0.07)'
     )
     await page.getByRole('button', { name: 'Download pipeline (.zip)' }).focus()
     await page.keyboard.press('Tab')
@@ -342,29 +342,29 @@ test('standalone playground applies Lichen to sample output states', async ({
   await page.getByRole('button', { name: 'Try the sample' }).click()
 
   const selectedChip = page.locator('.chip:has(input:checked)').first()
-  await expect(selectedChip).toHaveCSS('color', 'rgb(168, 201, 95)')
+  await expect(selectedChip).toHaveCSS('color', 'rgb(52, 211, 153)')
   await expect(selectedChip).toHaveCSS(
     'background-color',
-    'rgba(168, 201, 95, 0.1)'
+    'rgba(52, 211, 153, 0.1)'
   )
-  await expect(selectedChip).toHaveCSS('border-color', 'rgb(168, 201, 95)')
+  await expect(selectedChip).toHaveCSS('border-color', 'rgb(52, 211, 153)')
 
   const activeTab = page.getByRole('tab', { name: 'Tokens' })
-  await expect(activeTab).toHaveCSS('color', 'rgb(168, 201, 95)')
-  await expect(activeTab).toHaveCSS('border-bottom-color', 'rgb(168, 201, 95)')
+  await expect(activeTab).toHaveCSS('color', 'rgb(52, 211, 153)')
+  await expect(activeTab).toHaveCSS('border-bottom-color', 'rgb(52, 211, 153)')
 
   const successChip = page.locator('.type-chip').first()
-  await expect(successChip).toHaveCSS('color', 'rgb(69, 201, 139)')
+  await expect(successChip).toHaveCSS('color', 'rgb(52, 211, 153)')
   await expect(successChip).toHaveCSS(
     'background-color',
-    'rgba(69, 201, 139, 0.1)'
+    'rgba(52, 211, 153, 0.1)'
   )
 
   const primary = page.getByRole('button', {
     name: 'Download pipeline (.zip)',
   })
-  await expect(primary).toHaveCSS('background-color', 'rgb(250, 250, 250)')
-  await expect(primary).toHaveCSS('color', 'rgb(9, 9, 11)')
+  await expect(primary).toHaveCSS('background-color', 'rgb(52, 211, 153)')
+  await expect(primary).toHaveCSS('color', 'rgb(4, 37, 26)')
 })
 
 test('standalone tabs and context radios support the keyboard', async ({
@@ -480,8 +480,8 @@ test('standalone playground announces malformed JSON', async ({ page }) => {
   const alert = page.locator('.error[role="alert"]')
   await expect(alert).toHaveCount(1)
   await expect(alert).toBeVisible()
-  await expect(alert).toHaveCSS('color', 'rgb(242, 117, 117)')
-  await expect(alert).toHaveCSS('background-color', 'rgba(242, 117, 117, 0.08)')
+  await expect(alert).toHaveCSS('color', 'rgb(248, 113, 113)')
+  await expect(alert).toHaveCSS('background-color', 'rgba(248, 113, 113, 0.08)')
   expect((await alert.textContent())?.trim().length).toBeGreaterThan(0)
 })