diff --git a/apps/website/src/styles/chrome.css b/apps/website/src/styles/chrome.css
index 74762b7c5..15f6ec560 100644
--- a/apps/website/src/styles/chrome.css
+++ b/apps/website/src/styles/chrome.css
@@ -7,11 +7,7 @@
  * these in @layer would let utilities win and change rendering.
  *
  * Migration: docs/superpowers/plans/2026-08-29-inline-style-substrate-migration.md
- *
- * Font-family exception: see the top of ui.css for the next/font
- * shadowing rationale. Verbatim raw-stack literals below
- * ('Inter, sans-serif', 'var(--font-mono,"JetBrains Mono",monospace)',
- * 'var(--font-garamond,"EB Garamond",Georgia,serif)') are intentional.
+ * Fonts: unified onto the next/font vars — see the font note atop ui.css.
  */
 
 /* One nav height. The fixed nav measures 58px (px-6 py-4) and 81px at the md
@@ -175,7 +171,7 @@
   padding: 10px 0;
   font-size: 15px;
   font-weight: 500;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   background: transparent;
   color: var(--color-text-muted);
   border: none;
@@ -210,7 +206,7 @@
   line-height: 24px;
   min-height: 44px;
   text-decoration: none;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   color: var(--color-text-secondary);
   background: transparent;
 }
@@ -232,7 +228,7 @@
   flex: 1;
   text-align: center;
   padding: 8px 0;
-  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-family: var(--font-mono);
   font-size: 0.75rem;
   font-weight: 600;
   background: transparent;
@@ -256,7 +252,7 @@
   color: var(--color-accent);
   background: var(--color-accent-surface);
   text-decoration: none;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   font-weight: 600;
 }
 .nav-mobile-section-toggle {
@@ -271,7 +267,7 @@
   padding: 12px 14px;
   min-height: 48px;
   border-radius: 8px;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   font-size: 16px;
   line-height: 24px;
   color: var(--color-text-primary);
@@ -293,7 +289,7 @@
   min-height: 48px;
   color: var(--color-text-secondary);
   text-decoration: none;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
 }
 .nav-mobile-github-link {
   display: flex;
@@ -304,7 +300,7 @@
   min-height: 48px;
   color: var(--color-text-secondary);
   text-decoration: none;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   font-size: 16px;
 }
 .nav-mobile-cta-wrap {
@@ -352,7 +348,7 @@
   padding: 4px;
 }
 .toast-eyebrow {
-  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-family: var(--font-mono);
   font-size: 0.62rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
@@ -361,7 +357,7 @@
   margin-bottom: 8px;
 }
 .toast-title {
-  font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
+  font-family: var(--font-garamond);
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--color-text-primary);
@@ -383,7 +379,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-family: var(--font-mono);
   font-size: 0.68rem;
   color: var(--color-text-muted);
   text-decoration: underline;
@@ -400,7 +396,7 @@
   padding: 8px 12px;
   font-size: 0.82rem;
   color: var(--color-text-primary);
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   outline: none;
   margin-bottom: 10px;
 }
@@ -413,7 +409,7 @@
   font-size: 0.7rem;
   color: var(--color-text-muted);
   text-decoration: underline;
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
 }
 .toast-success-text {
   font-size: 0.85rem;
diff --git a/apps/website/src/styles/docs.css b/apps/website/src/styles/docs.css
index 11405e4c4..06cdd3d98 100644
--- a/apps/website/src/styles/docs.css
+++ b/apps/website/src/styles/docs.css
@@ -63,7 +63,7 @@
 }
 
 .docs-prose [data-rehype-pretty-code-figure] code {
-  font-family: var(--font-mono), monospace;
+  font-family: var(--font-mono);
   font-size: inherit;
   background: none !important;
   padding: 0 !important;
@@ -90,7 +90,7 @@
    * table columns squeeze below the chip width and wrap `agent` as agen/t. */
   word-break: normal;
   overflow-wrap: break-word;
-  font-family: var(--font-mono), monospace;
+  font-family: var(--font-mono);
   font-size: 0.85em;
   background: var(--color-accent-surface);
   color: var(--color-accent);
