diff --git a/apps/web/package.json b/apps/web/package.json
index 8f5f460a..81446c82 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -17,9 +17,12 @@
   "dependencies": {
     "@gonext/blocks-core": "workspace:*",
     "@gonext/blocks-sdk": "workspace:*",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
     "next": "^15.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {
     "@gonext/test-config": "workspace:*",
@@ -29,9 +32,12 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitest/coverage-v8": "^1.6.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-next": "^15.0.0",
     "jsdom": "^24.0.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.6.0",
     "vitest": "^1.6.0"
   }
diff --git a/apps/web/postcss.config.mjs b/apps/web/postcss.config.mjs
new file mode 100644
index 00000000..1314e4a5
--- /dev/null
+++ b/apps/web/postcss.config.mjs
@@ -0,0 +1,16 @@
+/**
+ * PostCSS config — required for Next.js to pick up Tailwind v3.
+ *
+ * Next.js auto-detects `postcss.config.{js,mjs,cjs}` at the app root
+ * and runs the listed plugins over every imported `.css` file (we
+ * import `./globals.css` from the root layout). Without this file
+ * Next would fall through to its default postcss preset and silently
+ * skip the Tailwind processing pass, so the `@tailwind base/components/utilities`
+ * directives at the top of globals.css would never expand.
+ */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/web/src/app/PublicShell.test.tsx b/apps/web/src/app/PublicShell.test.tsx
index e77d12a8..47f6347a 100644
--- a/apps/web/src/app/PublicShell.test.tsx
+++ b/apps/web/src/app/PublicShell.test.tsx
@@ -16,6 +16,7 @@ describe('PublicShell', () => {
         bodyHtml="<header>H</header><main>M</main><footer>F</footer>"
         cssCustomProperties=":root{--x:1}"
         templateBasename="single.html"
+        withChrome={false}
       />,
     );
     expect(container.querySelector('header')).not.toBeNull();
@@ -29,6 +30,7 @@ describe('PublicShell', () => {
         bodyHtml=""
         cssCustomProperties=":root{--y:2}"
         templateBasename="index.html"
+        withChrome={false}
       />,
     );
     const style = container.querySelector('style[data-gn-theme]');
@@ -41,9 +43,47 @@ describe('PublicShell', () => {
         bodyHtml="<p>hi</p>"
         cssCustomProperties=""
         templateBasename="archive-book.tsx"
+        withChrome={false}
       />,
     );
     const site = container.querySelector('.gn-site');
     expect(site?.getAttribute('data-gn-template')).toBe('archive-book.tsx');
   });
+
+  it('renders the brand chrome (nav + footer) by default', () => {
+    const { container } = render(
+      <PublicShell
+        bodyHtml="<p>themed body</p>"
+        cssCustomProperties=""
+        templateBasename="single.html"
+      />,
+    );
+    // The marketing nav uses a sticky pill on the forest surface;
+    // checking for the aria-label keeps the assertion forward-
+    // compatible with class-name changes.
+    expect(
+      container.querySelector('nav[aria-label="Primary"]'),
+    ).not.toBeNull();
+    // The footer is a real <footer> with the brand wordmark.
+    expect(container.querySelector('footer')).not.toBeNull();
+    // The themed body is still injected verbatim within the chrome.
+    expect(container.querySelector('.gn-site')?.textContent).toContain(
+      'themed body',
+    );
+  });
+
+  it('renders children inside the chrome, after the themed body', () => {
+    const { container } = render(
+      <PublicShell
+        bodyHtml="<p>post</p>"
+        cssCustomProperties=""
+        templateBasename="single.html"
+      >
+        <aside data-testid="comments">comments</aside>
+      </PublicShell>,
+    );
+    const slot = container.querySelector('[data-testid=comments]');
+    expect(slot).not.toBeNull();
+    expect(slot?.textContent).toBe('comments');
+  });
 });
diff --git a/apps/web/src/app/PublicShell.tsx b/apps/web/src/app/PublicShell.tsx
index bd68cb01..4170b85f 100644
--- a/apps/web/src/app/PublicShell.tsx
+++ b/apps/web/src/app/PublicShell.tsx
@@ -2,26 +2,42 @@
  * PublicShell — the React envelope that turns a `RenderResult` into a
  * paint-ready node.
  *
- * Why a component (vs. emitting raw HTML from the route): React's
- * `dangerouslySetInnerHTML` is the one supported escape hatch for
- * server-rendered HTML in App Router. Wrapping it in a component
- * keeps the route handlers small and lets us snapshot the structure
- * from tests.
+ * Two responsibilities:
  *
- * The two `dangerouslySetInnerHTML` calls are intentional:
+ *  1. Inject the trusted `bodyHtml` (theme header + main + footer)
+ *     verbatim via `dangerouslySetInnerHTML`. The Go-side block walker
+ *     escapes user input on the way in, so the strings reaching this
+ *     boundary are safe by construction. Wrapping the injection in a
+ *     React component keeps the route handlers small and lets us
+ *     snapshot the structure from tests.
+ *  2. Wrap the themed body in the brand site chrome (sticky nav at top,
+ *     forest footer at bottom) when `withChrome` is set. The chrome
+ *     uses the Living-Systems wordmark and the same nav links as the
+ *     marketing landing, so single-post pages and category archives
+ *     keep the brand surface around the theme's content rather than
+ *     dropping the visitor into bare-theme chrome.
  *
- *  - `bodyHtml` is the assembled header + main + footer string. The
- *    main region was produced by our block walker (which HTML-escapes
- *    user input via @gonext/blocks-core's `escapeHtml`). The header /
- *    footer parts came from the Go-side walker over template-part
- *    HTML the theme ships — trusted at install time.
+ *  The "wrap with chrome" mode is opt-in because not every consumer
+ *  wants it — e.g. a future preview iframe will paint a barebones
+ *  shell without the marketing chrome.
  *
- *  - `cssCustomProperties` is the `:root { ... }` block emitted by
- *    the Go-side `EmitCSSCustomProperties`. The function whitelists
- *    token slugs and values during parse, so the output is safe to
- *    drop into a `<style>` element.
+ *  The two `dangerouslySetInnerHTML` calls are intentional:
+ *
+ *   - `bodyHtml` is the assembled header + main + footer string. The
+ *     main region was produced by our block walker (which HTML-escapes
+ *     user input via @gonext/blocks-core's `escapeHtml`). The header /
+ *     footer parts came from the Go-side walker over template-part
+ *     HTML the theme ships — trusted at install time.
+ *
+ *   - `cssCustomProperties` is the `:root { ... }` block emitted by
+ *     the Go-side `EmitCSSCustomProperties`. The function whitelists
+ *     token slugs and values during parse, so the output is safe to
+ *     drop into a `<style>` element.
  */
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+
+import { MarketingFooter } from '@/components/marketing/Footer';
+import { MarketingNav } from '@/components/marketing/Nav';
 
 interface PublicShellProps {
   /** Already-assembled HTML body. Trusted — see file header. */
@@ -30,13 +46,39 @@ interface PublicShellProps {
   cssCustomProperties: string;
   /** Template basename — surfaced for e2e assertions. */
   templateBasename: string;
+  /**
+   * Wrap the themed body in the brand site chrome (sticky nav, forest
+   * footer). Defaults to true on routes that render through the public
+   * shell — the legacy "bare" mode is reserved for preview surfaces.
+   */
+  withChrome?: boolean;
+  /**
+   * Optional slot rendered between the themed body and the brand
+   * footer. The catch-all route uses this to drop the comments
+   * thread directly under the post content but inside the chrome.
+   */
+  children?: ReactNode;
 }
 
 export function PublicShell({
   bodyHtml,
   cssCustomProperties,
   templateBasename,
+  withChrome = true,
+  children,
 }: PublicShellProps): ReactElement {
+  const site = (
+    <>
+      <div
+        className="gn-site"
+        data-gn-template={templateBasename}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: bodyHtml }}
+      />
+      {children}
+    </>
+  );
+
   return (
     <>
       {/* Theme tokens. The Go side already brace-validated the CSS. */}
@@ -52,12 +94,15 @@ export function PublicShell({
         content={templateBasename}
         data-gn-template={templateBasename}
       />
-      <div
-        className="gn-site"
-        data-gn-template={templateBasename}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: bodyHtml }}
-      />
+      {withChrome ? (
+        <div className="min-h-screen bg-paper text-ink">
+          <MarketingNav />
+          <main>{site}</main>
+          <MarketingFooter />
+        </div>
+      ) : (
+        site
+      )}
     </>
   );
 }
diff --git a/apps/web/src/app/[...slug]/page.tsx b/apps/web/src/app/[...slug]/page.tsx
index 46d7ecae..398576a6 100644
--- a/apps/web/src/app/[...slug]/page.tsx
+++ b/apps/web/src/app/[...slug]/page.tsx
@@ -197,13 +197,12 @@ export default async function CatchAllSlugPage(
   }
 
   return (
-    <>
-      <PublicShell
-        bodyHtml={result.html}
-        cssCustomProperties={result.css}
-        templateBasename={result.templateBasename}
-      />
+    <PublicShell
+      bodyHtml={result.html}
+      cssCustomProperties={result.css}
+      templateBasename={result.templateBasename}
+    >
       {commentsBlock}
-    </>
+    </PublicShell>
   );
 }
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 7496d2ac..5062224b 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1,94 +1,406 @@
-/**
- * Baseline public-site stylesheet.
+/*
+ * @gonext/web — global styles.
  *
- * Intentionally tiny — the theme owns visual identity through the
- * design-token surface emitted as `--wp-preset--*` CSS custom
- * properties. This file just maps a few of those tokens onto bare
- * elements so a freshly-installed site is presentable before the
- * author touches anything.
+ * Loads the brand design tokens (cream-paper / forest-ink / emerald +
+ * lavender), Tailwind v3 directives, and a small set of baseline
+ * selectors that map the tokens onto bare elements so a freshly-
+ * installed theme is presentable before the author touches anything.
  *
- * Theme authors who want to override should ship a `style.css` in
- * their theme package; the renderer will surface it via the
- * resolver's existing path.
+ * The theme owns visual identity through the design-token surface
+ * emitted as `--wp-preset--*` CSS custom properties — that part of the
+ * cascade is unchanged. What this file adds on top is the brand
+ * surface (Living-Systems palette + Archivo / Geist / Geist Mono /
+ * Instrument Serif typography) so the public landing page, the
+ * single-post layout, and the site chrome read on-brand even before a
+ * theme is installed.
  */
 
-:root {
-  --wp-preset--color--ink: #0f172a;
-  --wp-preset--color--paper: #ffffff;
-  --wp-preset--color--muted: #64748b;
-  --wp-preset--color--accent: #2563eb;
-  --wp-preset--font-family--sans: system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
-  --wp-preset--font-family--serif: Iowan Old Style, Apple Garamond, Baskerville, Georgia, serif;
-  --wp-preset--font-size--md: 1rem;
-  --wp-preset--layout--content: 720px;
-}
+@import './../styles/tokens.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 * {
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-sans);
+  font-size: var(--t-base);
+  line-height: var(--lh-normal);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
-body {
-  font-family: var(--wp-preset--font-family--serif);
-  font-size: var(--wp-preset--font-size--md);
-  line-height: 1.6;
-  color: var(--wp-preset--color--ink);
-  background: var(--wp-preset--color--paper);
+/* ---------------------------------------------------------------------------
+ * Legacy --wp-preset aliases for theme-unaware fallback paths.
+ *
+ * Some renderer fallback HTML (the `fallbackSingularMain`,
+ * `fallbackArchiveMain`, `fallback404Main` strings in `src/lib/render.ts`)
+ * still reaches for `--wp-preset--*` variables when a theme hasn't been
+ * resolved yet. Re-point those to the brand tokens so the unbranded
+ * cascade still looks Living-Systems.
+ * ------------------------------------------------------------------------- */
+:root {
+  --wp-preset--color--ink: var(--ink);
+  --wp-preset--color--paper: var(--paper);
+  --wp-preset--color--muted: var(--fg-muted);
+  --wp-preset--color--accent: var(--emerald-deep);
+  --wp-preset--font-family--sans: var(--font-sans);
+  --wp-preset--font-family--serif: var(--font-serif);
+  --wp-preset--font-size--md: var(--t-md);
+  --wp-preset--layout--content: 720px;
+  --wp-preset--layout--wide: 1180px;
 }
 
+/* ---------------------------------------------------------------------------
+ * Body type & links — minimal baseline for un-themed fallback HTML.
+ * The branded landing page + post layout own most of the cascade through
+ * Tailwind utilities composed in their components.
+ * ------------------------------------------------------------------------- */
 a {
-  color: var(--wp-preset--color--accent);
+  color: var(--emerald-deep);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
 }
 
+/* ---------------------------------------------------------------------------
+ * Brand wordmark — composite "Go" (Archivo 800) + italic "Next"
+ * (Instrument Serif italic). The italic-accent rule from the handoff
+ * lives in the React components; this is the bare-DOM helper used by
+ * the renderer's fallback header / footer.
+ * ------------------------------------------------------------------------- */
+.wordmark {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 1px;
+  line-height: 1;
+  letter-spacing: var(--track-tight);
+}
+.wordmark .wm-go {
+  font-family: var(--font-display);
+  font-weight: 800;
+  color: var(--ink);
+}
+.wordmark .wm-next {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-style: italic;
+  color: var(--ink);
+}
+.wordmark.on-dark .wm-go,
+.wordmark.on-dark .wm-next {
+  color: var(--fg-on-forest);
+}
+
+/* ---------------------------------------------------------------------------
+ * Theme-shell fallback selectors.
+ *
+ * `.gn-site-main`, `.gn-site-header`, `.gn-site-footer`, `.gn-post-meta`,
+ * `.gn-archive-list`, `.gn-404` are emitted by `src/lib/render.ts`
+ * when the renderer cannot reach the Go-side template endpoint. They
+ * point back at the brand tokens so the fallback paths still feel
+ * Living-Systems instead of bare-browser.
+ * ------------------------------------------------------------------------- */
 .gn-site-main {
   max-width: var(--wp-preset--layout--content);
   margin: 0 auto;
-  padding: 2rem 1rem;
+  padding: var(--s-10) var(--s-5);
 }
 
 .gn-site-header,
 .gn-site-footer {
-  max-width: var(--wp-preset--layout--wide, 1180px);
+  max-width: var(--wp-preset--layout--wide);
   margin: 0 auto;
-  padding: 1rem;
+  padding: var(--s-4);
 }
 
 .gn-site-footer {
-  border-top: 1px solid color-mix(in srgb, var(--wp-preset--color--muted) 30%, transparent);
-  margin-top: 3rem;
-  color: var(--wp-preset--color--muted);
-  font-size: 0.875rem;
+  border-top: 1px solid var(--border);
+  margin-top: var(--s-8);
+  color: var(--fg-muted);
+  font-size: var(--t-sm);
+}
+
+/* ---------------------------------------------------------------------------
+ * Single-post layout — Living-Systems editorial scale.
+ *
+ * The catch-all route hands a themed body to PublicShell; when the
+ * theme has no override the renderer's `fallbackSingularMain` emits
+ * the markup below. The CSS lives here so the same selectors stay
+ * predictable across themes that opt in by class name.
+ *
+ * Type rules per the handoff:
+ *  - Title is Archivo 800 at the page scale (clamp 40px → 64px).
+ *    The italic-accent rule inside the title fires for any <em>.
+ *  - Meta row is Geist Mono 12px, fg-subtle, uppercased eyebrow.
+ *  - Body is Geist 17px with line-height 1.65 — generous for long
+ *    editorial reads. Paragraph spacing scales from --s-4.
+ *  - Optional drop-cap on the first paragraph: Archivo 800, 4-line
+ *    initial, emerald-deep colour, sits on `.gn-post-content > p:first-of-type`.
+ * ------------------------------------------------------------------------- */
+.gn-post {
+  max-width: 720px;
+  margin: 0 auto;
 }
 
 .gn-post-meta {
-  color: var(--wp-preset--color--muted);
-  font-size: 0.875rem;
-  margin-bottom: 1.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-3);
+  margin-bottom: var(--s-5);
+  font-family: var(--font-mono);
+  font-size: var(--t-xs);
+  color: var(--fg-subtle);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
 .gn-post-meta > * + *::before {
-  content: ' · ';
-  margin: 0 0.25rem;
+  content: '·';
+  margin-right: var(--s-3);
+  color: var(--emerald-deep);
+}
+
+.gn-post-meta__author {
+  color: var(--fg-muted);
+}
+
+.gn-post-title {
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(40px, 5.5vw, 64px);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--track-tight);
+  color: var(--ink);
+  margin: 0 0 var(--s-7);
+  text-wrap: balance;
+}
+
+.gn-post-title em {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-style: italic;
+  font-size: 1.05em;
+  color: var(--emerald-deep);
+  letter-spacing: -0.01em;
+}
+
+.gn-post-content {
+  font-family: var(--font-sans);
+  font-size: 17px;
+  line-height: 1.65;
+  color: var(--ink-soft);
+}
+
+.gn-post-content > * + * {
+  margin-top: var(--s-4);
+}
+
+.gn-post-content > p {
+  text-wrap: pretty;
+}
+
+.gn-post-content h2 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: var(--t-3xl);
+  line-height: var(--lh-snug);
+  letter-spacing: var(--track-tight);
+  color: var(--ink);
+  margin-top: var(--s-8);
+  margin-bottom: var(--s-3);
+}
+
+.gn-post-content h2 em {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-style: italic;
+  color: var(--emerald-deep);
+}
+
+.gn-post-content h3 {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: var(--t-xl);
+  line-height: var(--lh-snug);
+  color: var(--ink);
+  margin-top: var(--s-6);
+  margin-bottom: var(--s-2);
+}
+
+.gn-post-content a {
+  color: var(--emerald-deep);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  text-decoration-thickness: 1px;
+}
+
+.gn-post-content a:hover {
+  text-decoration-thickness: 2px;
+}
+
+.gn-post-content blockquote {
+  margin: var(--s-6) 0;
+  padding: var(--s-4) var(--s-6);
+  border-left: 3px solid var(--emerald);
+  background: var(--paper-2);
+  font-family: var(--font-serif);
+  font-size: var(--t-xl);
+  font-style: italic;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ink);
+  border-radius: 0 var(--r-md) var(--r-md) 0;
+}
+
+.gn-post-content code {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+  padding: 0.1em 0.3em;
+  background: var(--paper-3);
+  border-radius: var(--r-xs);
+}
+
+.gn-post-content pre {
+  font-family: var(--font-mono);
+  font-size: var(--t-sm);
+  padding: var(--s-5);
+  background: var(--forest);
+  color: var(--fg-on-forest);
+  border-radius: var(--r-md);
+  overflow-x: auto;
+}
+
+.gn-post-content pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+
+.gn-post-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--r-lg);
+}
+
+/* Optional drop-cap on the first paragraph — opt-in via class. */
+.gn-post-content.has-dropcap > p:first-of-type::first-letter {
+  float: left;
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: 4.2em;
+  line-height: 0.85;
+  margin: 0.05em 0.1em 0 0;
+  color: var(--emerald-deep);
 }
 
 .gn-archive-list {
   list-style: none;
   padding: 0;
+  margin: 0;
+  max-width: var(--wp-preset--layout--content);
 }
 
