diff --git a/README.md b/README.md
index a3170b6..bebac1a 100644
--- a/README.md
+++ b/README.md
@@ -8,11 +8,11 @@ It is not a beautifier, generic design-system linter, prompt library, schema bro
 
 ## Product Thesis
 
-AI-generated UI fails when the implementation model becomes the user experience. Tables become screens, schemas become forms, tool calls become buttons, and internal prompts become product vocabulary.
+Implementation details can obscure the user’s work when record labels replace domain language, forms expose irrelevant fields, or controls name tool commands instead of the user’s actions. Technical detail remains useful for setup, debugging, auditing, and integration.
 
-JudgmentKit catches when AI-generated UI turns implementation mechanics into UX, then gives the agent repair instructions before the work ships.
+JudgmentKit gives the agent interaction guidance, checks declared interface requirements against supplied evidence, and returns repair instructions. The caller’s agent implements changes and resubmits; unresolved required verification remains visible.
 
-The shippable value path is the public `/value/` page: it shows what JudgmentKit prevents with concrete before/after cases for implementation-language leakage, unsafe approval boundaries, and missing accessibility evidence. Eval reports remain supporting evidence for audit and reproduction, not the primary product story.
+The public `/value/` page shows selected checks and curated repair examples for implementation-language leakage, approval boundaries, and missing accessibility evidence. Eval reports remain supporting evidence for audit and reproduction, with their original versions and conditions.
 
 JudgmentKit gives the agent a better order of operations:
 