@@ -255,7 +255,7 @@
   color: var(--color-accent);
 }
 .ag-ui-arch-box-title {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 0.95rem;
   font-weight: 600;
   color: var(--color-text-primary);
@@ -360,13 +360,7 @@
 /*
  * mdx components (components/docs/mdx/*.tsx) — presentation for the MDX
  * content components authored inside docs pages.
- *
- * Font-family exception: see the top of ui.css for the next/font shadowing
- * rationale. `tokens.typography.fontSans/fontMono/fontSerif` are raw stacks
- * and are copied through verbatim below ('Inter, system-ui, sans-serif',
- * '"JetBrains Mono", monospace', '"EB Garamond", Georgia, serif');
- * `tokens.typography.body.family` is already `var(--font-inter)` and is
- * copied through as the var.
+ * Fonts: unified onto the next/font vars — see the font note atop ui.css.
  */
 
 /* mdx — Callout */
@@ -408,7 +402,7 @@
   height: 20px;
   border-radius: var(--radius-full);
   color: var(--color-text-inverted);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 700;
   flex-shrink: 0;
@@ -426,7 +420,7 @@
   background: var(--color-angular-red);
 }
 .mdx-callout-title {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 15px;
   color: var(--color-text-primary);
   font-weight: 600;
@@ -460,7 +454,7 @@
   border-radius: var(--radius-full);
   background: var(--color-accent);
   color: var(--color-text-inverted);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 700;
   display: inline-flex;
@@ -490,7 +484,7 @@
   padding-bottom: 8px;
 }
 .mdx-step-title {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 17px;
   font-weight: 600;
   color: var(--color-text-primary);
@@ -539,7 +533,7 @@
   margin-bottom: 6px;
 }
 .mdx-card-title {
-  font-family: "EB Garamond", Georgia, serif;
+  font-family: var(--font-garamond);
   font-weight: 700;
   font-size: 0.95rem;
   color: var(--color-text-primary);
@@ -570,7 +564,7 @@
 }
 .mdx-tab-button {
   padding: 10px 18px;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 0.8rem;
   font-weight: 400;
   color: var(--color-text-secondary);
@@ -637,7 +631,7 @@
 }
 .mdx-codegroup-tab {
   padding: 8px 14px;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 0.7rem;
   font-weight: 400;
   color: var(--color-text-secondary);
@@ -698,14 +692,14 @@
   margin-bottom: 8px;
 }
 .mdx-chip-title {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   font-weight: 600;
   color: var(--color-text-primary);
   margin-bottom: 4px;
 }
 .mdx-chip-signal {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   color: var(--color-accent);
 }
@@ -760,7 +754,7 @@
   min-width: 0;
 }
 .docs-sidebar-lib-trigger-label {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 0.8rem;
 }
 .docs-sidebar-lib-caret {
@@ -792,7 +786,7 @@
   min-width: 0;
 }
 .docs-sidebar-lib-item-title {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-weight: 600;
   color: var(--color-text-primary);
   font-size: 0.8rem;
@@ -853,7 +847,7 @@
   font-size: 0.8rem;
 }
 .docs-sidebar-search-kbd {
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 0.65rem;
   color: var(--color-text-muted);
   background: var(--color-surface-dim);
@@ -1008,7 +1002,7 @@
   /* Typography on the LIST, not the links: the separators are siblings of the
    * links inside each li, and when only the links carried 13px the first two
    * separators inherited body's 16px/24px and floated 3px high (findings §3). */
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   line-height: 1.5;
 }
