cacheplane · blove · Sep 8, 2026 · Sep 8, 2026 · Sep 8, 2026 · Sep 8, 2026
diff --git a/apps/website/src/app/card/tokens.ts b/apps/website/src/app/card/tokens.ts
@@ -19,16 +19,16 @@ export const CARD = {
   /** --color-surface-dim, the user bubble. */
   dim: '#f5f5f5',
   /** --color-text-primary / secondary / muted */
-  ink: '#1c1c1c',
+  ink: '#0a0a0a',
   inkSecondary: '#464646',
   inkMuted: '#737373',
   /** --color-border / --color-border-strong */
   border: '#e5e5e5',
   borderStrong: '#c8c8c8',
   /** --color-accent and its surface/border tints. */
-  accent: '#004090',
-  accentSurface: 'rgba(0, 64, 144, 0.06)',
-  accentBorder: 'rgba(0, 64, 144, 0.30)',
+  accent: '#15253e',
+  accentSurface: 'rgba(255, 175, 0, 0.10)',
+  accentBorder: 'rgba(255, 175, 0, 0.35)',
   /** BrowserFrame traffic lights (ui.css). */
   trafficRed: '#FF5F57',
   trafficAmber: '#FEBC2E',

diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css
@@ -34,7 +34,7 @@ html {
 body {
   background-color: var(--color-bg);
   color: var(--color-text-primary);
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /* overflow-x: CLIP, never hidden. `hidden` makes <body> a scroll container

diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { EB_Garamond, Inter, JetBrains_Mono } from 'next/font/google';
+import { Archivo, Archivo_Black, Inter, JetBrains_Mono } from 'next/font/google';
 import '@threadplane/design-tokens/tokens.css';
 import './global.css';
 import { Nav } from '../components/shared/Nav';
@@ -20,16 +20,31 @@ import { getFormPolicy } from '../lib/growth/form-policy';
 import { WebsiteSignals } from '../components/shared/WebsiteSignals';
 import { websiteContentCatalog } from '../lib/growth/website-content';
 
-const garamond = EB_Garamond({
+const display = Archivo_Black({
   subsets: ['latin'],
-  weight: ['400', '700', '800'],
+  weight: '400',
+  variable: '--font-display',
+});
+
+const sans = Archivo({
+  subsets: ['latin'],
+  // Archivo ships a true italic. Loading it makes every italic on the text
+  // face real rather than an obliqued upright — Inter was normal-only here,
+  // so those sites had been faux-italic all along.
   style: ['normal', 'italic'],
-  variable: '--font-garamond',
+  variable: '--font-sans',
 });
 
-const inter = Inter({
+/**
+ * Inter is retained for diagrams only, and MUST be loaded here rather than
+ * left to theme.css: next/font registers its family under a hashed name, so
+ * theme.css's raw `Inter, system-ui` stack never matches it and would silently
+ * fall back to system-ui. Diagram geometry is pinned to Inter's metrics —
+ * see the FONTS note in src/styles/ui.css and e2e/home-architecture.spec.ts.
+ */
+const diagram = Inter({
   subsets: ['latin'],
-  variable: '--font-inter',
+  variable: '--font-diagram',
 });
 
 const mono = JetBrains_Mono({
@@ -66,7 +81,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${garamond.variable} ${inter.variable} ${mono.variable}`}
+      className={`${display.variable} ${sans.variable} ${diagram.variable} ${mono.variable}`}
     >
       <body>
         {/*

diff --git a/apps/website/src/components/docs/DocsControlPlane.spec.tsx b/apps/website/src/components/docs/DocsControlPlane.spec.tsx
@@ -50,7 +50,7 @@ describe('DocsControlPlane', () => {
       '[data-docs-control-plane-context] [data-control-plane-section-heading]',
     ]) {
       const declarations = declarationsFor(docsCss, selector);
-      expect(declarations).toMatch(/font-family:\s*var\(--font-inter\)/);
+      expect(declarations).toMatch(/font-family:\s*var\(--font-sans\)/);
       expect(declarations).toMatch(/font-size:\s*12px/);
       expect(declarations).toMatch(/font-weight:\s*600/);
       expect(declarations).toMatch(/letter-spacing:\s*normal/);

diff --git a/apps/website/src/components/landing/Hero.tsx b/apps/website/src/components/landing/Hero.tsx
@@ -27,7 +27,7 @@ export function Hero() {
   const closeInstall = useCallback(() => setInstallOpen(false), []);
 
   return (
-    <Section surface="canvas" ariaLabelledBy="hero-heading">
+    <Section surface="signal" ariaLabelledBy="hero-heading">
       <Container>
         <div className="hero-stack">
           <Eyebrow tone="accent" className="hero-eyebrow">{HERO_EYEBROW}</Eyebrow>
@@ -59,7 +59,7 @@ export function Hero() {
             </a>
           </div>
           <HeroDemo />
-          <p className="hero-trust">{HERO_TRUST_LINE}</p>
+          <p className="hero-trust hero-strip">{HERO_TRUST_LINE}</p>
         </div>
       </Container>
       <InstallDialog open={installOpen} onClose={closeInstall} />

diff --git a/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx b/apps/website/src/components/landing/chat-landing/ChatLandingCodeShowcase.tsx
@@ -22,7 +22,7 @@ export class MyChatPage {
 
 const SNIPPET_2 = `chat {
   --chat-bg: #f8f9fc;
-  --chat-user-bg: #004090;
+  --chat-user-bg: #15253E;
   --chat-user-color: #ffffff;
   --chat-assistant-bg: #f0f4ff;
   --chat-font-family: 'Inter', sans-serif;

diff --git a/apps/website/src/components/ui/Section.spec.tsx b/apps/website/src/components/ui/Section.spec.tsx
@@ -9,6 +9,12 @@ describe('Section', () => {
     expect(el?.getAttribute('data-surface')).toBe('dark');
   });
 
+  it('renders data-surface="signal" when asked', () => {
+    const { container } = render(<Section surface="signal">x</Section>);
+    const el = container.querySelector('[data-ui="section"]');
+    expect(el?.getAttribute('data-surface')).toBe('signal');
+  });
+
   it('defaults to canvas', () => {
     const { container } = render(<Section>x</Section>);
     expect(

diff --git a/apps/website/src/components/ui/Section.tsx b/apps/website/src/components/ui/Section.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode, HTMLAttributes } from 'react';
 import { cn } from '../../lib/cn';
 
-type Surface = 'canvas' | 'tinted' | 'white' | 'dark';
+type Surface = 'canvas' | 'tinted' | 'white' | 'dark' | 'signal';
 
 interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'id'> {
   children: ReactNode;

diff --git a/apps/website/src/styles/chrome.css b/apps/website/src/styles/chrome.css
@@ -205,7 +205,7 @@
   padding: 10px 0;
   font-size: 15px;
   font-weight: 500;
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
   background: transparent;
   color: var(--color-text-muted);
   border: none;
@@ -240,7 +240,7 @@
   line-height: 24px;
   min-height: 44px;
   text-decoration: none;
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
   color: var(--color-text-secondary);
   background: transparent;
 }
@@ -286,7 +286,7 @@
   color: var(--color-accent);
   background: var(--color-accent-surface);
   text-decoration: none;
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
   font-weight: 600;
 }
 .nav-mobile-section-toggle {
@@ -301,7 +301,7 @@
   padding: 12px 14px;
   min-height: 48px;
   border-radius: 8px;
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
   font-size: 16px;
   line-height: 24px;
   color: var(--color-text-primary);
@@ -323,7 +323,7 @@
   min-height: 48px;
   color: var(--color-text-secondary);
   text-decoration: none;
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
 }
 .nav-mobile-github-link {
   display: flex;
@@ -334,7 +334,7 @@
   min-height: 48px;
   color: var(--color-text-secondary);
   text-decoration: none;
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
   font-size: 16px;
 }
 .nav-mobile-cta-wrap {
@@ -421,9 +421,8 @@
   margin-bottom: 8px;
 }
 .toast-title {
-  font-family: var(--font-garamond);
+  font-family: var(--font-display);
   font-size: 1.05rem;
-  font-weight: 700;
   color: var(--color-text-primary);
   line-height: 1.3;
   margin-bottom: 6px;
@@ -461,7 +460,7 @@
   font-size: 12px;
   color: var(--color-text-muted);
   text-decoration: underline;
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
 }
 
 /* Mobile docs-search entry (polish arc PR 3) — button reset to match the