diff --git a/src/components/demos/PatchingDemo.tsx b/src/components/demos/PatchingDemo.tsx
index 0dbdfbe5a4..0fe8109ad0 100644
--- a/src/components/demos/PatchingDemo.tsx
+++ b/src/components/demos/PatchingDemo.tsx
@@ -73,7 +73,7 @@ export default function PatchingDemo({ data }: { data: Data }) {
             <svg viewBox={`0 0 ${S + pad * 2} ${S + pad * 2}`} role="img" aria-label={`Scatter of activation versus attribution patching across 144 heads, Pearson r = ${data.pearson_activation_vs_attribution.toFixed(3)}`}>
               <line x1={sx(-ext)} y1={sy(-ext)} x2={sx(ext)} y2={sy(ext)} stroke="var(--rule)" strokeDasharray="4 3" />
               <line x1={sx(0)} x2={sx(0)} y1={pad} y2={pad + S} stroke="var(--rule)" /><line y1={sy(0)} y2={sy(0)} x1={pad} x2={pad + S} stroke="var(--rule)" />
-              {pts.map((p) => <circle key={`${p.l}-${p.h}`} cx={sx(p.x)} cy={sy(p.y)} r="2.6" fill="var(--accent)" opacity=".65"><title>{`L${p.l}H${p.h}: act ${p.x.toFixed(3)}, attr ${p.y.toFixed(3)}`}</title></circle>)}
+              {pts.map((p) => <circle key={`${p.l}-${p.h}`} cx={sx(p.x)} cy={sy(p.y)} r="2.6" fill="var(--accent-red)" opacity=".65"><title>{`L${p.l}H${p.h}: act ${p.x.toFixed(3)}, attr ${p.y.toFixed(3)}`}</title></circle>)}
               <text x={pad + S / 2} y={S + pad * 2 - 6} fontSize="10" textAnchor="middle">activation patching</text>
               <text x={10} y={pad + S / 2} fontSize="10" textAnchor="middle" transform={`rotate(-90 10 ${pad + S / 2})`}>attribution patching</text>
             </svg>
diff --git a/src/components/demos/viz.tsx b/src/components/demos/viz.tsx
index 14c46e1641..0bce31f1db 100644
--- a/src/components/demos/viz.tsx
+++ b/src/components/demos/viz.tsx
@@ -54,7 +54,7 @@ export function Legend({ min, max, label }: { min: string; max: string; label: s
   );
 }
 
-export function Bars({ values, labels, max, title, color = 'var(--accent)', threshold }: { values: number[]; labels: string[]; max: number; title: string; color?: string; threshold?: number }) {
+export function Bars({ values, labels, max, title, color = 'var(--accent-blue)', threshold }: { values: number[]; labels: string[]; max: number; title: string; color?: string; threshold?: number }) {
   const w = 260, rowH = 18, left = 34;
   return (
     <svg viewBox={`0 0 ${w + left + 40} ${values.length * rowH + 6}`} role="img" aria-label={title} style={{ width: '100%', maxWidth: 420 }}>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 57ae80faf0..0cbb14edea 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -37,10 +37,10 @@ const robotsNoindex = Astro.props.noindex || (Astro.props.manuscript && isDraft
   <meta property="og:url" content={canonical} />
   <meta property="og:image" content={ogImage} />
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="theme-color" content="#f8f6f1" />
+  <meta name="theme-color" content="#f4f4f4" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
   <script is:inline>
     try { const t = localStorage.getItem('theme'); if (t) document.documentElement.dataset.theme = t; } catch (e) {}
   </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2ede532175..cdafa34eff 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -92,8 +92,8 @@ const jsonld = {
           <circle cx="0" cy="0" r="1" fill="none" stroke="var(--ink-3)" stroke-width=".006" stroke-dasharray=".03 .03" />
           <line x1="-1.35" y1="0" x2="1.35" y2="0" stroke="var(--hair)" stroke-width=".006" />
           <line x1="0" y1="-1.35" x2="0" y2="1.35" stroke="var(--hair)" stroke-width=".006" />
-          {feats.map(([x, y], i) => feats.map(([x2, y2], j) => j > i && <line x1={x} y1={-y} x2={x2} y2={-y2} stroke="var(--accent)" stroke-width=".004" opacity=".35" />))}
-          {feats.map(([x, y], i) => <g><line x1="0" y1="0" x2={x} y2={-y} stroke="var(--accent)" stroke-width=".012" /><circle cx={x} cy={-y} r=".022" fill="var(--accent)" />
+          {feats.map(([x, y], i) => feats.map(([x2, y2], j) => j > i && <line x1={x} y1={-y} x2={x2} y2={-y2} stroke="var(--accent-red)" stroke-width=".004" opacity=".35" />))}
+          {feats.map(([x, y], i) => <g><line x1="0" y1="0" x2={x} y2={-y} stroke="var(--accent-red)" stroke-width=".012" /><circle cx={x} cy={-y} r=".022" fill="var(--accent-red)" />
             <text x={x * 1.17} y={-y * 1.17 + .035} font-size=".1" text-anchor="middle" fill="var(--ink-2)" font-family="var(--serif)" font-style="italic">f{i + 1}</text></g>)}
         </svg>
         <figcaption id="sketch-cap">Five features, two dimensions. When features are rarely active together, a network can store more of them than it has dimensions, at the cost of interference. <a href={url('demos/superposition/')}>Train it yourself</a>.</figcaption>
diff --git a/src/styles/global.css b/src/styles/global.css
index e7b685ecbb..c0dbace9be 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,22 +1,33 @@
 /* Interpretability for AI Safety — handbook styles.
    Editorial, print-like: paper, ink, hairline rules, one accent.
    Tokens first; dark mode only redefines tokens. */
+/* Brand palette and type (6 Nov 2026):
+   primary #0c0c0c for text, links, buttons and UI; background #f4f4f4;
+   red #FF0000 and blue #0000FF for diagrams, data and highlights only, never UI.
+   Headers: Fragment Mono, letter-spacing -0.05em. Body and UI: Work Sans.
+   Dark mode swaps primary and background; the accents stay. */
 :root {
-  --paper: #f8f6f1;
-  --paper-2: #f0ede5;
-  --ink: #16140f;
-  --ink-2: #47433b;
-  --ink-3: #7d776b;
-  --hair: #d9d4c7;
-  --hair-strong: #16140f;
-  --accent: #a8401b;          /* oxide red: links on hover, active states, data highlights */
-  --link: #16140f;
-  --grid: #e7e2d6;
-  --focus: #a8401b;
-  --tier-established: #9a5a2c; --tier-emerging: #5c7a2b; --tier-flagged: #b3261e;
-  --note-bg: #f3efe3; --note-ink: #5e4a13; --note-rule: #c8a84a;
-  --measured: #1f5f52; --illustrative: #6a4f99;
-  --pos: #2f5fa7; --neg: #b8452a; --zero: #efece4;
+  --font-headers: 'Fragment Mono', ui-monospace, Menlo, monospace;
+  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --primary: #0c0c0c;
+  --accent-red: #FF0000;
+  --accent-blue: #0000FF;
+
+  --paper: #f4f4f4;
+  --paper-2: #eaeaea;
+  --ink: var(--primary);
+  --ink-2: #3d3d3d;
+  --ink-3: #6e6e6e;
+  --hair: #d4d4d4;
+  --hair-strong: var(--primary);
+  --accent: var(--primary);   /* UI emphasis (hover, active, focus) uses the primary colour */
+  --link: var(--primary);
+  --grid: #e4e4e4;
+  --focus: var(--primary);
+  --tier-established: var(--accent-blue); --tier-emerging: var(--accent-red); --tier-flagged: var(--accent-red);
+  --note-bg: var(--paper-2); --note-ink: var(--ink); --note-rule: var(--ink-3);
+  --measured: var(--ink); --illustrative: var(--ink-2);
+  --pos: var(--accent-blue); --neg: var(--accent-red); --zero: #e6e6e6;
 
   /* legacy aliases used by components */
   --bg: var(--paper); --surface: var(--paper); --surface-2: var(--paper-2); --rule: var(--hair);
@@ -24,10 +35,10 @@
   --draft-bg: var(--note-bg); --draft-ink: var(--note-ink); --draft-rule: var(--note-rule);
   --pillar-1: var(--ink); --pillar-2: var(--ink); --pillar-3: var(--ink); --pillar-4: var(--ink);
 
-  --display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
-  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
-  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
+  --display: var(--font-headers);
+  --serif: var(--font-body);
+  --sans: var(--font-body);
+  --mono: var(--font-headers);
   --radius: 0px;
   --measure: 42rem;
   --gutter: 12rem;
@@ -35,20 +46,12 @@
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --paper: #141310; --paper-2: #1c1a16; --ink: #ebe7dd; --ink-2: #bdb7aa; --ink-3: #8a8477; --hair: #34312a; --hair-strong: #ebe7dd;
-    --accent: #e0835c; --link: #ebe7dd; --grid: #23211c; --focus: #e0835c;
-    --tier-established: #d89a6e; --tier-emerging: #a6c26d; --tier-flagged: #f08a80;
-    --note-bg: #26220f; --note-ink: #e6cf8a; --note-rule: #6d5b25; --measured: #7cc9b4; --illustrative: #b9a2e6;
-    --pos: #7aa3e6; --neg: #e88a6e; --zero: #24221d;
+    --primary: #f4f4f4; --paper: #0c0c0c; --paper-2: #1a1a1a; --ink-2: #c6c6c6; --ink-3: #8f8f8f; --hair: #2f2f2f; --grid: #1c1c1c; --zero: #1f1f1f;
     color-scheme: dark;
   }
 }
 :root[data-theme="dark"] {
-  --paper: #141310; --paper-2: #1c1a16; --ink: #ebe7dd; --ink-2: #bdb7aa; --ink-3: #8a8477; --hair: #34312a; --hair-strong: #ebe7dd;
-  --accent: #e0835c; --link: #ebe7dd; --grid: #23211c; --focus: #e0835c;
-  --tier-established: #d89a6e; --tier-emerging: #a6c26d; --tier-flagged: #f08a80;
-  --note-bg: #26220f; --note-ink: #e6cf8a; --note-rule: #6d5b25; --measured: #7cc9b4; --illustrative: #b9a2e6;
-  --pos: #7aa3e6; --neg: #e88a6e; --zero: #24221d;
+  --primary: #f4f4f4; --paper: #0c0c0c; --paper-2: #1a1a1a; --ink-2: #c6c6c6; --ink-3: #8f8f8f; --hair: #2f2f2f; --grid: #1c1c1c; --zero: #1f1f1f;
   color-scheme: dark;
 }
 
@@ -61,7 +64,7 @@ a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1
 a:hover { color: var(--accent); text-decoration-color: currentColor; }
 :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
 img, svg { max-width: 100%; height: auto; }
-h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
+h1, h2, h3, h4, h5, h6 { font-family: var(--font-headers); font-weight: 400; line-height: 1.15; letter-spacing: -0.05em; color: var(--ink); }
 h1 { font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.02em; margin: 0 0 1rem; }
 h2 { font-size: 1.75rem; margin: 2.5rem 0 .8rem; }
 h3 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; }