@@ -1042,7 +1036,7 @@
   min-width: 0;
 }
 .docs-page-header-label {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -1077,7 +1071,7 @@
   align-items: center;
   gap: 7px;
   padding: 7px 12px;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   font-weight: 500;
   color: var(--color-text-secondary);
@@ -1149,7 +1143,7 @@
   width: 100%;
   text-align: left;
   padding: 8px 12px;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   color: var(--color-text-primary);
   background: transparent;
@@ -1591,7 +1585,7 @@
   margin-bottom: 8px;
 }
 .docs-prevnext-title {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 16px;
   font-weight: 600;
   color: var(--color-accent);
diff --git a/apps/website/src/styles/landing.css b/apps/website/src/styles/landing.css
index 65c007af5..d01497009 100644
--- a/apps/website/src/styles/landing.css
+++ b/apps/website/src/styles/landing.css
@@ -197,7 +197,7 @@
   margin-bottom: 24px;
 }
 .feature-block-card-title {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
   color: var(--color-accent);
@@ -210,7 +210,7 @@
   color: var(--color-text-secondary);
 }
 .feature-block-cta {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 15px;
   font-weight: 600;
   color: var(--color-accent);
@@ -308,7 +308,7 @@
   color: var(--color-text-secondary);
 }
 .why-row__primitive {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 13px;
   color: var(--color-text-muted);
   white-space: nowrap;
@@ -457,7 +457,7 @@
   justify-content: space-between;
 }
 .wp-cover-badge {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.15em;
@@ -465,7 +465,7 @@
   margin-bottom: 14px;
 }
 .wp-cover-title {
-  font-family: "EB Garamond", Georgia, serif;
+  font-family: var(--font-garamond);
   font-size: 28px;
   line-height: 1.15;
   font-weight: 700;
@@ -474,13 +474,13 @@
   font-style: italic;
 }
 .wp-cover-desc {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 14px;
   line-height: 1.5;
   color: var(--color-text-secondary);
 }
 .wp-cover-footer {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--color-text-muted);
   text-transform: uppercase;
@@ -575,7 +575,7 @@
   border-radius: var(--radius-full);
   background: var(--color-accent);
   color: var(--color-text-inverted);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 14px;
   font-weight: 700;
   display: inline-flex;
@@ -583,7 +583,7 @@
   justify-content: center;
 }
 .pilot-timeline-title {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 17px;
   font-weight: 600;
   color: var(--color-text-primary);
@@ -629,14 +629,14 @@
   min-width: 0;
 }
 .ecosystem-tile-name {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 15px;
   line-height: 1.25;
   font-weight: 700;
   color: var(--color-text-primary);
 }
 .ecosystem-tile-note {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   line-height: 1.4;
   text-transform: uppercase;
@@ -681,7 +681,7 @@
   align-items: start;
 }
 .ecosystem-row-title {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   line-height: 1.5;
   font-weight: 700;
@@ -878,13 +878,13 @@
   gap: 4px;
 }
 .backends-grid-name {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 14px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
 .backends-grid-note {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--color-text-muted);
 }