-.gn-archive-item + .gn-archive-item {
-  margin-top: 2rem;
+.gn-archive-item {
+  padding: var(--s-6) 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.gn-archive-item:last-child {
+  border-bottom: 0;
+}
+
+.gn-archive-heading {
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(32px, 4vw, 44px);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--track-tight);
+  color: var(--ink);
+  margin: 0 0 var(--s-7);
+}
+
+.gn-archive-heading em {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-style: italic;
+  color: var(--emerald-deep);
 }
 
 .gn-archive-title {
-  margin: 0;
+  margin: 0 0 var(--s-2);
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: var(--t-xl);
+  line-height: var(--lh-snug);
+  letter-spacing: var(--track-tight);
+}
+
+.gn-archive-title a {
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.gn-archive-title a:hover {
+  color: var(--emerald-deep);
+}
+
+.gn-archive-excerpt {
+  margin-top: var(--s-2);
+  color: var(--fg-muted);
+  font-size: var(--t-md);
+  line-height: var(--lh-normal);
 }
 
 .gn-404 {
   text-align: center;
-  padding: 4rem 0;
+  padding: var(--s-10) var(--s-4);
+}
+
+.gn-404__eyebrow {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: var(--t-xs);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--danger);
+  margin-bottom: var(--s-3);
+}
+
+.gn-404 h1 {
+  font-family: var(--font-display);
+  font-weight: 800;
+  font-size: clamp(48px, 6vw, 96px);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--track-tight);
+  color: var(--ink);
+  margin: 0 0 var(--s-4);
+}
+
+.gn-404 h1 em {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-style: italic;
+  color: var(--emerald-deep);
+}
+
+.gn-404 p {
+  margin: 0 0 var(--s-4);
+  color: var(--fg-muted);
+}
+
+.gn-404 a {
+  color: var(--emerald-deep);
+  text-decoration: none;
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 7f73d2a5..17221df3 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -14,6 +14,13 @@
  *      `<style data-gn-theme>` tag the page components render — this
  *      lets us swap themes without invalidating the layout's cached
  *      HTML envelope.
+ *   4. The four brand font families self-hosted via `next/font/google`.
+ *      The CSS variables (--font-display, --font-sans, --font-mono,
+ *      --font-serif) land on the <html> element so both Tailwind
+ *      utilities and the raw `tokens.css` selectors resolve them at
+ *      runtime. Mirrors apps/admin/src/app/layout.tsx so the brand
+ *      surface stays in lock-step across the admin and the public
+ *      marketing site.
  *
  * Robots default: `index, follow`. Production sites typically gate
  * with a reverse-proxy header for staging/preview environments; this
@@ -21,14 +28,53 @@
  */
 import type { Metadata } from 'next';
 import type { ReactElement, ReactNode } from 'react';
+import {
+  Archivo,
+  Geist,
+  Geist_Mono,
+  Instrument_Serif,
+} from 'next/font/google';
 import './globals.css';
 
+const archivo = Archivo({
+  subsets: ['latin'],
+  weight: ['500', '600', '700', '800', '900'],
+  variable: '--font-display',
+  display: 'swap',
+});
+
+const geist = Geist({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-sans',
+  display: 'swap',
+});
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  weight: ['400', '500'],
+  variable: '--font-mono',
+  display: 'swap',
+});
+
+const instrumentSerif = Instrument_Serif({
+  subsets: ['latin'],
+  weight: ['400'],
+  style: ['normal', 'italic'],
+  variable: '--font-serif',
+  display: 'swap',
+});
+
 export const metadata: Metadata = {
   title: {
-    default: 'GoNext',
+    default: 'GoNext — sites that live and grow',
     template: '%s · GoNext',
   },
-  description: 'A site powered by GoNext.',
+  description:
+    'An all-in-one alternative to WordPress — content, hosting, and commerce in one product. Built on Go and Next.js.',
+  icons: {
+    icon: '/favicon.svg',
+  },
   robots: {
     index: true,
     follow: true,
@@ -40,8 +86,15 @@ export default function RootLayout({
 }: {
   children: ReactNode;
 }): ReactElement {
+  const fontVariables = [
+    archivo.variable,
+    geist.variable,
+    geistMono.variable,
+    instrumentSerif.variable,
+  ].join(' ');
+
   return (
-    <html lang="en">
+    <html lang="en" className={fontVariables}>
       <body>{children}</body>
     </html>
   );
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 4603e8d7..7db37396 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,13 +1,22 @@
 /**
  * Homepage handler — `/` route.
  *
- * Renders the blog-home (latest posts) feed by default. Once site
- * settings let an admin pin a static front page, the handler reads
- * the `core.reading.show_on_front` setting and dispatches between
- * `renderArchive({ type: 'home' })` and
- * `renderSingular(<frontPageSlug>)` accordingly. Until that wiring
- * lands the default behaviour is the same as classic WP: latest
- * posts.
+ * Previously this dispatched to `renderArchive` so the GoNext root
+ * route looked like a classic WordPress blog-home (a vertical list of
+ * latest posts). The Living-Systems handoff redefines the public
+ * landing as the **marketing site**: a cream hero with a massive
+ * "Sites that *live* and grow." headline, a feature grid, a forest
+ * "alive band" full of stats, and a closing CTA.
+ *
+ * The original archive behavior is preserved as a *section* on the
+ * marketing page — `<MarketingRecentStories>` reads from `fetchArchive`
+ * and surfaces the most recent posts as cards. So nothing about the
+ * data flow changes; the visual envelope does.
+ *
+ * Once site settings let an admin pin a static front page, this
+ * handler will dispatch between `renderSingular(<frontPageSlug>)` and
+ * the marketing page based on `core.reading.show_on_front`. Until that
+ * wiring lands the default behaviour is the brand landing.
  *
  * The catch-all slug route is owned by `[...slug]/page.tsx`; Next
  * routes `/` here because root-level `page.tsx` wins over the
@@ -15,8 +24,16 @@
  */
 import { cookies } from 'next/headers';
 import type { ReactElement } from 'react';
-import { renderArchive } from '@/lib/render';
-import { PublicShell } from './PublicShell';
+import { fetchArchive } from '@/lib/api';
+import { isAuthenticatedCookie } from '@/lib/render';
+import { MarketingNav } from '@/components/marketing/Nav';
+import { MarketingHero } from '@/components/marketing/Hero';
+import { MarketingLogos } from '@/components/marketing/LogoMarquee';
+import { MarketingFeatures } from '@/components/marketing/Features';
+import { MarketingAliveBand } from '@/components/marketing/AliveBand';
+import { MarketingRecentStories } from '@/components/marketing/RecentStories';
+import { MarketingCtaBlock } from '@/components/marketing/CtaBlock';
+import { MarketingFooter } from '@/components/marketing/Footer';
 
 export const dynamic = 'force-dynamic';
 
@@ -34,16 +51,27 @@ async function readCookieHeader(): Promise<string> {
 
 export default async function HomePage(): Promise<ReactElement> {
   const cookie = await readCookieHeader();
-  const result = await renderArchive({
-    cookie,
-    type: 'home',
-    heading: 'Latest posts',
-  });
+  const revalidate = isAuthenticatedCookie(cookie) ? undefined : 300;
+  // Fetch the most recent posts so the "Recent stories" section feels
+  // real even on a freshly-installed site. We bound to 6 because the
+  // section paints a 3-column grid two rows deep.
+  const posts = await fetchArchive(
+    { limit: 6 },
+    { revalidate, cookie },
+  );
+
   return (
-    <PublicShell
-      bodyHtml={result.html}
-      cssCustomProperties={result.css}
-      templateBasename={result.templateBasename}
-    />
+    <div className="min-h-screen bg-paper text-ink">
+      <MarketingNav />
+      <main>
+        <MarketingHero />
+        <MarketingLogos />
+        <MarketingFeatures />
+        <MarketingAliveBand />
+        <MarketingRecentStories posts={posts} />
+        <MarketingCtaBlock />
+      </main>
+      <MarketingFooter />
+    </div>
   );
 }
diff --git a/apps/web/src/components/brand/Headline.test.tsx b/apps/web/src/components/brand/Headline.test.tsx
new file mode 100644
index 00000000..c0861622
--- /dev/null
+++ b/apps/web/src/components/brand/Headline.test.tsx
@@ -0,0 +1,53 @@
+/**
+ * Headline brand-primitive tests.
+ *
+ * Mirrors apps/admin/src/components/ui/headline.test.tsx — we assert
+ * the same italic-accent contract on the public-site surface so the
+ * two implementations stay in lock-step. The component is a thin
+ * wrapper over Archivo + Instrument Serif, so the tests focus on
+ * structural concerns (tag, attributes) rather than computed styles.
+ */
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { Headline } from './Headline';
+
+describe('<Headline>', () => {
+  it('renders as h1 by default', () => {
+    const { container } = render(<Headline>Sites</Headline>);
+    expect(container.querySelector('h1')).not.toBeNull();
+  });
+
+  it('honors the `as` prop for semantic nesting', () => {
+    const { container } = render(<Headline as="h2">Section</Headline>);
+    expect(container.querySelector('h2')).not.toBeNull();
+    expect(container.querySelector('h1')).toBeNull();
+  });
+
+  it('preserves an inner <em> for the italic-accent rule', () => {
+    const { container } = render(
+      <Headline>
+        Sites that <em>live</em> and grow.
+      </Headline>,
+    );
+    expect(container.querySelector('em')?.textContent).toBe('live');
+  });
+
+  it('stamps data-surface="forest" when the prop is set', () => {
+    const { container } = render(
+      <Headline surface="forest">
+        Forest <em>headline</em>
+      </Headline>,
+    );
+    expect(
+      container.querySelector('[data-surface="forest"]'),
+    ).not.toBeNull();
+  });
+
+  it('omits data-surface when cream (default)', () => {
+    const { container } = render(<Headline>Cream</Headline>);
+    expect(
+      container.querySelector('[data-surface="forest"]'),
+    ).toBeNull();
+  });
+});
diff --git a/apps/web/src/components/brand/Headline.tsx b/apps/web/src/components/brand/Headline.tsx
new file mode 100644
index 00000000..88895879
--- /dev/null
+++ b/apps/web/src/components/brand/Headline.tsx
@@ -0,0 +1,92 @@
+/**
+ * Headline — display-type primitive with italic-accent rule.
+ *
+ * The single most important brand primitive: every page heading in
+ * GoNext composes Archivo's heavy grotesque with Instrument Serif's
+ * editorial italic for the emphasized word(s). The handoff calls this
+ * "the signature move" — see docs/design/HANDOFF.md ("The italic
+ * accent rule") and the .display / h1 / h2 rules in
+ * docs/design/colors_and_type.css.
+ *
+ * Mirrors the admin's apps/admin/src/components/ui/headline.tsx so the
+ * same component contract is honored on both surfaces — admin pages
+ * and the public marketing site use the same scale, the same colors,
+ * and the same data-surface=forest swap.
+ *
+ * Composition rule:
+ *   • Outer h1/h2/h3/h4 → Archivo, font-weight 800, tight tracking.
+ *   • Inner <em> → Instrument Serif italic, 400, scaled +5%, colored
+ *     emerald-deep on cream and emerald-bright on forest surfaces.
+ *
+ * Use sparingly: one italic word per heading, max two. Emphasis, not
+ * decoration.
+ */
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4';
+
+type Size = 'display' | 'page' | 'section' | 'sub';
+
+const sizeClasses: Record<Size, string> = {
+  display: 'text-[clamp(44px,6.5vw,96px)] leading-[1.0]',
+  page: 'text-[clamp(40px,5.5vw,64px)] leading-[1.0]',
+  section: 'text-[44px] leading-[1.05]',
+  sub: 'text-[32px] leading-[1.15]',
+};
+
+export interface HeadlineProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'> {
+  as?: HeadingTag;
+  size?: Size;
+  /**
+   * Cream is default (italic accent uses --emerald-deep). On forest
+   * surfaces both the headline text and the italic accent retune —
+   * setting this prop sets data-surface="forest" directly on the
+   * element so the cascade catches it. The same swap fires
+   * automatically when an ancestor carries data-surface="forest".
+   */
+  surface?: 'cream' | 'forest';
+}
+
+export const Headline = React.forwardRef<HTMLHeadingElement, HeadlineProps>(
+  (
+    {
+      className,
+      as = 'h1',
+      size = 'page',
+      surface,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Tag = as;
+    const base = cn(
+      'font-display font-extrabold tracking-tight m-0 text-ink',
+      // Italic-accent rule.
+      '[&_em]:font-serif [&_em]:italic [&_em]:font-normal',
+      '[&_em]:text-[1.05em] [&_em]:tracking-[-0.01em]',
+      '[&_em]:text-emerald-deep',
+      // Forest swap (prop OR ancestor).
+      'data-[surface=forest]:text-fg-on-forest',
+      '[[data-surface=forest]_&]:text-fg-on-forest',
+      'data-[surface=forest]:[&_em]:text-emerald-bright',
+      '[[data-surface=forest]_&]:[&_em]:text-emerald-bright',
+    );
+    const surfaceAttr =
+      surface === 'forest' ? { 'data-surface': 'forest' } : {};
+    return (
+      <Tag
+        ref={ref}
+        {...surfaceAttr}
+        className={cn(base, sizeClasses[size], className)}
+        {...props}
+      >
+        {children}
+      </Tag>
+    );
+  },
+);
+Headline.displayName = 'Headline';
diff --git a/apps/web/src/components/brand/Wordmark.test.tsx b/apps/web/src/components/brand/Wordmark.test.tsx
new file mode 100644
index 00000000..3ce46721
--- /dev/null
+++ b/apps/web/src/components/brand/Wordmark.test.tsx
@@ -0,0 +1,31 @@
+/**
+ * Wordmark — snapshot of the composite "Go" + italic "Next" mark.
+ */
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { Wordmark } from './Wordmark';
+
+describe('<Wordmark>', () => {
+  it('renders both halves of the composite mark', () => {
+    const { container } = render(<Wordmark />);
+    const go = container.querySelector('.wm-go');
+    const next = container.querySelector('.wm-next');
+    expect(go?.textContent).toBe('Go');
+    expect(next?.textContent).toBe('Next');
+  });
+
+  it('exposes an aria-label so the composite reads as "GoNext" to AT', () => {
+    const { container } = render(<Wordmark />);
+    expect(container.firstChild).toHaveAttribute('aria-label', 'GoNext');
+  });
+
+  it('applies the forest swap when surface="forest"', () => {
+    const { container } = render(<Wordmark surface="forest" />);
+    const next = container.querySelector('.wm-next');
+    // On forest, the italic half lifts to emerald-bright — surfaced
+    // through a Tailwind class. We don't compute styles in jsdom, so
+    // we just assert the class is present.
+    expect(next?.className).toContain('text-emerald-bright');
+  });
+});
diff --git a/apps/web/src/components/brand/Wordmark.tsx b/apps/web/src/components/brand/Wordmark.tsx
new file mode 100644
index 00000000..75bd278e
--- /dev/null
+++ b/apps/web/src/components/brand/Wordmark.tsx
@@ -0,0 +1,70 @@
+/**
+ * Wordmark — the composite "Go" (Archivo 800) + italic "Next"
+ * (Instrument Serif italic). Same baseline, no space between, tracked
+ * tight. Mirrors the brand-foot pattern in
+ * docs/design/ui_kits/marketing/index.html and the wordmark helper
+ * declared in tokens.css.
+ *
+ * The `surface` prop controls the colour swap on forest backgrounds —
+ * "next" stays cream-paper-ish on cream, and lifts to emerald-bright
+ * inside the dark footer + nav pill where the marketing kit highlights
+ * the italic half of the wordmark.
+ */
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface WordmarkProps {
+  /** Tag — defaults to span. Use <a> when wrapped in a link primitive. */
+  as?: 'span' | 'div';
+  /** Drives the colour swap. Cream is default. */
+  surface?: 'cream' | 'forest';
+  /**
+   * Visual size. The dollar values map back to the marketing-kit
+   * inline styles for nav (17/19), footer (17/20), and big-mark (any).
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
+
+const sizes: Record<NonNullable<WordmarkProps['size']>, string> = {
+  sm: 'text-[15px] [&_.wm-next]:text-[17px]',
+  md: 'text-[17px] [&_.wm-next]:text-[19px]',
+  lg: 'text-[20px] [&_.wm-next]:text-[22px]',
+  xl: 'text-[28px] [&_.wm-next]:text-[31px]',
+};
+
+export function Wordmark({
+  as: Tag = 'span',
+  surface = 'cream',
+  size = 'md',
+  className,
+}: WordmarkProps): React.ReactElement {
+  return (
+    <Tag
+      className={cn(
+        'inline-flex items-baseline gap-[1px] leading-none tracking-tight',
+        sizes[size],
+        className,
+      )}
+      aria-label="GoNext"
+    >
+      <span
+        className={cn(
+          'wm-go font-display font-extrabold',
+          surface === 'forest' ? 'text-fg-on-forest' : 'text-ink',
+        )}
+      >
+        Go
+      </span>
+      <span
+        className={cn(
+          'wm-next font-serif italic font-normal',
+          surface === 'forest' ? 'text-emerald-bright' : 'text-ink',
+        )}
+      >
+        Next
+      </span>
+    </Tag>
+  );
+}
diff --git a/apps/web/src/components/marketing/AliveBand.tsx b/apps/web/src/components/marketing/AliveBand.tsx
new file mode 100644
index 00000000..e504f72f
--- /dev/null
+++ b/apps/web/src/components/marketing/AliveBand.tsx
@@ -0,0 +1,113 @@
+/**
+ * Alive band — the forest section sitting between the features grid
+ * and the comparison table. Mirrors the kit's `.alive-band`: a wide
+ * dark surface with two radial-gradient glows (emerald top-right,
+ * lavender bottom-left) and four large stats in a 4-column grid.
+ *
+ * Stats use Geist Mono for the unit suffix per the kit, and the
+ * italic-accent rule fires on the dramatic "zero PHP" stat.
+ */
+import type { ReactElement } from 'react';
+
+import { Headline } from '@/components/brand/Headline';
+
+interface StatProps {
+  label: string;
+  /** Value markup — pass `<em>` for the italic-accent rule. */
+  value: ReactElement | string;
+  description: string;
+}
+
+function Stat({ label, value, description }: StatProps): ReactElement {
+  return (
+    <div className="rounded-lg border border-forest-border bg-white/[0.04] p-6">
+      <div className="text-xs font-medium uppercase tracking-[0.1em] text-fg-on-forest-muted">
+        {label}
+      </div>
+      <div className="mt-3 font-display text-5xl font-extrabold leading-none tracking-tight text-fg-on-forest [&_em]:font-serif [&_em]:font-normal [&_em]:italic [&_em]:text-emerald-bright">
+        {value}
+      </div>
+      <p className="mt-2.5 text-xs leading-[1.5] text-fg-on-forest-muted">
+        {description}
+      </p>
+    </div>
+  );
+}
+
+export function MarketingAliveBand(): ReactElement {
+  return (
+    <section
+      data-surface="forest"
+      className="relative overflow-hidden bg-forest py-[120px] text-fg-on-forest"
+    >
+      {/* Emerald glow */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -top-1/2 right-[-10%] size-[800px]"
+        style={{
+          background:
+            'radial-gradient(circle, rgba(16,185,129,0.16) 0%, transparent 60%)',
+        }}
+      />
+      {/* Lavender glow */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -bottom-1/2 left-[-10%] size-[800px]"
+        style={{
+          background:
+            'radial-gradient(circle, rgba(167,139,250,0.10) 0%, transparent 60%)',
+        }}
+      />
+
+      <div className="relative mx-auto max-w-[1240px] px-8">
+        <div className="mx-auto mb-14 max-w-[760px] text-center">
+          <span className="mb-3.5 inline-block text-xs font-medium uppercase tracking-[0.12em] text-emerald-bright">
+            A platform that responds
+          </span>
+          <Headline size="section" className="text-[clamp(40px,5vw,64px)]">
+            The site you ship is the <em>same</em> site that grows.
+          </Headline>
+          <p className="mt-4 text-md leading-[1.55] text-fg-on-forest-muted">
+            Every reader, every order, every search query feeds back.
+            GoNext surfaces what&apos;s working and quietly retires what
+            isn&apos;t.
+          </p>
+        </div>
+
+        <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <Stat
+            label="Median TTFB"
+            value={
+              <>
+                38<em>ms</em>
+              </>
+            }
+            description="Across 24 edge regions. WordPress baseline: ~480ms."
+          />
+          <Stat
+            label="Active sites"
+            value="12,847"
+            description="From solo writers to multi-brand agencies."
+          />
+          <Stat
+            label="Lines of PHP"
+            value={<em>zero</em>}
+            description="Go on the backend, Next.js on the front. Both are good ideas."
+          />
+          <Stat
+            label="Uptime · 12mo"
+            value={
+              <>
+                99.99
+                <em className="text-[0.5em] text-fg-on-forest-muted ml-0.5">
+                  %
+                </em>
+              </>
+            }
+            description="SLA-backed on Studio and above."
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/components/marketing/CtaBlock.tsx b/apps/web/src/components/marketing/CtaBlock.tsx
new file mode 100644
index 00000000..013507f6
--- /dev/null
+++ b/apps/web/src/components/marketing/CtaBlock.tsx
@@ -0,0 +1,40 @@
+/**
+ * Closing CTA — the giant centered headline + two-button row that
+ * caps the marketing page. Mirrors the kit's `.cta-block`.
+ */
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+import type { ReactElement } from 'react';
+
+import { Headline } from '@/components/brand/Headline';
+
+export function MarketingCtaBlock(): ReactElement {
+  return (
+    <section className="py-[120px] text-center">
+      <div className="mx-auto max-w-[1240px] px-8">
+        <Headline size="display" as="h2" className="leading-[0.95]">
+          Ship something that <em>lives</em>.
+        </Headline>
+        <p className="mx-auto mb-8 mt-5 max-w-[540px] text-lg leading-[1.5] text-fg-muted">
+          Spin up a real site in under two minutes. Free, no credit card,
+          your WordPress export is welcome.
+        </p>
+        <div className="inline-flex flex-wrap items-center justify-center gap-2.5">
+          <Link
+            href="/start"
+            className="inline-flex items-center justify-center gap-1.5 rounded-md border border-ink bg-ink px-5 py-3 text-base font-medium text-paper no-underline shadow-xs transition-colors duration-DEFAULT ease-brand hover:border-forest-2 hover:bg-forest-2"
+          >
+            Start a site
+            <ArrowRight className="size-[14px]" aria-hidden />
+          </Link>
+          <Link
+            href="/sales"
+            className="inline-flex items-center justify-center gap-1.5 rounded-md border border-border bg-paper-2 px-5 py-3 text-base font-medium text-ink no-underline shadow-xs transition-colors duration-DEFAULT ease-brand hover:border-border-strong hover:bg-paper-3"
+          >
+            Talk to sales
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/components/marketing/Features.tsx b/apps/web/src/components/marketing/Features.tsx
new file mode 100644
index 00000000..67b3ac46
--- /dev/null
+++ b/apps/web/src/components/marketing/Features.tsx
@@ -0,0 +1,134 @@
+/**
+ * Features grid — the three-column section the kit titles "One product
+ * for everything you used *five* for."
+ *
+ * Each card has a coloured icon plaque (emerald or lavender soft), an
+ * Archivo headline with one italic-accent word, a short description,
+ * and a bulleted feature list. Pixel measurements track the kit:
+ * 28px padding, 14px gap, 40x40 icon wrapper at r-md radius.
+ */
+import {
+  Check,
+  Cloud,
+  FileText,
+  ShoppingBag,
+  type LucideIcon,
+} from 'lucide-react';
+import type { ReactElement } from 'react';
+
+import { Headline } from '@/components/brand/Headline';
+
+interface FeatureProps {
+  icon: LucideIcon;
+  tone: 'emerald' | 'lavender';
+  /** Heading; pass `<em>…</em>` markers inline for the italic accent. */
+  heading: ReactElement;
+  /** Body paragraph. */
+  body: string;
+  /** Three short bullets. */
+  bullets: ReadonlyArray<string>;
+}
+
+function FeatureCard({
+  icon: Icon,
+  tone,
+  heading,
+  body,
+  bullets,
+}: FeatureProps): ReactElement {
+  const iconBg = tone === 'emerald' ? 'bg-emerald-soft' : 'bg-lavender-soft';
+  const iconFg =
+    tone === 'emerald' ? 'text-emerald-deep' : 'text-lavender-deep';
+  return (
+    <article className="flex flex-col gap-3.5 rounded-lg border border-border bg-paper-2 p-7 transition-colors duration-DEFAULT ease-brand hover:border-border-strong">
+      <div
+        className={`flex size-10 items-center justify-center rounded-md ${iconBg}`}
+      >
+        <Icon className={`size-5 ${iconFg}`} aria-hidden />
+      </div>
+      <Headline as="h3" size="sub" className="text-[26px]">
+        {heading}
+      </Headline>
+      <p className="text-sm leading-[1.55] text-fg-muted">{body}</p>
+      <ul className="flex flex-col gap-2 border-t border-border pt-3.5">
+        {bullets.map((b) => (
+          <li
+            key={b}
+            className="flex items-center gap-2 text-sm text-ink-soft"
+          >
+            <Check className={`size-3.5 ${iconFg}`} aria-hidden />
+            {b}
+          </li>
+        ))}
+      </ul>
+    </article>
+  );
+}
+
+export function MarketingFeatures(): ReactElement {
+  return (
+    <section className="py-[120px]">
+      <div className="mx-auto max-w-[1240px] px-8">
+        <div className="mx-auto mb-14 max-w-[760px] text-center">
+          <span className="mb-3.5 inline-block text-xs font-medium uppercase tracking-[0.12em] text-emerald-deep">
+            Built in, not bolted on
+          </span>
+          <Headline size="section" className="text-[clamp(40px,5vw,64px)]">
+            One product for everything you used <em>five</em> for.
+          </Headline>
+          <p className="mt-4 text-md leading-[1.55] text-fg-muted">
+            Content, hosting, commerce, and analytics — woven into a single
+            product. No plugin marketplace required to ship a real site.
+          </p>
+        </div>
+        <div className="grid gap-5 md:grid-cols-3">
+          <FeatureCard
+            icon={FileText}
+            tone="emerald"
+            heading={
+              <>
+                Living <em>content</em>
+              </>
+            }
+            body="A modern block editor with real-time preview. Posts evolve — version history, scheduled publishing, A/B variants built in."
+            bullets={[
+              'Multi-author roles & review',
+              'Revisions & rollback',
+              'Type-safe custom fields',
+            ]}
+          />
+          <FeatureCard
+            icon={Cloud}
+            tone="lavender"
+            heading={
+              <>
+                Edge <em>hosting</em>
+              </>
+            }
+            body="Edge-rendered Next.js on 24 regions. Auto SSL, auto cache, auto image optimization — never think about it again."
+            bullets={[
+              'p50 TTFB under 50ms',
+              'Custom domains in 90 seconds',
+              'Preview deploys per branch',
+            ]}
+          />
+          <FeatureCard
+            icon={ShoppingBag}
+            tone="emerald"
+            heading={
+              <>
+                Native <em>commerce</em>
+              </>
+            }
+            body="Products and orders are first-class — not a plugin. Stripe-powered checkout, taxes, subscriptions, and inventory."
+            bullets={[
+              'Digital, physical, subscription',
+              'Inventory & warehouse sync',
+              'Tax engine, 40 regions',
+            ]}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/components/marketing/Footer.test.tsx b/apps/web/src/components/marketing/Footer.test.tsx
new file mode 100644
index 00000000..56ce9620
--- /dev/null
+++ b/apps/web/src/components/marketing/Footer.test.tsx
@@ -0,0 +1,29 @@
+/**
+ * Marketing footer — link column + brand contract.
+ */
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { MarketingFooter } from './Footer';
+
+describe('<MarketingFooter>', () => {
+  it('renders four column headings', () => {
+    const { container } = render(<MarketingFooter />);
+    const headings = container.querySelectorAll('h5');
+    expect(headings.length).toBe(4);
+    const text = Array.from(headings).map((h) => h.textContent);
+    expect(text).toEqual(['Product', 'Resources', 'Company', 'Legal']);
+  });
+
+  it('paints on a forest surface', () => {
+    const { container } = render(<MarketingFooter />);
+    const footer = container.querySelector('footer');
+    expect(footer?.getAttribute('data-surface')).toBe('forest');
+  });
+
+  it('renders the brand wordmark in the brand-foot column', () => {
+    const { container } = render(<MarketingFooter />);
+    expect(container.querySelector('.wm-go')?.textContent).toBe('Go');
+    expect(container.querySelector('.wm-next')?.textContent).toBe('Next');
+  });
+});
diff --git a/apps/web/src/components/marketing/Footer.tsx b/apps/web/src/components/marketing/Footer.tsx
new file mode 100644
index 00000000..05d17445
--- /dev/null
+++ b/apps/web/src/components/marketing/Footer.tsx
@@ -0,0 +1,110 @@
+/**
+ * Marketing footer — forest surface, five link columns + tagline.
+ *
+ * Mirrors the `footer` block from docs/design/ui_kits/marketing/index.html.
+ * The brand-foot wordmark in the first column uses the wordmark
+ * primitive with `surface="forest"` so "Next" lifts to emerald-bright,
+ * matching the kit's `.brand-foot .wm-next` rule.
+ */
+import Link from 'next/link';
+import type { ReactElement } from 'react';
+
+import { Wordmark } from '@/components/brand/Wordmark';
+
+const PRODUCT = [
+  { href: '/editor', label: 'Editor' },
+  { href: '/hosting', label: 'Hosting' },
+  { href: '/commerce', label: 'Commerce' },
+  { href: '/analytics', label: 'Analytics' },
+  { href: '/marketplace', label: 'Marketplace' },
+];
+
+const RESOURCES = [
+  { href: '/docs', label: 'Docs' },
+  { href: '/changelog', label: 'Changelog' },
+  { href: '/status', label: 'Status' },
+  { href: '/importer', label: 'Importer' },
+  { href: '/api', label: 'API' },
+];
+
+const COMPANY = [
+  { href: '/about', label: 'About' },
+  { href: '/customers', label: 'Customers' },
+  { href: '/careers', label: 'Careers' },
+  { href: '/press', label: 'Press' },
+];
+
+const LEGAL = [
+  { href: '/privacy', label: 'Privacy' },
+  { href: '/terms', label: 'Terms' },
+  { href: '/security', label: 'Security' },
+  { href: '/dpa', label: 'DPA' },
+];
+
+interface ColumnProps {
+  heading: string;
+  links: ReadonlyArray<{ href: string; label: string }>;
+}
+
+function Column({ heading, links }: ColumnProps): ReactElement {
+  return (
+    <div>
+      <h5 className="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-fg-on-forest">
+        {heading}
+      </h5>
+      <ul className="flex flex-col gap-1">
+        {links.map((l) => (
+          <li key={l.href}>
+            <Link
+              href={l.href}
+              className="block py-1 text-sm text-fg-on-forest-muted no-underline transition-colors duration-DEFAULT ease-brand hover:text-fg-on-forest"
+            >
+              {l.label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function MarketingFooter(): ReactElement {
+  return (
+    <footer
+      data-surface="forest"
+      className="bg-forest pb-8 pt-[56px] text-fg-on-forest"
+    >
+      <div className="mx-auto max-w-[1240px] px-8">
+        <div className="mb-10 grid gap-10 md:grid-cols-[2fr_repeat(4,1fr)]">
+          <div>
+            <Link
+              href="/"
+              className="inline-flex items-baseline gap-px no-underline"
+              aria-label="GoNext"
+            >
+              <Wordmark surface="forest" size="md" />
+            </Link>
+            <p className="mt-3.5 max-w-[280px] text-sm leading-[1.5] text-fg-on-forest-muted">
+              An all-in-one platform for content, hosting, and commerce.
+              Built on Go and Next.js — a system designed to grow with the
+              sites running on it.
+            </p>
+          </div>
+          <Column heading="Product" links={PRODUCT} />
+          <Column heading="Resources" links={RESOURCES} />
+          <Column heading="Company" links={COMPANY} />
+          <Column heading="Legal" links={LEGAL} />
+        </div>
+        <div className="flex items-center justify-between border-t border-forest-border pt-6 text-xs text-fg-on-forest-muted">
+          <span>© {new Date().getFullYear()} GoNext, Inc.</span>
+          <span className="font-mono">
+            v1.0 ·{' '}
+            <span className="text-fg-on-forest">
+              built on Go & Next.js
+            </span>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/web/src/components/marketing/Hero.test.tsx b/apps/web/src/components/marketing/Hero.test.tsx
new file mode 100644
index 00000000..69468cb3
--- /dev/null
+++ b/apps/web/src/components/marketing/Hero.test.tsx
@@ -0,0 +1,41 @@
+/**
+ * Marketing hero — smoke + brand-contract assertions.
+ *
+ * We don't snapshot the entire HTML (it'll churn whenever copy
+ * changes), but we pin the three contracts that matter:
+ *  - The signature headline composes "Sites that *live* and grow."
+ *    with an <em> on "live" so the italic-accent rule fires.
+ *  - The emerald primary CTA is labelled "Start a site".
+ *  - The PulseVisual ships the 38ms metric on a forest surface.
+ */
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { MarketingHero } from './Hero';
+
+describe('<MarketingHero>', () => {
+  it('paints the signature headline with the italic accent', () => {
+    const { container } = render(<MarketingHero />);
+    const h1 = container.querySelector('h1');
+    expect(h1?.textContent).toContain('Sites that');
+    expect(h1?.textContent).toContain('and grow');
+    const em = h1?.querySelector('em');
+    expect(em?.textContent).toBe('live');
+  });
+
+  it('renders the emerald primary CTA with the brand copy', () => {
+    const { container } = render(<MarketingHero />);
+    const cta = Array.from(container.querySelectorAll('a')).find(
+      (a) => a.textContent?.trim().startsWith('Start a site'),
+    );
+    expect(cta).toBeTruthy();
+  });
+
+  it('paints the 38ms TTFB visual on a forest surface', () => {
+    const { container } = render(<MarketingHero />);
+    const surface = container.querySelector('[data-surface="forest"]');
+    expect(surface).toBeTruthy();
+    expect(surface?.textContent).toContain('38');
+    expect(surface?.textContent).toContain('p50 TTFB');
+  });
+});
diff --git a/apps/web/src/components/marketing/Hero.tsx b/apps/web/src/components/marketing/Hero.tsx
new file mode 100644
index 00000000..49b83316
--- /dev/null
+++ b/apps/web/src/components/marketing/Hero.tsx
@@ -0,0 +1,202 @@
+/**
+ * Marketing hero — cream surface, massive headline + emerald CTA, dark
+ * "Pulse" visual card on the right.
+ *
+ * Mirrors the `hero` section of docs/design/ui_kits/marketing/index.html
+ * down to the meta-row checks, the chart curve, and the three live
+ * stats. The chart shape is an inline SVG matching the kit verbatim;
+ * the dot at the right end pulses via the `brand-pulse` keyframe
+ * declared in tailwind.config.ts.
+ *
+ * The italic-accent rule fires twice: once in the headline ("live")
+ * and once in the visual card ("ms" suffix on 38ms TTFB). One italic
+ * word per headline is the law — two are used here only because the
+ * visual card sits on a forest surface where the second italic carries
+ * different colour weight (emerald-bright instead of emerald-deep).
+ */
+import Link from 'next/link';
+import { ArrowRight, Check, Play } from 'lucide-react';
+import type { ReactElement } from 'react';
+
+import { Headline } from '@/components/brand/Headline';
+
+export function MarketingHero(): ReactElement {
+  return (
+    <section className="pb-[60px] pt-[80px]">
+      <div className="mx-auto grid max-w-[1240px] grid-cols-1 items-center gap-9 px-8 lg:grid-cols-[1.3fr_1fr]">
+        <div>
+          <span className="mb-3.5 inline-block text-xs font-medium uppercase tracking-[0.12em] text-emerald-deep">
+            GoNext v1.0 — now generally available
+          </span>
+          <Headline size="display" as="h1" className="leading-[0.9]">
+            Sites that
+            <br />
+            <em>live</em> and grow.
+          </Headline>
+          <p className="mb-8 mt-7 max-w-[480px] text-[19px] leading-[1.5] text-fg-muted">
+            An all-in-one alternative to WordPress — content, hosting, and
+            commerce in one product. Built on Go and Next.js, with
+            intelligence woven in.
+          </p>
+          <div className="flex flex-wrap items-center gap-2.5">
+            <Link
+              href="/start"
+              className="inline-flex items-center justify-center gap-1.5 rounded-md border border-emerald bg-emerald px-5 py-3 text-base font-medium text-emerald-ink no-underline shadow-xs transition-colors duration-DEFAULT ease-brand hover:border-emerald-deep hover:bg-emerald-deep hover:text-paper"
+            >
+              Start a site
+              <ArrowRight className="size-[14px]" aria-hidden />
+            </Link>
+            <Link
+              href="/demo"
+              className="inline-flex items-center justify-center gap-1.5 rounded-md border border-border bg-paper-2 px-5 py-3 text-base font-medium text-ink no-underline shadow-xs transition-colors duration-DEFAULT ease-brand hover:border-border-strong hover:bg-paper-3"
+            >
+              <Play className="size-[14px]" aria-hidden />
+              Watch demo · 2 min
+            </Link>
+          </div>
+          <ul className="mt-7 flex flex-wrap gap-5 text-xs text-fg-subtle">
+            <li className="flex items-center gap-1.5">
+              <Check className="size-[13px] text-emerald-deep" aria-hidden />
+              No credit card
+            </li>
+            <li className="flex items-center gap-1.5">
+              <Check className="size-[13px] text-emerald-deep" aria-hidden />
+              WordPress importer included
+            </li>
+            <li className="flex items-center gap-1.5">
+              <Check className="size-[13px] text-emerald-deep" aria-hidden />
+              SOC 2 · GDPR · CCPA
+            </li>
+          </ul>
+        </div>
+
+        <PulseVisual />
+      </div>
+    </section>
+  );
+}
+
+/**
+ * The dark "Pulse" visual card sitting in the right-hand column of the
+ * hero. Self-contained — pulled out so the hero markup stays readable
+ * and so the visual can be reused on the /pulse landing if/when we
+ * surface a separate analytics-marketing page.
+ *
+ * The radial-gradient glows are pure CSS pseudo-elements; the chart
+ * SVG is verbatim from the marketing kit so the curve and gradient
+ * stops match pixel-for-pixel.
+ */
+function PulseVisual(): ReactElement {
+  return (
+    <div
+      data-surface="forest"
+      className="relative flex aspect-[4/5] flex-col justify-between overflow-hidden rounded-xl bg-forest p-7 text-fg-on-forest"
+    >
+      {/* Emerald glow — top-right. */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -right-[20%] -top-[20%] size-[600px] rounded-pill"
+        style={{
+          background:
+            'radial-gradient(circle, rgba(16,185,129,0.20) 0%, transparent 55%)',
+        }}
+      />
+      {/* Lavender glow — bottom-left. */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -bottom-[30%] -left-[20%] size-[500px] rounded-pill"
+        style={{
+          background:
+            'radial-gradient(circle, rgba(167,139,250,0.15) 0%, transparent 55%)',
+        }}
+      />
+
+      {/* Header — live badge + domain. */}
+      <div className="relative flex items-start justify-between">
+        <span className="inline-flex items-center gap-1.5 rounded-pill border border-emerald-bright/40 bg-emerald-bright/15 px-2.5 py-1 text-2xs font-medium uppercase tracking-wide text-emerald-bright">
+          <span className="size-[5px] animate-brand-pulse rounded-pill bg-emerald-bright" />
+          Live · 142 readers
+        </span>
+        <span className="font-mono text-xs text-fg-on-forest-muted">
+          brickmortar.co
+        </span>
+      </div>
+
+      {/* Big number — p50 TTFB. */}
+      <div className="relative text-center">
+        <div className="text-xs font-medium uppercase tracking-[0.14em] text-emerald-bright">
+          p50 TTFB
+        </div>
+        <div className="mt-2 font-display text-[84px] font-extrabold leading-none tracking-tight text-fg-on-forest">
+          38
+          <em className="font-serif text-[0.9em] not-italic italic font-normal text-emerald-bright">
+            ms
+          </em>
+        </div>
+        <div className="mt-1 text-sm text-fg-on-forest-muted">
+          across 24 edge regions, right now
+        </div>
+      </div>
+
+      {/* Chart — emerald area, dot pulses at the right edge. */}
+      <div className="relative h-20">
+        <svg
+          viewBox="0 0 600 80"
+          preserveAspectRatio="none"
+          className="size-full"
+          aria-hidden
+        >
+          <defs>
+            <linearGradient id="hpFill" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#34D399" stopOpacity="0.5" />
+              <stop offset="100%" stopColor="#34D399" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+          <path
+            d="M 0 60 Q 30 45, 60 50 T 120 40 T 180 55 T 240 35 T 300 42 T 360 28 T 420 36 T 480 22 T 540 32 T 600 24 L 600 80 L 0 80 Z"
+            fill="url(#hpFill)"
+          />
+          <path
+            d="M 0 60 Q 30 45, 60 50 T 120 40 T 180 55 T 240 35 T 300 42 T 360 28 T 420 36 T 480 22 T 540 32 T 600 24"
+            fill="none"
+            stroke="#34D399"
+            strokeWidth="1.5"
+          />
+          <circle cx="600" cy="24" r="4" fill="#34D399" />
+          <circle cx="600" cy="24" r="8" fill="#34D399" opacity="0.3" />
+        </svg>
+      </div>
+
+      {/* Stats footer. */}
+      <div className="relative grid grid-cols-3 gap-3 border-t border-forest-border pt-4">
+        <Stat label="Views · 24h" value="12.4k" />
+        <Stat label="Revenue · 24h" value="$847" />
+        <Stat label="Uptime · 30d" value="100" suffix="%" />
+      </div>
+    </div>
+  );
+}
+
+interface StatProps {
+  label: string;
+  value: string;
+  suffix?: string;
+}
+
+function Stat({ label, value, suffix }: StatProps): ReactElement {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-[10px] uppercase tracking-[0.1em] text-fg-on-forest-muted">
+        {label}
+      </span>
+      <span className="font-display text-[22px] font-bold tracking-tight text-fg-on-forest">
+        {value}
+        {suffix ? (
+          <em className="font-serif text-[0.6em] font-normal italic text-fg-on-forest-muted">
+            {suffix}
+          </em>
+        ) : null}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/marketing/LogoMarquee.tsx b/apps/web/src/components/marketing/LogoMarquee.tsx
new file mode 100644
index 00000000..fd3a42dd
--- /dev/null
+++ b/apps/web/src/components/marketing/LogoMarquee.tsx
@@ -0,0 +1,52 @@
+/**
+ * Logo marquee — the strip just under the hero showing wordmarks of
+ * teams using GoNext. The kit calls this the "logos strip" and stamps
+ * the line "Built by, and for, teams who treat their sites as *living
+ * things*" above it.
+ *
+ * The "logos" are not real partner logos here — we use wordmark
+ * compositions in the brand type (Archivo + Instrument Serif italic)
+ * because partner logos vary in colour and would fight the cream
+ * surface. Once a real customer wall lands these become <Image>s.
+ */
+import type { ReactElement } from 'react';
+
+const LOGOS: ReadonlyArray<{ before: string; em?: string; after?: string }> = [
+  { before: 'Brick', em: 'Mortar' },
+  { before: 'Untitled', em: 'Studio' },
+  { before: 'Quiet', em: 'Co' },
+  { before: 'Cobalt' },
+  { before: 'Ortho', em: 'Type' },
+  { before: 'Riemann' },
+];
+
+export function MarketingLogos(): ReactElement {
+  return (
+    <section className="border-y border-border py-14">
+      <div className="mx-auto max-w-[1240px] px-8">
+        <p className="mb-7 text-center text-sm tracking-wide text-fg-subtle">
+          Built by, and for, teams who treat their sites as{' '}
+          <em className="font-serif italic font-normal text-emerald-deep">
+            living things
+          </em>
+        </p>
+        <ul className="flex flex-wrap items-center justify-center gap-x-14 gap-y-6">
+          {LOGOS.map((logo, idx) => (
+            <li
+              key={`${logo.before}-${idx}`}
+              className="font-display text-[22px] font-bold tracking-tight text-fg-faint"
+            >
+              {logo.before}
+              {logo.em ? (
+                <em className="font-serif italic font-normal">
+                  {logo.em}
+                </em>
+              ) : null}
+              {logo.after ?? ''}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/components/marketing/Nav.test.tsx b/apps/web/src/components/marketing/Nav.test.tsx
new file mode 100644
index 00000000..c7964688
--- /dev/null
+++ b/apps/web/src/components/marketing/Nav.test.tsx
@@ -0,0 +1,33 @@
+/**
+ * Marketing nav — smoke + brand contract.
+ */
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { MarketingNav } from './Nav';
+
+describe('<MarketingNav>', () => {
+  it('renders the wordmark linked to /', () => {
+    const { container } = render(<MarketingNav />);
+    const wordmark = container.querySelector('a[aria-label="GoNext"]');
+    expect(wordmark).toBeNull(); // Wordmark is a span here
+    const homeLink = container.querySelector('a[href="/"]');
+    expect(homeLink?.textContent).toContain('GoNext');
+  });
+
+  it('renders the CTA to start a site', () => {
+    const { container } = render(<MarketingNav />);
+    const cta = Array.from(container.querySelectorAll('a')).find(
+      (a) => a.textContent?.trim().startsWith('Start a site'),
+    );
+    expect(cta).toBeTruthy();
+    expect(cta?.getAttribute('href')).toBe('/start');
+  });
+
+  it('paints the nav on a forest surface', () => {
+    const { container } = render(<MarketingNav />);
+    const nav = container.querySelector('nav');
+    expect(nav?.getAttribute('data-surface')).toBe('forest');
+    expect(nav?.getAttribute('aria-label')).toBe('Primary');
+  });
+});
diff --git a/apps/web/src/components/marketing/Nav.tsx b/apps/web/src/components/marketing/Nav.tsx
new file mode 100644
index 00000000..97ae2077
--- /dev/null
+++ b/apps/web/src/components/marketing/Nav.tsx
@@ -0,0 +1,60 @@
+/**
+ * Marketing top navigation — the sticky forest pill.
+ *
+ * Mirrors `nav.top` from docs/design/ui_kits/marketing/index.html.
+ * Sits 16px from the top of the viewport, pill-shaped forest surface
+ * with the wordmark on the left, six secondary links in the middle,
+ * and a cream CTA on the right.
+ *
+ * The CTA copy is the brand's "Start a site" verb — the on-brand
+ * phrasing from HANDOFF.md: confident, quiet, alive.
+ */
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+import type { ReactElement } from 'react';
+
+import { Wordmark } from '@/components/brand/Wordmark';
+
+const NAV_LINKS = [
+  { href: '/features', label: 'Product' },
+  { href: '/templates', label: 'Templates' },
+  { href: '/marketplace', label: 'Marketplace' },
+  { href: '/pricing', label: 'Pricing' },
+  { href: '/customers', label: 'Customers' },
+  { href: '/docs', label: 'Docs' },
+] as const;
+
+export function MarketingNav(): ReactElement {
+  return (
+    <nav
+      data-surface="forest"
+      className="sticky top-4 z-20 mx-auto mt-4 flex max-w-[920px] items-center justify-between rounded-pill bg-ink py-[6px] pl-[18px] pr-[6px] text-paper shadow-md"
+      aria-label="Primary"
+    >
+      <div className="flex items-center gap-7">
+        <Link href="/" className="text-paper no-underline">
+          <Wordmark surface="forest" size="md" />
+        </Link>
+        <ul className="hidden gap-[22px] md:flex">
+          {NAV_LINKS.map((link) => (
+            <li key={link.href}>
+              <Link
+                href={link.href}
+                className="text-sm text-fg-on-forest-muted no-underline transition-colors duration-DEFAULT ease-brand hover:text-paper"
+              >
+                {link.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <Link
+        href="/start"
+        className="inline-flex items-center gap-1.5 rounded-pill bg-paper px-4 py-[7px] text-sm font-medium text-ink no-underline transition-colors duration-DEFAULT ease-brand hover:bg-paper-2"
+      >
+        Start a site
+        <ArrowRight className="size-[13px]" aria-hidden />
+      </Link>
+    </nav>
+  );
+}
diff --git a/apps/web/src/components/marketing/RecentStories.tsx b/apps/web/src/components/marketing/RecentStories.tsx
new file mode 100644
index 00000000..8b202aa7
--- /dev/null
+++ b/apps/web/src/components/marketing/RecentStories.tsx
@@ -0,0 +1,119 @@
+/**
+ * Recent stories — the section that surfaces the latest posts from the
+ * API on the public landing. This is what preserves the home page's
+ * original archive behavior (showing latest posts) while wrapping it
+ * in the brand surface.
+ *
+ * Each row uses the post-meta scale from the kit: a small emerald
+ * eyebrow ("the most recent"), then a heavy Archivo headline, a sub
+ * line in Geist body, and a fine-print mono date + author. Empty
+ * state mirrors the kit's "first-run" empty card with a one-line
+ * encouragement.
+ */
+import Link from 'next/link';
+import { ArrowRight, Clock } from 'lucide-react';
+import type { ReactElement } from 'react';
+
+import { Headline } from '@/components/brand/Headline';
+import type { Post } from '@/lib/api';
+
+interface RecentStoriesProps {
+  posts: ReadonlyArray<Post>;
+}
+
+function formatDate(iso?: string): string {
+  if (!iso) return '';
+  // Format without locale so server + client stay stable for snapshots.
+  // The kit uses "Aug 14" style — we mirror that with toLocaleDateString
+  // in the 'en-US' locale.
+  try {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return '';
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  } catch {
+    return '';
+  }
+}
+
+export function MarketingRecentStories({
+  posts,
+}: RecentStoriesProps): ReactElement {
+  return (
+    <section className="py-[120px]">
+      <div className="mx-auto max-w-[1240px] px-8">
+        <div className="mb-14 flex flex-wrap items-end justify-between gap-4">
+          <div className="max-w-[640px]">
+            <span className="mb-3.5 inline-block text-xs font-medium uppercase tracking-[0.12em] text-emerald-deep">
+              From the network
+            </span>
+            <Headline size="section">
+              Recent <em>stories</em> from sites running on GoNext.
+            </Headline>
+          </div>
+          <Link
+            href="/feed"
+            className="inline-flex items-center gap-1.5 text-sm font-medium text-emerald-deep no-underline transition-colors duration-DEFAULT ease-brand hover:text-ink"
+          >
+            Subscribe to the feed
+            <ArrowRight className="size-[13px]" aria-hidden />
+          </Link>
+        </div>
+
+        {posts.length === 0 ? (
+          <div className="rounded-lg border border-border bg-paper-2 p-9 text-center">
+            <p className="text-base text-fg-muted">
+              No published posts yet — be the first to{' '}
+              <Link
+                href="/start"
+                className="text-emerald-deep no-underline underline-offset-2 hover:underline"
+              >
+                start a site
+              </Link>
+              .
+            </p>
+          </div>
+        ) : (
+          <ul className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+            {posts.slice(0, 6).map((post) => {
+              const href = `/${encodeURIComponent(post.slug)}`;
+              const date = formatDate(post.publishedAt);
+              return (
+                <li key={post.id}>
+                  <Link
+                    href={href}
+                    className="group flex h-full flex-col gap-3 rounded-lg border border-border bg-paper-2 p-6 no-underline transition-colors duration-DEFAULT ease-brand hover:border-border-strong hover:bg-paper-3"
+                  >
+                    <div className="flex items-center gap-2 text-2xs font-medium uppercase tracking-[0.1em] text-fg-subtle">
+                      <Clock className="size-3 text-emerald-deep" aria-hidden />
+                      {date || 'Recent'}
+                      {post.authorName ? (
+                        <>
+                          <span aria-hidden>·</span>
+                          <span className="normal-case tracking-normal text-fg-muted">
+                            {post.authorName}
+                          </span>
+                        </>
+                      ) : null}
+                    </div>
+                    <h3 className="font-display text-xl font-bold leading-[1.15] tracking-tight text-ink">
+                      {post.title}
+                    </h3>
+                    {post.excerpt ? (
+                      <p className="line-clamp-3 text-sm leading-[1.5] text-fg-muted">
+                        {post.excerpt}
+                      </p>
+                    ) : null}
+                    <span className="mt-auto inline-flex items-center gap-1.5 text-sm font-medium text-emerald-deep transition-transform duration-DEFAULT ease-brand group-hover:translate-x-0.5">
+                      Read story
+                      <ArrowRight className="size-[13px]" aria-hidden />
+                    </span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/lib/render.ts b/apps/web/src/lib/render.ts
index a0da5454..87638dff 100644
--- a/apps/web/src/lib/render.ts
+++ b/apps/web/src/lib/render.ts
@@ -130,17 +130,23 @@ function escapeHtml(value: string): string {
 
 /**
  * Build the post-page main HTML when the Go-side template endpoint
- * isn't reachable. Mirrors the gn-hello single.html layout closely
- * enough that the page still feels themed.
+ * isn't reachable. Renders the single-post layout per the Living-Systems
+ * handoff: Archivo display headline, Geist 17px body, generous
+ * line-height, an optional italic-accent rule on the headline, and a
+ * Geist Mono / fg-subtle meta row above the title.
+ *
+ * The classnames map back to selectors in `globals.css` so the cascade
+ * stays predictable; nothing in this output bakes a colour or font
+ * literal — every value flows through brand tokens.
  */
 function fallbackSingularMain(post: Post, blocksHtml: string): string {
   const dateMeta = post.publishedAt
-    ? `<time datetime="${escapeHtml(post.publishedAt)}">${escapeHtml(
+    ? `<time class="gn-post-meta__date" datetime="${escapeHtml(
         post.publishedAt,
-      )}</time>`
+      )}">${escapeHtml(post.publishedAt)}</time>`
     : '';
   const authorMeta = post.authorName
-    ? `<span class="gn-author">${escapeHtml(post.authorName)}</span>`
+    ? `<span class="gn-post-meta__author">${escapeHtml(post.authorName)}</span>`
     : '';
   const meta =
     dateMeta || authorMeta
@@ -148,8 +154,8 @@ function fallbackSingularMain(post: Post, blocksHtml: string): string {
       : '';
   return [
     '<article class="gn-post">',
-    `<h1 class="gn-post-title">${escapeHtml(post.title)}</h1>`,
     meta,
+    `<h1 class="gn-post-title">${escapeHtml(post.title)}</h1>`,
     `<div class="gn-post-content">${blocksHtml}</div>`,
     '</article>',
   ].join('');
@@ -185,11 +191,16 @@ function fallbackArchiveMain(posts: Post[], heading: string): string {
 }
 
 function fallback404Main(): string {
+  // The italic-accent rule fires on the second word of the headline,
+  // matching the brand voice ("confident, quiet, alive"). The status
+  // code is surfaced as a small eyebrow above the headline so it's
+  // visible without crowding the Archivo display type.
   return [
     '<section class="gn-404">',
-    '<h1>404 &mdash; page not found</h1>',
+    '<div class="gn-404__eyebrow">404</div>',
+    '<h1>Page <em>not</em> found.</h1>',
     '<p>The page you were looking for has moved or never existed.</p>',
-    '<p><a href="/">Return home</a></p>',
+    '<p><a href="/">Return home →</a></p>',
     '</section>',
   ].join('');
 }
diff --git a/apps/web/src/lib/theme.ts b/apps/web/src/lib/theme.ts
index d17008f9..7db7d195 100644
--- a/apps/web/src/lib/theme.ts
+++ b/apps/web/src/lib/theme.ts
@@ -17,13 +17,15 @@
 import { fetchActiveTheme, type ActiveTheme } from './api.ts';
 
 /**
- * Minimal hand-written fallback. Matches the gn-hello seed theme
- * (`packages/go/theme/seed/gn-hello/theme.json`) closely enough that
- * the public site is visually coherent when the API is offline.
+ * Minimal hand-written fallback. Mirrors the Living-Systems brand
+ * tokens (cream paper + forest ink + emerald accent) closely enough
+ * that the public site is visually coherent when the API is offline.
  *
- * The HTML strings here are deliberately tiny — the real theme parts
- * are rich block trees that the Go walker resolves. This fallback is
- * the "lights on" minimum.
+ * The HTML strings are deliberately empty — the brand chrome wired in
+ * `PublicShell` already paints the marketing nav + footer, so the
+ * fallback shouldn't double-stack a second header / footer. When a
+ * real theme is installed it ships richer header / footer HTML that
+ * the renderer happily forwards.
  */
 export function defaultActiveTheme(): ActiveTheme {
   return {
@@ -31,12 +33,12 @@ export function defaultActiveTheme(): ActiveTheme {
     title: 'gn-hello',
     cssCustomProperties: [
       ':root {',
-      '  --wp-preset--color--ink: #0f172a;',
-      '  --wp-preset--color--paper: #ffffff;',
-      '  --wp-preset--color--muted: #64748b;',
-      '  --wp-preset--color--accent: #2563eb;',
-      '  --wp-preset--font-family--sans: system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;',
-      '  --wp-preset--font-family--serif: Iowan Old Style, Apple Garamond, Baskerville, Georgia, serif;',
+      '  --wp-preset--color--ink: #0E1A14;',
+      '  --wp-preset--color--paper: #F5F2EA;',
+      '  --wp-preset--color--muted: #4A5C52;',
+      '  --wp-preset--color--accent: #047857;',
+      '  --wp-preset--font-family--sans: var(--font-sans, Geist), system-ui, sans-serif;',
+      '  --wp-preset--font-family--serif: var(--font-serif, Instrument Serif), Georgia, serif;',
       '  --wp-preset--font-size--sm: 0.875rem;',
       '  --wp-preset--font-size--md: 1rem;',
       '  --wp-preset--font-size--lg: 1.25rem;',
@@ -45,8 +47,12 @@ export function defaultActiveTheme(): ActiveTheme {
       '  --wp-preset--layout--wide: 1180px;',
       '}',
     ].join('\n'),
+    // Minimal theme-level header / footer for the fallback path. The
+    // brand chrome in `PublicShell` paints the marketing nav + footer
+    // around these, so the theme parts here can be tiny — they act as
+    // a thin "section header" / "site colophon" within the chrome.
     headerHtml:
-      '<header class="gn-site-header"><a href="/" class="gn-site-title">gn-hello</a></header>',
+      '<header class="gn-site-header"><span class="wordmark"><span class="wm-go">Go</span><span class="wm-next">Next</span></span></header>',
     footerHtml:
       '<footer class="gn-site-footer"><p>Built with <a href="https://github.com/Singleton-Solution/GoNext">GoNext</a>.</p></footer>',
   };
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
new file mode 100644
index 00000000..c0df9e8f
--- /dev/null
+++ b/apps/web/src/lib/utils.ts
@@ -0,0 +1,15 @@
+/**
+ * Class-name composition helper.
+ *
+ * Mirrors apps/admin/src/lib/utils.ts so the public site and admin
+ * share the same conventional helper for stitching Tailwind class lists
+ * together. `clsx` does the truthy-filter; `twMerge` resolves conflicts
+ * between later Tailwind utilities so passing `className` from a
+ * parent doesn't double-stack on the base variant.
+ */
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/web/src/styles/tokens.css b/apps/web/src/styles/tokens.css
new file mode 100644
index 00000000..c33f39e4
--- /dev/null
+++ b/apps/web/src/styles/tokens.css
@@ -0,0 +1,136 @@
+/* =============================================================
+   GoNext — Design Tokens
+   "Living systems" — biology-meets-software.
+   Cream paper · forest ink · emerald + lavender accents.
+   Heavy grotesque display + editorial italic serif accents.
+
+   This file is the public-site mirror of docs/design/colors_and_type.css
+   and the @gonext/admin tokens at apps/admin/src/styles/tokens.css.
+   The same brand contract drives admin, web, and the first-party
+   themes; the canonical source is the design handoff.
+
+   NOTE: Fonts are self-hosted via `next/font/google` in
+   `app/layout.tsx`. The CSS variables (--font-display, --font-sans,
+   --font-mono, --font-serif) are injected on the <html> element by
+   next/font; the rules below reference them so the same token names
+   from the design handoff resolve at runtime to the real font
+   families. Do not re-add the @import — it would double-fetch and
+   defeat next/font's self-hosting + preloading.
+   ============================================================= */
+
+:root {
+  /* ─── Surface — warm cream paper ────────────────────────── */
+  --paper:          #F5F2EA;   /* page background — warm cream */
+  --paper-2:        #EFEBE0;   /* card / panel surface */
+  --paper-3:        #E6E1D2;   /* sunken, hover row, inputs at rest */
+  --paper-4:        #DAD3BD;   /* inset wells */
+
+  /* ─── Surface — deep forest dark ────────────────────────── */
+  --forest:         #0E1A14;   /* primary dark surface (sidebar, dark hero) */
+  --forest-2:       #18261E;   /* lifted dark surface */
+  --forest-3:       #22322A;   /* dark hover */
+  --forest-border:  #2C3D33;   /* hairline on dark */
+
+  /* ─── Foreground ────────────────────────────────────────── */
+  --ink:            #0E1A14;   /* primary text — same as forest, "alive" black */
+  --ink-soft:       #1F2D26;   /* secondary text on cream */
+  --fg-muted:       #4A5C52;   /* tertiary text on cream */
+  --fg-subtle:      #6B7B72;   /* labels, captions */
+  --fg-faint:       #94A199;   /* placeholder, disabled */
+  --fg-on-forest:   #F0EAD8;   /* primary text on dark forest */
+  --fg-on-forest-muted: #A8B5AC;
+
+  /* ─── Border ────────────────────────────────────────────── */
+  --border:         #D9D2C0;   /* default hairline on cream */
+  --border-strong:  #B8B09A;   /* focused / emphasized on cream */
+  --border-subtle:  #E8E2D1;   /* very faint, table rows */
+
+  /* ─── Accent — vivid emerald (primary brand) ────────────── */
+  --emerald:        #10B981;   /* fresh, alive green — primary CTAs, focus */
+  --emerald-bright: #34D399;   /* lighter, used on dark surfaces */
+  --emerald-deep:   #047857;   /* hover, text-on-cream emerald */
+  --emerald-soft:   #D1FAE5;   /* tinted surface */
+  --emerald-ink:    #022C22;   /* text on emerald */
+
+  /* ─── Accent — lavender (secondary, data viz) ───────────── */
+  --lavender:       #A78BFA;   /* secondary accent — data viz, tags */
+  --lavender-deep:  #7C3AED;
+  --lavender-soft:  #EDE9FE;
+
+  /* ─── Semantic ──────────────────────────────────────────── */
+  --success:        #059669;
+  --success-soft:   #D1FAE5;
+  --warning:        #D97706;
+  --warning-soft:   #FEF3C7;
+  --danger:         #DC2626;
+  --danger-soft:    #FEE2E2;
+
+  /* ─── Typography ────────────────────────────────────────── */
+  /* These four variables are *re-declared* on <html> by next/font with the
+     real, hashed self-hosted family names. The fallback chains below only
+     apply if next/font hasn't loaded yet (FOUT window) or in environments
+     where next/font isn't running (e.g. raw vitest jsdom snapshots). */
+  --font-display:   'Archivo', system-ui, sans-serif;          /* heavy grotesque headlines */
+  --font-sans:      'Geist', -apple-system, system-ui, sans-serif;  /* body, UI */
+  --font-serif:     'Instrument Serif', Georgia, serif;        /* italic accents */
+  --font-mono:      'Geist Mono', ui-monospace, monospace;
+  /* legacy alias */
+  --font-ui:        var(--font-sans);
+
+  /* type scale */
+  --t-2xs:  11px;
+  --t-xs:   12px;
+  --t-sm:   13px;
+  --t-base: 14px;
+  --t-md:   15px;
+  --t-lg:   17px;
+  --t-xl:   20px;
+  --t-2xl:  24px;
+  --t-3xl:  32px;
+  --t-4xl:  44px;
+  --t-5xl:  64px;
+  --t-6xl:  96px;
+
+  /* line heights */
+  --lh-tight:  1.0;
+  --lh-snug:   1.15;
+  --lh-normal: 1.5;
+
+  /* tracking */
+  --track-tight:  -0.03em;
+  --track-normal: -0.005em;
+  --track-wide:    0.04em;
+
+  /* ─── Spacing (4-base) ──────────────────────────────────── */
+  --s-1:   4px;
+  --s-2:   8px;
+  --s-3:  12px;
+  --s-4:  16px;
+  --s-5:  20px;
+  --s-6:  24px;
+  --s-7:  32px;
+  --s-8:  48px;
+  --s-9:  64px;
+  --s-10: 96px;
+
+  /* ─── Radii ─────────────────────────────────────────────── */
+  --r-xs:    4px;
+  --r-sm:    6px;
+  --r-md:    8px;
+  --r-lg:   12px;
+  --r-xl:   16px;
+  --r-pill: 999px;
+
+  /* ─── Shadows (soft, organic — not hard offsets) ────────── */
+  --sh-xs:   0 1px 2px rgba(14, 26, 20, 0.04);
+  --sh-sm:   0 1px 3px rgba(14, 26, 20, 0.06), 0 1px 2px rgba(14, 26, 20, 0.04);
+  --sh-md:   0 6px 14px -4px rgba(14, 26, 20, 0.08), 0 2px 6px -2px rgba(14, 26, 20, 0.04);
+  --sh-lg:   0 16px 32px -10px rgba(14, 26, 20, 0.14), 0 4px 10px -4px rgba(14, 26, 20, 0.06);
+  --sh-focus: 0 0 0 3px rgba(16, 185, 129, 0.22);
+
+  /* ─── Motion ────────────────────────────────────────────── */
+  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --dur-fast: 100ms;
+  --dur:      160ms;
+  --dur-slow: 260ms;
+}
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
new file mode 100644
index 00000000..457f05eb
--- /dev/null
+++ b/apps/web/tailwind.config.ts
@@ -0,0 +1,168 @@
+/**
+ * Tailwind v3 configuration for @gonext/web.
+ *
+ * The colour, spacing, radius, shadow, and font-family scales mirror
+ * `docs/design/colors_and_type.css` (and its mirror at
+ * `src/styles/tokens.css`). When the canonical CSS file changes the
+ * Tailwind extension must be updated to match — the token names are
+ * the contract between design and code.
+ *
+ * The config is intentionally identical to apps/admin/tailwind.config.ts
+ * so the brand surface stays in lock-step across the admin and the
+ * public marketing site. New tokens added to the design handoff need
+ * to land in both files.
+ *
+ * Font families resolve to the CSS custom properties that
+ * `next/font/google` injects on the <html> element from
+ * `src/app/layout.tsx`.
+ */
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/app/**/*.{ts,tsx}',
+    './src/components/**/*.{ts,tsx}',
+    './src/lib/**/*.{ts,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Surfaces — warm cream paper.
+        paper: {
+          DEFAULT: '#F5F2EA',
+          '2': '#EFEBE0',
+          '3': '#E6E1D2',
+          '4': '#DAD3BD',
+        },
+        // Surfaces — deep forest dark.
+        forest: {
+          DEFAULT: '#0E1A14',
+          '2': '#18261E',
+          '3': '#22322A',
+          border: '#2C3D33',
+        },
+        // Foreground.
+        ink: {
+          DEFAULT: '#0E1A14',
+          soft: '#1F2D26',
+        },
+        fg: {
+          muted: '#4A5C52',
+          subtle: '#6B7B72',
+          faint: '#94A199',
+          'on-forest': '#F0EAD8',
+          'on-forest-muted': '#A8B5AC',
+        },
+        // Border.
+        border: {
+          DEFAULT: '#D9D2C0',
+          strong: '#B8B09A',
+          subtle: '#E8E2D1',
+        },
+        // Accent — primary brand emerald.
+        emerald: {
+          DEFAULT: '#10B981',
+          bright: '#34D399',
+          deep: '#047857',
+          soft: '#D1FAE5',
+          ink: '#022C22',
+        },
+        // Accent — lavender secondary / data viz.
+        lavender: {
+          DEFAULT: '#A78BFA',
+          deep: '#7C3AED',
+          soft: '#EDE9FE',
+        },
+        // Semantic.
+        success: {
+          DEFAULT: '#059669',
+          soft: '#D1FAE5',
+        },
+        warning: {
+          DEFAULT: '#D97706',
+          soft: '#FEF3C7',
+        },
+        danger: {
+          DEFAULT: '#DC2626',
+          soft: '#FEE2E2',
+        },
+      },
+      fontFamily: {
+        display: ['var(--font-display)', 'Archivo', 'system-ui', 'sans-serif'],
+        sans: ['var(--font-sans)', 'Geist', 'system-ui', 'sans-serif'],
+        serif: ['var(--font-serif)', 'Instrument Serif', 'Georgia', 'serif'],
+        mono: ['var(--font-mono)', 'Geist Mono', 'ui-monospace', 'monospace'],
+      },
+      fontSize: {
+        '2xs': ['11px', { lineHeight: '1.4' }],
+        xs: ['12px', { lineHeight: '1.4' }],
+        sm: ['13px', { lineHeight: '1.5' }],
+        base: ['14px', { lineHeight: '1.5' }],
+        md: ['15px', { lineHeight: '1.5' }],
+        lg: ['17px', { lineHeight: '1.4' }],
+        xl: ['20px', { lineHeight: '1.4' }],
+        '2xl': ['24px', { lineHeight: '1.2' }],
+        '3xl': ['32px', { lineHeight: '1.15' }],
+        '4xl': ['44px', { lineHeight: '1.05' }],
+        '5xl': ['64px', { lineHeight: '1.0' }],
+        '6xl': ['96px', { lineHeight: '1.0' }],
+      },
+      letterSpacing: {
+        tight: '-0.03em',
+        normal: '-0.005em',
+        wide: '0.04em',
+      },
+      spacing: {
+        '1': '4px',
+        '2': '8px',
+        '3': '12px',
+        '4': '16px',
+        '5': '20px',
+        '6': '24px',
+        '7': '32px',
+        '8': '48px',
+        '9': '64px',
+        '10': '96px',
+      },
+      borderRadius: {
+        xs: '4px',
+        sm: '6px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        pill: '999px',
+      },
+      boxShadow: {
+        xs: '0 1px 2px rgba(14, 26, 20, 0.04)',
+        sm: '0 1px 3px rgba(14, 26, 20, 0.06), 0 1px 2px rgba(14, 26, 20, 0.04)',
+        md: '0 6px 14px -4px rgba(14, 26, 20, 0.08), 0 2px 6px -2px rgba(14, 26, 20, 0.04)',
+        lg: '0 16px 32px -10px rgba(14, 26, 20, 0.14), 0 4px 10px -4px rgba(14, 26, 20, 0.06)',
+        focus: '0 0 0 3px rgba(16, 185, 129, 0.22)',
+      },
+      transitionTimingFunction: {
+        brand: 'cubic-bezier(0.2, 0.7, 0.2, 1)',
+      },
+      transitionDuration: {
+        fast: '100ms',
+        DEFAULT: '160ms',
+        slow: '260ms',
+      },
+      keyframes: {
+        // Brand pulse — used by the live-data dot in the hero visual.
+        // Same timing function as the design handoff (smooth ease)
+        // and the same opacity float (1 → 0.3) the marketing kit
+        // ships in its inline @keyframes pulse block.
+        'brand-pulse': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.3' },
+        },
+      },
+      animation: {
+        'brand-pulse': 'brand-pulse 2s cubic-bezier(0.2, 0.7, 0.2, 1) infinite',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ac4cbfc4..edcb196b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -211,6 +211,12 @@ importers:
       '@gonext/blocks-sdk':
         specifier: workspace:*
         version: link:../../packages/ts/blocks-sdk
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.469.0
+        version: 0.469.0(react@19.2.6)
       next:
         specifier: ^15.0.0
         version: 15.5.18(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -220,6 +226,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.2.6(react@19.2.6)
+      tailwind-merge:
+        specifier: ^2.5.5
+        version: 2.6.1
     devDependencies:
       '@gonext/test-config':
         specifier: workspace:*
@@ -242,6 +251,9 @@ importers:
       '@vitest/coverage-v8':
         specifier: ^1.6.0
         version: 1.6.1(vitest@1.6.1(@types/node@22.19.19)(jsdom@24.1.3))
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.5.0(postcss@8.5.14)
       eslint:
         specifier: ^8.57.0
         version: 8.57.1
@@ -251,6 +263,12 @@ importers:
       jsdom:
         specifier: ^24.0.0
         version: 24.1.3
+      postcss:
+        specifier: ^8.4.49
+        version: 8.5.14
+      tailwindcss:
+        specifier: ^3.4.17
+        version: 3.4.19(tsx@4.22.2)
       typescript:
         specifier: ^5.6.0
         version: 5.9.3
diff --git a/themes/gn-hello/style.css b/themes/gn-hello/style.css
index fe48d147..6b32f705 100644
--- a/themes/gn-hello/style.css
+++ b/themes/gn-hello/style.css
@@ -1,20 +1,34 @@
 /*
- * gn-hello — minimal classic blog styles.
+ * gn-hello — the reference blog theme rebuilt around the
+ * Living-Systems brand. Every visual choice consumes a token emitted
+ * by theme.json via theme.EmitCSSCustomProperties(); nothing here
+ * hard-codes a color or size. That is what makes gn-hello a faithful
+ * brand reference — edit theme.json, see the site change.
  *
- * Every visual choice consumes a token emitted by theme.json via
- * theme.EmitCSSCustomProperties(); nothing in this file hard-codes
- * a color or size. That's what makes it a faithful reference: edit
- * theme.json, see the site change.
+ * The brand contract:
+ *  - cream paper background (--wp-preset--color--paper = #F5F2EA),
+ *    forest ink (--wp-preset--color--ink = #0E1A14), emerald-deep
+ *    accent (--wp-preset--color--accent = #047857) for links and
+ *    interactive emphasis.
+ *  - Archivo grotesque for display type (h1, h2) via
+ *    --wp-preset--font-family--display, Geist for body via
+ *    --wp-preset--font-family--sans, Instrument Serif for the italic
+ *    accent rule (any <em> inside a heading), and Geist Mono for
+ *    code / IDs.
+ *  - The italic-accent rule swaps any <em> inside h1 / h2 to
+ *    Instrument Serif italic at 1.05em, coloured by the accent token.
  */
 
 :root {
-  --gn-color-ink:    var(--wp-preset--color--ink, #0f172a);
-  --gn-color-paper:  var(--wp-preset--color--paper, #ffffff);
-  --gn-color-muted:  var(--wp-preset--color--muted, #64748b);
-  --gn-color-accent: var(--wp-preset--color--accent, #2563eb);
+  --gn-color-ink:    var(--wp-preset--color--ink, #0E1A14);
+  --gn-color-paper:  var(--wp-preset--color--paper, #F5F2EA);
+  --gn-color-muted:  var(--wp-preset--color--muted, #4A5C52);
+  --gn-color-accent: var(--wp-preset--color--accent, #047857);
 
-  --gn-font-sans:  var(--wp-preset--font-family--sans, system-ui, sans-serif);
-  --gn-font-serif: var(--wp-preset--font-family--serif, Georgia, serif);
+  --gn-font-sans:    var(--wp-preset--font-family--sans, Geist, system-ui, sans-serif);
+  --gn-font-display: var(--wp-preset--font-family--display, Archivo, system-ui, sans-serif);
+  --gn-font-serif:   var(--wp-preset--font-family--serif, Instrument Serif, Georgia, serif);
+  --gn-font-mono:    var(--wp-preset--font-family--mono, Geist Mono, ui-monospace, monospace);
 
   --gn-size-sm: var(--wp-preset--font-size--sm, 0.875rem);
   --gn-size-md: var(--wp-preset--font-size--md, 1rem);
@@ -33,23 +47,58 @@ body {
   margin: 0;
   background: var(--gn-color-paper);
   color: var(--gn-color-ink);
-  font-family: var(--gn-font-serif);
+  font-family: var(--gn-font-sans);
   font-size: var(--gn-size-md);
-  line-height: 1.6;
+  line-height: 1.65;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
-a { color: var(--gn-color-accent); }
-a:hover { text-decoration: underline; }
+a {
+  color: var(--gn-color-accent);
+  text-decoration: none;
+  text-underline-offset: 0.15em;
+}
+a:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
 
-h1, h2, h3, h4, h5, h6 {
+/* ---------------------------------------------------------------------------
+ * Headings — Archivo grotesque + italic-accent rule.
+ * The italic-accent fires on <em> inside h1/h2 (the "signature move"
+ * from docs/design/HANDOFF.md) so post titles can carry one emphasized
+ * editorial word.
+ * ------------------------------------------------------------------------- */
+h1, h2 {
+  font-family: var(--gn-font-display);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  margin: 1.5em 0 0.5em;
+  color: var(--gn-color-ink);
+}
+h3, h4, h5, h6 {
   font-family: var(--gn-font-sans);
+  font-weight: 600;
+  letter-spacing: -0.005em;
   line-height: 1.25;
   margin: 1.5em 0 0.5em;
+  color: var(--gn-color-ink);
 }
 h1 { font-size: var(--gn-size-xl); }
 h2 { font-size: var(--gn-size-lg); }
 h3 { font-size: var(--gn-size-md); }
 
+h1 em, h2 em {
+  font-family: var(--gn-font-serif);
+  font-weight: 400;
+  font-style: italic;
+  font-size: 1.05em;
+  letter-spacing: -0.01em;
+  color: var(--gn-color-accent);
+}
+
 .gn-main,
 .gn-site-header,
 .gn-site-footer {
@@ -70,10 +119,13 @@ h3 { font-size: var(--gn-size-md); }
   font-size: var(--gn-size-sm);
 }
 
+/* Post meta — Geist Mono in the eyebrow scale. */
 .gn-post-meta {
   color: var(--gn-color-muted);
-  font-family: var(--gn-font-sans);
+  font-family: var(--gn-font-mono);
   font-size: var(--gn-size-sm);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
   margin: 0 0 1.5rem;
   gap: 0.75rem;
 }
@@ -86,4 +138,18 @@ h3 { font-size: var(--gn-size-md); }
   font-size: var(--gn-size-sm);
 }
 
+/* Inline code uses Geist Mono so prose lines stay coherent with
+   sidebar IDs and analytics callouts. */
+code, kbd, samp {
+  font-family: var(--gn-font-mono);
+  font-size: 0.92em;
+}
+
+/* 404 keeps the italic-accent rule. */
 .gn-404 { text-align: center; }
+.gn-404 h1 em {
+  font-family: var(--gn-font-serif);
+  font-style: italic;
+  font-weight: 400;
+  color: var(--gn-color-accent);
+}
diff --git a/themes/gn-hello/theme.json b/themes/gn-hello/theme.json
index dd4e12a9..ab33f667 100644
--- a/themes/gn-hello/theme.json
+++ b/themes/gn-hello/theme.json
@@ -6,27 +6,41 @@
     "appearanceTools": true,
     "color": {
       "palette": [
-        { "slug": "ink",       "name": "Ink",       "color": "#0f172a" },
-        { "slug": "paper",     "name": "Paper",     "color": "#ffffff" },
-        { "slug": "muted",     "name": "Muted",     "color": "#64748b" },
-        { "slug": "accent",    "name": "Accent",    "color": "#2563eb" }
+        { "slug": "ink",    "name": "Ink",    "color": "#0E1A14" },
+        { "slug": "paper",  "name": "Paper",  "color": "#F5F2EA" },
+        { "slug": "muted",  "name": "Muted",  "color": "#4A5C52" },
+        { "slug": "accent", "name": "Accent", "color": "#047857" }
       ],
       "custom": true
     },
     "typography": {
       "fontFamilies": [
-        { "slug": "sans",
+        {
+          "slug": "sans",
           "name": "Sans",
-          "fontFamily": "system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" },
-        { "slug": "serif",
+          "fontFamily": "Geist, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
+        },
+        {
+          "slug": "display",
+          "name": "Display",
+          "fontFamily": "Archivo, Geist, system-ui, sans-serif"
+        },
+        {
+          "slug": "serif",
           "name": "Serif",
-          "fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Georgia, serif" }
+          "fontFamily": "Instrument Serif, Iowan Old Style, Apple Garamond, Georgia, serif"
+        },
+        {
+          "slug": "mono",
+          "name": "Mono",
+          "fontFamily": "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
+        }
       ],
       "fontSizes": [
-        { "slug": "sm",  "name": "Small",  "size": "0.875rem" },
-        { "slug": "md",  "name": "Medium", "size": "1rem"     },
-        { "slug": "lg",  "name": "Large",  "size": "1.25rem"  },
-        { "slug": "xl",  "name": "X-Large","size": "1.75rem"  }
+        { "slug": "sm", "name": "Small",   "size": "0.875rem" },
+        { "slug": "md", "name": "Medium",  "size": "1rem"     },
+        { "slug": "lg", "name": "Large",   "size": "1.25rem"  },
+        { "slug": "xl", "name": "X-Large", "size": "1.75rem"  }
       ],
       "lineHeight": true
     },
@@ -36,15 +50,32 @@
     }
   },
   "styles": {
-    "color":      { "background": "var(--wp-preset--color--paper)",
-                    "text":       "var(--wp-preset--color--ink)" },
-    "typography": { "fontFamily": "var(--wp-preset--font-family--serif)",
-                    "fontSize":   "var(--wp-preset--font-size--md)",
-                    "lineHeight": "1.6" },
+    "color": {
+      "background": "var(--wp-preset--color--paper)",
+      "text":       "var(--wp-preset--color--ink)"
+    },
+    "typography": {
+      "fontFamily": "var(--wp-preset--font-family--sans)",
+      "fontSize":   "var(--wp-preset--font-size--md)",
+      "lineHeight": "1.65"
+    },
     "elements": {
-      "h1":   { "typography": { "fontSize": "var(--wp-preset--font-size--xl)", "lineHeight": "1.2" } },
-      "h2":   { "typography": { "fontSize": "var(--wp-preset--font-size--lg)" } },
-      "link": { "color":      { "text": "var(--wp-preset--color--accent)" } }
+      "h1": {
+        "typography": {
+          "fontFamily": "var(--wp-preset--font-family--display)",
+          "fontSize":   "var(--wp-preset--font-size--xl)",
+          "lineHeight": "1.05"
+        }
+      },
+      "h2": {
+        "typography": {
+          "fontFamily": "var(--wp-preset--font-family--display)",
+          "fontSize":   "var(--wp-preset--font-size--lg)"
+        }
+      },
+      "link": {
+        "color": { "text": "var(--wp-preset--color--accent)" }
+      }
     }
   },
   "supports": {
diff --git a/themes/gn-pro/style.css b/themes/gn-pro/style.css
index 969762f5..e1133d18 100644
--- a/themes/gn-pro/style.css
+++ b/themes/gn-pro/style.css
@@ -1,18 +1,22 @@
 /*
 Theme Name: GoNext Pro
 Theme URI: https://gonext.dev/themes/gn-pro
-Description: A production-grade reference block theme demonstrating the full GoNext theme.json schema: 10-color palette, 4 gradients, 3 font families, 6 fluid font sizes, multi-step spacing scale, dual content widths, six heading scales, themed link and button elements, plus a 9-template hierarchy with five template parts (header, footer, sidebar, comments, post-meta).
-Version: 1.0.0
+Description: The production-grade reference block theme rebuilt around the Living-Systems brand. Cream paper / forest ink / emerald + lavender accents, Archivo grotesque + Geist + Geist Mono typography, with the italic-accent rule firing on emphasized words inside every display heading. Ten-color palette, four organic gradients, three font families, six fluid font sizes, multi-step spacing scale, dual content widths, six heading scales, themed link + button + heading elements, plus a 9-template hierarchy with five template parts.
+Version: 2.0.0
 Requires at least: GoNext 1.0
 Tested up to: GoNext 1.0
 License: MIT
 Text Domain: gn-pro
-Tags: block-theme, full-site-editing, blog, magazine, two-column
+Tags: block-theme, full-site-editing, blog, magazine, two-column, living-systems
 
-This stylesheet intentionally avoids hard-coded colors and sizes.
-Every visual value is read from the CSS custom properties emitted by
-the GoNext theme renderer (--wp-preset--*), so theme.json remains the
-single source of truth for design tokens.
+This stylesheet intentionally avoids hard-coded colors. Every visual
+value is read from the CSS custom properties emitted by the GoNext
+theme renderer, so theme.json remains the single source of truth for
+design tokens.
+
+The italic-accent rule (the brand's "signature move" from
+docs/design/HANDOFF.md) is the one place we pin a font name inline —
+Instrument Serif is part of the brand and not author-customizable.
 */
 
 /* -----------------------------------------------------------------
@@ -35,13 +39,17 @@ body {
   color: var(--wp-preset--color--ink);
   font-family: var(--wp-preset--font-family--sans);
   font-size: var(--wp-preset--font-size--md);
-  line-height: 1.6;
+  line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 /* -----------------------------------------------------------------
    Typography elements (h1–h6, a, blockquote, code)
+
+   The italic-accent rule fires inside h1 and h2: any <em> swaps to
+   Instrument Serif italic at 1.05em, coloured by --color--accent.
+   This is the brand's signature move from HANDOFF.md.
    -------------------------------------------------------------- */
 h1,
 h2,
@@ -50,51 +58,79 @@ h4,
 h5,
 h6 {
   margin: 0 0 1rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  font-weight: 700;
+  letter-spacing: -0.03em;
   color: var(--wp-preset--color--ink);
 }
 
 h1 {
-  font-family: var(--wp-preset--font-family--serif);
+  font-family: var(--wp-preset--font-family--display);
   font-size: var(--wp-preset--font-size--xxl);
-  line-height: 1.1;
-  letter-spacing: -0.02em;
+  font-weight: 800;
+  line-height: 1.0;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
 }
 
 h2 {
-  font-family: var(--wp-preset--font-family--serif);
+  font-family: var(--wp-preset--font-family--display);
   font-size: var(--wp-preset--font-size--xl);
-  line-height: 1.2;
+  font-weight: 800;
+  line-height: 1.15;
 }
 
 h3 {
+  font-family: var(--wp-preset--font-family--sans);
   font-size: var(--wp-preset--font-size--lg);
-  line-height: 1.3;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.005em;
 }
 
 h4 {
+  font-family: var(--wp-preset--font-family--sans);
   font-size: var(--wp-preset--font-size--md);
+  font-weight: 600;
   line-height: 1.4;
+  letter-spacing: -0.005em;
 }
 
 h5 {
+  font-family: var(--wp-preset--font-family--sans);
   font-size: var(--wp-preset--font-size--sm);
+  font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.08em;
 }
 
 h6 {
+  font-family: var(--wp-preset--font-family--mono);
   font-size: var(--wp-preset--font-size--xs);
+  font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;
   color: var(--wp-preset--color--ink-muted);
 }
 
+/* Italic-accent rule. The font family is the one brand decision we
+   pin in style.css rather than theme.json — Instrument Serif is part
+   of the typography contract and not author-editable. */
+h1 em,
+h2 em,
+.italic-accent {
+  font-family: "Instrument Serif", Georgia, serif;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 1.05em;
+  letter-spacing: -0.01em;
+  color: var(--wp-preset--color--accent);
+}
+
 p {
   margin: 0 0 1rem;
+  text-wrap: pretty;
 }
 
 a {
@@ -102,7 +138,8 @@ a {
   text-decoration: underline;
   text-underline-offset: 0.15em;
   text-decoration-thickness: 1px;
-  transition: color 120ms ease, text-decoration-thickness 120ms ease;
+  transition: color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    text-decoration-thickness 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 a:hover,
@@ -129,11 +166,13 @@ b {
 blockquote {
   margin: 1.5rem 0;
   padding: 1rem 1.5rem;
-  border-left: 4px solid var(--wp-preset--color--accent);
+  border-left: 3px solid var(--wp-preset--color--accent);
   background-color: var(--wp-preset--color--paper-muted);
-  font-family: var(--wp-preset--font-family--serif);
+  border-radius: 0 8px 8px 0;
+  font-family: "Instrument Serif", Georgia, serif;
   font-size: var(--wp-preset--font-size--lg);
   font-style: italic;
+  font-weight: 400;
   line-height: 1.5;
 }
 
@@ -142,23 +181,29 @@ kbd,
 pre,
 samp {
   font-family: var(--wp-preset--font-family--mono);
-  font-size: 0.95em;
+  font-size: 0.92em;
 }
 
 code {
   padding: 0.1em 0.3em;
   background-color: var(--wp-preset--color--paper-muted);
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 pre {
   padding: 1rem;
-  background-color: var(--wp-preset--color--paper-muted);
-  border-radius: 6px;
+  background-color: var(--wp-preset--color--ink);
+  color: var(--wp-preset--color--paper);
+  border-radius: 8px;
   box-shadow: var(--wp-preset--shadow--soft);
   overflow-x: auto;
 }
 
+pre code {
+  background-color: transparent;
+  color: inherit;
+}
+
 hr {
   border: 0;
   border-top: 1px solid var(--wp-preset--color--rule);
@@ -195,7 +240,7 @@ hr {
 }
 
 /* -----------------------------------------------------------------
-   Site header
+   Site header — sticky cream pill with the brand wordmark + nav.
    -------------------------------------------------------------- */
 .site-header {
   border-bottom: 1px solid var(--wp-preset--color--rule);
@@ -212,14 +257,15 @@ hr {
 }
 
 .site-header__brand {
-  gap: 0.5rem;
-  align-items: center;
+  gap: 0.25rem;
+  align-items: baseline;
 }
 
 .site-header__title {
-  font-family: var(--wp-preset--font-family--serif);
+  font-family: var(--wp-preset--font-family--display);
   font-size: var(--wp-preset--font-size--lg);
-  font-weight: 700;
+  font-weight: 800;
+  letter-spacing: -0.03em;
   margin: 0;
 }
 
@@ -228,8 +274,15 @@ hr {
   text-decoration: none;
 }
 
+.site-header__title em {
+  font-family: "Instrument Serif", Georgia, serif;
+  font-style: italic;
+  font-weight: 400;
+  color: var(--wp-preset--color--ink);
+}
+
 .site-header__nav {
-  gap: 1rem;
+  gap: 1.5rem;
   align-items: center;
 }
 
@@ -245,6 +298,12 @@ hr {
   border-bottom: 0;
 }
 
+.post-list-item__title {
+  font-family: var(--wp-preset--font-family--display);
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
 .post-list-item__title a {
   color: var(--wp-preset--color--ink);
   text-decoration: none;
@@ -266,18 +325,25 @@ hr {
 .post-card {
   padding: 1.5rem;
   border: 1px solid var(--wp-preset--color--rule);
-  border-radius: 8px;
-  background-color: var(--wp-preset--color--paper);
-  transition: box-shadow 160ms ease, transform 160ms ease;
+  border-radius: 12px;
+  background-color: var(--wp-preset--color--paper-muted);
+  box-shadow: var(--wp-preset--shadow--soft);
+  transition: box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    border-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 .post-card:hover {
   box-shadow: var(--wp-preset--shadow--lifted);
+  border-color: var(--wp-preset--color--ink-muted);
   transform: translateY(-2px);
 }
 
 .post-card__title {
   margin-top: 1rem;
+  font-family: var(--wp-preset--font-family--display);
+  font-weight: 700;
+  letter-spacing: -0.025em;
 }
 
 .post-card__title a {
@@ -290,19 +356,29 @@ hr {
 }
 
 /* -----------------------------------------------------------------
-   Single post
+   Single post — editorial reading layout.
    -------------------------------------------------------------- */
 .single .post {
   padding-block: 1.5rem;
 }
 
 .post__hero img {
-  border-radius: 12px;
+  border-radius: 16px;
   box-shadow: var(--wp-preset--shadow--lifted);
 }
 
 .post__title {
   margin-block: 1.5rem 1rem;
+  font-family: var(--wp-preset--font-family--display);
+  font-weight: 800;
+  letter-spacing: -0.035em;
+}
+
+.post__title em {
+  font-family: "Instrument Serif", Georgia, serif;
+  font-style: italic;
+  font-weight: 400;
+  color: var(--wp-preset--color--accent);
 }
 
 .post__footer {
@@ -310,18 +386,24 @@ hr {
   padding-top: 1.5rem;
   border-top: 1px solid var(--wp-preset--color--rule);
   color: var(--wp-preset--color--ink-muted);
-  font-size: var(--wp-preset--font-size--sm);
+  font-family: var(--wp-preset--font-family--mono);
+  font-size: var(--wp-preset--font-size--xs);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
 /* -----------------------------------------------------------------
    Page
    -------------------------------------------------------------- */
 .page__hero img {
-  border-radius: 12px;
+  border-radius: 16px;
 }
 
 .page__title {
   margin-block: 1.5rem 2rem;
+  font-family: var(--wp-preset--font-family--display);
+  font-weight: 800;
+  letter-spacing: -0.035em;
 }
 
 /* -----------------------------------------------------------------
@@ -339,6 +421,9 @@ hr {
 .category__title,
 .search__title {
   margin-bottom: 0.5rem;
+  font-family: var(--wp-preset--font-family--display);
+  font-weight: 800;
+  letter-spacing: -0.035em;
 }
 
 .archive__description,
@@ -348,9 +433,10 @@ hr {
 }
 
 .category__eyebrow {
+  font-family: var(--wp-preset--font-family--mono);
   font-size: var(--wp-preset--font-size--xs);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.12em;
   color: var(--wp-preset--color--accent);
   margin-bottom: 0.5rem;
 }
@@ -367,7 +453,8 @@ hr {
   flex: 0 0 280px;
   padding: 1.5rem;
   background-color: var(--wp-preset--color--paper-muted);
-  border-radius: 8px;
+  border: 1px solid var(--wp-preset--color--rule);
+  border-radius: 12px;
   gap: 1.5rem;
 }
 
@@ -377,26 +464,31 @@ hr {
 }
 
 .sidebar__heading {
-  font-size: var(--wp-preset--font-size--sm);
+  font-family: var(--wp-preset--font-family--mono);
+  font-size: var(--wp-preset--font-size--xs);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;
   color: var(--wp-preset--color--ink-muted);
   margin-bottom: 1rem;
+  font-weight: 500;
 }
 
 /* -----------------------------------------------------------------
    Post meta + comments
    -------------------------------------------------------------- */
 .post-meta {
-  gap: 0.5rem;
-  font-size: var(--wp-preset--font-size--sm);
+  gap: 0.75rem;
+  font-family: var(--wp-preset--font-family--mono);
+  font-size: var(--wp-preset--font-size--xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
   color: var(--wp-preset--color--ink-muted);
   margin-block: 1rem;
 }
 
 .post-meta__dot {
   margin: 0;
-  color: var(--wp-preset--color--ink-muted);
+  color: var(--wp-preset--color--accent);
 }
 
 .post-meta__author a,
@@ -417,7 +509,10 @@ hr {
 }
 
 .post-comments__heading {
+  font-family: var(--wp-preset--font-family--display);
   font-size: var(--wp-preset--font-size--xl);
+  font-weight: 700;
+  letter-spacing: -0.025em;
   margin-bottom: 1.5rem;
 }
 
@@ -425,7 +520,8 @@ hr {
   padding: 1.5rem;
   margin-bottom: 1rem;
   background-color: var(--wp-preset--color--paper-muted);
-  border-radius: 8px;
+  border: 1px solid var(--wp-preset--color--rule);
+  border-radius: 12px;
   gap: 1rem;
 }
 
@@ -444,6 +540,7 @@ hr {
 }
 
 .comment__date {
+  font-family: var(--wp-preset--font-family--mono);
   font-size: var(--wp-preset--font-size--xs);
   color: var(--wp-preset--color--ink-muted);
 }
@@ -472,6 +569,7 @@ hr {
 }
 
 .not-found__eyebrow {
+  font-family: var(--wp-preset--font-family--mono);
   font-size: var(--wp-preset--font-size--sm);
   text-transform: uppercase;
   letter-spacing: 0.15em;
@@ -480,8 +578,17 @@ hr {
 }
 
 .not-found__title {
-  font-family: var(--wp-preset--font-family--serif);
+  font-family: var(--wp-preset--font-family--display);
   font-size: var(--wp-preset--font-size--xxl);
+  font-weight: 800;
+  letter-spacing: -0.035em;
+}
+
+.not-found__title em {
+  font-family: "Instrument Serif", Georgia, serif;
+  font-style: italic;
+  font-weight: 400;
+  color: var(--wp-preset--color--accent);
 }
 
 .not-found__lede {
@@ -495,7 +602,7 @@ hr {
 }
 
 /* -----------------------------------------------------------------
-   Buttons (core/button)
+   Buttons (core/button) — emerald CTA with the brand hover
    -------------------------------------------------------------- */
 .wp-block-button__link {
   display: inline-block;
@@ -505,11 +612,14 @@ hr {
   font-family: var(--wp-preset--font-family--sans);
   font-size: var(--wp-preset--font-size--md);
   font-weight: 600;
+  letter-spacing: -0.005em;
   text-decoration: none;
   border: 0;
-  border-radius: 0.5rem;
+  border-radius: 8px;
   cursor: pointer;
-  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
+  transition: background-color 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
 .wp-block-button__link:hover,
@@ -524,35 +634,44 @@ hr {
 }
 
 /* -----------------------------------------------------------------
-   Site footer
+   Site footer — forest surface, mono fineprint.
    -------------------------------------------------------------- */
 .site-footer {
   margin-top: 3rem;
-  padding-block: 2rem;
-  background-color: var(--wp-preset--color--paper-muted);
-  color: var(--wp-preset--color--ink);
+  padding-block: 2.5rem;
+  background-color: var(--wp-preset--color--ink);
+  color: var(--wp-preset--color--paper);
   border-top: 1px solid var(--wp-preset--color--rule);
 }
 
+.site-footer a {
+  color: var(--wp-preset--color--paper);
+}
+
 .site-footer__top {
   gap: 2rem;
 }
 
 .site-footer__heading {
-  font-size: var(--wp-preset--font-size--sm);
+  font-family: var(--wp-preset--font-family--mono);
+  font-size: var(--wp-preset--font-size--xs);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--wp-preset--color--ink-muted);
+  letter-spacing: 0.12em;
+  color: var(--wp-preset--color--paper);
+  font-weight: 500;
   margin-bottom: 1rem;
 }
 
 .site-footer__rule {
   margin-block: 1.5rem;
+  border-top-color: var(--wp-preset--color--ink-muted);
 }
 
 .site-footer__bottom {
-  font-size: var(--wp-preset--font-size--sm);
-  color: var(--wp-preset--color--ink-muted);
+  font-family: var(--wp-preset--font-family--mono);
+  font-size: var(--wp-preset--font-size--xs);
+  color: var(--wp-preset--color--paper);
+  letter-spacing: 0.04em;
   gap: 1rem;
 }
 
@@ -568,12 +687,12 @@ hr {
 .is-style-danger  { color: var(--wp-preset--color--danger); }
 
 /* -----------------------------------------------------------------
-   Gradient blocks
+   Gradient blocks — the four brand gradients.
    -------------------------------------------------------------- */
-.has-sunrise-gradient-background { background: var(--wp-preset--gradient--sunrise); }
-.has-dusk-gradient-background    { background: var(--wp-preset--gradient--dusk); }
-.has-ocean-gradient-background   { background: var(--wp-preset--gradient--ocean); }
-.has-forest-gradient-background  { background: var(--wp-preset--gradient--forest); }
+.has-emerald-glow-gradient-background  { background: var(--wp-preset--gradient--emerald-glow); }
+.has-lavender-glow-gradient-background { background: var(--wp-preset--gradient--lavender-glow); }
+.has-forest-pulse-gradient-background  { background: var(--wp-preset--gradient--forest-pulse); }
+.has-dawn-gradient-background          { background: var(--wp-preset--gradient--dawn); }
 
 /* -----------------------------------------------------------------
    Responsive
diff --git a/themes/gn-pro/theme.json b/themes/gn-pro/theme.json
index 2bb7af50..58656ab3 100644
--- a/themes/gn-pro/theme.json
+++ b/themes/gn-pro/theme.json
@@ -6,22 +6,22 @@
     "appearanceTools": true,
     "color": {
       "palette": [
-        { "slug": "ink",          "name": "Ink",            "color": "#0b1220" },
-        { "slug": "ink-muted",    "name": "Ink Muted",      "color": "#475569" },
-        { "slug": "paper",        "name": "Paper",          "color": "#ffffff" },
-        { "slug": "paper-muted",  "name": "Paper Muted",    "color": "#f8fafc" },
-        { "slug": "rule",         "name": "Rule",           "color": "#e2e8f0" },
-        { "slug": "accent",       "name": "Accent",         "color": "#2563eb" },
-        { "slug": "accent-fg",    "name": "On Accent",      "color": "#ffffff" },
-        { "slug": "success",      "name": "Success",        "color": "#16a34a" },
-        { "slug": "warning",      "name": "Warning",        "color": "#d97706" },
-        { "slug": "danger",       "name": "Danger",         "color": "#dc2626" }
+        { "slug": "ink",         "name": "Ink",            "color": "#0E1A14" },
+        { "slug": "ink-muted",   "name": "Ink Muted",      "color": "#4A5C52" },
+        { "slug": "paper",       "name": "Paper",          "color": "#F5F2EA" },
+        { "slug": "paper-muted", "name": "Paper Muted",    "color": "#EFEBE0" },
+        { "slug": "rule",        "name": "Rule",           "color": "#D9D2C0" },
+        { "slug": "accent",      "name": "Accent",         "color": "#10B981" },
+        { "slug": "accent-fg",   "name": "On Accent",      "color": "#022C22" },
+        { "slug": "success",     "name": "Success",        "color": "#059669" },
+        { "slug": "warning",     "name": "Warning",        "color": "#D97706" },
+        { "slug": "danger",      "name": "Danger",         "color": "#DC2626" }
       ],
       "gradients": [
-        { "slug": "sunrise", "name": "Sunrise", "gradient": "linear-gradient(135deg, #fde68a, #f97316)" },
-        { "slug": "dusk",    "name": "Dusk",    "gradient": "linear-gradient(135deg, #4338ca, #7c3aed)" },
-        { "slug": "ocean",   "name": "Ocean",   "gradient": "linear-gradient(135deg, #0ea5e9, #2563eb)" },
-        { "slug": "forest",  "name": "Forest",  "gradient": "linear-gradient(135deg, #16a34a, #0f766e)" }
+        { "slug": "emerald-glow",  "name": "Emerald Glow",  "gradient": "radial-gradient(circle, #34D399 0%, #10B981 100%)" },
+        { "slug": "lavender-glow", "name": "Lavender Glow", "gradient": "radial-gradient(circle, #A78BFA 0%, #7C3AED 100%)" },
+        { "slug": "forest-pulse",  "name": "Forest Pulse",  "gradient": "linear-gradient(135deg, #0E1A14 0%, #18261E 60%, #22322A 100%)" },
+        { "slug": "dawn",          "name": "Dawn",          "gradient": "linear-gradient(135deg, #EFEBE0 0%, #F5F2EA 50%, #D1FAE5 100%)" }
       ],
       "custom": true,
       "customGradient": true,
@@ -31,19 +31,19 @@
     "typography": {
       "fontFamilies": [
         {
-          "slug": "sans",
-          "name": "Sans",
-          "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
+          "slug": "display",
+          "name": "Display",
+          "fontFamily": "Archivo, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
         },
         {
-          "slug": "serif",
-          "name": "Serif",
-          "fontFamily": "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, serif"
+          "slug": "sans",
+          "name": "Sans",
+          "fontFamily": "Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
         },
         {
           "slug": "mono",
           "name": "Mono",
-          "fontFamily": "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
+          "fontFamily": "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
         }
       ],
       "fontSizes": [
@@ -52,8 +52,8 @@
         { "slug": "md",  "name": "Medium",   "size": "1rem" },
         { "slug": "lg",  "name": "Large",    "size": "1.25rem" },
         { "slug": "xl",  "name": "X-Large",  "size": "1.75rem" },
-        { "slug": "xxl", "name": "Display",  "size": "2.5rem",
-          "fluid": { "min": "2rem", "max": "3.5rem" } }
+        { "slug": "xxl", "name": "Display",  "size": "2.75rem",
+          "fluid": { "min": "2.25rem", "max": "4rem" } }
       ],
       "lineHeight": true,
       "letterSpacing": true,
@@ -85,9 +85,9 @@
     },
     "shadow": {
       "presets": [
-        { "slug": "soft",   "name": "Soft",   "shadow": "0 1px 2px rgba(15, 23, 42, 0.05)" },
-        { "slug": "lifted", "name": "Lifted", "shadow": "0 8px 24px rgba(15, 23, 42, 0.12)" },
-        { "slug": "deep",   "name": "Deep",   "shadow": "0 24px 48px rgba(15, 23, 42, 0.18)" }
+        { "slug": "soft",   "name": "Soft",   "shadow": "0 1px 2px rgba(14, 26, 20, 0.04)" },
+        { "slug": "lifted", "name": "Lifted", "shadow": "0 6px 14px -4px rgba(14, 26, 20, 0.08), 0 2px 6px -2px rgba(14, 26, 20, 0.04)" },
+        { "slug": "deep",   "name": "Deep",   "shadow": "0 16px 32px -10px rgba(14, 26, 20, 0.14), 0 4px 10px -4px rgba(14, 26, 20, 0.06)" }
       ]
     },
     "blocks": {
@@ -108,29 +108,29 @@
     "typography": {
       "fontFamily": "var(--wp-preset--font-family--sans)",
       "fontSize": "var(--wp-preset--font-size--md)",
-      "lineHeight": "1.6"
+      "lineHeight": "1.65"
     },
     "elements": {
       "h1": {
         "typography": {
-          "fontFamily": "var(--wp-preset--font-family--serif)",
+          "fontFamily": "var(--wp-preset--font-family--display)",
           "fontSize": "var(--wp-preset--font-size--xxl)",
-          "lineHeight": "1.1"
+          "lineHeight": "1.0"
         },
         "color": { "text": "var(--wp-preset--color--ink)" }
       },
       "h2": {
         "typography": {
-          "fontFamily": "var(--wp-preset--font-family--serif)",
+          "fontFamily": "var(--wp-preset--font-family--display)",
           "fontSize": "var(--wp-preset--font-size--xl)",
-          "lineHeight": "1.2"
+          "lineHeight": "1.15"
         }
       },
       "h3": {
         "typography": {
           "fontFamily": "var(--wp-preset--font-family--sans)",
           "fontSize": "var(--wp-preset--font-size--lg)",
-          "lineHeight": "1.3"
+          "lineHeight": "1.25"
         }
       },
       "h4": {