feat(docs): emerald homepage redesign with an interactive token graph

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>

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,73 +84,72 @@ 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.
 
 ## Components
 
 ### 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.

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>
   )