@@ -940,7 +940,7 @@
   gap: 5px;
 }
 .demo-modal__tab {
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   font-size: 12px;
   font-weight: 600;
   padding: 6px 12px;
@@ -957,7 +957,7 @@
 .demo-modal__url {
   flex: 1;
   text-align: center;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 600;
   color: var(--color-text-muted);
@@ -991,12 +991,12 @@
   background: var(--color-surface);
 }
 .demo-modal__hint {
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   font-size: 12px;
   color: var(--color-text-muted);
 }
 .demo-modal__open-link {
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   font-size: 12px;
   font-weight: 600;
   color: var(--color-accent);
@@ -1017,7 +1017,7 @@
   text-align: center;
 }
 .demo-showcase__eyebrow {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -1066,7 +1066,7 @@
   font-size: 22px;
 }
 .demo-showcase__launch-label {
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   font-weight: 600;
   font-size: 13px;
   color: #fff;
@@ -1111,7 +1111,7 @@
   margin-bottom: 48px;
 }
 .render-show-eyebrow {
-  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-family: var(--font-mono);
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
@@ -1120,7 +1120,7 @@
   margin-bottom: 14px;
 }
 .render-show-heading {
-  font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
+  font-family: var(--font-garamond);
   font-size: clamp(26px, 3.5vw, 42px);
   font-weight: 800;
   line-height: 1.1;
@@ -1144,7 +1144,7 @@
   border-bottom: 1px solid var(--color-border);
 }
 .render-show-card-title {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 0.68rem;
   font-weight: 700;
   color: var(--color-render-green);
@@ -1160,7 +1160,7 @@
   margin-bottom: 48px;
 }
 .lg-show-eyebrow {
-  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-family: var(--font-mono);
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
@@ -1169,7 +1169,7 @@
   margin-bottom: 14px;
 }
 .lg-show-heading {
-  font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
+  font-family: var(--font-garamond);
   font-size: clamp(26px, 3.5vw, 42px);
   font-weight: 800;
   line-height: 1.1;
@@ -1193,7 +1193,7 @@
   border-bottom: 1px solid var(--color-border);
 }
 .lg-show-card-title {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 0.68rem;
   font-weight: 700;
   color: var(--color-accent);
@@ -1209,7 +1209,7 @@
   margin-bottom: 48px;
 }
 .chat-show-eyebrow {
-  font-family: var(--font-mono,"JetBrains Mono",monospace);
+  font-family: var(--font-mono);
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
@@ -1218,7 +1218,7 @@
   margin-bottom: 14px;
 }
 .chat-show-heading {
-  font-family: var(--font-garamond,"EB Garamond",Georgia,serif);
+  font-family: var(--font-garamond);
   font-size: clamp(26px, 3.5vw, 42px);
   font-weight: 800;
   line-height: 1.1;
@@ -1242,7 +1242,7 @@
   border-bottom: 1px solid var(--color-border);
 }
 .chat-show-card-title {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-mono);
   font-size: 0.68rem;
   font-weight: 700;
   color: var(--color-chat-purple);
diff --git a/apps/website/src/styles/marketing.css b/apps/website/src/styles/marketing.css
index 0c0f90ccf..6fae22b0b 100644
--- a/apps/website/src/styles/marketing.css
+++ b/apps/website/src/styles/marketing.css
@@ -24,7 +24,7 @@
   gap: 4px;
 }
 .pricing-billing-tab {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   font-weight: 600;
   padding: 8px 16px;
@@ -52,14 +52,14 @@
 .pricing-compare-table {
   width: 100%;
   border-collapse: collapse;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 14px;
 }
 .pricing-compare-th-label {
   text-align: left;
   padding: 20px 18px 14px;
   color: var(--color-text-muted);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -83,7 +83,7 @@
   transform: translateX(-50%);
   background: var(--color-accent);
   color: #fff;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -92,7 +92,7 @@
   white-space: nowrap;
 }
 .pricing-compare-tier-name {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   color: var(--color-accent);
   font-size: 11px;
   font-weight: 700;
@@ -107,7 +107,7 @@
   text-align: left;
   padding: 0 18px 20px;
   color: var(--color-text-primary);
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   font-weight: 600;
   background: var(--color-surface);
@@ -129,14 +129,14 @@
   gap: 4px;
 }
 .pricing-compare-price-amount {
-  font-family: "EB Garamond", Georgia, serif;
+  font-family: var(--font-garamond);
   font-weight: 700;
   font-size: 28px;
   color: var(--color-text-primary);
   line-height: 1;
 }
 .pricing-compare-price-period {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 12px;
   color: var(--color-text-muted);
 }
@@ -162,14 +162,14 @@
 .pricing-compare-td-label {
   padding: 14px 18px;
   color: var(--color-text-primary);
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   font-weight: 500;
 }
 .pricing-compare-td {
   padding: 14px 14px;
   text-align: center;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   background: transparent;
 }
@@ -273,14 +273,14 @@
   flex-shrink: 0;
 }
 .lead-form-value-title {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 15px;
   font-weight: 600;
   color: var(--color-text-primary);
   margin-bottom: 4px;
 }
 .lead-form-value-body {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 14px;
   line-height: 1.5;
   color: var(--color-text-secondary);
@@ -289,7 +289,7 @@
 .lead-form-value-link {
   display: inline-block;
   margin-top: 6px;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   color: var(--color-accent);
   text-decoration: none;
@@ -362,7 +362,7 @@
   align-items: center;
   gap: 6px;
   font-size: 13px;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   color: var(--color-text-secondary);
   cursor: pointer;
 }
@@ -416,7 +416,7 @@
   padding: 12px 16px;
   font-size: var(--text-body);
   color: var(--color-text-secondary);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   border-bottom: 1px solid var(--color-border);
 }
 