diff --git a/docs/site-homepage-art-provenance.json b/docs/site-homepage-art-provenance.json
new file mode 100644
index 0000000..8d1cba7
--- /dev/null
+++ b/docs/site-homepage-art-provenance.json
@@ -0,0 +1,37 @@
+{
+  "date": "2026-10-16",
+  "role": "JudgmentKit public homepage environmental background",
+  "asset": "site/assets/judgment-lens-environment-v2.webp",
+  "sha256": "4604767e61b39228ea0b0c079828d905cffd65de7ae2d467047b1ccb7e26979b",
+  "bytes": 154502,
+  "dimensions": [
+    1983,
+    793
+  ],
+  "generator": "built-in image_gen",
+  "mode": "reference-based generation and composition",
+  "prompt": "Use case: compositing. Asset type: full-width website hero background. Image 1 is the EDIT TARGET: JudgmentKit's existing portrait artwork of rough stone fragments passing through a teal glass lens and emerging as an ordered curved path. Image 2 is a STYLE/COMPOSITION REFERENCE ONLY: the Surfaces architectural slab environment. Recompose and extend Image 1 into a very wide 2.5:1 landscape (approximately 2400x960) suitable for a full-bleed homepage hero behind live HTML text. Preserve the recognizable teal glass lens, stone fragments, ordered path, premium realistic materials and quiet lighting. Place the lens and ordered path predominantly in the right half to right third. Extend a spacious, dim Ink/Graphite studio environment across the left 50 percent so white text can be placed there. The artwork must fill the frame naturally with no visible card/container boundary. Use the restrained environmental depth, tonal balance and architectural scale of Image 2 without adding its slabs to this scene. Lens must remain recognizably the same subject, not become a logo, eye or portal to another world. No text, no typography, no logos, no UI, no border, no rounded frame, no watermark. Do not bake a dark gradient text overlay into the bitmap; the left environment should be naturally quiet and dark. Single final landscape image.",
+  "editSource": {
+    "path": "site/assets/judgment-lens-hero.webp",
+    "sha256": "becef95f1088efd5f0e01263bff7d5d74868fd523ba267da347ce722284e81f8",
+    "preserved": true
+  },
+  "styleAndCompositionReference": "https://www.surfaces.systems/",
+  "sharedLayoutContract": {
+    "path": "specs/website-family-layout.md",
+    "sha256": "ce279d508bb304f80a5c95bb8df3be1bc8e8ffe631254412cb3d10df2d57b007",
+    "source": "SurfacesBrand/specs/website-family-layout.md",
+    "observedViewports": [
+      [
+        1280,
+        720
+      ],
+      [
+        390,
+        844
+      ]
+    ]
+  },
+  "artworkReview": "Root visually accepted the wide artwork before browser composition review. Final page acceptance remains separate.",
+  "preservation": "Canonical marks, lockups, favicon geometry and social artwork are unchanged. No text or UI is baked into this asset."
+}
diff --git a/scripts/verify-public-release.mjs b/scripts/verify-public-release.mjs
index 30dea62..93b9acd 100644
--- a/scripts/verify-public-release.mjs
+++ b/scripts/verify-public-release.mjs
@@ -466,9 +466,10 @@ export function assertValueAppearanceContract(valueHtml, siteCss) {
     [
       '<link rel="canonical" href="https://judgmentkit.ai/value/">',
       '<link rel="stylesheet" href="/assets/site.css">',
+      '<body class="site-presentation">',
       'class="value-findings"',
       "Baseline failure",
-      "JudgmentKit catches",
+      "JudgmentKit checks",
       "Repaired outcome",
     ],
     "value",
@@ -492,6 +493,11 @@ export function assertValueAppearanceContract(valueHtml, siteCss) {
     ["background: var(--soft-surface);"],
     "value finding card rule",
   );
+  const familyDarkRoot = siteCss.match(
+    /@media \(prefers-color-scheme: dark\) \{\s*\.site-presentation\s*\{([^}]*)\}/,
+  )?.[1];
+  assert.ok(familyDarkRoot, "site CSS should include the scoped website dark appearance root");
+  assertIncludes(familyDarkRoot, ["--bg: #0B0D0E;", "--ink: #F7F6F2;", "--soft-surface: #24282b;"], "website CSS dark appearance root");
 }
 
 function evalRunTitle(run) {
@@ -1144,8 +1150,7 @@ export function assertReleaseFooter(html, expectedPackageVersion, label) {
     [
       '<footer class="site-footer">',
       '<a class="site-footer-brand" href="/" aria-label="JudgmentKit home">',
-      'srcset="/assets/brand/judgmentkit-lockup-reversed.svg" media="(prefers-color-scheme: dark)"',
-      'class="site-brand-lockup" src="/assets/brand/judgmentkit-lockup.svg"',
+      'class="site-brand-lockup" src="/assets/brand/judgmentkit-lockup-reversed.svg"',
       `href="https://github.com/mikeylong/judgmentkit/releases/tag/v${expectedPackageVersion}"`,
       `aria-label="Release v${expectedPackageVersion} on GitHub"`,
       `<span>Release v${expectedPackageVersion}</span>`,
@@ -1163,20 +1168,15 @@ async function verifyPublicRoutes(baseUrl, options = {}) {
   assertIncludes(
     home.text,
     [
-      "Stop AI from building the wrong interface.",
-      "The judgment layer for AI-generated UI",
-      "A design system tells an agent how interface elements should look and behave.",
-      "JudgmentKit tells it which interface the user’s work requires, what should stay hidden, and what must be repaired.",
-      "Use JudgmentKit’s design system—or bring your own.",
-      "A design system can make the wrong interface consistent.",
-      "JudgmentKit prevents that mistake before the components are composed.",
-      "Artifact Inspector",
-      "Proposed",
-      "one rendered artifact stays primary",
-      "inspector chrome and inspection overlay",
-      "The artifact keeps its own visual language.",
-      'href="/docs/#artifact-inspector"',
-      `href="https://github.com/mikeylong/judgmentkit/releases/tag/v${expectedPackageVersion}"`,
+      "Judgment before components.",
+      "Guide interface design with your AI agent.",
+      "JudgmentKit gives your AI agent interaction guidance, implementation checks, and repair instructions.",
+      "Keep the interface in the language of the work.",
+      'class="homepage-scene"',
+      'class="family-problem-row"',
+      'class="family-workflow-row"',
+      "Your agent creates or revises the interface.",
+      "The builder owns the product decisions.",
       "See a screen repaired",
       "Explore examples",
       '<link rel="canonical" href="https://judgmentkit.ai/">',
diff --git a/site/assets/judgment-lens-environment-v2.webp b/site/assets/judgment-lens-environment-v2.webp
new file mode 100644
index 0000000..5154ed0
Binary files /dev/null and b/site/assets/judgment-lens-environment-v2.webp differ
diff --git a/site/brand-assets.mjs b/site/brand-assets.mjs
index 3c2bc13..fab088d 100644
--- a/site/brand-assets.mjs
+++ b/site/brand-assets.mjs
@@ -49,6 +49,24 @@ export const SITE_BRAND_LEGACY_MANIFEST_ROUTES = SITE_BRAND.legacy_icon_aliases
   .filter(entry => entry.target === SITE_BRAND.manifest.route)
   .map(entry => entry.route);
 
+// Titles are owned by these published pages, independently of their visible headings.
+const PUBLIC_PAGE_PURPOSES = Object.freeze({
+  "/": "Interface Design Guidance for AI Agents",
+  "/value/": "Interface checks and repair examples",
+  "/docs/": "Setup and agent workflow",
+  "/examples/": "Interface examples and repair fixtures",
+  "/design-system/": "Interface design system reference",
+  "/design-system/tokens/": "Design token reference",
+  "/design-system/fonts/": "Interface typography reference",
+  "/design-system/icons/": "Interface icon reference",
+  "/design-system/components/": "Component contracts and states",
+  "/design-system/patterns/": "Activity-based interface patterns",
+  "/design-system/accessibility/": "Accessibility evidence requirements",
+  "/evals/": "Historical UI evaluation reports",
+  "/evals/judgmentkit-mcp/": "Historical paired-artifact evaluation",
+  "/evals/site-rebuild-log/": "Website rebuild evidence log"
+});
+
 export function siteBrandHead({ title, description, canonicalUrl, existingContext = [] }) {
   const context = [
     ["property", "og:title", title], ["property", "og:description", description],
@@ -100,21 +118,31 @@ function attribute(tag, name) {
   return tag.match(new RegExp(`\\b${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`, "i"))?.slice(1).find(value => value !== undefined) ?? "";
 }
 
-// Copied examples and reports have independent HTML shells. Apply the same
-// public identity to their heads without changing their body or page copy.
+// Authored routes receive their approved document/social titles. Copied examples
+// and reports keep their original titles and context; every body stays unchanged.
 export function applySiteBrandHead(html, relativePath) {
   let found = false;
   const result = html.replace(/(<head\b[^>]*>)([\s\S]*?)(<\/head>)/i, (_, open, original, close) => {
     found = true;
     const active = original.replace(/<!--[\s\S]*?-->|<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "");
-    const title = active.match(/<title\b[^>]*>([\s\S]*?)<\/title>/i)?.[1].trim() || "JudgmentKit";
+    const route = "/" + relativePath.replace(/index\.html$/, "");
+    const purpose = PUBLIC_PAGE_PURPOSES[route];
+    const title = purpose
+      ? `${purpose} | JudgmentKit`.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")
+      : active.match(/<title\b[^>]*>([\s\S]*?)<\/title>/i)?.[1].trim() || "JudgmentKit";
     const descriptionTag = [...active.matchAll(/<meta\b[^>]*>/gi)].map(match => match[0]).find(tag => attribute(tag, "name").toLowerCase() === "description");
     const description = descriptionTag ? attribute(descriptionTag, "content") : "JudgmentKit is an activity-first judgment layer for AI-generated product work.";
     const canonicalTag = [...active.matchAll(/<link\b[^>]*>/gi)].map(match => match[0]).find(tag => attribute(tag, "rel").toLowerCase() === "canonical");
-    const route = "/" + relativePath.replace(/index\.html$/, "");
     const canonicalUrl = canonicalTag ? attribute(canonicalTag, "href") : SITE_BRAND.origin + route;
     const existingContext = [...active.matchAll(/<meta\b[^>]*>/gi)].map(([tag]) => (attribute(tag, "name") || attribute(tag, "property")).toLowerCase());
-    const head = original.replace(/<noscript\b[^>]*\bdata-brand-favicon-fallback[^>]*>[\s\S]*?<\/noscript\s*>/gi, "").replace(/<!--[\s\S]*?-->|<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>|<(?:link|meta)\b[^>]*>/gi, tag => {
+    const titled = original.replace(/<title\b[^>]*>[\s\S]*?<\/title>/i, tag => purpose ? `<title>${title}</title>` : tag)
+      .replace(/<meta\b[^>]*>/gi, tag => {
+        const key = (attribute(tag, "name") || attribute(tag, "property")).toLowerCase();
+        return purpose && ["og:title", "twitter:title"].includes(key)
+          ? tag.replace(/(\bcontent\s*=\s*)(["'])([\s\S]*?)\2/i, (_, prefix, quote) => `${prefix}${quote}${title}${quote}`)
+          : tag;
+      });
+    const head = titled.replace(/<noscript\b[^>]*\bdata-brand-favicon-fallback[^>]*>[\s\S]*?<\/noscript\s*>/gi, "").replace(/<!--[\s\S]*?-->|<(script|style)\b[^>]*>[\s\S]*?<\/\1\s*>|<(?:link|meta)\b[^>]*>/gi, tag => {
       if (/^<script\b/i.test(tag) && /\bdata-brand-favicon-controller(?:\s|=|>)/i.test(tag)) return "";
       if (/^<!--|^<(?:script|style)\b/i.test(tag)) return tag;
       const rel = attribute(tag, "rel").toLowerCase();
diff --git a/site/build-site.mjs b/site/build-site.mjs
index 0375902..4f9f84d 100755
--- a/site/build-site.mjs
+++ b/site/build-site.mjs
@@ -60,7 +60,7 @@ const COMPONENT_SPECIMEN_ASSET_VERSION =
 const SITE_ORIGIN = "https://judgmentkit.ai";
 const GITHUB_RELEASE_URL =
   `https://github.com/mikeylong/judgmentkit/releases/tag/v${JUDGMENTKIT_PACKAGE_VERSION}`;
-const HOMEPAGE_HERO_ART_FILENAME = "judgment-lens-hero.webp";
+const HOMEPAGE_HERO_ART_FILENAME = "judgment-lens-environment-v2.webp";
 const HOMEPAGE_HERO_ART_PATH = `/assets/${HOMEPAGE_HERO_ART_FILENAME}`;
 const MARKETING_PATTERN_HERO_FILENAME =
   "marketing-surface-weeknight-meal-plan.webp";
@@ -421,18 +421,14 @@ function addAnalyticsToHtml(html) {
 }
 
 const primaryNavLinks = [
-  { label: "Value", href: "/value/" },
+  { label: "Why JudgmentKit", href: "/#why-judgmentkit" },
+  { label: "How it works", href: "/#how-it-works" },
   { label: "Docs", href: "/docs/" },
-  { label: "Design System", href: "/design-system/" },
-  { label: "Examples", href: "/examples/" },
-  { label: "Evals", href: "/evals/" },
-  { label: "MCP", href: "/mcp" },
-  { label: "Handbooks", href: "https://handbooks.surfaces.systems/", newTab: true },
-  { label: "surfaces.systems", href: "https://surfaces.systems/" },
+  { label: "Surfaces", href: "https://surfaces.systems/" },
 ];
 
 function isPrimaryNavCurrent(link, pathName) {
-  if (link.href.startsWith("https://")) return false;
+  if (link.href.startsWith("https://") || link.href.includes("#")) return false;
   if (link.href === "/") return pathName === "/";
   if (link.href === "/mcp") return pathName === "/mcp";
   return pathName === link.href || pathName.startsWith(link.href);
@@ -765,7 +761,7 @@ function platformNavigationScript() {
           };
           window.addEventListener("pageshow", closePrimaryMenu);
           window.addEventListener("resize", () => {
-            if (window.matchMedia("(min-width: 1121px)").matches) closePrimaryMenu();
+            if (window.matchMedia("(min-width: 821px)").matches) closePrimaryMenu();
           });
         }
 
@@ -790,6 +786,8 @@ function page(title, body, options = {}) {
     "JudgmentKit is an activity-first judgment layer for AI-generated product work.";
   const pathName = options.path ?? "/";
   const canonicalUrl = `${SITE_ORIGIN}${pathName}`;
+  const familyPresentation = pathName === "/" ||
+    ["/value/", "/docs/", "/design-system/", "/examples/"].some((prefix) => pathName.startsWith(prefix));
 
   return `<!doctype html>
 <html lang="en">
@@ -805,7 +803,7 @@ function page(title, body, options = {}) {
 ${options.headExtra ?? ""}
 ${analyticsBootstrap()}
   </head>
-  <body>
+  <body${familyPresentation ? ' class="site-presentation"' : ""}>
 ${renderPlatformHeader(pathName)}
     <main>${body}</main>
 ${renderSiteFooter()}
@@ -817,12 +815,13 @@ ${platformNavigationScript()}
 function renderSiteFooter() {
   return `    <footer class="site-footer">
       <div class="site-shell site-footer-inner">
-        <a class="site-footer-brand" href="/" aria-label="JudgmentKit home">
-          <picture>
-            <source srcset="/assets/brand/judgmentkit-lockup-reversed.svg" media="(prefers-color-scheme: dark)">
-            <img class="site-brand-lockup" src="/assets/brand/judgmentkit-lockup.svg" width="425" height="109" alt="">
-          </picture>
-        </a>
+        <div class="site-footer-identity">
+          <a class="site-footer-brand" href="/" aria-label="JudgmentKit home">
+            <img class="site-brand-lockup" src="/assets/brand/judgmentkit-lockup-reversed.svg" width="425" height="109" alt="">
+          </a>
+        </div>
+        <p class="site-footer-description">Guide interface design with your AI agent.</p>
+        <small class="site-footer-copyright">© 2026 JudgmentKit</small>
         <a class="site-footer-release" href="${escapeHtml(GITHUB_RELEASE_URL)}" aria-label="Release v${escapeHtml(JUDGMENTKIT_PACKAGE_VERSION)} on GitHub">
           <span>Release v${escapeHtml(JUDGMENTKIT_PACKAGE_VERSION)}</span>
           <span aria-hidden="true">↗</span>
@@ -985,6 +984,7 @@ const stylesheet = `
   --header-ink: #f7f6f2;
   --header-menu-bg: #0b0d0e;
   --header-border: #3c4145;
+  --website-nickel: #8B9096;
   --section-rail-top: calc(var(--site-navigation-height) + var(--site-page-top));
 }
 @media (prefers-color-scheme: dark) {
@@ -1080,7 +1080,7 @@ a {
   font-family: "Header Inter";
   font-style: normal;
   font-weight: 100 900;
-  font-display: optional;
+  font-display: swap;
   src: url("/assets/fonts/inter-latin.woff2") format("woff2");
 }
 @font-face {
@@ -1237,7 +1237,7 @@ a {
   text-decoration: underline;
   text-underline-offset: 5px;
 }
-@media (max-width: 1120px) {
+@media (max-width: 820px) {
   .surfaces-navigation-sections {
     display: none;
   }
@@ -1294,8 +1294,14 @@ a {
   min-width: 0;
 }
 .site-footer {
-  padding: 18px var(--site-gutter) 20px;
-  border-top: 1px solid var(--line);
+  padding: 28px 24px;
+  border-top: 1px solid var(--header-border);
+  background: var(--header-menu-bg);
+  color: var(--header-ink);
+  font-family: "Header Inter", "Header Inter Fallback", Arial, Helvetica, sans-serif;
+}
+.site-footer .site-shell {
+  max-width: 1120px;
 }
 .site-footer-inner {
   display: flex;
@@ -1309,7 +1315,7 @@ a {
   align-items: center;
   min-height: 44px;
   max-width: 100%;
-  color: var(--ink);
+  color: var(--header-ink);
   text-decoration: none;
 }
 .site-brand-lockup {
@@ -1320,29 +1326,29 @@ a {
   object-fit: contain;
 }
 .site-footer-brand:focus-visible {
-  outline: 2px solid var(--accent-strong);
+  outline: 2px solid var(--header-ink);
   outline-offset: 4px;
 }
 .site-footer-release {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  color: var(--accent-strong);
-  font-family: Inter, sans-serif;
-  font-size: 13px;
+  color: var(--nav-muted);
+  font-family: inherit;
+  font-size: 12px;
   font-weight: 400;
   text-decoration: none;
 }
 .site-footer-release:hover,
 .site-footer-release:focus-visible {
-  color: var(--ink);
+  color: var(--header-ink);
   text-decoration: underline;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
 }
 .site-footer-release:focus-visible {
-  outline: 0;
-  box-shadow: 0 0 0 2px var(--focus-ring);
+  outline: 2px solid var(--header-ink);
+  outline-offset: 4px;
 }
 .site-page-header {
   max-width: var(--site-reading-width);
@@ -5896,174 +5902,68 @@ export function renderHomepage({ homepageFilmEnabled = HOMEPAGE_FILM_ENABLED } =
       </div>
     </section>
     ` : ""}
-    <section class="hero homepage-hero">
+    <section class="hero homepage-hero" aria-labelledby="homepage-title">
+      <img class="homepage-scene" src="${HOMEPAGE_HERO_ART_PATH}" width="1983" height="793" alt="" aria-hidden="true" loading="eager" fetchpriority="high" decoding="async">
       <div class="site-shell homepage-hero-shell">
         <div class="homepage-hero-copy">
-          <p class="eyebrow">The judgment layer for AI-generated UI</p>
-          <h1>Stop AI from building the wrong interface.</h1>
-          <p class="lede">A design system tells an agent how interface elements should look and behave. JudgmentKit tells it which interface the user’s work requires, what should stay hidden, and what must be repaired.</p>
-          <p><strong>Use JudgmentKit’s design system—or bring your own.</strong></p>
+          <p class="eyebrow">Judgment before components.</p>
+          <h1 id="homepage-title">Guide interface design with your AI agent.</h1>
+          <p class="lede">JudgmentKit gives your AI agent interaction guidance, implementation checks, and repair instructions.</p>
           <div class="hero-actions" aria-label="Primary next steps">
             <a class="hero-action hero-action-primary" data-hero-action="primary" href="/value/">See a screen repaired</a>
             <a class="hero-action hero-action-secondary" data-hero-action="secondary" href="/examples/">Explore examples</a>
           </div>
         </div>
-        <figure class="homepage-hero-visual">
-          <div class="homepage-hero-art">
-            <img src="${HOMEPAGE_HERO_ART_PATH}" width="1122" height="1402" alt="Rough stone fragments pass through a teal glass lens and emerge as an ordered path." loading="eager" fetchpriority="high" decoding="async">
-          </div>
-        </figure>
-      </div>
-    </section>
-    <section class="section homepage-category" aria-labelledby="category-title">
-      <div class="site-shell homepage-section-shell">
-        <div>
-          <p class="eyebrow">Judgment before components</p>
-          <h2 id="category-title">A design system can make the wrong interface consistent.</h2>
-          <p>JudgmentKit prevents that mistake before the components are composed.</p>
-        </div>
-        <div class="failure-grid">
-          <article>
-            <h3>Traditional design system</h3>
-            <p>Defines how interface elements look, behave, and remain consistent.</p>
-          </article>
-          <article>
-            <h3>JudgmentKit</h3>
-            <p>Defines what the interface must help someone do, decide, and understand.</p>
-          </article>
-          <article>
-            <h3>Together</h3>
-            <p>JudgmentKit uses the design system you choose and tells the agent what to repair.</p>
-          </article>
-        </div>
-      </div>
-    </section>
-    <section class="section homepage-preview" aria-labelledby="repair-preview-title">
-      <div class="site-shell homepage-section-shell">
-        <div>
-          <p class="eyebrow">Failure-to-repair preview</p>
-          <h2 id="repair-preview-title">First drafts should start from the work, not from available internals.</h2>
-        </div>
-        <div class="proof-panel evaluation-panel" aria-label="JudgmentKit repair preview">
-          <div class="evaluation-step">
-            <span>Failure</span>
-            <strong>The screen follows the system, not the work.</strong>
-            <p>Generated interfaces often mirror available internals instead of the activity a person is trying to complete.</p>
-          </div>
-          <div class="evaluation-step">
-            <span>Judgment</span>
-            <strong>The activity is named before the UI.</strong>
-            <p>JudgmentKit asks what the user is doing, what decision matters, what evidence belongs nearby, and what should stay diagnostic.</p>
-          </div>
-          <div class="evaluation-step">
-            <span>Repair</span>
-            <strong>The agent gets a ready handoff.</strong>
-            <p>The next generation pass receives product-language responsibilities, approved states, and a disclosure boundary.</p>
-          </div>
-          <div class="evaluation-step evaluation-step-status">
-            <span>Result</span>
-            <strong>Better first drafts. Less cleanup theater.</strong>
-            <p>Use the proof paths below to inspect the contract loop before installing anything.</p>
-          </div>
-        </div>
       </div>
     </section>
-    <section class="section homepage-failure" aria-labelledby="failure-title">
+    <section class="homepage-problem" id="why-judgmentkit" aria-labelledby="problem-title">
       <div class="site-shell homepage-section-shell">
-        <div>
-          <p class="eyebrow">Failure recognition</p>
-          <h2 id="failure-title">The problem is not ugly UI. It is the wrong concept of the work.</h2>
-        </div>
-        <div class="failure-grid">
-          <article>
-            <h3>Before judgment</h3>
-            <p>The agent sees available structure and turns it into labels, navigation, and actions. The user has to translate the system back into their own work.</p>
-          </article>
-          <article>
-            <h3>With JudgmentKit</h3>
-            <p>The agent must name the activity, participant, decision, outcome, and disclosure boundary before it treats a workflow as ready.</p>
-          </article>
-          <article>
-            <h3>After repair</h3>
-            <p>The interface can be generated from a product-language handoff that makes evidence, decisions, and completion states explicit.</p>
-          </article>
+        <div class="homepage-section-heading">
+          <p class="eyebrow">Risks to check</p>
+          <h2 id="problem-title">Keep the interface in the language of the work.</h2>
         </div>
+        <ol class="family-problem-row">
+          <li>
+            <span class="family-ordinal" aria-hidden="true">01</span>
+            <h3>Internal record labels</h3>
+            <p>The user has to translate database terms into their own work.</p>
+          </li>
+          <li>
+            <span class="family-ordinal" aria-hidden="true">02</span>
+            <h3>Irrelevant form fields</h3>
+            <p>The form asks for details the person’s task does not require.</p>
+          </li>
+          <li>
+            <span class="family-ordinal" aria-hidden="true">03</span>
+            <h3>Tool names as actions</h3>
+            <p>The control names an implementation command instead of the user’s action.</p>
+          </li>
+        </ol>
       </div>
     </section>
-    <section class="section homepage-artifact-inspector" aria-labelledby="artifact-inspector-title">
+    <section class="homepage-workflow" id="how-it-works" aria-labelledby="workflow-title">
       <div class="site-shell homepage-section-shell">
-        <div>
-          <p class="eyebrow">Artifact Inspector · Proposed</p>
-          <h2 id="artifact-inspector-title">Keep the artifact at the center of the review.</h2>
-          <p>Artifact Inspector is for work where one rendered artifact stays primary and the person must act on a specific part of it.</p>
-        </div>
-        <div class="failure-grid">
-          <article>
-            <h3>Artifact first</h3>
-            <p>People select the exact locus that matters. Evidence, actions, feedback, and results stay attached to that location.</p>
-          </article>
-          <article>
-            <h3>Scoped chrome</h3>
-            <p>JudgmentKit governs the inspector chrome and inspection overlay. The artifact keeps its own visual language.</p>
-          </article>
-          <article>
-            <h3>Current boundary</h3>
-            <p>Version ${escapeHtml(JUDGMENTKIT_PACKAGE_VERSION)} can guide the model, but it cannot yet verify the complete working interaction, so review remains required.</p>
-          </article>
+        <div class="homepage-section-heading">
+          <p class="eyebrow">From activity to interface</p>
+          <h2 id="workflow-title">Build, check, and revise.</h2>
         </div>
-        <div class="link-row">
-          <a class="pill-link" href="/docs/#artifact-inspector">Read the Artifact Inspector guide</a>
-          <a class="pill-link" href="${escapeHtml(GITHUB_RELEASE_URL)}">Read the ${escapeHtml(JUDGMENTKIT_PACKAGE_VERSION)} release notes</a>
-        </div>
-      </div>
-    </section>
-    <section class="section proof-paths" aria-labelledby="proof-paths-title">
-      <div class="site-shell homepage-section-shell">
-        <div>
-          <p class="eyebrow">Proof paths</p>
-          <h2 id="proof-paths-title">Inspect the loop from product value to repeatable evidence.</h2>
-        </div>
-        <div class="route-grid route-grid-proof">
-          <article>
-            <h3>What it prevents</h3>
-            <p>See before-and-after cases for implementation-language leakage, unsafe action boundaries, and missing evidence.</p>
-            <a class="pill-link" href="/value/">Open value examples</a>
-          </article>
-          <article>
-            <h3>Replayable examples</h3>
-            <p>Review generated artifacts, comparison harnesses, and first-use fixtures that show the repair loop in context.</p>
-            <a class="pill-link" href="/examples/">Open examples</a>
-          </article>
-          <article>
-            <h3>Evaluation evidence</h3>
-            <p>Read the bounded reports and model matrices. The reports are audit material, not broad benchmark claims.</p>
-            <a class="pill-link" href="/evals/">Open eval evidence</a>
-          </article>
-        </div>
-      </div>
-    </section>
-    <section class="section adoption-paths" aria-labelledby="adoption-title">
-      <div class="site-shell homepage-section-shell">
-        <div>
-          <p class="eyebrow">Adoption paths</p>
-          <h2 id="adoption-title">Choose the next surface for the work you are doing.</h2>
-        </div>
-        <div class="route-grid route-grid-adoption">
-          <article>
-            <h3>Read the docs</h3>
-            <p>Use the setup and planning guide when you are ready to connect JudgmentKit to an agent workflow.</p>
-            <a class="pill-link" href="/docs/">Open docs</a>
-          </article>
-          <article>
-            <h3>Review the design-system assets</h3>
-            <p>Inspect token roles, typography, icons, component contracts, patterns, and accessibility policy.</p>
-            <a class="pill-link" href="/design-system/">Open design system</a>
-          </article>
-          <article>
-            <h3>Start installation</h3>
-            <p>Go straight to the hosted installer when the product fit and proof are clear enough.</p>
-            <a class="pill-link" href="/install">Open install route</a>
-          </article>
+        <ol class="family-workflow-row">
+          ${[
+            ["file-text", "Describe the work", "Show what someone needs to do."],
+            ["pencil", "Correct the premise", "Correct the agent’s task assumptions."],
+            ["panels-top-left", "Build the interface", "Your agent creates or revises the interface."],
+            ["check", "Try important tasks", "Repair specific failures."],
+            ["clipboard-check", "Review the result", "See what was checked and what remains unresolved."],
+          ].map(([icon, title, description], index) => `
+          <li class="family-workflow-step">
+            <span class="family-ordinal" aria-hidden="true">0${index + 1}</span>
+            <span class="family-workflow-icon" aria-hidden="true">${getIconSvg({ id: icon }).inline_svg}</span>
+            <h3>${title}</h3>
+            <p>${description}</p>
+          </li>`).join("")}
+        </ol>
+        <div class="homepage-support">
+          <p>The builder owns the product decisions.</p>
         </div>
       </div>
     </section>
@@ -6352,7 +6252,7 @@ export function renderHomepage({ homepageFilmEnabled = HOMEPAGE_FILM_ENABLED } =
   `,
     {
       description:
-        "JudgmentKit helps AI agents understand the user's work, choose the right interface, and repair what does not fit.",
+        "JudgmentKit gives your AI agent interaction guidance, implementation checks, and repair instructions.",
       path: "/",
     },
   );
@@ -9354,50 +9254,50 @@ async function valuePage() {
   const evidenceLinks = await buildValueEvidenceLinks();
 
   return page(
-    "What JudgmentKit Prevents",
+    "Interface Checks and Repair Examples",
     `
     <section class="section value-page">
       <div class="site-shell value-shell">
         <div class="site-page-header site-page-header-wide value-hero">
-          <p class="eyebrow">Shippable value</p>
-          <h1>What JudgmentKit prevents</h1>
-          <p class="lede">JudgmentKit catches when AI-generated UI turns implementation mechanics into UX, then gives the agent repair instructions before the work ships.</p>
+          <p class="eyebrow">Selected examples</p>
+          <h1>Interface checks and repair examples</h1>
+          <p class="lede">These examples show how JudgmentKit checks declared interface requirements and returns repair guidance from the submitted evidence.</p>
         </div>
 
         <div class="value-case-grid">
           <article class="value-case" id="implementation-language">
             <div class="value-case-copy">
               <p class="eyebrow">Implementation language leak</p>
-              <h2>Internal objects stop becoming the product surface.</h2>
-              <p>A raw generation pass tends to expose database fields, schema labels, endpoint status, and debug structure. JudgmentKit redirects the agent toward the actual activity: a support lead reviewing refund evidence and leaving a handoff.</p>
+              <h2>This example keeps diagnostics secondary.</h2>
+              <p>In this curated refund example, the baseline exposes database fields, schema labels, endpoint status, and debug structure. The guided version centers on a support lead reviewing refund evidence and leaving a handoff.</p>
               <dl class="value-findings">
                 <div><dt>Baseline failure</dt><dd>Source mechanics become navigation and labels the support lead has to translate.</dd></div>
-                <div><dt>JudgmentKit catches</dt><dd>The activity, participant, decision, outcome, and disclosure boundary are missing or weak.</dd></div>
+                <div><dt>JudgmentKit checks</dt><dd>The activity, participant, decision, outcome, and disclosure boundary are missing or weak.</dd></div>
                 <div><dt>Repaired outcome</dt><dd>The primary surface uses refund review language and keeps diagnostics secondary.</dd></div>
               </dl>
             </div>
             <figure class="value-screenshot-pair" aria-label="Implementation language before and after screenshots">
               <a href="/examples/model-ui/refund-system-map/artifacts/deterministic-no-judgmentkit.html">
                 <img src="/examples/model-ui/refund-system-map/screenshots/deterministic-no-judgmentkit.png" alt="Raw refund triage artifact screenshot">
-                <span>Raw brief</span>
+                <span>Baseline example</span>
               </a>
               <a href="/examples/model-ui/refund-system-map/artifacts/deterministic-with-judgmentkit.html">
                 <img src="/examples/model-ui/refund-system-map/screenshots/deterministic-with-judgmentkit.png" alt="JudgmentKit-guided refund triage artifact screenshot">
-                <span>JudgmentKit-guided</span>
+                <span>Guided example</span>
               </a>
-              <figcaption>Same refund activity, different source discipline.</figcaption>
+              <figcaption>Curated refund artifacts, shown for comparison.</figcaption>
             </figure>
           </article>
 
           <article class="value-case" id="action-boundary">
             <div class="value-case-copy">
               <p class="eyebrow">Unsafe action boundary</p>
-              <h2>Approval work gets a human decision point.</h2>
-              <p>Refund review is not a generic submit flow. The user needs to approve, send to policy review, or return for missing evidence with a reason the next owner can trust.</p>
+              <h2>Make the approval boundary explicit.</h2>
+              <p>In this refund example, the user approves, sends to policy review, or returns for missing evidence, with a recorded reason for the next owner.</p>
               <dl class="value-findings">
                 <div><dt>Baseline failure</dt><dd>Actions advance the case before the approval boundary and handoff reason are explicit.</dd></div>
-                <div><dt>JudgmentKit catches</dt><dd>The primary action, reversible states, and next-owner receipt are not grounded in the review activity.</dd></div>
-                <div><dt>Repaired outcome</dt><dd>The interface separates decision, reason, and handoff so the case can move forward cleanly.</dd></div>
+                <div><dt>JudgmentKit checks</dt><dd>The primary action, reversible states, and next-owner receipt are not grounded in the review activity.</dd></div>
+                <div><dt>Repaired outcome</dt><dd>The example separates decision, reason, and handoff.</dd></div>
               </dl>
             </div>
             <div class="value-receipt" aria-label="Refund action boundary repair receipt">
@@ -9410,18 +9310,18 @@ async function valuePage() {
           <article class="value-case" id="accessibility-evidence">
             <div class="value-case-copy">
               <p class="eyebrow">Missing accessibility evidence</p>
-              <h2>Claims are not accepted without evidence.</h2>
+              <h2>Required accessibility evidence cannot be omitted.</h2>
               <p>JudgmentKit treats accessibility as part of the implementation contract. An agent cannot pass by saying the UI is accessible in a rationale while leaving required evidence out of the candidate.</p>
               <dl class="value-findings">
                 <div><dt>Baseline failure</dt><dd>Labels, focus-visible behavior, status messaging, or conditional modal evidence are absent.</dd></div>
-                <div><dt>JudgmentKit catches</dt><dd>The failed evidence keys are grouped into repair instructions for the agent.</dd></div>
-                <div><dt>Repaired outcome</dt><dd>The candidate resubmits with concrete accessibility evidence before acceptance.</dd></div>
+                <div><dt>JudgmentKit checks</dt><dd>The failed evidence keys are grouped into repair instructions for the agent.</dd></div>
+                <div><dt>Repaired outcome</dt><dd>The repaired candidate supplies the required accessibility evidence for contract review.</dd></div>
               </dl>
             </div>
             <div class="value-receipt" aria-label="Accessibility repair guidance example">
               <div class="value-receipt-row"><strong>Failed check</strong><p>Missing focus, keyboard, status, or conditional evidence.</p></div>
               <div class="value-receipt-row"><strong>Repair</strong><p>Add the evidence inside the implementation candidate, not only in the rationale.</p></div>
-              <div class="value-receipt-row"><strong>Result</strong><p>The agent repairs, resubmits, and either passes or stops for human review after the attempt limit.</p></div>
+              <div class="value-receipt-row"><strong>Result</strong><p>JudgmentKit returns acceptance, repair instructions, or an unresolved review status. The agent owns repairs, resubmission, and attempt tracking, and stops when human input is required.</p></div>
             </div>
           </article>
         </div>
@@ -9429,7 +9329,7 @@ async function valuePage() {
         <section class="value-evidence" aria-labelledby="value-evidence-title">
           <p class="eyebrow">Evidence, not the main story</p>
           <h2 id="value-evidence-title">Audit material stays available.</h2>
-          <p>The public value path above is the product story. The current hosted MCP release is ${escapeHtml(JUDGMENTKIT_PACKAGE_VERSION)}; linked reports are historical committed eval artifacts for deterministic proof, model matrix, and repair-loop data, not current release acceptance proof. The public archive includes only the evidence intended for external audit.</p>
+          <p>The public value path above is the product story. The current hosted MCP release is ${escapeHtml(JUDGMENTKIT_PACKAGE_VERSION)}; linked reports are historical committed eval artifacts for deterministic rubric results, model matrix, and repair-loop data, not current release acceptance proof. The public archive includes only the evidence intended for external audit.</p>
           <div class="link-row">
             ${renderValueEvidenceLinks(evidenceLinks)}
           </div>
@@ -9439,7 +9339,7 @@ async function valuePage() {
   `,
     {
       description:
-        "Concrete before and after examples of what JudgmentKit prevents in AI-generated product UI.",
+        "Selected interface contract checks and curated repair examples from JudgmentKit.",
       path: "/value/",
     },
   );
@@ -9459,7 +9359,7 @@ function renderSurfaceTypeEntries() {
 
 const DOCS_SECTION_ITEMS = [
   { href: "#quickstart", label: "Quickstart", current: true, currentValue: "location" },
-  { href: "#first-use", label: "First 10 Minutes" },
+  { href: "#first-use", label: "First use" },
   { href: "#planning-examples", label: "Planning Examples" },
   { href: "#mcp", label: "MCP" },
   { href: "#system-map", label: "System Map" },
@@ -9495,19 +9395,26 @@ function docsPage() {
         <div class="doc-content">
           <section class="doc-section" id="quickstart">
             <h1>Docs</h1>
+            <nav class="doc-resources" aria-label="More JudgmentKit resources">
+              <a href="/evals/">Evaluation evidence</a>
+              <a href="/mcp">MCP endpoint</a>
+              <a href="/install">Installer</a>
+              <a href="https://handbooks.surfaces.systems/"${NEW_TAB_LINK_ATTRIBUTES}>Handbooks${renderExternalLinkIcon()}</a>
+            </nav>
             <h2>Quickstart</h2>
             <p>Install JudgmentKit for your MCP client, then connect to the hosted Streamable HTTP endpoint.</p>
+            <p>Hosted requests leave your machine. Use sanitized inputs for confidential work, or a local or self-hosted endpoint. Read the <a href="https://github.com/mikeylong/judgmentkit/blob/main/packages/agent-skill/judgmentkit-hosted-mcp/SKILL.md#authorization-and-privacy">authorization and privacy guidance</a> before choosing the endpoint.</p>
             <pre><code>curl -fsSL https://judgmentkit.ai/install | bash
 curl -fsSL https://judgmentkit.ai/install | bash -s -- --client claude
 curl -fsSL https://judgmentkit.ai/install | bash -s -- --client cursor</code></pre>
             <p class="note">Codex is the default client. Use <code>--client codex</code>, <code>--client claude</code>, or <code>--client cursor</code> when scripting.</p>
           </section>
           <section class="doc-section" id="first-use">
-            <h2>First 10 Minutes</h2>
+            <h2>First use</h2>
             <p>Start with an interface task in your agent conversation. Describe who needs to do what, or point the agent at an existing interface and the task to improve.</p>
             <pre><code>Use JudgmentKit to build a signup form for a local workshop. Attendees pick an available session, enter their contact details, and receive a clear confirmation. Handle incomplete details and full sessions. Build and check the main task, then show what works and what remains unverified.</code></pre>
             <p>The agent should show a short working premise, build or revise the interface, try the important task, and make focused repairs. You can correct the premise as the work develops. The agent handles the review sequence.</p>
-            <p>Finish with the working interface, the important paths checked, and any missing verification. Contract acceptance is bounded to its checks; observed user task completion is separate evidence.</p>
+            <p>Review the interface, the important paths actually checked, and any missing verification. Contract acceptance is bounded to its checks; observed user task completion is separate evidence.</p>
             <details>
               <summary>Replay the review mechanism</summary>
             <p>Use the replayable first-use fixture to see the AI-native design system as a contract loop, not a renderer. The fixture gives the agent one brief, one implementation contract input, one failing candidate, one repaired candidate, and the expected two-attempt transcript.</p>
@@ -11340,8 +11247,10 @@ export async function buildSite(
   await fs.mkdir(path.join(outDir, "assets", "patterns"), { recursive: true });
   await fs.mkdir(path.join(outDir, "assets", "releases"), { recursive: true });
 
-  await fs.writeFile(path.join(outDir, "assets", "site.css"), stylesheet.trimStart());
+  const websitePresentationStylesheet = await fs.readFile(path.join(__dirname, "website-presentation.css"), "utf8");
+  await fs.writeFile(path.join(outDir, "assets", "site.css"), `${stylesheet.trimStart()}\n${websitePresentationStylesheet}`);
   await fs.cp(path.join(__dirname, "assets", "fonts"), path.join(outDir, "assets", "fonts"), { recursive: true });
+  await fs.copyFile(path.join(__dirname, "assets", "judgment-lens-hero.webp"), path.join(outDir, "assets", "judgment-lens-hero.webp"));
   await fs.copyFile(
     path.join(__dirname, "assets", HOMEPAGE_HERO_ART_FILENAME),
     path.join(outDir, "assets", HOMEPAGE_HERO_ART_FILENAME),
diff --git a/site/website-presentation.css b/site/website-presentation.css
new file mode 100644
index 0000000..9778c78
--- /dev/null
+++ b/site/website-presentation.css
@@ -0,0 +1,452 @@
+.site-presentation {
+  /* Public website presentation. Product adapters and reference artifacts keep their own authority. */
+  --bg: #F7F6F2;
+  --ink: #0B0D0E;
+  --muted: #555B60;
+  --line: #DAD7CF;
+  --panel: #ffffff;
+  --accent: #0B0D0E;
+  --accent-strong: #0B0D0E;
+  --accent-ink: #F7F6F2;
+  --focus-ring: #0B0D0E;
+  --step-marker-bg: #0B0D0E;
+  --step-marker-ink: #F7F6F2;
+  --menu-item-bg: #ffffff;
+  --menu-item-bg-hover: #F7F6F2;
+  --menu-item-bg-current: #DAD7CF;
+  --soft-surface: #ffffff;
+  --code-surface: #ffffff;
+  --media-surface: #ffffff;
+  --table-heading-surface: #F7F6F2;
+  --bar-track: #DAD7CF;
+  --family-signal: var(--website-nickel);
+  --site-gutter: 24px;
+  --site-shell-width: 1120px;
+  font-family: "Header Inter", "Header Inter Fallback", Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.45;
+  letter-spacing: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+@media (prefers-color-scheme: dark) {
+  .site-presentation {
+    --bg: #0B0D0E;
+    --ink: #F7F6F2;
+    --muted: #8B9096;
+    --line: #8B9096;
+    --panel: #24282b;
+    --accent: #DAD7CF;
+    --accent-strong: #DAD7CF;
+    --accent-ink: #0B0D0E;
+    --focus-ring: #F7F6F2;
+    --step-marker-bg: #DAD7CF;
+    --step-marker-ink: #0B0D0E;
+    --menu-item-bg: #24282b;
+    --menu-item-bg-hover: #3C4145;
+    --menu-item-bg-current: #3C4145;
+    --soft-surface: #24282b;
+    --code-surface: #24282b;
+    --media-surface: #24282b;
+    --table-heading-surface: #3C4145;
+    --bar-track: #3C4145;
+  }
+}
+.site-presentation :is(h1, h2, h3, h4):not(.jk-specimen-preview *) {
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
+.site-presentation h1:not(.jk-specimen-preview *) {
+  max-width: 760px;
+  font-size: 40px;
+  margin-bottom: 24px;
+}
+.site-presentation h2:not(.jk-specimen-preview *) {
+  font-size: 32px;
+  margin-bottom: 20px;
+}
+.site-presentation h3:not(.jk-specimen-preview *) {
+  font-size: 24px;
+  margin-bottom: 12px;
+}
+.site-presentation h4:not(.jk-specimen-preview *) {
+  font-size: 20px;
+  margin-bottom: 8px;
+}
+.site-presentation .lede {
+  font-size: 20px;
+  line-height: 1.45;
+}
+.site-presentation .eyebrow {
+  color: var(--muted);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+.site-presentation .section {
+  padding-block: 96px;
+}
+.site-presentation :is(.docs-page, .design-system-page, .value-page, .examples-page) {
+  padding-top: var(--site-page-top);
+}
+.site-presentation .homepage-hero {
+  position: relative;
+  min-height: 560px;
+  padding: 0;
+  background: var(--header-menu-bg);
+  color: var(--header-ink);
+}
+.site-presentation .homepage-scene {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 56% center;
+}
+.site-presentation .homepage-hero::before {
+  content: none;
+}
+.site-presentation .homepage-hero::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(90deg, var(--header-menu-bg) 0%, color-mix(in srgb, var(--header-menu-bg) 92%, transparent) 28%, color-mix(in srgb, var(--header-menu-bg) 66%, transparent) 48%, color-mix(in srgb, var(--header-menu-bg) 24%, transparent) 70%, color-mix(in srgb, var(--header-menu-bg) 4%, transparent) 100%);
+  content: "";
+  pointer-events: none;
+}
+.site-presentation .homepage-hero-shell {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  width: min(1120px, calc(100% - 48px));
+  min-height: 560px;
+}
+.site-presentation .homepage-hero-copy {
+  width: min(100%, 560px);
+  padding: 48px 0 96px;
+}
+.site-presentation .homepage-hero :is(h1, .lede, .eyebrow) {
+  color: var(--header-ink);
+}
+.site-presentation .homepage-hero h1 {
+  max-width: 560px;
+  font-size: 40px;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
+.site-presentation .homepage-hero .eyebrow {
+  margin-bottom: 20px;
+  padding-left: 10px;
+  border-left: 2px solid var(--family-signal);
+}
+.site-presentation .homepage-hero .lede {
+  margin-bottom: 28px;
+}
+.site-presentation .homepage-hero .hero-actions {
+  margin-top: 0;
+}
+.site-presentation :is(.proof-panel, .section-rail-menu-list, .example-gallery-modal-panel, .example-gallery-modal-image img) {
+  box-shadow: none;
+}
+.site-presentation .hero-action {
+  min-height: 48px;
+  padding: 10px 18px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.45;
+  transition: background-color 120ms linear, color 120ms linear;
+}
+.site-presentation .hero-action:hover {
+  transform: none;
+}
+.site-presentation .hero-action-primary {
+  color: var(--accent-ink);
+  background: var(--accent-strong);
+  box-shadow: none;
+}
+.site-presentation .hero-action-secondary {
+  color: var(--ink);
+  background: transparent;
+  backdrop-filter: none;
+}
+.site-presentation .homepage-hero .hero-action-primary {
+  border-color: var(--header-ink);
+  color: var(--header-menu-bg);
+  background: var(--header-ink);
+}
+.site-presentation .homepage-hero .hero-action-secondary {
+  border-color: var(--header-ink);
+  color: var(--header-ink);
+}
+.site-presentation .homepage-hero .hero-action-primary:hover {
+  background: var(--nav-muted);
+}
+.site-presentation .homepage-hero .hero-action-secondary:hover {
+  background: var(--header-ink);
+  color: var(--header-menu-bg);
+}
+.site-presentation .homepage-hero a:focus-visible {
+  outline: 2px solid var(--header-ink);
+  outline-offset: 4px;
+  box-shadow: none;
+}
+.site-presentation .pill-link {
+  min-height: 44px;
+  padding: 10px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+}
+/* The reference previews retain the original system-font contract and token adapter. */
+.site-presentation .jk-specimen-preview {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+/* The homepage follows the rendered family composition, not the reference specimen layout. */
+.site-presentation :is(.homepage-problem, .homepage-workflow) {
+  padding-inline: var(--site-gutter);
+}
+.site-presentation .homepage-problem {
+  padding-block: 80px 56px;
+  background: var(--panel);
+}
+.site-presentation .homepage-workflow {
+  padding-block: 96px;
+  background: var(--bg);
+}
+.site-presentation .homepage-section-heading {
+  max-width: 620px;
+  margin-bottom: 40px;
+}
+.site-presentation .homepage-section-heading h2 {
+  margin-bottom: 0;
+}
+.site-presentation :is(.family-problem-row, .family-workflow-row) {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  list-style: none;
+}
+.site-presentation .family-problem-row {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.site-presentation .family-workflow-row {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.site-presentation :is(.family-problem-row, .family-workflow-row) > li {
+  position: relative;
+  min-width: 0;
+  padding: 24px;
+  border-right: 1px solid var(--line);
+}
+.site-presentation .family-problem-row > li {
+  min-height: 180px;
+}
+.site-presentation :is(.family-problem-row, .family-workflow-row) > li:last-child {
+  border-right: 0;
+}
+.site-presentation :is(.family-problem-row, .family-workflow-row) > li:not(:last-child)::after {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  right: -6px;
+  width: 10px;
+  height: 10px;
+  border-top: 1px solid var(--muted);
+  border-right: 1px solid var(--muted);
+  background: var(--bg);
+  transform: translateY(-50%) rotate(45deg);
+  content: "";
+}
+.site-presentation .family-problem-row > li:not(:last-child)::after {
+  background: var(--panel);
+}
+.site-presentation .family-ordinal {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+.site-presentation :is(.family-problem-row, .family-workflow-row) h3 {
+  margin: 24px 0 12px;
+  font-size: 20px;
+  font-weight: 600;
+}
+.site-presentation :is(.family-problem-row, .family-workflow-row) p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.45;
+}
+.site-presentation .family-workflow-icon {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  margin: 36px 0 24px;
+  border: 1px solid var(--ink);
+  border-radius: 4px;
+  place-items: center;
+}
+.site-presentation .family-workflow-icon svg {
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+}
+.site-presentation .family-workflow-step h3 {
+  margin-top: 0;
+}
+.site-presentation .homepage-support {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 32px;
+  margin-top: 32px;
+  color: var(--muted);
+  font-size: 14px;
+}
+.site-presentation .homepage-support p {
+  margin: 0;
+}
+.site-footer-identity {
+  margin-right: auto;
+}
+.site-footer-description,
+.site-footer-copyright {
+  margin: 8px 0 0;
+  color: var(--website-nickel);
+  font-size: 12px;
+  line-height: 1.45;
+}
+.surfaces-navigation,
+.site-footer {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+@media (max-width: 820px) {
+  .site-presentation {
+    --site-gutter: 16px;
+  }
+  .site-footer {
+    padding-inline: 16px;
+  }
+  .site-footer-inner {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .site-presentation .section {
+    padding-block: 52px;
+  }
+  .site-presentation :is(.docs-page, .design-system-page, .value-page, .examples-page) {
+    padding-top: var(--site-page-top);
+  }
+  .site-presentation .homepage-hero {
+    min-height: 528px;
+    padding: 0;
+  }
+  .site-presentation .homepage-hero-shell {
+    width: calc(100% - 32px);
+    min-height: 528px;
+  }
+  .site-presentation .homepage-hero-copy {
+    padding: 44px 0 96px;
+  }
+  .site-presentation .homepage-hero .lede {
+    font-size: 16px;
+  }
+  .site-presentation .homepage-hero .hero-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .site-presentation .homepage-hero .hero-action {
+    width: 100%;
+  }
+  .site-presentation .homepage-scene {
+    object-position: 72% center;
+  }
+  .site-presentation .homepage-hero::after {
+    background: linear-gradient(90deg, color-mix(in srgb, var(--header-menu-bg) 94%, transparent), color-mix(in srgb, var(--header-menu-bg) 64%, transparent));
+  }
+  .site-presentation :is(.homepage-problem, .homepage-workflow) {
+    padding-block: 52px;
+  }
+  .site-presentation :is(.family-problem-row, .family-workflow-row) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .site-presentation :is(.family-problem-row, .family-workflow-row) > li {
+    min-height: 0;
+    padding: 20px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .site-presentation :is(.family-problem-row, .family-workflow-row) > li:last-child {
+    border-bottom: 0;
+  }
+  .site-presentation :is(.family-problem-row, .family-workflow-row) > li:not(:last-child)::after {
+    top: auto;
+    right: auto;
+    bottom: -6px;
+    left: 24px;
+    transform: rotate(135deg);
+  }
+  .site-presentation .family-workflow-step {
+    display: grid;
+    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-areas: "ordinal title" "icon description";
+    column-gap: 16px;
+    align-items: start;
+  }
+  .site-presentation .family-workflow-step .family-ordinal {
+    grid-area: ordinal;
+    align-self: center;
+  }
+  .site-presentation .family-workflow-step .family-workflow-icon {
+    grid-area: icon;
+    width: 40px;
+    height: 40px;
+    margin: 10px 0 0;
+  }
+  .site-presentation .family-workflow-step h3 {
+    grid-area: title;
+    margin: 0;
+    font-size: 20px;
+  }
+  .site-presentation .family-workflow-step p {
+    grid-area: description;
+    margin-top: 10px;
+  }
+}
+@media (max-width: 620px) {
+  .site-presentation h1:not(.jk-specimen-preview *),
+  .site-presentation .homepage-hero h1 {
+    font-size: 32px;
+  }
+  .site-presentation h2:not(.jk-specimen-preview *) {
+    font-size: 24px;
+  }
+  .site-presentation h3:not(.jk-specimen-preview *) {
+    font-size: 20px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .site-presentation .hero-action {
+    transition: none;
+  }
+}
+
+.site-presentation .doc-resources {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 24px;
+  margin-bottom: 28px;
+  font-size: 14px;
+}
diff --git a/specs/site-header.md b/specs/site-header.md
index 3430b89..c3d8dce 100644
--- a/specs/site-header.md
+++ b/specs/site-header.md
@@ -2,12 +2,12 @@
 
 Visitors evaluate JudgmentKit, read examples and documentation, or set up its MCP integration. They navigate with ordinary page links and may move between JudgmentKit and Surfaces. The site author maintains the navigation; visitors choose their destination. The header should make those destinations easy to find without requiring visitors to understand a platform ecosystem.
 
-The primary decisions are where to learn about JudgmentKit and whether to visit Surfaces. Use JudgmentKit, Value, Docs, Design System, Examples, Evals, MCP, Handbooks, and surfaces.systems. Keep schemas, tool names, internal identifiers, and obsolete ecosystem descriptions out of the header. Setup details remain on the relevant destination pages.
+The primary decisions are where to learn about JudgmentKit and whether to visit Surfaces. Use JudgmentKit, Why JudgmentKit, How it works, Docs and Surfaces in the primary navigation. Keep Value, Design System, Examples, Evals, MCP, installation and Handbooks reachable from the existing detail routes and Docs resource links. Keep schemas, tool names, internal identifiers, and obsolete ecosystem descriptions out of the header. Setup details remain on the relevant destination pages.
 
 ## Interaction contract
 
 1. The top-left home link contains the complete canonical JudgmentKit lockup from `brand/slab-j/lockups/horizontal-reversed.svg`. The header remains ink in both system appearances, so it uses the reversed asset in both modes. Keep the SVG canvas and its natural aspect ratio. The outlined Inter 780 wordmark and nickel return stay together. Name the link `JudgmentKit home` and treat its image as decorative.
-2. Desktop navigation sits on the right and retains all six JudgmentKit destinations, a Handbooks link to https://handbooks.surfaces.systems/ that opens in a new tab with a visible external-link icon and an “Opens in a new tab” tooltip, and a direct https://surfaces.systems/ link in the same tab.
+2. Desktop navigation sits on the right with four links: Why JudgmentKit (`/#why-judgmentkit`), How it works (`/#how-it-works`), Docs (`/docs/`) and Surfaces (`https://surfaces.systems/`). All four open in the same tab. The Docs resource row retains Handbooks with the existing external-link icon and tooltip.
 3. Current-page state is visible without changing font weight or link width. All links and controls have visible keyboard focus.
 4. The mobile menu exposes the same destinations, supports keyboard activation, closes on Escape with focus returned to its button, and closes after link selection or an outside click. Restored pages and desktop resize do not retain an open menu.
 5. Completion means the visitor reaches the chosen page. The header adds no confirmation or intermediate domain chooser.
@@ -16,15 +16,15 @@ The primary decisions are where to learn about JudgmentKit and whether to visit
 
 The live Surfaces header measured on 2026-10-01 is the reference: a 72 px sticky header, no bottom border, a centered 1120 px shell with 24 px minimum side gutters, and 16 px gutters at widths up to 820 px. The canonical outlined lockup is displayed at a 56 px canvas height, 48 px at widths up to 820 px, and 44 px below 360 px. Preserve the source ratio of 425.013342449 × 109 and its built-in padding. Scale the whole image uniformly. Do not crop the canvas, filter its colors, or reconstruct the wordmark as live text. Navigation uses 14 px Inter at weight 500, line height 1.45, 28 px gaps, and 44 px targets.
 
-JudgmentKit retains more links, so its menu appears at widths up to 1120 px. Below 360 px, the 44 px canvas and an 8 px minimum gap keep the complete lockup and menu button inside the 16 px side gutters, including when classic scrollbars consume 15 px of layout width. The brand and menu remain aligned with Surfaces at shared mobile widths. Both headers retain their geometry on scroll and page navigation. Reserve classic scrollbar space to prevent shorter pages from shifting the header; measure the shell against available layout width when scrollbars consume space. Header fonts are local and preloaded; optional font display avoids a late font swap. The header font does not change JudgmentKit's framework-neutral design-system font contract.
+The four-link navigation becomes a Menu control at widths up to 820 px. Below 360 px, the 44 px canvas and an 8 px minimum gap keep the complete lockup and menu button inside the 16 px side gutters, including when classic scrollbars consume 15 px of layout width. The brand and menu remain aligned with Surfaces at shared mobile widths. Both headers retain their geometry on scroll and page navigation. Reserve classic scrollbar space to prevent shorter pages from shifting the header; measure the shell against available layout width when scrollbars consume space. Website fonts are local and preloaded. The face covers weights 100–900 and uses swap display so the loaded Inter face replaces a fallback. Website text and chrome use antialiased/grayscale smoothing, matching Surfaces. Reference specimens retain their own font and smoothing contract.
 
 Validate header dimensions, gutters, complete lockup bounds, asset loading, current-page width stability, menu operation, and horizontal overflow in light and dark modes across desktop, mobile, and breakpoint widths. Compare the local candidate with live Surfaces in both navigation directions, including Back/Forward. Full production round-trip verification requires the candidate to be released.
 
 ## Shared footer and favicon
 
-Every shared footer links home with the complete canonical lockup. Use `brand/slab-j/lockups/horizontal.svg` on the light page surface and `horizontal-reversed.svg` when `prefers-color-scheme: dark` applies. A picture source selects the reversed file; the fallback image uses the light file. Both files retain nickel on the lower plane. The footer displays the full canvas at 44 px high, keeps a minimum 44 px link target, and wraps the release link when space is limited. Both home links have the accessible name `JudgmentKit home`.
+Every shared footer stays Ink in both appearances and links home with the complete canonical `brand/slab-j/lockups/horizontal-reversed.svg`. It displays the full canvas at 44 px high, keeps a minimum 44 px link target, and wraps the release link when space is limited. Both home links have the accessible name `JudgmentKit home`. Footer text uses Inter, with a supporting Rule-colored link and visible Ivory focus.
 
-The site build copies both lockup files byte for byte to `/assets/brand/judgmentkit-lockup.svg` and `/assets/brand/judgmentkit-lockup-reversed.svg`. It copies the active responsive Slab J favicon from `brand/slab-j/favicon/favicon.svg` to `/favicon.svg`. The favicon keeps its documented 16 px optical correction and system appearance behavior. The public release verifier checks all three assets against their canonical source bytes.
+The site build copies both lockup files byte for byte to `/assets/brand/judgmentkit-lockup.svg` and `/assets/brand/judgmentkit-lockup-reversed.svg`. Browser and installed icons remain governed by [the site brand asset contract](site-brand-assets.md). The website presentation contract is [public website presentation](site-presentation.md).
 
 ## Links that open another tab or window
 
diff --git a/specs/site-homepage-copy.md b/specs/site-homepage-copy.md
new file mode 100644
index 0000000..201b55e
--- /dev/null
+++ b/specs/site-homepage-copy.md
@@ -0,0 +1,29 @@
+# Public website copy provenance
+
+The homepage describes JudgmentKit’s interface guidance and contract checks. The [website family copy contract](website-family-copy.md) governs public copy and metadata alongside [the layout contract](website-family-layout.md). The shared composition reference is https://www.surfaces.systems/, reviewed on October 16, 2026 at 1280 × 720 and 390 × 844. Main content must stay at or below 220 words; there is no minimum.
+
+| Homepage text | First-party source | Claim scope |
+| --- | --- | --- |
+| Judgment before components. | README.md:16–24 | Activity and interaction choices precede component choices. |
+| Guide interface design with your AI agent. | docs/product-claims-and-evidence.md:17–19; VISION.md:31 | Guidance and checks, with the caller’s agent retaining execution. Also used in the footer. |
+| JudgmentKit gives your AI agent interaction guidance, implementation checks, and repair instructions. | docs/product-claims-and-evidence.md:17–19; src/index.mjs:23229–23257 | Describes returned guidance and review results. Also used in homepage metadata. |
+| See a screen repaired; Explore examples | /value/; /examples/ | Selected curated repair artifacts and illustrative examples, not live generation. |
+| Risks to check; Keep the interface in the language of the work. | docs/agent-usage-contract.md:42; README.md:11–13 | A review instruction, not a claim that every table, form or button is wrong. |
+| Internal record labels; The user has to translate database terms into their own work. | docs/agent-usage-contract.md:42; tests/ui-generation-handoff.test.mjs:4525–4541 | Names the mismatch when source vocabulary obscures the intended activity. |
+| Irrelevant form fields; The form asks for details the person’s task does not require. | README.md:11–13; DESIGN.md:7–10 | Names unnecessary fields, rather than condemning forms. |
+| Tool names as actions; The control names an implementation command instead of the user’s action. | docs/agent-usage-contract.md:42 | Names a vocabulary mismatch. Setup and diagnostic activities may need technical terms. |
+| From activity to interface; Build, check, and revise. | VISION.md:21–25; docs/builder-workflow.md:75–79 | Gives the intended sequence without a time or effort estimate. |
+| Describe the work; Show what someone needs to do. | VISION.md:21 | Shortens step 1. |
+| Correct the premise; Correct the agent’s task assumptions. | VISION.md:22 | Shortens step 2. |
+| Build the interface; Your agent creates or revises the interface. | VISION.md:11,23 | Retains both starting conditions. The agent performs implementation. |
+| Try important tasks; Repair specific failures. | VISION.md:24; docs/builder-workflow.md:75–79 | Instructions for the caller’s agent, subject to available checks. |
+| Review the result; See what was checked and what remains unresolved. | docs/builder-workflow.md:98–111 | Requires an account of observed checks and unresolved work, not guaranteed completion. |
+| The builder owns the product decisions. | VISION.md:17 | Names the division of responsibility. |
+
+## Detailed public pages
+
+The Value page labels selected curated refund artifacts and declared contract checks. The page does not generalize those artifacts into prevention before shipping. Accessibility review requires the declared evidence; it does not establish general accessibility compliance. The agent owns repairs, resubmission and attempt tracking. Required verification can remain unresolved. These limits follow [the claim map](../docs/product-claims-and-evidence.md), `src/index.mjs:18343–18465,22865–22893,23229–23257` and the implementation review tests.
+
+Docs uses “First use” without a measured time estimate. Its Quickstart states that hosted requests leave the machine and points to the existing [authorization and privacy guidance](../packages/agent-skill/judgmentkit-hosted-mcp/SKILL.md#authorization-and-privacy) for sanitized, local or self-hosted inputs. The remaining instructions distinguish contract acceptance from observed user task completion. Artifact Inspector remains proposed and `review_required` where trusted interactive attestation is unavailable.
+
+The hero retains one eyebrow, one heading, one supporting sentence and exactly two actions. The lower page retains one three-item problem row and one five-step workflow. Historical reports, captured examples, reference specimens, artwork and CSS remain unchanged. The adversarial audit and corrections are recorded in the task’s `copy-adversarial/judgmentkit-audit.md`.
diff --git a/specs/site-presentation.md b/specs/site-presentation.md
new file mode 100644
index 0000000..35696ea
--- /dev/null
+++ b/specs/site-presentation.md
@@ -0,0 +1,25 @@
+# Public website presentation
+
+Visitors use the public website to understand JudgmentKit, compare its examples, and set it up in their agent. The homepage describes interaction guidance, implementation checks and repair instructions. Public claims follow [the website family copy contract](website-family-copy.md) and [the product claim map](../docs/product-claims-and-evidence.md). Value, examples and documentation retain the detailed journey and interactions.
+
+The website shares Surfaces' public presentation. Its composition follows [the website family layout contract](website-family-layout.md), copied from the shared source after full-page review of https://www.surfaces.systems/ on October 16, 2026 at 1280×720 and 390×844. Typography and surface roles also follow the active `apps/surfaces-web/app/homepage.css` in `Surfaces-Platform/surfaces-webapps`. This presentation does not replace JudgmentKit's product adapters or the visual authority of an example.
+
+## Website contract
+
+1. Use the existing local variable Inter font at 16 px with a 1.45 line height. The face covers weights 100–900 with swap display. Match Surfaces with antialiased/grayscale text smoothing; reference specimens keep their prior smoothing. Website h1, h2 and h3 headings use 40, 32 and 24 px on desktop, then 32, 24 and 20 px at 620 px and below. Keep weight 600, a 1.15 line height and zero tracking in both layouts. Supporting text may use 20, 14 and 12 px. Keep reading widths of 820 and 980 px where the content needs them.
+2. Use an 1120 px shell with 24 px desktop gutters and 16 px gutters at 820 px and below. The four-link header compacts at 820 px. Preserve its 72 px height, keyboard behavior and narrow-screen lockup geometry.
+3. Light pages use Ivory `#F7F6F2`, Ink `#0B0D0E`, white panels and Rule `#DAD7CF`. Dark pages use Ink, Ivory, neutral `#24282b` panels and Nickel `#8B9096` supporting text and borders. Section labels follow the muted text role; description and copyright in the Ink footer use Nickel. Preserve the existing success, warning and risk state colors.
+4. Keep the homepage hero and shared footer Ink in both appearances. Use the existing reversed whole lockup on those surfaces. Use the wide lens environment behind one left text stack, with a CSS readability overlay and no separate image card, border or radius. Desktop scene height is 560 px below the 72 px header. Compact scenes have a 528 px minimum height and position the lens at 72% center behind the existing readability overlay. Keep the original portrait as reference; [art provenance](../docs/site-homepage-art-provenance.json) records the new derivative.
+5. Primary website actions have a minimum 48 px height, 14 px Inter text at weight 500 and a 4 px radius. The homepage uses ruled rows rather than cards. Panels on detailed pages retain an 8 px radius. Use quiet 120 ms color transitions, visible focus and the existing reduced-motion behavior.
+
+## Scope and implementation
+
+`site/build-site.mjs` applies `site-presentation` to its owned homepage, Value, Docs, Design System and Examples pages. It appends `site/website-presentation.css` to the generated stylesheet. The shared footer applies its Ink contract across generated pages. Its lockup, description, copyright and release utility form a desktop row and a left-aligned compact stack. Docs contains a compact resource row so evaluation evidence, MCP, the installer and Handbooks remain reachable after reducing primary navigation.
+
+Evaluation and report bodies keep their existing typography, colors and wide-table layouts. Copied examples, experiments, reports and the immutable recording HTML do not receive the presentation class. Reference previews under `.jk-specimen-preview` retain their system font and adapter tokens; website heading rules exclude their descendants. Captured screenshots and the source visual-token adapters remain unchanged.
+
+The repository has no sign-in route or provider-owned sign-in page. The website alignment adds no authentication surface or signed-in product styling.
+
+## Verification
+
+Run `npm run test:site` and `npm run site:build`. Site checks cover page scope, light/dark palette contrast, footer identity and the production appearance verifier. Browser checks measure Inter, responsive heading sizes, shell/gutters, scene coverage, desktop section position, CTA geometry, the three-item problem row and five-step workflow, alongside the existing navigation and first-use interactions. The homepage contains exactly three sections and no more than 220 main-content words. [Copy provenance](site-homepage-copy.md) records every shortened claim. Review the local homepage, Value, Docs and Examples pages at desktop and mobile widths in both appearances before release.
diff --git a/specs/website-family-copy.md b/specs/website-family-copy.md
new file mode 100644
index 0000000..8c4dda1
--- /dev/null
+++ b/specs/website-family-copy.md
@@ -0,0 +1,51 @@
+# Website family copy contract
+
+## Reader and purpose
+
+The reader is deciding what Surfaces, JudgmentKit or kanban.cards can help them do and whether to try the product. Assume no knowledge of repository vocabulary. Describe an available action and its useful consequence without promising that the product will deliver an unmeasured outcome.
+
+This contract governs public pages, sign-in and access instructions, page titles, descriptions and social preview text alongside [the layout contract](website-family-layout.md). Copy changes do not authorize changes to product behavior, prices, release status or historical evidence.
+
+## Claims and evidence
+
+1. **Describe current behavior.** For each material capability claim, record the implementation or fixture, its limits and the public destination that demonstrates or explains it. A vision document establishes intended purpose; it does not establish availability. A test establishes only the behavior and conditions it checks.
+2. **Name the actor.** Distinguish what the product does from what a person, an installed skill or a caller's agent must do. Do not imply automatic planning, execution, repair, approval or synchronization when those actions depend on a caller.
+3. **Bound the result.** Name the object and scope of checks. Passing selected layout or evidence checks does not establish usability, accessibility compliance, data truth, security, fitness for purpose or product approval. Use broader terms only when the evidence supports that broader scope.
+4. **Earn outcome claims.** Claims about speed, effort, quality, productivity, cost or error reduction require measurements for the named product and task, including the baseline, conditions and date. Otherwise describe the supported mechanism or intended use. Adding “helps,” “can” or “designed to” does not rescue an unsupported claim.
+5. **Avoid universal promises.** Review “every,” “always,” “never,” “complete,” “automatic,” “right,” “best” and equivalent wording for a bounded, demonstrable meaning. Prefer the specific supported action over a slogan plus a disclaimer.
+6. **State availability accurately.** Keep shipped behavior, examples, experiments, product hypotheses and roadmap items distinct. Historical evaluation results retain their original version and conditions. Do not present an example or recording as a live feature or current release proof.
+7. **Make the action honest.** A CTA describes what happens at its destination. Pricing, signup, account recovery, credential storage and agent access statements must match the current flow. Put a prerequisite beside the action when omitting it would change the reader's decision.
+
+## Product boundaries
+
+1. **JudgmentKit:** describe guidance for activity and interaction choices, contracts, supported checks and repair instructions. The caller's agent builds, tests and repairs the interface; the builder retains product decisions. Do not promise a useful interface, the right design, successful repair or approval from a passing receipt alone.
+2. **kanban.cards:** describe recording and updating project work through Cards, Columns, Comments and Activity. Name the person or authorized agent that changes the board; agent updates require the installed skill and read/write access. A recorded next action does not execute itself, and stored board state does not independently establish that the work happened. Recovery instructions must state that replacing access revokes old passkeys, sessions and agent keys before the person submits.
+3. **Surfaces:** describe the supported decision and guidance workflow at its actual release stage. Reuse of a recorded decision is an intended use until execution evidence for that workflow establishes it. Do not infer reduced review effort or universal coverage from the existence of a workflow.
+
+## Copy and composition
+
+1. Keep the existing hero budget: one eyebrow up to 12 words, one h1 up to 10 words, one lead up to 32 words and exactly two hero actions. The complete homepage main content stays at or below 220 words, including its section headings, item labels and actions. There is no minimum.
+2. Each section adds a different fact or action. Do not fill the three-item row or five-step workflow with invented benefits, repeated positioning or steps the product does not support.
+3. Use concrete objects and familiar verbs. Explain product vocabulary through its action rather than defining internal architecture. Remove claims that could fit any AI tool or project board.
+4. Preserve useful value. Narrow an unsupported promise to what someone can actually do; do not replace the homepage with caveats, implementation details or a risk checklist. Detailed limits belong on the linked destination page unless they are necessary to understand the headline or CTA.
+5. Keep the same promise across visible copy, metadata, social descriptions and action destinations. Illustrations remain decorative and must not imply an application state or capability the product lacks.
+
+## Page and social titles
+
+1. Owned public HTML pages use `Specific page topic | Canonical brand`. Write the canonical brand once, at the end: `Surfaces`, `JudgmentKit` or `kanban.cards`. Keep each authored page's title distinct and descriptive; do not copy the homepage title onto unrelated subpages.
+2. Describe the actual subject with familiar words. Avoid keyword lists, internal implementation labels and promises stronger than the page supports. Keep titles concise by removing unnecessary words, without imposing a search-display character limit or promising search ranking.
+3. The approved homepage titles are `UI Review Decisions and Guidance | Surfaces`, `Interface Design Guidance for AI Agents | JudgmentKit` and `Shared Kanban Board for People and Agents | kanban.cards`. Visible hero headings and navigation labels retain their own jobs and wording.
+4. Document, Open Graph and Twitter titles use the same branded title on public content pages. Kanban access pages use a fixed public homepage identity for social metadata while their document title names the resolved access task.
+5. Kanban titles follow the validated, rendered public state, including sign-in, signup, recovery, setup and receipts. Recovery and setup cannot be distinguished by pathname alone. Use fixed labels; never include account details, recovery codes, tokens or private project content. Signed-in, local and transitional product views retain the product-only title.
+6. Application names, installed-app names and site-name fields remain product-only. Preserve copied examples, immutable recordings and historical evaluation titles. Keep test/demo status explicit and preserve existing canonical and indexing policy during a title-only change.
+
+## Adversarial acceptance
+
+Before handoff, review the complete rendered copy through four passes:
+
+1. **Skeptical buyer:** write the strongest reasonable promise a visitor could infer. Check whether current evidence supports that promise.
+2. **Capability and availability:** trace each material claim to behavior; name dependencies, actors and unsupported extrapolations.
+3. **Clarity and necessity:** check undefined terms, repeated claims, filler and whether each CTA lands on what it promises.
+4. **Consistency and rendered fit:** compare page copy, metadata and destinations, then inspect desktop/mobile wrapping in both appearances.
+
+Record concrete findings as High, Medium or Low with the original phrase, inference, evidence, replacement and disposition. Reviewers may retain a defensible claim; restraint does not require weakening accurate statements. Acceptance requires resolving misleading current claims, preserving necessary prerequisites and documenting any contract requirements not met and the reason.
diff --git a/specs/website-family-layout.md b/specs/website-family-layout.md
new file mode 100644
index 0000000..1fd9814
--- /dev/null
+++ b/specs/website-family-layout.md
@@ -0,0 +1,52 @@
+# Surfaces website family layout contract
+
+## Reference and purpose
+
+This contract records the rendered composition of [surfaces.systems](https://www.surfaces.systems/) observed on 16 October 2026 at 1280×720 and 390×844. It governs the shared public homepage composition. Preserve Surfaces' existing hero artwork and layout as the visual reference, including its content density and mobile composition. Matching fonts and colors alone does not satisfy this contract.
+
+Public copy also follows [the website family copy contract](website-family-copy.md). Text may be narrowed without replacing the reference artwork or layout.
+
+## Page composition
+
+1. A 72px Ink header contains the complete reversed Nickel lockup at the left and no more than four primary navigation links at the right. Compact navigation becomes one Menu control. Main content aligns to the same 1120px container as the header and footer.
+2. One full-width image hero sits behind one left-aligned text stack. At 1280px, the scene below the header is approximately 560px tall; the next section begins at y=632px. The image reaches every edge of the hero. A dark overlay protects the copy while retaining the artwork on the right. The image is not a separate column, rounded frame, bordered box, inset panel or card.
+3. One problem section has a small eyebrow, one heading and a ruled row of three equal items. The section uses a quiet contrasting surface, 80px top padding and 56px bottom padding on desktop. Each item has a 12px ordinal, one short 20px/600 title and one brief 14px muted supporting phrase. Shared top/bottom rules, internal separators and small connector notches organize the row; there are no fully boxed items, rounded cards, shadows or floating tiles.
+4. One workflow section follows with 96px vertical padding on desktop. A small eyebrow and one heading introduce one connected row of five steps. Each step has a 12px ordinal, a restrained outline icon in a 40–44px square frame with 4px corners, a short 20px/600 action title and a brief 14px muted explanation. Desktop ordinals sit above the icon frames. A small signal accent may identify the final step; it must not alter the logo. Additional branch labels appear only when the product has a documented branch to explain.
+5. At most two short supporting sentences follow the workflow. The footer remains compact: reversed lockup, one short product description, copyright and any necessary access utility. Do not add feature-card grids, repeated CTAs, an FAQ, testimonials, installation instructions, evidence galleries or more marketing sections to the homepage. Detailed material remains on its existing destination pages.
+
+## Hero hierarchy and copy budget
+
+1. The hero text occupies roughly the left half of the desktop container, with a maximum width near 560px. The headline is the dominant text element; the image fills the environment around it.
+2. Use one eyebrow of at most 12 words, one action- or purpose-led h1 of at most 10 words, and one supporting sentence of at most 32 words. An outcome claim needs the evidence required by the copy contract. The reference has no second explanatory paragraph, bullet list or extra bold positioning sentence in the hero.
+3. Use exactly two hero actions. Primary is Ivory with Ink text; secondary is transparent with an Ivory rule. Both are at least 48px tall with 4px corners. At compact widths, actions stack and fill the available width. Recovery and other access utilities belong in the sign-in flow or footer rather than a third large hero action.
+4. The homepage main-content budget is at most 220 words, including section headings, item labels and actions. The rendered Surfaces main content contains approximately 182 words. Shorter copy is acceptable when it explains the product. Shorten inherited copy that exceeds this budget rather than retaining every existing block.
+5. Product capabilities and claims must match current behavior. A vision document establishes purpose, not shipped behavior or measured value. Copy may be shortened or recomposed without introducing capabilities, measured benefits, approval claims or invented proof. Keep a provenance map that distinguishes implemented behavior, illustrative examples and intended use. Each product retains its own purpose and actions.
+
+## Image contract
+
+1. Use a real raster hero asset with a wide composition, approximately 2.5:1. Match the full-width placement, left copy space and readable crop. Keep the cinematic 3D rendering, controlled lighting and tangible material language of the JudgmentKit and Surfaces images. Distinguish each product through its subject and composition rather than switching to flat illustration or stationery photography.
+2. JudgmentKit's existing lens artwork becomes a wide environmental background. Preserve its recognizable subject and product metaphor, place the lens and ordered path primarily on the right, and extend the environment leftward for readable copy. It must no longer appear in a framed portrait panel beside the text.
+3. Create a new Kanban image with a distinct card-and-flow concept in that same cinematic 3D language. Do not repeat Surfaces' three architectural slabs or JudgmentKit's lens. Show cards or work becoming organized, with the main composition toward the right and quiet space for the copy on the left. Present multiple rendered concepts before selecting the final artwork. The user rejected the flat cut-paper, graphic and stationery-photo directions. Do not copy the Surfaces mark or show a misleading application screenshot.
+4. Do not bake text, controls, logos, labels or a gradient overlay into the image. Render the logo and copy as accessible page content. Apply the readability overlay in CSS so mobile cropping can be tuned independently.
+5. At 390px, crop the image into a full-width background behind the entire hero stack. The artwork remains visible around the copy without creating a separate image section or pushing the next section down to accommodate an illustration card.
+
+## Typography, surfaces and responsive behavior
+
+1. Use Inter for website copy, with a variable 100–900 weight face, `font-display: swap` and the reference's antialiased/grayscale font smoothing on the public-page body. Desktop h1/h2 are 40/32px, weight 600, line height 1.15 and zero tracking. At 620px and below, use 32/24px. Hero supporting copy is regular 20px desktop and follows the reference's compact type at mobile widths. Body copy is regular 16px/1.45. Navigation and actions are 14px/500. Computed weights alone do not establish visual parity; inspect the rendered supporting text next to the reference.
+2. Use Ink `#0B0D0E`, Ivory `#F7F6F2`, Nickel `#8B9096`, rule `#DAD7CF` and the reference's neutral surface roles. Hero and footer remain Ink in both appearances. Lower sections follow the reference's light/dark surface alternation. Lower-section eyebrows use quiet Nickel in dark appearance and `#555B60` in light appearance; footer supporting text uses Nickel. Preserve semantic form colors where they communicate real states.
+3. Use a 1120px maximum container, 24px desktop gutters and 16px compact gutters. At 820px and below, navigation compacts, section padding becomes 52px vertically and the three-part row and five-step workflow become connected vertical rows.
+4. On mobile, keep each workflow ordinal/icon in a narrow left column and its title/explanation in the right column. Align the title near the ordinal and place its explanation beneath. Use shared horizontal separators and downward connector notches. Do not turn the workflow into a loose stack of centered cards. The footer changes from a desktop row to a left-aligned stack of lockup, description and copyright.
+5. Match the reference's restrained hierarchy, whitespace, image scale and section rhythm at full-page scale. The desktop homepage should be roughly the same overall length as Surfaces, with content length allowed to affect exact height. Do not force identical heights by adding empty sections or hiding content.
+
+## Sign-in and preservation
+
+1. Kanban's public homepage supplies its existing account-creation and Sign in actions; the signup label is Create account. Existing recovery, setup, passkey, verification, one-time recovery and sign-out behavior must remain available.
+2. Sign-in forms use the family header, typography, neutral palette, controls and footer. Form grouping may use a compact panel; the prohibition on boxed artwork applies to homepage heroes.
+3. Signed-in product screens, auth/session/data policies, native apps, canonical lockups, favicon geometry and social artwork stay outside this presentation change. JudgmentKit has no sign-in route in this repository; do not invent one.
+
+## Acceptance
+
+1. Inspect the Surfaces, JudgmentKit and kanban.cards public homepages visually at desktop and mobile widths in light and dark appearance. Save actual browser screenshots and compare full-page composition as well as the hero. Small thumbnails and computed-style tests alone are insufficient.
+2. Verify that each hero has full-width background imagery, one text stack and two actions, with no separate image card. Confirm the three-item problem row, five-step workflow and compact footer.
+3. Count the visible main-content words, check every claim against its provenance and confirm that detailed material remains reachable on existing pages.
+4. Check image crop, text contrast, logo proportions, section spacing, mobile workflow alignment, focus and menu behavior, auth entry and signed-in style isolation. Run the affected build and regression checks after visual acceptance.
diff --git a/tests/site-first-use-browser.test.mjs b/tests/site-first-use-browser.test.mjs
index 1991184..b688777 100644
--- a/tests/site-first-use-browser.test.mjs
+++ b/tests/site-first-use-browser.test.mjs
@@ -391,7 +391,7 @@ try {
           { label: `${label}: embedded map mounted before keyboard checks` });
         await evaluate(client, sid, "document.fonts.ready");
         assert.equal(await evaluate(client, sid,
-          `document.querySelector('#first-use h2').textContent.trim()`), "First 10 Minutes", label);
+          `document.querySelector('#first-use h2').textContent.trim()`), "First use", label);
         assert.equal(await evaluate(client, sid,
           `document.querySelector('#first-use > pre code').textContent.trim()`), WORKSHOP_PROMPT, label);
         assert.equal(await evaluate(client, sid,
diff --git a/tests/site-header-browser.test.mjs b/tests/site-header-browser.test.mjs
index 9116e05..8bfde07 100644
--- a/tests/site-header-browser.test.mjs
+++ b/tests/site-header-browser.test.mjs
@@ -15,9 +15,11 @@ import {
 const CASES = [
   { width: 1280, gutter: 80, menu: false },
   { width: 1121, gutter: 24, menu: false },
-  { width: 1120, gutter: 24, menu: true },
-  { width: 821, gutter: 24, menu: true },
+  { width: 1120, gutter: 24, menu: false },
+  { width: 821, gutter: 24, menu: false },
   { width: 820, gutter: 16, menu: true },
+  { width: 621, gutter: 16, menu: true },
+  { width: 620, gutter: 16, menu: true },
   { width: 390, gutter: 16, menu: true },
   { width: 320, gutter: 16, menu: true },
   { width: 320, gutter: 16, menu: true, scrollbarMode: "classic-15px" },
@@ -124,6 +126,16 @@ async function measure(client, sessionId) {
       filter: getComputedStyle(el).filter, objectFit: getComputedStyle(el).objectFit,
     });
     const links = [...nav.querySelectorAll('.surfaces-navigation-sections a')];
+    const bodyStyle = getComputedStyle(document.body);
+    const headingStyle = getComputedStyle(document.querySelector('main h1'));
+    const subheadingStyle = getComputedStyle(document.querySelector('main h2'));
+    const hero = document.querySelector('.homepage-hero');
+    const action = document.querySelector('.hero-action');
+    const scene = document.querySelector('.homepage-scene');
+    const problem = document.querySelector('.homepage-problem');
+    const workflow = document.querySelector('.family-workflow-row');
+    const detailPage = document.querySelector('.docs-page,.design-system-page');
+    const detailLayout = document.querySelector('.doc-layout,.design-system-layout');
     return {
       header: rect(nav), shell: rect(nav.firstElementChild),
       brand: rect(brand), lockup: rect(lockup), button: rect(menu),
@@ -138,6 +150,41 @@ async function measure(client, sessionId) {
       fontLoaded: [...document.fonts].some(f => f.family === 'Header Inter' && f.status === 'loaded'),
       background: getComputedStyle(nav).backgroundColor,
       separateWordmark: brand.querySelector('span') !== null,
+      presentation: {
+        bodyFont: bodyStyle.fontFamily, fontSize: bodyStyle.fontSize, lineHeight: bodyStyle.lineHeight,
+        detailPadding: detailPage && { outer: getComputedStyle(detailPage).paddingTop, inner: getComputedStyle(detailLayout).paddingTop },
+        fontSmoothing: bodyStyle.getPropertyValue('-webkit-font-smoothing'),
+        footerDescriptionColor: getComputedStyle(footer.querySelector('.site-footer-description')).color,
+        bodyBackground: bodyStyle.backgroundColor,
+        shellWidth: bodyStyle.getPropertyValue('--site-shell-width').trim(),
+        gutter: bodyStyle.getPropertyValue('--site-gutter').trim(),
+        headingSize: headingStyle.fontSize, headingWeight: headingStyle.fontWeight,
+        headingLineHeight: headingStyle.lineHeight,
+        headingTracking: headingStyle.letterSpacing,
+        subheadingSize: subheadingStyle.fontSize, subheadingWeight: subheadingStyle.fontWeight,
+        subheadingLineHeight: subheadingStyle.lineHeight,
+        heroBackground: hero && getComputedStyle(hero).backgroundColor,
+        action: action && { height: rect(action).height, size: getComputedStyle(action).fontSize,
+          weight: getComputedStyle(action).fontWeight, radius: getComputedStyle(action).borderRadius },
+        hero: hero && rect(hero),
+        scene: scene && { ...rect(scene), position: getComputedStyle(scene).position, radius: getComputedStyle(scene).borderRadius,
+          border: getComputedStyle(scene).borderWidth, fit: getComputedStyle(scene).objectFit,
+          crop: getComputedStyle(scene).objectPosition, loaded: scene.complete && scene.naturalWidth > 0,
+          src: scene.getAttribute('src') },
+        separateImageCard: document.querySelector('.homepage-hero-visual,.homepage-hero-art') !== null,
+        copyStacks: document.querySelectorAll('.homepage-hero-copy').length,
+        actions: hero && hero.querySelectorAll('.hero-action').length,
+        nextSectionY: problem && problem.getBoundingClientRect().top,
+        problemItems: document.querySelectorAll('.family-problem-row > li').length,
+        sectionEyebrowColor: problem && getComputedStyle(problem.querySelector('.eyebrow')).color,
+        workflow: workflow && [...workflow.children].map(step => {
+          const title = step.querySelector('h3'), description = step.querySelector('p'), ordinal = step.querySelector('.family-ordinal'), icon = step.querySelector('.family-workflow-icon');
+          return { bounds: rect(step), title: rect(title), icon: rect(icon), ordinal: rect(ordinal),
+            titleSize: getComputedStyle(title).fontSize, titleWeight: getComputedStyle(title).fontWeight,
+            descriptionSize: getComputedStyle(description).fontSize, ordinalSize: getComputedStyle(ordinal).fontSize,
+            radius: getComputedStyle(step).borderRadius, shadow: getComputedStyle(step).boxShadow };
+        }),
+      },
     };
   })()`);
 }
@@ -161,9 +208,67 @@ async function captureBrandElement(client, sessionId, selector, outputPath) {
 async function assertBrand(client, sessionId, measurement, context) {
   const label = `${context.width}px ${context.colorScheme} ${context.route} ${context.scrollbarMode}`;
   assert.equal(measurement.headerImage.currentSrc, '/assets/brand/judgmentkit-lockup-reversed.svg', `${label}: fixed ink header uses reversed asset`);
-  assert.equal(measurement.footerImage.currentSrc, context.colorScheme === 'dark'
-    ? '/assets/brand/judgmentkit-lockup-reversed.svg' : '/assets/brand/judgmentkit-lockup.svg', `${label}: footer follows its surface`);
-  assert.equal(measurement.footerBackground, context.colorScheme === 'dark' ? 'rgb(16, 19, 18)' : 'rgb(248, 247, 242)', label);
+  assert.equal(measurement.footerImage.currentSrc, '/assets/brand/judgmentkit-lockup-reversed.svg', `${label}: fixed Ink footer uses reversed asset`);
+  assert.equal(measurement.footerBackground, 'rgb(11, 13, 14)', label);
+  const presentation = measurement.presentation;
+  assert.ok(presentation.bodyFont.includes('Header Inter'), `${label}: shared Inter text`);
+  assert.equal(presentation.fontSize, '16px', label);
+  assert.equal(presentation.lineHeight, '23.2px', label);
+  assert.equal(presentation.fontSmoothing, 'antialiased', `${label}: Surfaces text rendering`);
+  assert.equal(presentation.footerDescriptionColor, 'rgb(139, 144, 150)', `${label}: quiet Nickel footer copy`);
+  assert.equal(presentation.shellWidth, '1120px', label);
+  assert.equal(presentation.gutter, context.width <= 820 ? '16px' : '24px', label);
+  assert.equal(presentation.bodyBackground, context.colorScheme === 'dark' ? 'rgb(11, 13, 14)' : 'rgb(247, 246, 242)', label);
+  assert.equal(presentation.headingSize, context.width <= 620 ? '32px' : '40px', label);
+  assert.equal(presentation.headingWeight, '600', label);
+  assert.equal(presentation.headingLineHeight, context.width <= 620 ? '36.8px' : '46px', label);
+  assert.equal(presentation.headingTracking, 'normal', label);
+  assert.equal(presentation.subheadingSize, context.width <= 620 ? '24px' : '32px', label);
+  assert.equal(presentation.subheadingWeight, '600', label);
+  assert.equal(presentation.subheadingLineHeight, context.width <= 620 ? '27.6px' : '36.8px', label);
+  if (context.route === '/docs/') {
+    assert.ok(presentation.detailPadding, `${label}: detailed-page wrapper exists`);
+    assert.equal(presentation.detailPadding.inner, '0px', `${label}: nested layout must not add a second top inset`);
+    const outerInset = Number.parseFloat(presentation.detailPadding.outer);
+    assert.ok(outerInset >= 36 && outerInset <= 62, `${label}: outer wrapper uses the intended page inset`);
+  }
+  if (context.route === '/') {
+    assert.equal(presentation.heroBackground, 'rgb(11, 13, 14)', `${label}: fixed Ink hero`);
+    assert.deepEqual(presentation.action, { height: 48, size: '14px', weight: '500', radius: '4px' }, label);
+    assert.equal(presentation.separateImageCard, false, label);
+    assert.equal(presentation.copyStacks, 1, label);
+    assert.equal(presentation.actions, 2, label);
+    assert.equal(presentation.scene.loaded, true, label);
+    assert.equal(presentation.scene.src, '/assets/judgment-lens-environment-v2.webp', label);
+    assert.equal(presentation.scene.position, 'absolute', label);
+    assert.equal(presentation.scene.fit, 'cover', label);
+    assert.equal(presentation.scene.crop, context.width <= 820 ? '72% 50%' : '56% 50%', label);
+    assert.equal(presentation.scene.radius, '0px', label);
+    assert.equal(presentation.scene.border, '0px', label);
+    assert.equal(presentation.scene.x, 0, label);
+    assert.equal(presentation.scene.width, measurement.layoutWidth, label);
+    assert.equal(presentation.scene.height, presentation.hero.height, label);
+    if (context.width > 820) assert.equal(presentation.nextSectionY, 632, `${label}: desktop header72 + hero560`);
+    else assert.ok(presentation.hero.height >= 528, `${label}: mobile environment retains its minimum scene height`);
+    assert.equal(presentation.problemItems, 3, label);
+    assert.equal(presentation.sectionEyebrowColor, context.colorScheme === 'dark' ? 'rgb(139, 144, 150)' : 'rgb(85, 91, 96)', `${label}: muted section label`);
+    assert.equal(presentation.workflow.length, 5, label);
+    for (const step of presentation.workflow) {
+      assert.equal(step.titleSize, '20px', label);
+      assert.equal(step.titleWeight, '600', label);
+      assert.equal(step.descriptionSize, '14px', label);
+      assert.equal(step.ordinalSize, '12px', label);
+      assert.equal(step.radius, '0px', label);
+      assert.equal(step.shadow, 'none', label);
+      assert.equal(step.icon.width, context.width <= 820 ? 40 : 44, label);
+      if (context.width <= 820) {
+        assert.equal(step.icon.x, step.ordinal.x, `${label}: icon and ordinal left rail`);
+        assert.ok(step.title.x >= step.icon.right + 15, `${label}: workflow text right of left rail`);
+      }
+    }
+    const positions = presentation.workflow.map(step => step.bounds.x);
+    assert.equal(new Set(positions).size, context.width <= 820 ? 1 : 5, `${label}: connected workflow follows viewport`);
+  }
   assert.equal(measurement.separateWordmark, false, `${label}: whole outlined lockup`);
   for (const image of [measurement.headerImage, measurement.footerImage]) {
     assert.equal(image.loaded, true, `${label}: lockup loaded`);
@@ -193,32 +298,9 @@ async function assertBrand(client, sessionId, measurement, context) {
   }
 }
 
-async function assertVisibleExternalLink(client, sessionId, label) {
-  const links = await evaluate(client, sessionId, `(() => {
-    return [...document.querySelectorAll('[data-surfaces-navigation] a[target="_blank"]')]
-      .filter(link => link.getBoundingClientRect().height > 0)
-      .map(link => {
-        const icon = link.querySelector('.external-link-icon');
-        const bounds = icon?.getBoundingClientRect();
-        return {
-          title: link.title,
-          rel: [...link.relList].sort(),
-          decorative: icon?.getAttribute('aria-hidden'),
-          width: bounds?.width,
-          height: bounds?.height,
-          color: icon && getComputedStyle(icon).color,
-          linkColor: getComputedStyle(link).color,
-        };
-      });
-  })()`);
-  assert.equal(links.length, 1, `${label}: one visible Handbooks link`);
-  const [link] = links;
-  assert.equal(link.title, "Opens in a new tab", label);
-  assert.deepEqual(link.rel, ["noopener", "noreferrer"], label);
-  assert.equal(link.decorative, "true", label);
-  assert.equal(link.width, 14, `${label}: visible external-link icon width`);
-  assert.equal(link.height, 14, `${label}: visible external-link icon height`);
-  assert.equal(link.color, link.linkColor, `${label}: icon follows link color`);
+async function assertPrimaryDestinations(client, sessionId, label) {
+  const links = await evaluate(client, sessionId, `(() => [...document.querySelectorAll('.surfaces-navigation-sections a')].map(link => ({ href: link.getAttribute('href'), target: link.getAttribute('target') })))()`);
+  assert.deepEqual(links, ["/#why-judgmentkit", "/#how-it-works", "/docs/", "https://surfaces.systems/"].map(href => ({ href, target: null })), `${label}: four compact primary destinations`);
 }
 
 try {
@@ -260,20 +342,21 @@ try {
           if (expected.width === 390) {
             const alternate = colorScheme === 'light' ? 'dark' : 'light';
             await client.send('Emulation.setEmulatedMedia', { media: 'screen', features: [{ name: 'prefers-color-scheme', value: alternate }] }, sid);
-            await waitForExpression(client, sid, `document.querySelector('.site-brand-lockup').currentSrc && new URL(document.querySelector('.site-brand-lockup').currentSrc).pathname === '${alternate === 'dark' ? '/assets/brand/judgmentkit-lockup-reversed.svg' : '/assets/brand/judgmentkit-lockup.svg'}'`);
-            assert.equal((await measure(client, sid)).headerImage.currentSrc, '/assets/brand/judgmentkit-lockup-reversed.svg');
-            schemeChanges.push({ width: expected.width, from: colorScheme, to: alternate, footerUpdated: true, fixedInkHeaderPreserved: true });
+            const alternateMeasurement = await measure(client, sid);
+            assert.equal(alternateMeasurement.headerImage.currentSrc, '/assets/brand/judgmentkit-lockup-reversed.svg');
+            assert.equal(alternateMeasurement.footerImage.currentSrc, '/assets/brand/judgmentkit-lockup-reversed.svg');
+            assert.equal(alternateMeasurement.footerBackground, 'rgb(11, 13, 14)');
+            schemeChanges.push({ width: expected.width, from: colorScheme, to: alternate, fixedInkFooterPreserved: true, fixedInkHeaderPreserved: true });
             await client.send('Emulation.setEmulatedMedia', { media: 'screen', features: [{ name: 'prefers-color-scheme', value: colorScheme }] }, sid);
-            await waitForExpression(client, sid, `document.querySelector('.site-brand-lockup').currentSrc && new URL(document.querySelector('.site-brand-lockup').currentSrc).pathname === '${colorScheme === 'dark' ? '/assets/brand/judgmentkit-lockup-reversed.svg' : '/assets/brand/judgmentkit-lockup.svg'}'`);
+            await measure(client, sid);
           }
           assert.equal(home.menuVisible, expected.menu, label);
           assert.equal(home.overflow, false, label);
           assert.equal(home.fontLoaded, true, label);
           assert.equal(home.background, "rgba(11, 13, 14, 0.98)", label);
 
-          assert.equal(home.links.at(-2).href, "https://handbooks.surfaces.systems/", label);
           assert.equal(home.links.at(-1).href, "https://surfaces.systems/", label);
-          if (!expected.menu) await assertVisibleExternalLink(client, sid, label);
+          await assertPrimaryDestinations(client, sid, label);
           if (expected.menu) {
             assert.equal(home.button.y, 14, label);
             assert.equal(home.button.height, 44, label);
@@ -287,8 +370,8 @@ try {
               const el = document.querySelector('[data-surfaces-primary-menu-list]');
               return { hidden: el.hidden, top: el.getBoundingClientRect().top, count: el.querySelectorAll('a').length, last: el.querySelector('a:last-child').href };
             })()`);
-            assert.deepEqual(menu, { hidden: false, top: 72, count: 8, last: "https://surfaces.systems/" });
-            await assertVisibleExternalLink(client, sid, label);
+            assert.deepEqual(menu, { hidden: false, top: 72, count: 4, last: "https://surfaces.systems/" });
+            await assertPrimaryDestinations(client, sid, label);
             menuQa.push({ width: expected.width, colorScheme, scrollbarMode: expected.scrollbarMode ?? 'system', ...menu });
             if (artifactDir && expected.width === 390) {
               await captureScreenshot(client, sid, path.join(artifactDir, `home-390-${colorScheme}-menu-open.png`));
@@ -334,7 +417,7 @@ try {
     }
   });
   if (artifactDir) fs.writeFileSync(path.join(artifactDir, 'browser-qa.json'), JSON.stringify({ status: 'passed', canonicalRatio: LOCKUP_RATIO, cases: brandQa, menuCases: menuQa, runtimeSchemeChanges: schemeChanges }, null, 2) + '\n');
-  console.log("Header/footer browser checks passed: 14 system viewport/appearance cases plus 2 forced classic-scrollbar cases on home and docs, canonical asset selection and ratios, accessible names, runtime theme changes, external-link indicators, keyboard menu, dismissal, sticky positioning, and Back restoration.");
+  console.log(`Header/footer and website presentation browser checks passed: ${CASES.length * 2} viewport/appearance cases including forced classic scrollbars, home/docs responsive type and surfaces, canonical asset selection and ratios, accessible names, runtime theme changes, compact primary destinations, keyboard menu, dismissal, sticky positioning, and Back restoration.`);
 } finally {
   if (server) await new Promise((resolve, reject) => server.close(error => error ? reject(error) : resolve()));
   fs.rmSync(outDir, { recursive: true, force: true });
diff --git a/tests/site-local-server.test.mjs b/tests/site-local-server.test.mjs
index b19803c..0865ba3 100644
--- a/tests/site-local-server.test.mjs
+++ b/tests/site-local-server.test.mjs
@@ -712,9 +712,14 @@ try {
       /homepage-film|data-homepage-film|judgmentkit-select-field-agent-demo/,
       "served homepage should not include the retired film or its behavior",
     );
-    assert.match(main, /^\s*<section class="hero homepage-hero">/);
-    assert.match(main, /<section class="section homepage-category"/);
-    assert.match(main, /A design system can make the wrong interface consistent\./);
+    assert.match(main, /^\s*<section class="hero homepage-hero"[^>]*>/);
+    assert.match(main, /aria-labelledby="homepage-title"/);
+    assert.match(main, /<h1 id="homepage-title">Guide interface design with your AI agent\.<\/h1>/);
+    assert.equal((main.match(/<section\b/g) ?? []).length, 3);
+    const problem = main.match(/<ol class="family-problem-row">([\s\S]*?)<\/ol>/)?.[1] ?? "";
+    const workflow = main.match(/<ol class="family-workflow-row">([\s\S]*?)<\/ol>/)?.[1] ?? "";
+    assert.equal((problem.match(/<li>/g) ?? []).length, 3, "served homepage has three problem items");
+    assert.equal((workflow.match(/<li class="family-workflow-step">/g) ?? []).length, 5, "served homepage has five workflow steps");
     assert.equal(html.includes("/releases/visual-composition/"), false);
   });
 
diff --git a/tests/site.test.mjs b/tests/site.test.mjs
index aac6822..a43e998 100644
--- a/tests/site.test.mjs
+++ b/tests/site.test.mjs
@@ -105,6 +105,7 @@ const APPEARANCE_INVARIANT_SITE_TOKENS = [
   "--site-reading-wide",
   "--site-reading-width",
   "--site-shell-width",
+  "--website-nickel",
 ];
 
 function canonicalizeJsonValue(value) {
@@ -179,6 +180,7 @@ function cssRuleBlocks(css) {
 function cssCustomPropertyMap(ruleBody) {
   return new Map(
     ruleBody
+      .replace(/\/\*[\s\S]*?\*\//g, "")
       .split(";")
       .map((declaration) => declaration.trim().match(/^(--[\w-]+)\s*:\s*([\s\S]+)$/))
       .filter(Boolean)
@@ -316,8 +318,8 @@ for (const route of result.routes.filter((candidate) => candidate.endsWith("/"))
     `${route} footer should retain the JudgmentKit identity`,
   );
   assertReleaseFooter(html, packageJson.version, route);
-  assert.ok(html.includes('srcset="/assets/brand/judgmentkit-lockup-reversed.svg" media="(prefers-color-scheme: dark)"'));
-  assert.ok(html.includes('class="site-brand-lockup" src="/assets/brand/judgmentkit-lockup.svg"'));
+  assert.ok(html.includes('class="site-brand-lockup" src="/assets/brand/judgmentkit-lockup-reversed.svg"'));
+  assert.equal(html.includes(' class="site-presentation"'), !route.startsWith("/evals/"), `${route}: family presentation applies to owned public pages, not reports`);
   assert.ok(
     html.includes(
       `<a class="site-footer-release" href="https://github.com/mikeylong/judgmentkit/releases/tag/v${packageJson.version}" aria-label="Release v${packageJson.version} on GitHub">`,
@@ -335,6 +337,60 @@ function assertAnalyticsBootstrap(html, label) {
   assert.ok(html.includes('data-sdkv="2.0.1"'), `${label} should include the analytics SDK version`);
 }
 
+// Approved document titles are independent of visible headings and source catalog names.
+const expectedPublicTitles = {
+  "/": "Interface Design Guidance for AI Agents | JudgmentKit",
+  "/value/": "Interface checks and repair examples | JudgmentKit",
+  "/docs/": "Setup and agent workflow | JudgmentKit",
+  "/examples/": "Interface examples and repair fixtures | JudgmentKit",
+  "/design-system/": "Interface design system reference | JudgmentKit",
+  "/design-system/tokens/": "Design token reference | JudgmentKit",
+  "/design-system/fonts/": "Interface typography reference | JudgmentKit",
+  "/design-system/icons/": "Interface icon reference | JudgmentKit",
+  "/design-system/components/": "Component contracts and states | JudgmentKit",
+  "/design-system/patterns/": "Activity-based interface patterns | JudgmentKit",
+  "/design-system/accessibility/": "Accessibility evidence requirements | JudgmentKit",
+  "/evals/": "Historical UI evaluation reports | JudgmentKit",
+  "/evals/judgmentkit-mcp/": "Historical paired-artifact evaluation | JudgmentKit",
+  "/evals/site-rebuild-log/": "Website rebuild evidence log | JudgmentKit"
+};
+const authoredTitleFiles = new Set();
+const actualPublicTitles = [];
+for (const [route, expectedTitle] of Object.entries(expectedPublicTitles)) {
+  const relativeFile = `${route.slice(1)}index.html`;
+  authoredTitleFiles.add(relativeFile);
+  const html = fs.readFileSync(path.join(tempDir, relativeFile), "utf8");
+  const head = html.match(/<head\b[^>]*>([\s\S]*?)<\/head>/i)?.[1] ?? "";
+  const titles = [...head.matchAll(/<title>([^<]*)<\/title>/g)].map(([, text]) => text);
+  assert.deepEqual(titles, [expectedTitle], `${route}: one descriptive document title`);
+  for (const [attribute, key] of [["property", "og:title"], ["name", "twitter:title"]]) {
+    const fields = [...head.matchAll(new RegExp(`<meta ${attribute}="${key}" content="([^"]*)">`, "g"))].map(([, value]) => value);
+    assert.deepEqual(fields, [expectedTitle], `${route}: one matching ${key}`);
+  }
+  assert.equal((expectedTitle.match(/JudgmentKit/g) ?? []).length, 1, `${route}: brand appears once`);
+  assert.ok(expectedTitle.endsWith(" | JudgmentKit"), `${route}: canonical brand suffix`);
+  actualPublicTitles.push(titles[0]);
+}
+assert.equal(new Set(actualPublicTitles).size, 14, "authored titles describe distinct page purposes");
+const copiedTitleAliases = {
+  "examples/one-shot-demo.html": "examples/demo/one-shot-demo.html",
+  "examples/comparison/refund/version-a.html": "examples/comparison/version-a.html",
+  "examples/comparison/refund/version-b.html": "examples/comparison/version-b.html",
+};
+let preservedReferenceTitles = 0;
+for (const relativeFile of listRelativeFiles(tempDir).filter((file) => file.endsWith(".html") && !authoredTitleFiles.has(file))) {
+  const exception = SITE_BRAND.head_exceptions.find((entry) => entry.route === `/${relativeFile}`);
+  const sourceFile = exception?.source ?? copiedTitleAliases[relativeFile] ??
+    (relativeFile.startsWith("evals/") ? `evals/reports/${relativeFile.slice(6)}` : relativeFile);
+  const original = fs.readFileSync(path.join(root, sourceFile), "utf8");
+  const published = fs.readFileSync(path.join(tempDir, relativeFile), "utf8");
+  const titleMarkup = (html) => html.match(/<title\b[^>]*>[\s\S]*?<\/title>/i)?.[0];
+  assert.ok(titleMarkup(original), `${relativeFile}: source title exists`);
+  assert.equal(titleMarkup(published), titleMarkup(original), `${relativeFile}: reference or historical title stays byte-exact`);
+  preservedReferenceTitles += 1;
+}
+assert.ok(preservedReferenceTitles >= 101, "cover all existing copied references and the immutable recording");
+
 const homepage = fs.readFileSync(path.join(tempDir, "index.html"), "utf8");
 const llms = fs.readFileSync(path.join(tempDir, "llms.txt"), "utf8");
 const siteCss = fs.readFileSync(path.join(tempDir, "assets", "site.css"), "utf8");
@@ -420,12 +476,9 @@ assert.ok(
   ),
 );
 assert.ok(platformNavMarkup.includes('<div class="surfaces-navigation-sections">'));
-assert.ok(platformNavMarkup.includes('href="/value/"'));
+assert.ok(platformNavMarkup.includes('href="/#why-judgmentkit"'));
+assert.ok(platformNavMarkup.includes('href="/#how-it-works"'));
 assert.ok(platformNavMarkup.includes('href="/docs/"'));
-assert.ok(platformNavMarkup.includes('href="/design-system/"'));
-assert.ok(platformNavMarkup.includes('href="/examples/"'));
-assert.ok(platformNavMarkup.includes('href="/evals/"'));
-assert.ok(platformNavMarkup.includes('href="/mcp"'));
 assert.ok(platformNavMarkup.includes('class="surfaces-primary-menu-button"'));
 assert.ok(platformNavMarkup.includes('aria-label="Open primary navigation"'));
 assert.ok(platformNavMarkup.includes('aria-controls="surfaces-primary-menu"'));
@@ -434,20 +487,18 @@ assert.ok(platformNavMarkup.includes('data-surfaces-primary-menu-backdrop'));
 assert.ok(platformNavMarkup.includes('id="surfaces-primary-menu" hidden data-surfaces-primary-menu-list'));
 assert.ok(platformNavMarkup.includes('data-surfaces-primary-menu-list'));
 for (const [href, label] of [
-  ["/value/", "Value"],
+  ["/#why-judgmentkit", "Why JudgmentKit"],
+  ["/#how-it-works", "How it works"],
   ["/docs/", "Docs"],
-  ["/design-system/", "Design System"],
-  ["/examples/", "Examples"],
-  ["/evals/", "Evals"],
-  ["/mcp", "MCP"],
+  ["https://surfaces.systems/", "Surfaces"],
 ]) {
   assert.ok(platformNavMarkup.includes(`<a href="${href}">${label}</a>`));
 }
 assert.ok(platformNavMarkup.includes('<img class="surfaces-brand-lockup" src="/assets/brand/judgmentkit-lockup-reversed.svg" width="425" height="109" alt="">'));
 assert.equal(platformNavMarkup.includes("<polygon"), false, "The header consumes the complete canonical SVG");
 assert.equal(platformNavMarkup.includes('<span>JudgmentKit</span>'), false, "The outlined wordmark must not be duplicated as live text");
-assert.ok(platformNavMarkup.includes('href="https://handbooks.surfaces.systems/" target="_blank" rel="noopener noreferrer" title="Opens in a new tab">Handbooks<svg'));
-assert.ok(platformNavMarkup.includes('href="https://surfaces.systems/">surfaces.systems</a>'));
+assert.equal((platformNavMarkup.match(/<a href=/g) ?? []).length, 8, "four primary destinations appear in desktop and compact navigation");
+assert.ok(platformNavMarkup.includes('href="https://surfaces.systems/">Surfaces</a>'));
 for (const removed of ["surfaces-system-switch", "data-surfaces-system-menu", "surfaceops.ai", "interfacectl.com", "surfaces.dev"]) {
   assert.equal(platformNavMarkup.includes(removed), false, `${removed} must not return to the header`);
 }
@@ -458,9 +509,10 @@ assert.equal(platformNavMarkup.includes('role="menuitem"'), false);
 assert.equal(platformNavMarkup.includes('aria-haspopup="menu"'), false);
 assert.ok(homepage.includes('href="/assets/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin'));
 assert.ok(fs.statSync(path.join(tempDir, "assets", "fonts", "inter-latin.woff2")).size > 0);
+assert.equal(crypto.createHash("sha256").update(fs.readFileSync(path.join(tempDir, "assets", "fonts", "inter-latin.woff2"))).digest("hex"), "c940764593d0fe5d596be327ca7558855e018039fb78509aa21921fd3644c3e4", "the audited variable Inter font matches the Surfaces Latin face");
 assert.ok(fs.readFileSync(path.join(tempDir, "assets", "fonts", "OFL.txt"), "utf8").includes("SIL OPEN FONT LICENSE"));
-assert.equal((platformNavMarkup.match(/target="_blank"/g) ?? []).length, 2);
-assert.equal((platformNavMarkup.match(/rel="noopener noreferrer"/g) ?? []).length, 2);
+assert.equal((platformNavMarkup.match(/target="_blank"/g) ?? []).length, 0);
+assert.equal((platformNavMarkup.match(/rel="noopener noreferrer"/g) ?? []).length, 0);
 assert.equal(platformNavMarkup.includes("pop-out"), false);
 const platformNavCss = siteCss.match(/\.surfaces-navigation \{[^}]*\}/)?.[0] ?? "";
 assert.ok(siteCss.includes("body {\n  margin: 0;\n  padding-top: 0;"));
@@ -496,7 +548,7 @@ assert.equal(
   "site CSS should define only the governed site and design-system light/dark roots",
 );
 assert.deepEqual(
-  rawColorCustomPropertyDeclarations(siteCssRuleBlocks, new Set([":root"])),
+  rawColorCustomPropertyDeclarations(siteCssRuleBlocks, new Set([":root", ".site-presentation"])),
   [],
   "raw color custom properties must stay in governed appearance roots",
 );
@@ -542,19 +594,21 @@ assert.ok(siteCss.includes(`.system-map-canvas {\n  aspect-ratio: ${SYSTEM_MAP_V
 assert.ok(siteCss.includes("contain: layout paint;\n  overflow: hidden;"));
 assert.ok(siteCss.includes(".system-map-flow-root .react-flow,\n.system-map-flow-root .react-flow__renderer,\n.system-map-flow-root .react-flow__pane"));
 assert.ok(siteCss.includes("box-shadow: 0 0 0 2px var(--focus-ring);"));
-const stepMarkerBackgrounds = cssCustomPropertyValues(siteCss, "--step-marker-bg");
-const stepMarkerTextColors = cssCustomPropertyValues(siteCss, "--step-marker-ink");
-const heroPrimaryBackgrounds = cssCustomPropertyValues(siteCss, "--accent-strong");
-const heroPrimaryTextColors = cssCustomPropertyValues(siteCss, "--bg");
-const siteBackgrounds = cssCustomPropertyValues(siteCss, "--bg");
-const sitePanelBackgrounds = cssCustomPropertyValues(siteCss, "--panel");
-const siteTextColors = cssCustomPropertyValues(siteCss, "--ink");
-const siteMutedColors = cssCustomPropertyValues(siteCss, "--muted");
-const softSurfaceBackgrounds = cssCustomPropertyValues(siteCss, "--soft-surface");
-const accentBackgrounds = cssCustomPropertyValues(siteCss, "--accent");
-const accentTextColors = cssCustomPropertyValues(siteCss, "--accent-ink");
-const designSystemFocusBackgrounds = cssCustomPropertyValues(siteCss, "--jk-color-focus");
-const warningColors = cssCustomPropertyValues(siteCss, "--warn");
+const familyStyles = fs.readFileSync(new URL("../site/website-presentation.css", import.meta.url), "utf8");
+const referenceSiteCss = siteCss.slice(0, -familyStyles.length);
+const stepMarkerBackgrounds = cssCustomPropertyValues(referenceSiteCss, "--step-marker-bg");
+const stepMarkerTextColors = cssCustomPropertyValues(referenceSiteCss, "--step-marker-ink");
+const heroPrimaryBackgrounds = cssCustomPropertyValues(referenceSiteCss, "--accent-strong");
+const heroPrimaryTextColors = cssCustomPropertyValues(referenceSiteCss, "--bg");
+const siteBackgrounds = cssCustomPropertyValues(referenceSiteCss, "--bg");
+const sitePanelBackgrounds = cssCustomPropertyValues(referenceSiteCss, "--panel");
+const siteTextColors = cssCustomPropertyValues(referenceSiteCss, "--ink");
+const siteMutedColors = cssCustomPropertyValues(referenceSiteCss, "--muted");
+const softSurfaceBackgrounds = cssCustomPropertyValues(referenceSiteCss, "--soft-surface");
+const accentBackgrounds = cssCustomPropertyValues(referenceSiteCss, "--accent");
+const accentTextColors = cssCustomPropertyValues(referenceSiteCss, "--accent-ink");
+const designSystemFocusBackgrounds = cssCustomPropertyValues(referenceSiteCss, "--jk-color-focus");
+const warningColors = cssCustomPropertyValues(referenceSiteCss, "--warn");
 assert.deepEqual(stepMarkerBackgrounds, ["#245f73", "#a9d7e4"]);
 assert.deepEqual(stepMarkerTextColors, ["#ffffff", "#101312"]);
 assert.deepEqual(heroPrimaryBackgrounds, ["#133f4e", "#a9d7e4"]);
@@ -564,8 +618,8 @@ assert.deepEqual(accentTextColors, ["#ffffff", "#101312"]);
 assert.deepEqual(designSystemFocusBackgrounds, ["#245f73", "#7db6c7"]);
 assertContrastPair("light design-system step marker", stepMarkerTextColors[0], stepMarkerBackgrounds[0]);
 assertContrastPair("dark design-system step marker", stepMarkerTextColors[1], stepMarkerBackgrounds[1]);
-assertContrastPair("light homepage hero primary action", heroPrimaryTextColors[0], heroPrimaryBackgrounds[0]);
-assertContrastPair("dark homepage hero primary action", heroPrimaryTextColors[1], heroPrimaryBackgrounds[1]);
+assertContrastPair("light reference primary action", heroPrimaryTextColors[0], heroPrimaryBackgrounds[0]);
+assertContrastPair("dark reference primary action", heroPrimaryTextColors[1], heroPrimaryBackgrounds[1]);
 for (const [index, mode] of ["light", "dark"].entries()) {
   assertContrastPair(`${mode} text on soft surface`, siteTextColors[index], softSurfaceBackgrounds[index]);
   assertContrastPair(`${mode} muted text on soft surface`, siteMutedColors[index], softSurfaceBackgrounds[index]);
@@ -597,7 +651,8 @@ assert.ok(siteCss.includes("@media (max-width: 820px)"));
 assert.ok(siteCss.includes(".surfaces-navigation-sections {\n    display: none;"));
 assert.ok(siteCss.includes(".surfaces-primary-menu {\n    display: block;"));
 assert.ok(siteCss.includes('font-family: "Header Inter"'));
-assert.ok(siteCss.includes("font-display: optional;"));
+assert.ok(siteCss.includes("font-display: swap;"));
+assert.match(siteCss, /@font-face \{\s*font-family: "Header Inter";\s*font-style: normal;\s*font-weight: 100 900;\s*font-display: swap;/, "the website face covers regular through display weights and swaps to the loaded Inter font");
 assert.ok(siteCss.includes("--site-gutter: clamp(18px, 4vw, 56px);"));
 assert.ok(siteCss.includes("--site-shell-width: 1220px;"));
 assert.ok(siteCss.includes("--site-reading-width: 820px;"));
@@ -608,7 +663,7 @@ assert.ok(siteCss.includes("--site-page-top: clamp(36px, 5vw, 62px);"));
 assert.ok(siteCss.includes("--site-navigation-height: 72px;"));
 assert.ok(siteCss.includes("--section-rail-top: calc(var(--site-navigation-height) + var(--site-page-top));"));
 assert.ok(siteCss.includes(".site-shell {\n  width: 100%;\n  max-width: var(--site-shell-width);"));
-assert.ok(siteCss.includes(".site-footer {\n  padding: 18px var(--site-gutter) 20px;"));
+assert.ok(siteCss.includes(".site-footer {\n  padding: 28px 24px;"));
 assert.match(
   siteCss,
   /\.site-brand-lockup \{[^}]*width: auto;[^}]*height: 44px;[^}]*object-fit: contain;/s,
@@ -616,8 +671,8 @@ assert.match(
 );
 assert.match(
   siteCss,
-  /\.site-footer-release \{[^}]*color: var\(--accent-strong\);[^}]*font-family: Inter, sans-serif;[^}]*font-weight: 400;[^}]*text-decoration: none;/s,
-  "the peripheral release link should use the site link color and regular sans-serif text without an inline-link underline at rest",
+  /\.site-footer-release \{[^}]*color: var\(--nav-muted\);[^}]*font-family: inherit;[^}]*font-weight: 400;[^}]*text-decoration: none;/s,
+  "the peripheral release link should use the Ink footer's supporting color and regular Inter text without an underline at rest",
 );
 assert.doesNotMatch(
   siteCss,
@@ -631,6 +686,23 @@ assert.match(
 );
 assert.ok(siteCss.includes(".site-footer-release:focus-visible"));
 assert.ok(siteCss.includes(".site-page-header {\n  max-width: var(--site-reading-width);"));
+assert.ok(siteCss.endsWith(familyStyles), "the build must publish the source presentation stylesheet after legacy reference rules");
+const familyLight = cssCustomPropertyMap(cssRuleBody(familyStyles, ".site-presentation"));
+const familyDark = cssCustomPropertyMap(familyStyles.match(/@media \(prefers-color-scheme: dark\) \{\s*\.site-presentation\s*\{([^}]*)\}/)?.[1] ?? "");
+for (const [mode, tokens, expected] of [
+  ["light", familyLight, { "--bg": "#F7F6F2", "--ink": "#0B0D0E", "--line": "#DAD7CF", "--panel": "#ffffff" }],
+  ["dark", familyDark, { "--bg": "#0B0D0E", "--ink": "#F7F6F2", "--line": "#8B9096", "--panel": "#24282b" }],
+]) {
+  for (const [name, value] of Object.entries(expected)) assert.equal(tokens.get(name), value, `${mode} website ${name}`);
+  for (const surface of ["--bg", "--panel"]) {
+    assertContrastPair(`${mode} website text on ${surface}`, tokens.get("--ink"), tokens.get(surface));
+    assertContrastPair(`${mode} website muted text on ${surface}`, tokens.get("--muted"), tokens.get(surface));
+  }
+  assertContrastPair(`${mode} website action`, tokens.get("--accent-ink"), tokens.get("--accent-strong"));
+}
+assert.ok(familyStyles.includes(':not(.jk-specimen-preview *)'), "website heading rules must exclude reference specimen descendants");
+assert.match(familyStyles, /\.site-presentation \.jk-specimen-preview \{\s*font-family: ui-sans-serif, system-ui,/, "reference previews preserve their existing inherited system font");
+assert.equal(familyStyles.includes("--jk-"), false, "website presentation must not replace design-system adapter tokens");
 assert.ok(siteCss.includes(".site-page-header-wide {\n  max-width: var(--site-reading-wide);"));
 assert.ok(siteCss.includes(".section-rail-nav {\n  position: fixed;\n  top: var(--section-rail-top);"));
 assert.equal(siteCss.includes(".section-rail-nav {\n  position: fixed;\n  top: 88px;"), false);
@@ -661,91 +733,28 @@ assert.ok(homepage.includes("[data-section-rail-menu]"));
 assert.ok(homepage.includes('class="site-shell homepage-section-shell"'));
 assert.ok(homepage.includes("[data-surfaces-primary-menu-button]"));
 assert.equal(homepage.includes("[data-surfaces-system-menu-button]"), false);
-assert.ok(homepageHeroCopy.includes("Stop AI from building the wrong interface."));
-assert.ok(homepageHeroCopy.includes("The judgment layer for AI-generated UI"));
-assert.ok(
-  homepageHeroCopy.includes(
-    "A design system tells an agent how interface elements should look and behave.",
-  ),
-);
-assert.ok(
-  homepageHeroCopy.includes(
-    "JudgmentKit tells it which interface the user’s work requires, what should stay hidden, and what must be repaired.",
-  ),
-);
-assert.ok(homepageHeroCopy.includes("Use JudgmentKit’s design system—or bring your own."));
-assert.equal(homepageHeroCopy.includes("Product judgment for AI-generated UI"), false);
-assert.equal(
-  homepageHeroCopy.includes(
-    "JudgmentKit checks the user's work before generation and tells the agent what to fix when the concept is wrong.",
-  ),
-  false,
-);
-assert.equal(homepage.includes("Judgment before generation."), false);
-assert.equal(homepage.includes("Human-centered judgment for AI agents"), false);
-assert.equal(homepage.includes("Activity-first judgment for AI agents"), false);
-assert.equal(homepage.includes("JudgmentKit catches implementation-shaped UI before it ships"), false);
+assert.ok(homepageHeroCopy.includes("Judgment before components."));
+assert.ok(homepageHeroCopy.includes("Guide interface design with your AI agent."));
+assert.ok(homepageHeroCopy.includes("JudgmentKit gives your AI agent interaction guidance, implementation checks, and repair instructions."));
+assert.ok(homepage.includes('name="description" content="JudgmentKit gives your AI agent interaction guidance, implementation checks, and repair instructions."'), "metadata must carry the same bounded promise");
+assert.ok(homepage.includes('<p class="site-footer-description">Guide interface design with your AI agent.</p>'));
+assert.doesNotMatch(homepageMain, /choose the right interface|before the work ships|one short loop|Where AI goes wrong/);
+assert.equal((homepageHeroCopy.match(/<p\b/g) ?? []).length, 2, "one eyebrow and one lead sentence");
 assert.equal((homepageMain.match(/<h1\b/g) ?? []).length, 1);
 assert.ok(homepage.includes('href="/value/"'));
-assert.ok(homepage.includes('href="/evals/"'));
+assert.ok(homepage.includes('href="/examples/"'));
 assert.ok(homepage.includes('class="site-shell homepage-hero-shell"'));
-assert.ok(homepage.includes('class="homepage-hero-visual"'));
-assert.ok(
-  homepage.includes(
-    '<img src="/assets/judgment-lens-hero.webp" width="1122" height="1402" alt="Rough stone fragments pass through a teal glass lens and emerge as an ordered path." loading="eager" fetchpriority="high" decoding="async">',
-  ),
-);
-assert.equal(
-  homepage.includes(
-    "<figcaption>Raw structure, judged against the work, becomes purposeful product direction.</figcaption>",
-  ),
-  false,
-);
-assert.equal(homepage.includes('src="/assets/judgment-lens-hero.webp" loading="lazy"'), false);
-assert.equal(
-  (homepage.match(/href="\/releases\/visual-composition\/"/g) ?? []).length,
-  0,
-  "homepage should not link to a separate visual-composition release page",
-);
-assert.equal(
-  homepage.includes('class="release-notice"'),
-  false,
-  "homepage should not restore the retired release banner",
-);
-assert.equal(
-  (homepageMain.match(/<video\b/gi) ?? []).length,
-  0,
-  "the public homepage should not render the retired film",
-);
-assert.doesNotMatch(
-  homepageMain,
-  /homepage-film|data-homepage-film|judgmentkit-select-field-agent-demo/,
-  "the public homepage should not ship dormant film markup or behavior",
-);
-assert.match(
-  homepageMain,
-  /^\s*<section class="hero homepage-hero">/,
-  "the public homepage story should begin with the hero",
-);
-const homepageCategory = homepageMain.match(
-  /<section class="section homepage-category"[^>]*>([\s\S]*?)<\/section>/,
-)?.[0] ?? "";
-assert.ok(homepageCategory, "homepage should explain JudgmentKit's category directly after the hero");
-assert.ok(homepageCategory.includes("A design system can make the wrong interface consistent."));
-assert.ok(homepageCategory.includes("JudgmentKit prevents that mistake before the components are composed."));
-assert.ok(homepageCategory.includes("Traditional design system"));
-assert.ok(homepageCategory.includes("Defines how interface elements look, behave, and remain consistent."));
-assert.ok(homepageCategory.includes("Defines what the interface must help someone do, decide, and understand."));
-assert.ok(homepageCategory.includes("JudgmentKit uses the design system you choose and tells the agent what to repair."));
-const homepageHeroIndex = homepageMain.search(/class="[^"]*\bhomepage-hero\b[^"]*"/);
-const homepageCategoryIndex = homepageMain.search(/class="[^"]*\bhomepage-category\b[^"]*"/);
-const homepagePreviewIndex = homepageMain.search(/class="[^"]*\bhomepage-preview\b[^"]*"/);
-assert.ok(
-  homepageHeroIndex >= 0 &&
-    homepageCategoryIndex > homepageHeroIndex &&
-    homepagePreviewIndex > homepageCategoryIndex,
-  "the category explanation should be the first substantive section after the hero",
-);
+assert.ok(homepage.includes('class="homepage-scene" src="/assets/judgment-lens-environment-v2.webp" width="1983" height="793" alt="" aria-hidden="true" loading="eager" fetchpriority="high" decoding="async"'));
+assert.doesNotMatch(homepageMain, /homepage-hero-visual|homepage-hero-art|<figure|<video|homepage-film|release-notice/);
+assert.match(homepageMain, /^\s*<section class="hero homepage-hero"[^>]*>/);
+const homepageSections = [...homepageMain.matchAll(/<section\b[^>]*class="([^"]+)"/g)].map(match => match[1]);
+assert.deepEqual(homepageSections, ["hero homepage-hero", "homepage-problem", "homepage-workflow"], "homepage has exactly the hero, problem row and workflow");
+const homepageWords = homepageMain.replace(/<[^>]*>/g, " ").trim().split(/\s+/);
+assert.ok(homepageWords.length <= 220, `homepage main copy stays within 220 words (${homepageWords.length})`);
+for (const [label, max] of [["eyebrow", 12], ["h1", 10], ["lede", 32]]) {
+  const text = label === "h1" ? homepageHeroCopy.match(/<h1[^>]*>([^<]+)<\/h1>/)?.[1] : homepageHeroCopy.match(new RegExp('<p class="' + label + '">([^<]+)<\\/p>'))?.[1];
+  assert.ok(text && text.trim().split(/\s+/).length <= max, `hero ${label} copy budget`);
+}
 
 const homepageFilmFrameMatch = homepageFilmPreview.match(
   /<(div|section)\b[^>]*class="[^"]*\bhomepage-film-frame\b[^"]*"[^>]*>([\s\S]*?)<\/\1>/,
@@ -1726,55 +1735,21 @@ assert.ok(homepage.includes('class="hero-action hero-action-secondary" data-hero
 assert.ok(homepage.includes("See a screen repaired"));
 assert.ok(homepage.includes("Explore examples"));
 assert.equal(homepage.includes('data-hero-action="evidence"'), false);
-assert.ok(homepage.includes('class="proof-panel evaluation-panel" aria-label="JudgmentKit repair preview"'));
-assert.ok(homepage.includes("The screen follows the system, not the work."));
-assert.ok(homepage.includes("The activity is named before the UI."));
-assert.ok(homepage.includes("The agent gets a ready handoff."));
-assert.ok(homepage.includes("Better first drafts. Less cleanup theater."));
-assert.ok(homepage.includes('class="section homepage-failure" aria-labelledby="failure-title"'));
-assert.ok(homepage.includes("The problem is not ugly UI. It is the wrong concept of the work."));
-assert.ok(homepage.includes("Before judgment"));
-assert.ok(homepage.includes("With JudgmentKit"));
-assert.ok(homepage.includes("After repair"));
-const homepageFailureIndex = homepage.indexOf('class="section homepage-failure"');
-const homepageArtifactInspectorIndex = homepage.indexOf(
-  'class="section homepage-artifact-inspector"',
-);
-const homepageProofPathsIndex = homepage.indexOf('class="section proof-paths"');
-assert.ok(
-  homepageFailureIndex < homepageArtifactInspectorIndex &&
-    homepageArtifactInspectorIndex < homepageProofPathsIndex,
-  "Artifact Inspector should follow failure recognition and precede proof paths",
-);
-const homepageArtifactInspector = homepage.slice(
-  homepageArtifactInspectorIndex,
-  homepageProofPathsIndex,
-);
-assert.ok(homepageArtifactInspector.includes("Artifact Inspector"));
-assert.ok(homepageArtifactInspector.includes("Proposed"));
-assert.ok(homepageArtifactInspector.includes("one rendered artifact stays primary"));
-assert.ok(homepageArtifactInspector.includes("inspector chrome and inspection overlay"));
-assert.ok(homepageArtifactInspector.includes("The artifact keeps its own visual language."));
-assert.ok(homepageArtifactInspector.includes("review remains required"));
-assert.ok(homepageArtifactInspector.includes('href="/docs/#artifact-inspector"'));
-assert.ok(
-  homepageArtifactInspector.includes(
-    `href="https://github.com/mikeylong/judgmentkit/releases/tag/v${packageJson.version}"`,
-  ),
-);
-assert.ok(homepage.includes('class="section proof-paths" aria-labelledby="proof-paths-title"'));
-assert.ok(homepage.includes("Inspect the loop from product value to repeatable evidence."));
-assert.ok(homepage.includes("What it prevents"));
-assert.ok(homepage.includes("Replayable examples"));
-assert.ok(homepage.includes("Evaluation evidence"));
-assert.ok(homepage.includes('class="section adoption-paths" aria-labelledby="adoption-title"'));
-assert.ok(homepage.includes("Choose the next surface for the work you are doing."));
-assert.ok(homepage.includes("Read the docs"));
-assert.ok(homepage.includes("Review the design-system assets"));
-assert.ok(homepage.includes("Start installation"));
+const homepageProblem = homepageMain.match(/<ol class="family-problem-row">([\s\S]*?)<\/ol>/)?.[1] ?? "";
+assert.equal((homepageProblem.match(/<li>/g) ?? []).length, 3, "one three-item problem row");
+for (const label of ["Internal record labels", "Irrelevant form fields", "Tool names as actions"]) assert.ok(homepageProblem.includes(label));
+for (const condition of ["translate database terms into their own work", "task does not require", "instead of the user’s action"]) assert.ok(homepageProblem.includes(condition), "identify the condition that makes a pattern unsuitable");
+const homepageWorkflow = homepageMain.match(/<ol class="family-workflow-row">([\s\S]*?)<\/ol>/)?.[1] ?? "";
+assert.equal((homepageWorkflow.match(/<li class="family-workflow-step">/g) ?? []).length, 5, "one five-step workflow");
+assert.equal((homepageWorkflow.match(/class="family-workflow-icon"/g) ?? []).length, 5, "each workflow step has an outline icon");
+for (const label of ["Describe the work", "Correct the premise", "Build the interface", "Try important tasks", "Review the result"]) assert.ok(homepageWorkflow.includes(label));
+const homepageSupport = homepageMain.match(/<div class="homepage-support">([\s\S]*?)<\/div>/)?.[1] ?? "";
+assert.equal((homepageSupport.match(/<p>/g) ?? []).length, 1, "keep only the non-redundant responsibility sentence");
+assert.ok(homepageWorkflow.includes("Correct the agent’s task assumptions."));
+assert.ok(homepageWorkflow.includes("Your agent creates or revises the interface."));
+assert.ok(homepageSupport.includes("The builder owns the product decisions."));
+assert.doesNotMatch(homepageMain, /evaluation-panel|homepage-failure|homepage-artifact-inspector|proof-paths|adoption-paths/);
 assert.ok(homepage.includes('href="/docs/"'));
-assert.ok(homepage.includes('href="/design-system/"'));
-assert.ok(homepage.includes('href="/install"'));
 assert.equal(
   fs.existsSync(path.join(tempDir, "releases", "visual-composition", "index.html")),
   false,
@@ -1806,7 +1781,7 @@ assert.equal(siteCss.includes("text-decoration-line: underline;"), false);
 assert.equal(homepageMain.includes("Prompt"), false);
 assert.equal(homepageMain.includes("JSON schema"), false);
 assert.equal(homepageMain.includes("prompt template"), false);
-assert.equal(homepageMain.includes("tool call"), false);
+assert.equal(homepageMain.includes("tool call traces"), false);
 assert.equal(homepageMain.includes("resource id"), false);
 assert.equal(homepageMain.includes("API endpoint"), false);
 assert.equal(homepageMain.includes("MCP boundary"), false);
@@ -1870,6 +1845,10 @@ for (const forbidden of OLD_FRAMING) {
 }
 
 const docs = fs.readFileSync(path.join(tempDir, "docs", "index.html"), "utf8");
+for (const href of ["/evals/", "/mcp", "/install", "https://handbooks.surfaces.systems/"]) {
+  assert.ok(docs.includes(`href="${href}"`), `Docs keeps ${href} reachable after compact navigation`);
+}
+
 assertAnalyticsBootstrap(docs, "docs");
 assert.ok(docs.includes('<a href="/docs/" aria-current="page">Docs</a>'));
 assert.ok(docs.includes('<section class="section docs-page">'));
@@ -1897,7 +1876,12 @@ assert.ok(docs.includes("curl -fsSL https://judgmentkit.ai/install | bash -s --
 assert.ok(docs.includes("curl -fsSL https://judgmentkit.ai/install | bash -s -- --client cursor"));
 assert.ok(docs.includes("Install JudgmentKit for your MCP client"));
 assert.ok(docs.includes("Codex is the default client"));
-assert.ok(docs.includes("First 10 Minutes"));
+assert.ok(docs.includes("First use"));
+assert.equal(docs.includes("First 10 Minutes"), false, "first use must not imply a measured setup time");
+assert.ok(docs.includes("Hosted requests leave your machine."));
+assert.ok(docs.includes("Use sanitized inputs for confidential work, or a local or self-hosted endpoint."));
+assert.ok(docs.includes("https://github.com/mikeylong/judgmentkit/blob/main/packages/agent-skill/judgmentkit-hosted-mcp/SKILL.md#authorization-and-privacy"));
+assert.ok(docs.includes("important paths actually checked"));
 assert.ok(docs.includes("examples/ai-native-design-system/first-use.json"));
 assert.ok(docs.includes("examples/ai-native-design-system/canonical-examples.json"));
 assert.ok(docs.includes("next_agent_action"));
@@ -2131,7 +2115,7 @@ const designSystemLlmsFull = fs.readFileSync(
 const designSystemManifest = JSON.parse(
   fs.readFileSync(path.join(tempDir, "design-system", "manifest.json"), "utf8"),
 );
-assert.ok(designSystemTokens.includes('<a href="/design-system/" aria-current="page">Design System</a>'));
+assert.ok(designSystemTokens.includes('<a href="/docs/">Docs</a>'));
 assert.ok(designSystemTokens.includes('<a href="/design-system/tokens/" data-section-rail-link aria-current="page">Tokens</a>'));
 const visualTokenAdapterExport = JSON.parse(
   fs.readFileSync(path.join(tempDir, "design-system", "visual-token-adapter.json"), "utf8"),
@@ -3421,24 +3405,29 @@ const valuePrimaryStory = value
   .split('<section class="section value-page">')[1]
   .split('<section class="value-evidence"')[0];
 assertAnalyticsBootstrap(value, "value");
-assert.ok(value.includes('<a href="/value/" aria-current="page">Value</a>'));
+assert.ok(value.includes('<a href="/#why-judgmentkit">Why JudgmentKit</a>'));
 assert.ok(value.includes('class="site-shell value-shell"'));
 assert.ok(value.includes('class="site-page-header site-page-header-wide value-hero"'));
-assert.ok(value.includes("What JudgmentKit Prevents"));
-assert.ok(value.includes("What JudgmentKit prevents"));
-assert.ok(value.includes("JudgmentKit catches when AI-generated UI turns implementation mechanics into UX"));
+assert.ok(value.includes("<title>Interface checks and repair examples | JudgmentKit</title>"));
+assert.ok(value.includes("Interface checks and repair examples"));
+assert.ok(value.includes("JudgmentKit checks declared interface requirements and returns repair guidance from the submitted evidence"));
 assert.equal(valuePrimaryStory.includes('aria-label="Value page actions"'), false);
 assert.equal(valuePrimaryStory.includes('class="hero-actions"'), false);
 assert.equal(valuePrimaryStory.includes("Install JudgmentKit"), false);
 assert.equal(valuePrimaryStory.includes("Review examples"), false);
 assert.ok(value.includes("Implementation language leak"));
-assert.ok(value.includes("Internal objects stop becoming the product surface."));
+assert.ok(value.includes("This example keeps diagnostics secondary."));
 assert.ok(value.includes("Unsafe action boundary"));
-assert.ok(value.includes("Approval work gets a human decision point."));
+assert.ok(value.includes("Make the approval boundary explicit."));
 assert.ok(value.includes("Missing accessibility evidence"));
-assert.ok(value.includes("Claims are not accepted without evidence."));
+assert.ok(value.includes("Required accessibility evidence cannot be omitted."));
 assert.ok(value.includes("Baseline failure"));
-assert.ok(value.includes("JudgmentKit catches"));
+assert.ok(value.includes("JudgmentKit checks"));
+assert.ok(valuePrimaryStory.includes("In this curated refund example"));
+assert.ok(valuePrimaryStory.includes("Curated refund artifacts, shown for comparison."));
+assert.ok(valuePrimaryStory.includes("unresolved review status"));
+assert.ok(valuePrimaryStory.includes("The agent owns repairs, resubmission, and attempt tracking"));
+assert.doesNotMatch(valuePrimaryStory, /What JudgmentKit prevents|before the work ships|A raw generation pass tends to/);
 assert.ok(value.includes("Repaired outcome"));
 assert.ok(value.includes("/examples/model-ui/refund-system-map/screenshots/deterministic-no-judgmentkit.png"));
 assert.ok(value.includes("/examples/model-ui/refund-system-map/screenshots/deterministic-with-judgmentkit.png"));
@@ -3479,6 +3468,11 @@ assert.ok(
   "value finding cards must use the appearance-aware soft-surface token",
 );
 assertValueAppearanceContract(value, siteCss);
+assert.throws(
+  () => assertValueAppearanceContract(value, siteCss.replace("--soft-surface: #24282b;", "--soft-surface: #ffffff;")),
+  /website CSS dark appearance root should include --soft-surface: #24282b;/,
+  "production appearance verification must reject a stale scoped website dark surface",
+);
 assert.throws(
   () =>
     assertValueAppearanceContract(
@@ -4321,6 +4315,16 @@ assert.equal(versionedSocialThumbnail.readUInt32BE(16), 1200);
 assert.equal(versionedSocialThumbnail.readUInt32BE(20), 630);
 assert.deepEqual(versionedSocialThumbnail, socialThumbnail);
 const homepageHeroArt = fs.readFileSync(path.join(tempDir, "assets", "judgment-lens-hero.webp"));
+const homepageScene = fs.readFileSync(path.join(tempDir, "assets", "judgment-lens-environment-v2.webp"));
+assert.deepEqual(homepageScene, fs.readFileSync(new URL("../site/assets/judgment-lens-environment-v2.webp", import.meta.url)), "the full-width scene is copied without modification");
+const homepageArtProvenance = JSON.parse(fs.readFileSync(new URL("../docs/site-homepage-art-provenance.json", import.meta.url), "utf8"));
+assert.equal(crypto.createHash("sha256").update(homepageScene).digest("hex"), homepageArtProvenance.sha256);
+assert.equal(homepageScene.length, homepageArtProvenance.bytes);
+assert.ok(homepageScene.length < 250_000, "the wide scene stays within the existing hero asset budget");
+assert.deepEqual(homepageArtProvenance.dimensions, [1983, 793]);
+assert.equal(crypto.createHash("sha256").update(fs.readFileSync(new URL("../specs/website-family-layout.md", import.meta.url))).digest("hex"), homepageArtProvenance.sharedLayoutContract.sha256);
+assert.ok(fs.readFileSync(new URL("../specs/site-homepage-copy.md", import.meta.url), "utf8").includes("VISION.md:17"), "homepage claims have project-local provenance");
+assert.ok(fs.readFileSync(new URL("../specs/site-homepage-copy.md", import.meta.url), "utf8").includes("website-family-copy.md"));
 const homepageHeroArtSource = fs.readFileSync(
   new URL("../site/assets/judgment-lens-hero.webp", import.meta.url),
 );