@@ -729,7 +729,7 @@
   margin-top: 0;
 }
 .sol-code-block-label {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.04em;
diff --git a/apps/website/src/styles/pages.css b/apps/website/src/styles/pages.css
index 6bdec683d..097ac7246 100644
--- a/apps/website/src/styles/pages.css
+++ b/apps/website/src/styles/pages.css
@@ -79,10 +79,10 @@
 }
 .licensing-code-inline {
   /* raw font stack, not the `.family` var — see the font-exception note atop ui.css */
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
 }
 .licensing-code-block {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 13px;
   line-height: 1.6;
   background: var(--color-surface-tinted);
@@ -258,7 +258,7 @@
 }
 .docs-index-attribution {
   /* raw font stack, not the `.family` var — see the font-exception note atop ui.css */
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 10px;
   line-height: 1.4;
   text-transform: uppercase;
@@ -279,7 +279,7 @@
 }
 .docs-index-cta {
   /* raw font stack, not the `.family` var — see the font-exception note atop ui.css */
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 14px;
   font-weight: 600;
   color: var(--color-accent);
@@ -301,7 +301,7 @@
 }
 .docs-index-snippet-code {
   /* raw font stack, not the `.family` var — see the font-exception note atop ui.css */
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 13px;
   color: var(--color-text-secondary);
   overflow: hidden;
@@ -504,7 +504,7 @@
   margin-bottom: 16px;
 }
 .sol-index-cta {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 14px;
   font-weight: 600;
   color: var(--color-accent);
@@ -578,7 +578,7 @@
   margin-bottom: 12px;
 }
 .sol-page-arch-title {
-  font-family: "EB Garamond", Georgia, serif;
+  font-family: var(--font-garamond);
   font-size: 22px;
   font-weight: 700;
   color: var(--color-text-primary);
@@ -595,7 +595,7 @@
   margin-bottom: 16px;
 }
 .sol-page-arch-cta {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 14px;
   font-weight: 600;
   color: var(--color-accent);
@@ -604,7 +604,7 @@
   text-decoration: none;
 }
 .sol-page-metric {
-  font-family: "EB Garamond", Georgia, serif;
+  font-family: var(--font-garamond);
   font-style: italic;
   font-size: 32px;
   font-weight: 700;
@@ -708,7 +708,7 @@
   align-items: baseline;
 }
 .pilot-roadmap-week {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--color-accent);
   font-weight: 700;
@@ -855,7 +855,7 @@
   border-radius: var(--radius-md);
   padding: 12px;
   margin-bottom: 12px;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--color-text-secondary);
   white-space: pre;
@@ -867,13 +867,13 @@
   padding: 16px;
 }
 .render-page-ai-label {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--color-accent);
   margin-bottom: 8px;
 }
 .render-page-card-title {
-  font-family: "EB Garamond", Georgia, serif;
+  font-family: var(--font-garamond);
   font-size: 18px;
   font-weight: 700;
   color: var(--color-text-primary);
@@ -935,7 +935,7 @@
   margin-bottom: 16px;
 }
 .chat-page-tool-label {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--color-text-muted);
   margin-bottom: 8px;
@@ -945,7 +945,7 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: 12px;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   color: var(--color-text-primary);
 }
@@ -953,7 +953,7 @@
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px solid var(--color-border);
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--color-text-secondary);
 }
@@ -1008,7 +1008,7 @@
   margin-bottom: 24px;
 }
 .ag-ui-page-langgraph-note {
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   color: var(--color-text-muted);
   margin: 0 auto;
@@ -1024,7 +1024,7 @@
   padding: 20px 22px;
   background: #1a1b26;
   color: #a9b1d6;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 13px;
   line-height: 1.6;
   min-height: 320px;
@@ -1084,7 +1084,7 @@
   padding: 20px 22px;
   background: #1a1b26;
   color: #a9b1d6;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 13px;
   line-height: 1.6;
   min-height: 320px;
@@ -1228,7 +1228,7 @@
   margin: 0 auto 24px;
 }
 .thanks-code {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
 }
 .thanks-note {
   font-family: var(--font-inter);
@@ -1272,7 +1272,7 @@
   max-width: 480px;
 }
 .error-page-digest {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   color: var(--color-text-muted);
   margin: 0 0 28px;
@@ -1341,7 +1341,7 @@
   display: block;
 }
 .home-code {
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
 }
 
 /* Contact page — app/contact/page.tsx */
diff --git a/apps/website/src/styles/ui.css b/apps/website/src/styles/ui.css
index aa8134463..567589206 100644
--- a/apps/website/src/styles/ui.css
+++ b/apps/website/src/styles/ui.css
@@ -96,25 +96,26 @@
 }
 
 /*
- * FONT FAMILIES ARE VERBATIM LITERALS, NOT var(--font-*), on purpose.
+ * FONTS: every font-family in apps/website CSS is var(--font-inter),
+ * var(--font-mono), or var(--font-garamond) — never a raw stack.
  *
- * layout.tsx loads fonts via next/font, which SHADOWS --font-inter,
- * --font-mono, and --font-garamond on <html> with its own stacks
- * ("Inter Fallback" etc.). var(--font-inter) therefore resolves to the
- * next/font value at runtime, NOT the theme.css token value — measured:
- * migrating Button to the var changed its rendered font and shifted
- * widths ~2.5px. Sites whose inline style was the raw token stack keep
- * that stack verbatim; only sites that already used a
- * `tokens.typography.*.family` value (which IS 'var(--font-*)') keep
- * the var. Unifying fonts onto next/font is a real visual change that
- * belongs to the polish arc, not this migration.
+ * layout.tsx loads the fonts via next/font, which defines those three
+ * vars on <html> with self-hosted, size-adjusted stacks ("Inter",
+ * "Inter Fallback", etc.). Raw literals like `Inter, system-ui` only
+ * matched a locally-installed Inter (next/font registers its family
+ * under a hashed name), so they silently fell back to system fonts.
+ * The 2026-08-30 unification (findings audit §10) moved all sites onto
+ * the vars — a deliberate visual change: real webfonts everywhere, no
+ * more mixed stacks. theme.css also defines the same var names from
+ * the design tokens; next/font's <html>-level values win, which is now
+ * the intended resolution, and they guarantee the vars always resolve.
  */
 /* UI primitive — Pill */
 [data-ui="pill"] {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 500;
   padding: 4px 10px;
@@ -162,7 +163,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-weight: 600;
   line-height: 1;
   border-radius: var(--radius-md);
@@ -223,7 +224,7 @@
   gap: 16px;
   padding: 20px 0;
   cursor: pointer;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 17px;
   font-weight: 600;
   color: var(--color-text-primary);
@@ -236,7 +237,7 @@
 }
 [data-ui="faq-item"] > div {
   padding-bottom: 20px;
-  font-family: Inter, system-ui, sans-serif;
+  font-family: var(--font-inter);
   font-size: 16px;
   line-height: 1.6;
   color: var(--color-text-secondary);
@@ -247,7 +248,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-family: "EB Garamond", Georgia, serif;
+  font-family: var(--font-garamond);
   font-weight: 700;
   color: var(--color-text-primary);
   line-height: 1;
@@ -331,7 +332,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: center;
-  font-family: "JetBrains Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
   color: var(--color-text-muted);
   background: var(--color-surface);
@@ -367,18 +368,18 @@
 }
 
 /* UI primitive — TabGroup.
- * `font-family: Inter, sans-serif` and `border-radius: 8px` are copied
- * verbatim from the original inline literals — they are NOT the
- * `--font-inter` / `--radius-md` tokens (which resolve to different
- * fallback stacks / 10px respectively), so mapping them to those vars
- * would be a value change, not a verbatim move. */
+ * `border-radius: 8px` is copied verbatim from the original inline
+ * literal — it is NOT the `--radius-md` token (10px), so mapping it to
+ * the var would be a value change, not a verbatim move. (The font is on
+ * the unified next/font var like everything else — see the font note
+ * above.) */
 [data-ui="tab-group-list"] {
   display: flex;
   gap: 6px;
   margin-bottom: 12px;
 }
 [data-ui="tab-group-tab"] {
-  font-family: Inter, sans-serif;
+  font-family: var(--font-inter);
   font-size: 13px;
   font-weight: 600;
   padding: 8px 14px;