diff --git a/frontend/index.html b/frontend/index.html
index a8a8d31e..eab62959 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -11,7 +11,7 @@
     <script>
       // Apply theme class before React loads to prevent flash
       const savedTheme = localStorage.getItem('theme');
-      const validThemes = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta'];
+      const validThemes = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'folio', 'newsprint', 'walnut'];
       const themeClasses = {
         'light': ['light'],
         'light-rounded': ['light', 'light-rounded'],
@@ -25,6 +25,9 @@
         'night-owl': ['dark', 'night-owl'],
         'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
         'terracotta': ['dark', 'terracotta'],
+        'folio': ['light', 'folio'],
+        'newsprint': ['light', 'newsprint'],
+        'walnut': ['dark', 'walnut'],
       };
       const theme = validThemes.includes(savedTheme) ? savedTheme : 'light-rounded';
       document.documentElement.classList.add(...themeClasses[theme]);
@@ -37,7 +40,7 @@
     <script>
       // Also apply to body (mirrors the head script logic)
       const t = localStorage.getItem('theme');
-      const vt = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta'];
+      const vt = ['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta', 'folio', 'newsprint', 'walnut'];
       const tc = {
         'light': ['light'],
         'light-rounded': ['light', 'light-rounded'],
@@ -51,6 +54,9 @@
         'night-owl': ['dark', 'night-owl'],
         'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
         'terracotta': ['dark', 'terracotta'],
+        'folio': ['light', 'folio'],
+        'newsprint': ['light', 'newsprint'],
+        'walnut': ['dark', 'walnut'],
       };
       const bt = vt.includes(t) ? t : 'light-rounded';
       document.body.classList.add(...tc[bt]);
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
index 8b821a88..dedb84f5 100644
--- a/frontend/src/components/HomePage.tsx
+++ b/frontend/src/components/HomePage.tsx
@@ -314,7 +314,7 @@ export function HomePage() {
                     type="button"
                     className="flex cursor-pointer items-center gap-2 rounded-md border border-border-secondary bg-surface-tertiary px-3 py-1.5 text-sm text-text-primary hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-interactive"
                   >
-                    <span>{{ light: 'Light (sharp)', 'light-rounded': 'Light (rounded)', dark: 'Dark (sharp)', oled: 'OLED Black (sharp)', dusk: 'Dusk', 'dusk-oled': 'Dusk (OLED)', forge: 'Forge', ember: 'Ember', aurora: 'Aurora', 'night-owl': 'Night Owl', 'night-owl-oled': 'Night Owl (OLED)', terracotta: 'Terracotta' }[theme]}</span>
+                    <span>{{ light: 'Light (sharp)', 'light-rounded': 'Light (rounded)', dark: 'Dark (sharp)', oled: 'OLED Black (sharp)', dusk: 'Dusk', 'dusk-oled': 'Dusk (OLED)', forge: 'Forge', ember: 'Ember', aurora: 'Aurora', 'night-owl': 'Night Owl', 'night-owl-oled': 'Night Owl (OLED)', terracotta: 'Terracotta', folio: 'Folio', newsprint: 'Newsprint', walnut: 'Walnut' }[theme]}</span>
                     <ChevronDown className="w-3 h-3 text-text-tertiary" />
                   </button>
                 }
@@ -328,6 +328,9 @@ export function HomePage() {
                   { id: 'ember', label: 'Ember', onClick: () => setTheme('ember') },
                   { id: 'aurora', label: 'Aurora', onClick: () => setTheme('aurora') },
                   { id: 'terracotta', label: 'Terracotta', onClick: () => setTheme('terracotta') },
+                  { id: 'folio', label: 'Folio', description: 'Paper & ink — warm cream, near-black type, one vermilion accent.', onClick: () => setTheme('folio') },
+                  { id: 'newsprint', label: 'Newsprint', description: 'Cool grey stock, graphite type, halftone surfaces, ink-blue accent.', onClick: () => setTheme('newsprint') },
+                  { id: 'walnut', label: 'Walnut', description: 'Vellum & walnut — warm brown-black, parchment type, brass accent.', onClick: () => setTheme('walnut') },
                   { id: 'light', label: 'Light (sharp)', onClick: () => setTheme('light') },
                   { id: 'dark', label: 'Dark (sharp)', onClick: () => setTheme('dark') },
                   { id: 'oled', label: 'OLED Black (sharp)', onClick: () => setTheme('oled') },
diff --git a/frontend/src/components/panels/diff/DiffViewer.tsx b/frontend/src/components/panels/diff/DiffViewer.tsx
index d77bbe33..8b0bfc05 100644
--- a/frontend/src/components/panels/diff/DiffViewer.tsx
+++ b/frontend/src/components/panels/diff/DiffViewer.tsx
@@ -4,7 +4,7 @@ import type { DiffHighlighter } from '@git-diff-view/shiki';
 import { getDiffViewHighlighter } from '@git-diff-view/shiki';
 import { FileText, ChevronRight, ChevronDown, ExternalLink, ChevronsUpDown, ChevronsDownUp } from 'lucide-react';
 import type { DiffViewerProps, FileDiff } from '../../../types/diff';
-import { useTheme } from '../../../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../../../contexts/ThemeContext';
 import { useScrollSurface } from '../../../hooks/useScrollSurface';
 import "@git-diff-view/react/styles/diff-view.css";
 
@@ -141,7 +141,7 @@ export interface DiffViewerHandle {
 
 const DiffViewer = memo(forwardRef<DiffViewerHandle, DiffViewerProps>(({ files, className = '', sessionId, onOpenInEditor }, ref) => {
   const { theme } = useTheme();
-  const isDarkMode = theme !== 'light' && theme !== 'light-rounded';
+  const isDarkMode = !isLightTheme(theme);
   const [expandedFiles, setExpandedFiles] = useState<Set<number>>(new Set());
   const [highlighter, setHighlighter] = useState<DiffHighlighter | null>(null);
   const viewerRef = useRef<HTMLDivElement>(null);
diff --git a/frontend/src/components/panels/editor/FileEditor.tsx b/frontend/src/components/panels/editor/FileEditor.tsx
index 027b036e..22d3e9ae 100644
--- a/frontend/src/components/panels/editor/FileEditor.tsx
+++ b/frontend/src/components/panels/editor/FileEditor.tsx
@@ -6,7 +6,7 @@ import { useTree } from '@headless-tree/react';
 import { asyncDataLoaderFeature, selectionFeature, hotkeysCoreFeature, expandAllFeature } from '@headless-tree/core';
 import type { ItemInstance } from '@headless-tree/core';
 import { MonacoErrorBoundary } from '../../MonacoErrorBoundary';
-import { useTheme } from '../../../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../../../contexts/ThemeContext';
 import { debounce } from '../../../utils/debounce';
 import { devLog } from '../../../utils/console';
 import { MarkdownPreview } from '../../MarkdownPreview';
@@ -1233,7 +1233,7 @@ export function FileEditor({
   }, [binaryBlobUrl]);
 
   const { theme } = useTheme();
-  const isDarkMode = theme !== 'light' && theme !== 'light-rounded';
+  const isDarkMode = !isLightTheme(theme);
   const hasUnsavedChanges = fileContent !== originalContent;
   
   // Wrap onResize callback to avoid recreating
diff --git a/frontend/src/components/panels/logPanel/LogsView.tsx b/frontend/src/components/panels/logPanel/LogsView.tsx
index c55622eb..8d22a9f7 100644
--- a/frontend/src/components/panels/logPanel/LogsView.tsx
+++ b/frontend/src/components/panels/logPanel/LogsView.tsx
@@ -3,6 +3,7 @@ import { Search, X, Download, Trash2, ChevronUp, ChevronDown, Filter, Copy, Chec
 import { cn } from '../../../utils/cn';
 import AnsiToHtml from 'ansi-to-html';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { getTerminalTheme } from '../../../utils/terminalTheme';
 import { LiveRegion } from '../../ui/LiveRegion';
 import { areKeyboardShortcutsEnabled, useConfigStore } from '../../../stores/configStore';
 import { useScrollSurface } from '../../../hooks/useScrollSurface';
@@ -46,34 +47,28 @@ export const LogsView: React.FC<LogsViewProps> = ({ sessionId, isVisible }) => {
   const { theme } = useTheme();
   const keyboardShortcutsEnabled = useConfigStore((state) => areKeyboardShortcutsEnabled(state.config));
 
-  // Create ANSI to HTML converter with theme-aware colors
+  // ANSI → HTML converter using the active theme's terminal palette
+  // (--color-terminal-* tokens), so log colours match the terminal panel.
+  // Read in an effect: the theme classes are stamped on <html> by
+  // ThemeProvider's layout effect, which has run by the time this fires.
+  const [terminalPalette, setTerminalPalette] = useState(getTerminalTheme);
+  useEffect(() => {
+    setTerminalPalette(getTerminalTheme());
+  }, [theme]);
   const ansiConverter = useMemo(() => {
-    const isLight = theme === 'light' || theme === 'light-rounded';
+    const p = terminalPalette;
     return new AnsiToHtml({
-      fg: isLight ? '#1f2328' : '#e5e7eb',
-      bg: isLight ? '#ffffff' : '#0a0a0a',
+      fg: p.foreground,
+      bg: p.background,
       newline: true,
       escapeXML: true,
-      colors: {
-        0: isLight ? '#1f2328' : '#000000', // Black
-        1: isLight ? '#cf222e' : '#ef4444', // Red
-        2: isLight ? '#1a7f37' : '#10b981', // Green
-        3: isLight ? '#9a6700' : '#f59e0b', // Yellow
-        4: isLight ? '#2563eb' : '#3b82f6', // Blue
-        5: isLight ? '#8250df' : '#a855f7', // Magenta
-        6: isLight ? '#0891b2' : '#06b6d4', // Cyan
-        7: isLight ? '#6b7280' : '#e5e7eb', // White
-        8: isLight ? '#6b7280' : '#6b7280', // Bright Black (Gray)
-        9: isLight ? '#ef4444' : '#f87171', // Bright Red
-        10: isLight ? '#22c55e' : '#34d399', // Bright Green
-        11: isLight ? '#eab308' : '#fbbf24', // Bright Yellow
-        12: isLight ? '#3b82f6' : '#60a5fa', // Bright Blue
-        13: isLight ? '#a855f7' : '#c084fc', // Bright Magenta
-        14: isLight ? '#06b6d4' : '#22d3ee', // Bright Cyan
-        15: isLight ? '#1f2328' : '#ffffff', // Bright White
-      }
+      // ANSI slots 0–15; getTerminalTheme always fills these, the fallback only satisfies ITheme's optional typing.
+      colors: [
+        p.black, p.red, p.green, p.yellow, p.blue, p.magenta, p.cyan, p.white,
+        p.brightBlack, p.brightRed, p.brightGreen, p.brightYellow, p.brightBlue, p.brightMagenta, p.brightCyan, p.brightWhite,
+      ].map((color) => color ?? p.foreground ?? '#808080'),
     });
-  }, [theme]);
+  }, [terminalPalette]);
 
   // Load existing logs when component mounts or session changes
   useEffect(() => {
diff --git a/frontend/src/components/settings/categories/AppearanceSettings.tsx b/frontend/src/components/settings/categories/AppearanceSettings.tsx
index 7b80f621..2ae6ad06 100644
--- a/frontend/src/components/settings/categories/AppearanceSettings.tsx
+++ b/frontend/src/components/settings/categories/AppearanceSettings.tsx
@@ -13,9 +13,12 @@ import { ImmediateToggle, SegmentedControl } from '../SettingsControls';
 import type { SettingsPersistence } from '../useSettingsPersistence';
 import type { AppConfig } from '../../../types/config';
 
-const THEMES: Array<{ id: NonNullable<AppConfig['theme']>; label: string }> = [
+const THEMES: Array<{ id: NonNullable<AppConfig['theme']>; label: string; description?: string }> = [
   { id: 'light-rounded', label: 'Light (rounded)' },
   { id: 'light', label: 'Light (sharp)' },
+  { id: 'folio', label: 'Folio', description: 'Paper & ink — warm cream, near-black type, one vermilion accent.' },
+  { id: 'newsprint', label: 'Newsprint', description: 'Cool grey stock, graphite type, halftone surfaces, ink-blue accent.' },
+  { id: 'walnut', label: 'Walnut', description: 'Vellum & walnut — warm brown-black, parchment type, brass accent.' },
   { id: 'forge', label: 'Forge' },
   { id: 'night-owl', label: 'Night Owl' },
   { id: 'night-owl-oled', label: 'Night Owl (OLED)' },
@@ -54,7 +57,11 @@ export function AppearanceSettings({ persistence }: { persistence: SettingsPersi
             >
               <SelectTrigger aria-label="Theme"><SelectValue /></SelectTrigger>
               <SelectContent>
-                {THEMES.map((theme) => <SelectItem key={theme.id} value={theme.id}>{theme.label}</SelectItem>)}
+                {THEMES.map((theme) => (
+                  <SelectItem key={theme.id} value={theme.id} description={theme.description}>
+                    {theme.label}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>
diff --git a/frontend/src/components/ui/Select.tsx b/frontend/src/components/ui/Select.tsx
index 56ee4862..a5d3f3eb 100644
--- a/frontend/src/components/ui/Select.tsx
+++ b/frontend/src/components/ui/Select.tsx
@@ -131,10 +131,15 @@ const SelectLabel = forwardRef<
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
+interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+  /** Optional one-line hint rendered under the label inside the list (never in the trigger). */
+  description?: React.ReactNode;
+}
+
 const SelectItem = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+  SelectItemProps
+>(({ className, children, description, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
@@ -148,12 +153,19 @@ const SelectItem = forwardRef<
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className={cn('absolute right-2 flex h-3.5 w-3.5 items-center justify-center', description && 'top-2')}>
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4 text-interactive" />
       </SelectPrimitive.ItemIndicator>
     </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    {description ? (
+      <span className="flex min-w-0 flex-col items-start">
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        <span className="mt-0.5 text-xs leading-tight text-text-tertiary">{description}</span>
+      </span>
+    ) : (
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    )}
   </SelectPrimitive.Item>
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/frontend/src/contexts/ThemeContext.ts b/frontend/src/contexts/ThemeContext.ts
index 0834f014..c8f7f003 100644
--- a/frontend/src/contexts/ThemeContext.ts
+++ b/frontend/src/contexts/ThemeContext.ts
@@ -1,2 +1,3 @@
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';
+export { isLightTheme } from './themeContextValue';
diff --git a/frontend/src/contexts/ThemeProvider.tsx b/frontend/src/contexts/ThemeProvider.tsx
index 8179969b..7443e905 100644
--- a/frontend/src/contexts/ThemeProvider.tsx
+++ b/frontend/src/contexts/ThemeProvider.tsx
@@ -1,22 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { useConfigStore } from '../stores/configStore';
-import { ThemeContext, type Theme } from './themeContextValue';
+import { THEME_CLASSES, ThemeContext, type Theme } from './themeContextValue';
 
-const VALID_THEMES = new Set<string>(['light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta']);
-const THEME_CLASSES = {
-  'light': ['light'],
-  'light-rounded': ['light', 'light-rounded'],
-  'dark': ['dark'],
-  'oled': ['dark', 'oled'],
-  'dusk': ['dark', 'dusk'],
-  'dusk-oled': ['dark', 'dusk', 'dusk-oled'],
-  'forge': ['dark', 'forge'],
-  'ember': ['dark', 'ember'],
-  'aurora': ['dark', 'aurora'],
-  'night-owl': ['dark', 'night-owl'],
-  'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
-  'terracotta': ['dark', 'terracotta'],
-} satisfies Record<Theme, string[]>;
+const VALID_THEMES = new Set<string>(Object.keys(THEME_CLASSES));
+// Every class any theme can stamp — removed wholesale before applying the next theme.
+const ALL_THEME_CLASSES = [...new Set(Object.values(THEME_CLASSES).flat())];
 const isValidTheme = (theme: string): theme is Theme => VALID_THEMES.has(theme);
 
 export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -46,13 +34,17 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
     }
   }, [config?.highContrast]);
 
-  useEffect(() => {
+  // Layout effect (not passive): descendants read the stamped classes via
+  // getComputedStyle in their own useEffects (terminal palette, log ANSI
+  // colours), and React runs child passive effects before the parent's — a
+  // passive effect here would leave them one theme behind.
+  useLayoutEffect(() => {
     const root = document.documentElement;
     const body = document.body;
 
     // Remove ALL theme classes from both root and body
-    root.classList.remove('light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta');
-    body.classList.remove('light', 'light-rounded', 'dark', 'oled', 'dusk', 'dusk-oled', 'forge', 'ember', 'aurora', 'night-owl', 'night-owl-oled', 'terracotta');
+    root.classList.remove(...ALL_THEME_CLASSES);
+    body.classList.remove(...ALL_THEME_CLASSES);
 
     const themeClasses = THEME_CLASSES[theme];
     root.classList.add(...themeClasses);
diff --git a/frontend/src/contexts/themeClasses.test.ts b/frontend/src/contexts/themeClasses.test.ts
new file mode 100644
index 00000000..9b9558ee
--- /dev/null
+++ b/frontend/src/contexts/themeClasses.test.ts
@@ -0,0 +1,50 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { THEME_CLASSES } from './themeContextValue';
+
+/**
+ * frontend/index.html stamps the theme classes before React loads (to avoid a
+ * flash) and duplicates THEME_CLASSES twice — once for <html>, once for <body>.
+ * PR #362 found that copy had silently drifted; this keeps it honest.
+ */
+const INDEX_HTML = readFileSync(
+  resolve(dirname(fileURLToPath(import.meta.url)), '../../index.html'),
+  'utf8',
+);
+
+/** Parse a `{ 'id': ['a', 'b'], ... }` object literal from the bootstrap script into id → class list entries. */
+function parseClassMap(source: string) {
+  return Object.fromEntries(
+    [...source.matchAll(/'([\w-]+)':\s*\[([^\]]*)\]/g)].map((entry) => [
+      entry[1],
+      [...entry[2].matchAll(/'([\w-]+)'/g)].map((m) => m[1]),
+    ]),
+  );
+}
+
+function parseIdList(source: string): string[] {
+  return [...source.matchAll(/'([\w-]+)'/g)].map((m) => m[1]);
+}
+
+describe('index.html theme bootstrap', () => {
+  const classMaps = [...INDEX_HTML.matchAll(/const (?:themeClasses|tc) = \{([\s\S]*?)\};/g)].map((m) => parseClassMap(m[1]));
+  const idLists = [...INDEX_HTML.matchAll(/const (?:validThemes|vt) = \[([^\]]*)\];/g)].map((m) => parseIdList(m[1]));
+
+  it('has one head and one body copy of the class map and valid-theme list', () => {
+    expect(classMaps).toHaveLength(2);
+    expect(idLists).toHaveLength(2);
+  });
+
+  it('keeps both copies identical to THEME_CLASSES', () => {
+    for (const map of classMaps) expect(map).toEqual(THEME_CLASSES);
+    for (const ids of idLists) expect(ids.sort()).toEqual(Object.keys(THEME_CLASSES).sort());
+  });
+
+  it('every theme composes on the light or dark base', () => {
+    for (const [theme, classes] of Object.entries(THEME_CLASSES)) {
+      expect(['light', 'dark'], `${theme} must start with a base class`).toContain(classes[0]);
+    }
+  });
+});
diff --git a/frontend/src/contexts/themeContextValue.ts b/frontend/src/contexts/themeContextValue.ts
index 69b51e5e..83a95bd5 100644
--- a/frontend/src/contexts/themeContextValue.ts
+++ b/frontend/src/contexts/themeContextValue.ts
@@ -1,6 +1,32 @@
 import { createContext } from 'react';
 
-export type Theme = 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+export type Theme = 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'folio' | 'newsprint' | 'walnut';
+
+/**
+ * Class list stamped on <html>/<body> per theme. Every theme composes on the
+ * `light` or `dark` base, so index 0 is the base and decides light-vs-dark
+ * behaviour for code surfaces (diff view, Monaco, logs, logo).
+ * Keep in sync with the pre-React bootstrap in frontend/index.html.
+ */
+export const THEME_CLASSES = {
+  'light': ['light'],
+  'light-rounded': ['light', 'light-rounded'],
+  'dark': ['dark'],
+  'oled': ['dark', 'oled'],
+  'dusk': ['dark', 'dusk'],
+  'dusk-oled': ['dark', 'dusk', 'dusk-oled'],
+  'forge': ['dark', 'forge'],
+  'ember': ['dark', 'ember'],
+  'aurora': ['dark', 'aurora'],
+  'night-owl': ['dark', 'night-owl'],
+  'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
+  'terracotta': ['dark', 'terracotta'],
+  'folio': ['light', 'folio'],
+  'newsprint': ['light', 'newsprint'],
+  'walnut': ['dark', 'walnut'],
+} satisfies Record<Theme, string[]>;
+
+export const isLightTheme = (theme: Theme): boolean => THEME_CLASSES[theme][0] === 'light';
 
 export interface ThemeContextType {
   theme: Theme;
diff --git a/frontend/src/hooks/usePaneLogo.ts b/frontend/src/hooks/usePaneLogo.ts
index ea25fbb6..1fc57057 100644
--- a/frontend/src/hooks/usePaneLogo.ts
+++ b/frontend/src/hooks/usePaneLogo.ts
@@ -1,8 +1,8 @@
 import paneLogoDark from '../assets/pane-logo-dark.svg';
 import paneLogoLight from '../assets/pane-logo-light.svg';
-import { useTheme } from '../contexts/ThemeContext';
+import { isLightTheme, useTheme } from '../contexts/ThemeContext';
 
 export function usePaneLogo(): string {
   const { theme } = useTheme();
-  return theme === 'light' || theme === 'light-rounded' ? paneLogoLight : paneLogoDark;
+  return isLightTheme(theme) ? paneLogoLight : paneLogoDark;
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 328a51a8..997c8e49 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -98,12 +98,18 @@ body.light-rounded {
 :root.ember .panel-tab-bar [aria-selected="true"],
 :root.night-owl .panel-tab-bar [aria-selected="true"],
 :root.night-owl-oled .panel-tab-bar [aria-selected="true"],
-:root.terracotta .panel-tab-bar [aria-selected="true"] {
+:root.terracotta .panel-tab-bar [aria-selected="true"],
+:root.folio .panel-tab-bar [aria-selected="true"],
+:root.newsprint .panel-tab-bar [aria-selected="true"],
+:root.walnut .panel-tab-bar [aria-selected="true"] {
   background-color: transparent;
   box-shadow: inset 0 calc(-1 * var(--tab-indicator-height, 4px)) 0 0 var(--tab-indicator-color, #3574F0);
 }
 
-/* Theme-aware structural shells */
+/* Theme-aware structural shells.
+   Folio, Newsprint and Walnut are intentionally absent from the shell selector
+   lists below — the print themes use the flat base layout with rule-line
+   borders (see effects.css). */
 .pane-main-layout {
   padding: var(--app-frame-padding);
   gap: var(--app-frame-gap);
@@ -798,6 +804,30 @@ body.light-rounded {
   --vscode-editorWidget-foreground: #1f2328 !important;
 }
 
+/* Folio theme overrides — ink on the sheet */
+:root.folio {
+  --vscode-editor-background: #fbf7ee !important;
+  --vscode-editor-foreground: #1f1b17 !important;
+  --vscode-editorWidget-background: #fbf7ee !important;
+  --vscode-editorWidget-foreground: #1f1b17 !important;
+}
+
+/* Newsprint theme overrides — graphite on cool stock */
+:root.newsprint {
+  --vscode-editor-background: #f8f8f6 !important;
+  --vscode-editor-foreground: #24272b !important;
+  --vscode-editorWidget-background: #f8f8f6 !important;
+  --vscode-editorWidget-foreground: #24272b !important;
+}
+
+/* Walnut theme overrides — parchment on walnut */
+:root.walnut {
+  --vscode-editor-background: #120e0b !important;
+  --vscode-editor-foreground: #ede1cd !important;
+  --vscode-editorWidget-background: #120e0b !important;
+  --vscode-editorWidget-foreground: #ede1cd !important;
+}
+
 /* Additional Monaco editor style overrides */
 .monaco-editor,
 .monaco-editor-background,
diff --git a/frontend/src/styles/monaco-overrides.css b/frontend/src/styles/monaco-overrides.css
index 3343f4b0..8d2fef93 100644
--- a/frontend/src/styles/monaco-overrides.css
+++ b/frontend/src/styles/monaco-overrides.css
@@ -24,6 +24,30 @@
   --vscode-editorWidget-foreground: #1e2026 !important;
 }
 
+/* Folio theme overrides — ink on the sheet */
+:root.folio {
+  --vscode-editor-background: #fbf7ee !important;
+  --vscode-editor-foreground: #1f1b17 !important;
+  --vscode-editorWidget-background: #fbf7ee !important;
+  --vscode-editorWidget-foreground: #1f1b17 !important;
+}
+
+/* Newsprint theme overrides — graphite on cool stock */
+:root.newsprint {
+  --vscode-editor-background: #f8f8f6 !important;
+  --vscode-editor-foreground: #24272b !important;
+  --vscode-editorWidget-background: #f8f8f6 !important;
+  --vscode-editorWidget-foreground: #24272b !important;
+}
+
+/* Walnut theme overrides — parchment on walnut */
+:root.walnut {
+  --vscode-editor-background: #120e0b !important;
+  --vscode-editor-foreground: #ede1cd !important;
+  --vscode-editorWidget-background: #120e0b !important;
+  --vscode-editorWidget-foreground: #ede1cd !important;
+}
+
 /* Additional Monaco editor style overrides */
 .monaco-editor,
 .monaco-editor-background,
diff --git a/frontend/src/styles/themeContrast.test.ts b/frontend/src/styles/themeContrast.test.ts
new file mode 100644
index 00000000..1dc6bd59
--- /dev/null
+++ b/frontend/src/styles/themeContrast.test.ts
@@ -0,0 +1,260 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { THEME_CLASSES } from '../contexts/themeContextValue';
+
+/**
+ * Static WCAG contrast gate over the theme tokens in tokens/colors.css.
+ *
+ * Resolves each theme's cascade the same way the browser does (`:root` dark
+ * base → `:root.light` → `:root.<theme>` → OLED child → `.high-contrast`),
+ * composites alpha colours over the surface they sit on, and checks the
+ * ratios that PR #362 measured by hand. New themes register in FULL_THEMES
+ * so text, buttons, focus rings and the 16 ANSI colours are all gated.
+ */
+
+const COLORS_CSS = readFileSync(
+  resolve(dirname(fileURLToPath(import.meta.url)), 'tokens/colors.css'),
+  'utf8',
+).replace(/\/\*[\s\S]*?\*\//g, '');
+
+type Rgb = [number, number, number];
+type Rgba = [number, number, number, number];
+type TokenMap = Map<string, string>;
+
+const AA_TEXT = 4.5;
+const AA_UI = 3;
+const AAA_TEXT = 7;
+
+type ThemeId = keyof typeof THEME_CLASSES;
+// SAFETY: THEME_CLASSES is a closed object literal, so its keys are exactly ThemeId.
+const ALL_THEMES = Object.keys(THEME_CLASSES) as ThemeId[];
+
+// Themes that ship with the full contrast matrix (add new themes here).
+const FULL_THEMES: ThemeId[] = ['folio', 'newsprint', 'walnut'];
+
+const MUTED_FAMILY = [
+  '--color-text-muted',
+  '--color-text-interactive-muted',
+  '--color-text-navigation-muted',
+  '--color-text-navigation-section',
+];
+
+const ANSI = [
+  'red', 'green', 'yellow', 'blue', 'magenta', 'cyan',
+  'bright-black', 'bright-red', 'bright-green', 'bright-yellow', 'bright-blue', 'bright-magenta', 'bright-cyan',
+];
+
+// --- CSS parsing -----------------------------------------------------------
+
+/** All `{ ... }` bodies whose selector list matches `selector` exactly, in source order. */
+function blocksFor(selector: string): string[] {
+  const bodies: string[] = [];
+  for (const match of COLORS_CSS.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const selectors = match[1].split(',').map((s) => s.trim());
+    if (selectors.includes(selector)) bodies.push(match[2]);
+  }
+  return bodies;
+}
+
+function collectDeclarations(body: string, into: TokenMap): void {
+  for (const decl of body.matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) {
+    into.set(decl[1], decl[2].trim());
+  }
+}
+
+/** Resolve the token map a browser would see for the given class list. */
+function tokensFor(classes: string[], highContrast = false): TokenMap {
+  const tokens: TokenMap = new Map();
+  for (const body of blocksFor(':root')) collectDeclarations(body, tokens);
+  // Same specificity, so source order decides — mirror it by walking the classes
+  // in the order colors.css declares them (light before the print themes, dark
+  // parents before their OLED children), which THEME_CLASSES already encodes.
+  for (const cls of classes) for (const body of blocksFor(`:root.${cls}`)) collectDeclarations(body, tokens);
+  if (highContrast) {
+    for (const cls of classes) for (const body of blocksFor(`:root.high-contrast.${cls}`)) collectDeclarations(body, tokens);
+  }
+  return tokens;
+}
+
+// --- Colour maths ----------------------------------------------------------
+
+function substituteVars(value: string, tokens: TokenMap, depth = 0): string {
+  if (depth > 16) throw new Error(`var() recursion too deep in ${value}`);
+  const next = value.replace(/var\((--[\w-]+)(?:\s*,\s*([^)]+))?\)/g, (_m, name: string, fallback?: string) => {
+    const resolved = tokens.get(name) ?? fallback;
+    if (resolved === undefined) throw new Error(`Unresolved token ${name}`);
+    return resolved;
+  });
+  return next.includes('var(') ? substituteVars(next, tokens, depth + 1) : next;
+}
+
+function parseColor(raw: string): Rgba {
+  const value = raw.trim();
+  const hex = value.match(/^#([0-9a-f]{3,8})$/i);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3 || h.length === 4) h = h.split('').map((c) => c + c).join('');
+    const n = (i: number) => parseInt(h.slice(i, i + 2), 16);
+    return [n(0), n(2), n(4), h.length === 8 ? n(6) / 255 : 1];
+  }
+  const fn = value.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/i);
+  if (fn) {
+    const alpha = fn[4] === undefined ? 1 : fn[4].endsWith('%') ? parseFloat(fn[4]) / 100 : parseFloat(fn[4]);
+    return [Number(fn[1]), Number(fn[2]), Number(fn[3]), alpha];
+  }
+  if (value === 'transparent') return [0, 0, 0, 0];
+  throw new Error(`Cannot parse colour "${raw}"`);
+}
+
+function resolveColor(name: string, tokens: TokenMap): Rgba {
+  const raw = tokens.get(name);
+  if (raw === undefined) throw new Error(`Token ${name} is not defined`);
+  return parseColor(substituteVars(raw, tokens));
+}
+
+function composite([r, g, b, a]: Rgba, [br, bg, bb]: Rgb): Rgb {
+  return [r * a + br * (1 - a), g * a + bg * (1 - a), b * a + bb * (1 - a)];
+}
+
+function luminance([r, g, b]: Rgb): number {
+  const channel = (c: number) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+
+function contrast(fg: Rgba, bg: Rgba): number {
+  // Backgrounds with alpha are assumed to sit on an opaque page; that is close
+  // enough for the surfaces gated here (all opaque in practice).
+  const solidBg: Rgb = [bg[0], bg[1], bg[2]];
+  const solidFg = composite(fg, solidBg);
+  const [hi, lo] = [luminance(solidFg), luminance(solidBg)].sort((a, b) => b - a);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+function ratioOf(tokens: TokenMap, fg: string, bg: string): number {
+  return contrast(resolveColor(fg, tokens), resolveColor(bg, tokens));
+}
+
+function expectRatio(tokens: TokenMap, fg: string, bg: string, min: number, label: string): void {
+  const ratio = ratioOf(tokens, fg, bg);
+  expect(ratio, `${label}: ${fg} on ${bg} = ${ratio.toFixed(2)}:1, need ≥ ${min}:1`).toBeGreaterThanOrEqual(min);
+}
+
+// --- Tests -----------------------------------------------------------------
+
+describe('theme contrast (tokens/colors.css)', () => {
+  it('declares theme blocks in THEME_CLASSES order so the cascade model matches the browser', () => {
+    // Same specificity everywhere, so source order decides. The resolver
+    // above walks THEME_CLASSES in order; that is only faithful if colors.css
+    // lists each class's block (and its high-contrast block) in that order.
+    for (const theme of ALL_THEMES) {
+      const classes = THEME_CLASSES[theme];
+      for (const prefix of [':root.', ':root.high-contrast.']) {
+        // Not every class owns a block (the dark base is bare `:root`, light-rounded
+        // inherits `.light`'s high-contrast block) — only the blocks that exist must be ordered.
+        const offsets = classes
+          .map((cls) => ({ cls, offset: COLORS_CSS.indexOf(`${prefix}${cls} {`) }))
+          .filter(({ offset }) => offset >= 0);
+        for (let i = 1; i < offsets.length; i += 1) {
+          expect(offsets[i].offset, `${prefix}${offsets[i].cls} must come after ${prefix}${offsets[i - 1].cls}`)
+            .toBeGreaterThan(offsets[i - 1].offset);
+        }
+      }
+    }
+  });
+
+  describe.each(ALL_THEMES)('%s', (theme) => {
+    const tokens = tokensFor(THEME_CLASSES[theme]);
+    const hcTokens = tokensFor(THEME_CLASSES[theme], true);
+
+    it('keeps the muted text family at AA against --color-bg-primary', () => {
+      for (const token of MUTED_FAMILY) expectRatio(tokens, token, '--color-bg-primary', AA_TEXT, theme);
+    });
+
+    it('lifts the muted text family to AAA in high-contrast mode', () => {
+      for (const token of MUTED_FAMILY) expectRatio(hcTokens, token, '--color-bg-primary', AAA_TEXT, `${theme} (high-contrast)`);
+    });
+  });
+
+  describe.each(FULL_THEMES)('%s (full matrix)', (theme) => {
+    const tokens = tokensFor(THEME_CLASSES[theme]);
+
+    it('body text reads on every surface it can land on', () => {
+      const surfaces = [
+        '--color-bg-primary', '--color-bg-secondary', '--color-bg-tertiary', '--color-bg-hover', '--color-bg-active',
+        '--color-bg-chrome', '--color-bg-editor',
+        '--color-surface-primary', '--color-surface-secondary', '--color-surface-tertiary',
+        '--color-card-bg', '--color-card-nested-bg', '--color-modal-bg', '--color-input-bg',
+        '--color-surface-navigation', '--color-surface-navigation-hover',
+      ];
+      for (const bg of surfaces) {
+        for (const fg of ['--color-text-primary', '--color-text-secondary', '--color-text-tertiary', '--color-text-muted']) {
+          expectRatio(tokens, fg, bg, AA_TEXT, theme);
+        }
+      }
+      // Navigation text on the sidebar surfaces
+      for (const bg of ['--color-surface-navigation', '--color-surface-navigation-hover', '--color-surface-navigation-active']) {
+        for (const fg of ['--color-text-navigation-primary', '--color-text-navigation-secondary', '--color-text-navigation-muted', '--color-text-navigation-selected', '--color-text-navigation-section']) {
+          expectRatio(tokens, fg, bg, AA_TEXT, theme);
+        }
+      }
+      expectRatio(tokens, '--color-input-text', '--color-input-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-input-placeholder', '--color-input-bg', AA_TEXT, theme);
+    });
+
+    it('links, accents, status and focus meet AA text / 3:1 UI on the page', () => {
+      for (const bg of ['--color-bg-primary', '--color-bg-editor', '--color-bg-chrome', '--color-surface-primary']) {
+        expectRatio(tokens, '--color-interactive-text', bg, AA_TEXT, theme);
+        expectRatio(tokens, '--color-text-interactive-on-dark', bg, AA_TEXT, theme);
+        expectRatio(tokens, '--color-status-neutral', bg, AA_UI, theme);
+        for (const ui of ['--color-interactive-primary', '--color-focus-ring', '--color-border-focus', '--color-status-success', '--color-status-warning', '--color-status-error', '--color-status-info']) {
+          expectRatio(tokens, ui, bg, AA_UI, theme);
+        }
+      }
+    });
+
+    it('buttons keep their label readable in every state', () => {
+      expectRatio(tokens, '--color-button-primary-text', '--color-button-primary-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-primary-text', '--color-button-primary-hover', AA_TEXT, theme);
+      expectRatio(tokens, '--color-text-on-interactive', '--color-interactive-primary', AA_TEXT, theme);
+      expectRatio(tokens, '--color-text-on-interactive', '--color-interactive-hover', AA_TEXT, theme);
+      expectRatio(tokens, '--color-text-on-interactive', '--color-interactive-active', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-secondary-text', '--color-button-secondary-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-secondary-text', '--color-button-secondary-hover', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-ghost-text', '--color-bg-primary', AA_TEXT, theme);
+      expectRatio(tokens, '--color-button-ghost-text', '--color-button-ghost-hover', AA_TEXT, theme);
+      for (const status of ['success', 'warning', 'error', 'info']) {
+        expectRatio(tokens, `--color-text-on-status-${status}`, `--color-status-${status}`, AA_TEXT, theme);
+      }
+    });
+
+    it('terminal palette reads on the terminal background', () => {
+      expectRatio(tokens, '--color-terminal-fg', '--color-terminal-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-terminal-white', '--color-terminal-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-terminal-bright-white', '--color-terminal-bg', AA_TEXT, theme);
+      expectRatio(tokens, '--color-terminal-cursor', '--color-terminal-bg', AA_UI, theme);
+      for (const name of ANSI) expectRatio(tokens, `--color-terminal-${name}`, '--color-terminal-bg', AA_UI, theme);
+      // The terminal background must be one of the theme's own surfaces, not a fallback.
+      const termBg = resolveColor('--color-terminal-bg', tokens);
+      const editorBg = resolveColor('--color-bg-editor', tokens);
+      expect(termBg.slice(0, 3)).toEqual(editorBg.slice(0, 3));
+    });
+
+    it('overrides every token the base light and dark themes define (no half-theme fallbacks)', () => {
+      const own: TokenMap = new Map();
+      for (const body of blocksFor(`:root.${theme}`)) collectDeclarations(body, own);
+      const expected = new Set<string>();
+      for (const selector of [':root.light', ':root.terracotta']) {
+        const block: TokenMap = new Map();
+        for (const body of blocksFor(selector)) collectDeclarations(body, block);
+        for (const name of block.keys()) expected.add(name);
+      }
+      const missing = [...expected].filter((name) => !own.has(name));
+      expect(missing, `${theme} is missing: ${missing.join(', ')}`).toEqual([]);
+    });
+  });
+});
diff --git a/frontend/src/styles/tokens/colors.css b/frontend/src/styles/tokens/colors.css
index 18692991..c0542cc2 100644
--- a/frontend/src/styles/tokens/colors.css
+++ b/frontend/src/styles/tokens/colors.css
@@ -156,6 +156,70 @@
   --terra-accent8: #d68e6e;
   --terra-accent9: #dea080;
   --terra-accent10: #e6b498;
+
+  /* Folio primitives — warm cream paper and near-black ink (print) */
+  --folio-paper: #f6f0e4;        /* page: body background */
+  --folio-sheet: #fbf7ee;        /* sheet: editor, terminal, cards — brightest surface */
+  --folio-chrome: #efe7d8;       /* margin: sidebar, tab bar */
+  --folio-hover: #e7dcc9;
+  --folio-active: #dfd3be;
+  --folio-ink: #1f1b17;
+  --folio-ink-2: #433c35;
+  --folio-ink-3: #5a524a;
+  --folio-ink-muted: #605850;    /* 6.2:1 on paper, 4.7:1 on active */
+  --folio-ink-disabled: #93897b; /* 3.0:1 on paper (AA large / disabled affordance) */
+  --folio-rule: rgba(31, 27, 23, 0.16);
+  --folio-rule-soft: rgba(31, 27, 23, 0.09);
+  --folio-rule-faint: rgba(31, 27, 23, 0.05);
+
+  /* Folio rubrication — one vermilion accent, used sparingly */
+  --folio-rubric: #b3321c;       /* 5.5:1 on paper; 6.2:1 with white text */
+  --folio-rubric-hover: #9c2a17;
+  --folio-rubric-active: #c53d24;
+  --folio-rubric-text: #a02c18;  /* links — 6.5:1 on paper */
+
+  /* Newsprint primitives — cool grey-white stock, graphite ink, halftone greys */
+  --news-paper: #f1f2f0;
+  --news-sheet: #f8f8f6;
+  --news-chrome: #e8eae7;
+  --news-hover: #dfe2de;
+  --news-active: #d8dcd7;
+  --news-ink: #24272b;
+  --news-ink-2: #43484e;
+  --news-ink-3: #575d64;
+  --news-ink-muted: #585e66;     /* 5.9:1 on paper, 4.7:1 on active */
+  --news-ink-disabled: #878d93;  /* 3.0:1 on paper */
+  --news-rule: rgba(36, 39, 43, 0.18);
+  --news-rule-soft: rgba(36, 39, 43, 0.10);
+  --news-rule-faint: rgba(36, 39, 43, 0.06);
+
+  /* Newsprint accent — a single dark ink blue */
+  --news-blue: #1f4e8c;          /* 7.4:1 with white text */
+  --news-blue-hover: #1a4277;
+  --news-blue-active: #25599e;
+  --news-blue-text: #1c4884;     /* links — 7.4:1 on paper */
+
+  /* Walnut primitives — deep warm brown-black ramp, parchment text */
+  --walnut-950: #120e0b;         /* sunken editor / terminal */
+  --walnut-900: #1a1512;         /* body, chrome */
+  --walnut-850: #221c18;
+  --walnut-800: #2b241f;
+  --walnut-700: #352d27;
+  --walnut-600: #40372f;         /* active / borders — a real step above 700 (1.16:1) */
+  --walnut-500: #4a4037;
+  --walnut-400: #6a5e51;         /* disabled */
+  --walnut-300: #8d7d6a;         /* neutral / bright-black */
+  --walnut-200: #b09f89;         /* muted — 7.0:1 on --walnut-900, 4.5:1 on --walnut-600 */
+  --parchment-300: #b4a48b;      /* tertiary */
+  --parchment-200: #d3c4ab;      /* secondary */
+  --parchment-100: #ede1cd;      /* primary */
+  --parchment-50: #f7efe2;
+
+  /* Walnut accent — brass, carries dark ink text */
+  --brass-500: #c9a24d;          /* 9.4:1 with --walnut-900 text; 7.6:1 on --walnut-900 */
+  --brass-400: #d6b262;
+  --brass-600: #bd9440;
+  --brass-text: #d4ae5c;         /* links — 8.3:1 on --walnut-900 */
 }
 
 /* Dark Theme - Pure Black OLED */
@@ -1719,6 +1783,489 @@
   --color-terminal-bright-white: #F2E4D6;
 }
 
+/* Folio Theme — paper & ink: warm cream stock, near-black ink, vermilion rubrication */
+:root.folio {
+  /* Backgrounds — page / sheet / margin tonal steps */
+  --color-bg-primary: var(--folio-paper);
+  --color-bg-secondary: var(--folio-chrome);
+  --color-bg-tertiary: var(--folio-hover);
+  --color-bg-hover: var(--folio-hover);
+  --color-bg-active: var(--folio-active);
+  --color-bg-chrome: var(--folio-chrome);
+  --color-bg-editor: var(--folio-sheet);   /* the sheet is the brightest surface */
+
+  /* Surfaces */
+  --color-surface-primary: var(--folio-sheet);
+  --color-surface-secondary: var(--folio-paper);
+  --color-surface-tertiary: var(--folio-chrome);
+  --color-surface-hover: rgba(31, 27, 23, 0.05);
+
+  /* Text — ink */
+  --color-text-primary: var(--folio-ink);
+  --color-text-secondary: var(--folio-ink-2);
+  --color-text-tertiary: var(--folio-ink-3);
+  --color-text-muted: var(--folio-ink-muted);
+  --color-text-disabled: var(--folio-ink-disabled);
+
+  /* Borders — faint rule lines */
+  --color-border-primary: var(--folio-rule);
+  --color-border-secondary: var(--folio-rule-soft);
+  --color-border-tertiary: var(--folio-rule-faint);
+  --color-border-hover: rgba(31, 27, 23, 0.24);
+  --color-border-focus: var(--folio-rubric);
+
+  /* Interactive — single rubrication accent */
+  --color-interactive: var(--folio-rubric);
+  --color-interactive-primary: var(--folio-rubric);
+  --color-interactive-hover: var(--folio-rubric-hover);
+  --color-interactive-active: var(--folio-rubric-active);
+  --color-interactive-text: var(--folio-rubric-text);
+  --color-focus-ring: var(--folio-rubric);
+  --color-interactive-rgb: 179 50 28;
+
+  /* Interactive on dark surfaces */
+  --color-text-interactive-on-dark: var(--folio-rubric-text);
+  --color-text-interactive-on-dark-hover: var(--folio-rubric-hover);
+  --color-text-interactive-on-dark-active: var(--folio-rubric-text);
+  --color-text-interactive-on-dark-focus: var(--folio-rubric-text);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--folio-chrome);
+  --color-surface-interactive-hover: var(--folio-hover);
+  --color-interactive-surface: rgba(179, 50, 28, 0.10);
+  --color-interactive-surface-hover: rgba(179, 50, 28, 0.16);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: var(--folio-rule-soft);
+  --color-border-interactive: var(--folio-rule);
+  --color-interactive-border: var(--folio-rubric);
+  --color-interactive-border-hover: var(--folio-rubric-hover);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: var(--folio-ink-muted);
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(179, 50, 28, 0.35);
+
+  /* Status — printed, low saturation */
+  --color-status-success: #3d7a3a;        /* 4.6:1 on paper */
+  --color-status-success-hover: #326530;
+  --color-status-warning: #8a5f10;        /* 5.0:1 on paper */
+  --color-status-warning-hover: #714d0c;
+  --color-status-error: var(--folio-rubric);
+  --color-status-error-hover: var(--folio-rubric-hover);
+  --color-status-info: var(--folio-rubric-text);
+  --color-status-neutral: var(--folio-ink-muted);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--folio-ink);
+  --color-text-on-secondary: var(--folio-ink);
+  --color-text-on-tertiary: var(--folio-ink-2);
+  --color-text-on-surface: var(--folio-ink);
+  --color-text-on-interactive: rgb(255 255 255);
+  --color-text-on-status-success: rgb(255 255 255);
+  --color-text-on-status-warning: rgb(255 255 255);
+  --color-text-on-status-error: rgb(255 255 255);
+  --color-text-on-status-info: rgb(255 255 255);
+  --color-text-on-navigation: var(--folio-ink);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--folio-rubric);
+  --color-button-primary-hover: var(--folio-rubric-hover);
+  --color-button-primary-text: rgb(255 255 255);
+  --color-button-secondary-bg: var(--folio-chrome);
+  --color-button-secondary-hover: var(--folio-hover);
+  --color-button-secondary-text: var(--folio-ink);
+  --color-button-ghost-hover: var(--folio-hover);
+  --color-button-ghost-text: var(--folio-ink-2);
+
+  /* Cards */
+  --color-card-bg: var(--folio-sheet);
+  --color-card-border: var(--folio-rule);
+  --color-card-nested-bg: var(--folio-paper);
+
+  /* Forms */
+  --color-input-bg: var(--folio-sheet);
+  --color-input-border: var(--folio-rule);
+  --color-input-focus: var(--folio-rubric);
+  --color-input-text: var(--folio-ink);
+  --color-input-placeholder: var(--folio-ink-muted);
+
+  /* Modal */
+  --color-modal-overlay: rgba(31, 27, 23, 0.45);
+  --color-modal-bg: var(--folio-sheet);
+
+  /* Navigation — the margin */
+  --color-surface-navigation: var(--folio-chrome);
+  --color-surface-navigation-hover: var(--folio-hover);
+  --color-surface-navigation-active: var(--folio-active);
+  --color-surface-navigation-selected: rgba(179, 50, 28, 0.10);
+  --color-surface-navigation-selected-hover: rgba(179, 50, 28, 0.16);
+  --color-text-navigation-primary: var(--folio-ink);
+  --color-text-navigation-secondary: var(--folio-ink-2);
+  --color-text-navigation-muted: var(--folio-ink-muted);
+  --color-text-navigation-selected: var(--folio-ink);
+  --color-text-navigation-hover: var(--folio-ink);
+  --color-text-navigation-section: var(--folio-ink-muted);
+  --color-text-navigation-brand: var(--folio-ink-3);
+  --color-border-navigation: var(--folio-rule);
+  --color-divider-navigation: var(--folio-rule-soft);
+  --color-divider-navigation-subtle: var(--folio-rule-faint);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--folio-paper);
+  --color-scrollbar-thumb: rgba(31, 27, 23, 0.18);
+  --color-scrollbar-thumb-hover: rgba(31, 27, 23, 0.32);
+
+  /* Tab indicator — a rubricated rule under the active tab */
+  --tab-indicator-color: var(--folio-rubric);
+  --tab-indicator-height: 2px;
+
+  /* Terminal — ink on the sheet; every colour ≥ 3:1, text ≥ 4.5:1 on --folio-sheet */
+  --color-terminal-bg: var(--folio-sheet);
+  --color-terminal-fg: var(--folio-ink);
+  --color-terminal-cursor: var(--folio-rubric);
+  --color-terminal-black: var(--folio-sheet);
+  --color-terminal-red: #a83324;
+  --color-terminal-green: #3f6d33;
+  --color-terminal-yellow: #805a10;
+  --color-terminal-blue: #2f5a86;
+  --color-terminal-magenta: #7a4478;
+  --color-terminal-cyan: #286864;
+  --color-terminal-white: var(--folio-ink-3);
+  --color-terminal-bright-black: var(--folio-ink-muted);
+  --color-terminal-bright-red: #8f2a1d;
+  --color-terminal-bright-green: #2f5a26;
+  --color-terminal-bright-yellow: #6b4a0a;
+  --color-terminal-bright-blue: #234870;
+  --color-terminal-bright-magenta: #623560;
+  --color-terminal-bright-cyan: #1c5350;
+  --color-terminal-bright-white: rgb(0 0 0);
+  --color-terminal-selection-bg: #b3321c33;
+}
+
+/* Newsprint Theme — cool grey-white stock, graphite ink, halftone greys, ink-blue accent */
+:root.newsprint {
+  /* Backgrounds — stock / sheet / halftone tonal steps */
+  --color-bg-primary: var(--news-paper);
+  --color-bg-secondary: var(--news-chrome);
+  --color-bg-tertiary: var(--news-hover);
+  --color-bg-hover: var(--news-hover);
+  --color-bg-active: var(--news-active);
+  --color-bg-chrome: var(--news-chrome);
+  --color-bg-editor: var(--news-sheet);
+
+  /* Surfaces */
+  --color-surface-primary: var(--news-sheet);
+  --color-surface-secondary: var(--news-paper);
+  --color-surface-tertiary: var(--news-chrome);
+  --color-surface-hover: rgba(36, 39, 43, 0.05);
+
+  /* Text — graphite */
+  --color-text-primary: var(--news-ink);
+  --color-text-secondary: var(--news-ink-2);
+  --color-text-tertiary: var(--news-ink-3);
+  --color-text-muted: var(--news-ink-muted);
+  --color-text-disabled: var(--news-ink-disabled);
+
+  /* Borders — column rules */
+  --color-border-primary: var(--news-rule);
+  --color-border-secondary: var(--news-rule-soft);
+  --color-border-tertiary: var(--news-rule-faint);
+  --color-border-hover: rgba(36, 39, 43, 0.26);
+  --color-border-focus: var(--news-blue);
+
+  /* Interactive — single ink-blue accent */
+  --color-interactive: var(--news-blue);
+  --color-interactive-primary: var(--news-blue);
+  --color-interactive-hover: var(--news-blue-hover);
+  --color-interactive-active: var(--news-blue-active);
+  --color-interactive-text: var(--news-blue-text);
+  --color-focus-ring: var(--news-blue);
+  --color-interactive-rgb: 31 78 140;
+
+  /* Interactive on dark surfaces */
+  --color-text-interactive-on-dark: var(--news-blue-text);
+  --color-text-interactive-on-dark-hover: var(--news-blue-hover);
+  --color-text-interactive-on-dark-active: var(--news-blue-text);
+  --color-text-interactive-on-dark-focus: var(--news-blue-text);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--news-chrome);
+  --color-surface-interactive-hover: var(--news-hover);
+  --color-interactive-surface: rgba(31, 78, 140, 0.10);
+  --color-interactive-surface-hover: rgba(31, 78, 140, 0.16);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: var(--news-rule-soft);
+  --color-border-interactive: var(--news-rule);
+  --color-interactive-border: var(--news-blue);
+  --color-interactive-border-hover: var(--news-blue-hover);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: var(--news-ink-muted);
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(31, 78, 140, 0.35);
+
+  /* Status — printed, low saturation */
+  --color-status-success: #2f6f3a;        /* 5.2:1 on stock */
+  --color-status-success-hover: #275c30;
+  --color-status-warning: #7d5a12;        /* 5.4:1 on stock */
+  --color-status-warning-hover: #66490e;
+  --color-status-error: #a83a3a;          /* 5.3:1 on stock */
+  --color-status-error-hover: #8c2f2f;
+  --color-status-info: var(--news-blue-text);
+  --color-status-neutral: var(--news-ink-muted);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--news-ink);
+  --color-text-on-secondary: var(--news-ink);
+  --color-text-on-tertiary: var(--news-ink-2);
+  --color-text-on-surface: var(--news-ink);
+  --color-text-on-interactive: rgb(255 255 255);
+  --color-text-on-status-success: rgb(255 255 255);
+  --color-text-on-status-warning: rgb(255 255 255);
+  --color-text-on-status-error: rgb(255 255 255);
+  --color-text-on-status-info: rgb(255 255 255);
+  --color-text-on-navigation: var(--news-ink);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--news-blue);
+  --color-button-primary-hover: var(--news-blue-hover);
+  --color-button-primary-text: rgb(255 255 255);
+  --color-button-secondary-bg: var(--news-chrome);
+  --color-button-secondary-hover: var(--news-hover);
+  --color-button-secondary-text: var(--news-ink);
+  --color-button-ghost-hover: var(--news-hover);
+  --color-button-ghost-text: var(--news-ink-2);
+
+  /* Cards */
+  --color-card-bg: var(--news-sheet);
+  --color-card-border: var(--news-rule);
+  --color-card-nested-bg: var(--news-paper);
+
+  /* Forms */
+  --color-input-bg: var(--news-sheet);
+  --color-input-border: var(--news-rule);
+  --color-input-focus: var(--news-blue);
+  --color-input-text: var(--news-ink);
+  --color-input-placeholder: var(--news-ink-muted);
+
+  /* Modal */
+  --color-modal-overlay: rgba(36, 39, 43, 0.45);
+  --color-modal-bg: var(--news-sheet);
+
+  /* Navigation — halftone column */
+  --color-surface-navigation: var(--news-chrome);
+  --color-surface-navigation-hover: var(--news-hover);
+  --color-surface-navigation-active: var(--news-active);
+  --color-surface-navigation-selected: rgba(31, 78, 140, 0.10);
+  --color-surface-navigation-selected-hover: rgba(31, 78, 140, 0.16);
+  --color-text-navigation-primary: var(--news-ink);
+  --color-text-navigation-secondary: var(--news-ink-2);
+  --color-text-navigation-muted: var(--news-ink-muted);
+  --color-text-navigation-selected: var(--news-ink);
+  --color-text-navigation-hover: var(--news-ink);
+  --color-text-navigation-section: var(--news-ink-muted);
+  --color-text-navigation-brand: var(--news-ink-3);
+  --color-border-navigation: var(--news-rule);
+  --color-divider-navigation: var(--news-rule-soft);
+  --color-divider-navigation-subtle: var(--news-rule-faint);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--news-paper);
+  --color-scrollbar-thumb: rgba(36, 39, 43, 0.18);
+  --color-scrollbar-thumb-hover: rgba(36, 39, 43, 0.32);
+
+  /* Tab indicator — ink-blue rule under the active tab */
+  --tab-indicator-color: var(--news-blue);
+  --tab-indicator-height: 2px;
+
+  /* Terminal — graphite on the sheet; every colour ≥ 3:1, text ≥ 4.5:1 on --news-sheet */
+  --color-terminal-bg: var(--news-sheet);
+  --color-terminal-fg: var(--news-ink);
+  --color-terminal-cursor: var(--news-blue);
+  --color-terminal-black: var(--news-sheet);
+  --color-terminal-red: #a83a3a;
+  --color-terminal-green: #3a7040;
+  --color-terminal-yellow: #7d5a12;
+  --color-terminal-blue: var(--news-blue);
+  --color-terminal-magenta: #6f4a86;
+  --color-terminal-cyan: #2a6a72;
+  --color-terminal-white: var(--news-ink-3);
+  --color-terminal-bright-black: var(--news-ink-muted);
+  --color-terminal-bright-red: #8c2f2f;
+  --color-terminal-bright-green: #2e5c33;
+  --color-terminal-bright-yellow: #66490e;
+  --color-terminal-bright-blue: #183f73;
+  --color-terminal-bright-magenta: #5a3b6d;
+  --color-terminal-bright-cyan: #20565c;
+  --color-terminal-bright-white: rgb(0 0 0);
+  --color-terminal-selection-bg: #1f4e8c33;
+}
+
+/* Walnut Theme — vellum & walnut: deep warm brown-black, parchment text, brass accent */
+:root.walnut {
+  /* Backgrounds — TWO-TONE foundation, sunken editor */
+  --color-bg-primary: var(--walnut-900);
+  --color-bg-secondary: var(--walnut-850);
+  --color-bg-tertiary: var(--walnut-700);
+  --color-bg-hover: var(--walnut-700);
+  --color-bg-active: var(--walnut-600);
+  --color-bg-chrome: var(--walnut-900);
+  --color-bg-editor: var(--walnut-950);   /* SUNKEN — darker than chrome */
+
+  /* Surfaces */
+  --color-surface-primary: var(--walnut-850);
+  --color-surface-secondary: var(--walnut-800);
+  --color-surface-tertiary: var(--walnut-700);
+  --color-surface-hover: rgba(237, 225, 205, 0.05);
+
+  /* Text — parchment */
+  --color-text-primary: var(--parchment-100);
+  --color-text-secondary: var(--parchment-200);
+  --color-text-tertiary: var(--parchment-300);
+  --color-text-muted: var(--walnut-200);   /* 7.0:1 on --walnut-900, 4.5:1 on --walnut-600 */
+  --color-text-disabled: var(--walnut-400);
+
+  /* Borders */
+  --color-border-primary: var(--walnut-600);
+  --color-border-secondary: var(--walnut-800);
+  --color-border-tertiary: var(--walnut-850);
+  --color-border-hover: var(--walnut-500);
+  --color-border-focus: var(--brass-500);
+
+  /* Interactive — single brass accent */
+  --color-interactive: var(--brass-500);
+  --color-interactive-primary: var(--brass-500);
+  --color-interactive-hover: var(--brass-400);
+  --color-interactive-active: var(--brass-600);
+  --color-interactive-text: var(--brass-text);
+  --color-focus-ring: var(--brass-500);
+  --color-interactive-rgb: 201 162 77;
+
+  /* Interactive on dark */
+  --color-text-interactive-on-dark: var(--brass-text);
+  --color-text-interactive-on-dark-hover: var(--brass-400);
+  --color-text-interactive-on-dark-active: var(--brass-text);
+  --color-text-interactive-on-dark-focus: var(--brass-text);
+
+  /* Interactive surface tokens */
+  --color-surface-interactive: var(--walnut-850);
+  --color-surface-interactive-hover: var(--walnut-700);
+  --color-interactive-surface: rgba(201, 162, 77, 0.14);
+  --color-interactive-surface-hover: rgba(201, 162, 77, 0.22);
+
+  /* Interactive border tokens */
+  --color-border-interactive-subtle: rgba(237, 225, 205, 0.06);
+  --color-border-interactive: rgba(237, 225, 205, 0.10);
+  --color-interactive-border: rgba(201, 162, 77, 0.55);
+  --color-interactive-border-hover: rgba(201, 162, 77, 0.75);
+
+  /* Interactive text tokens */
+  --color-text-interactive-muted: var(--walnut-200);
+
+  /* Focus ring */
+  --color-focus-ring-subtle: rgba(201, 162, 77, 0.4);
+
+  /* Status — muted pigments on walnut */
+  --color-status-success: #93b57a;
+  --color-status-success-hover: #a5c48d;
+  --color-status-warning: #d9b25f;
+  --color-status-warning-hover: #e3c079;
+  --color-status-error: #d8776c;
+  --color-status-error-hover: #e28c82;
+  --color-status-info: var(--brass-500);
+  --color-status-neutral: var(--walnut-300);
+
+  /* Context-Aware Text */
+  --color-text-on-primary: var(--parchment-100);
+  --color-text-on-secondary: var(--parchment-200);
+  --color-text-on-tertiary: var(--parchment-200);
+  --color-text-on-surface: var(--parchment-200);
+  --color-text-on-interactive: var(--walnut-900);   /* dark ink on brass — 9.4:1 */
+  --color-text-on-status-success: var(--walnut-900);
+  --color-text-on-status-warning: var(--walnut-900);
+  --color-text-on-status-error: var(--walnut-900);
+  --color-text-on-status-info: var(--walnut-900);
+  --color-text-on-navigation: var(--parchment-200);
+
+  /* Buttons */
+  --color-button-primary-bg: var(--brass-500);
+  --color-button-primary-hover: var(--brass-400);
+  --color-button-primary-text: var(--walnut-900);
+  --color-button-secondary-bg: var(--walnut-700);
+  --color-button-secondary-hover: var(--walnut-600);
+  --color-button-secondary-text: var(--parchment-100);
+  --color-button-ghost-hover: var(--walnut-800);
+  --color-button-ghost-text: var(--parchment-300);
+
+  /* Cards */
+  --color-card-bg: var(--walnut-850);
+  --color-card-border: var(--walnut-600);
+  --color-card-nested-bg: var(--walnut-800);
+
+  /* Forms */
+  --color-input-bg: var(--walnut-950);
+  --color-input-border: var(--walnut-500);
+  --color-input-focus: var(--brass-500);
+  --color-input-text: var(--parchment-100);
+  --color-input-placeholder: var(--walnut-200);
+
+  /* Modal */
+  --color-modal-overlay: rgba(0, 0, 0, 0.6);
+  --color-modal-bg: var(--walnut-850);
+
+  /* Navigation */
+  --color-surface-navigation: var(--walnut-900);
+  --color-surface-navigation-hover: var(--walnut-850);
+  --color-surface-navigation-active: var(--walnut-700);
+  --color-surface-navigation-selected: rgba(201, 162, 77, 0.14);
+  --color-surface-navigation-selected-hover: rgba(201, 162, 77, 0.2);
+  --color-text-navigation-primary: var(--parchment-200);
+  --color-text-navigation-secondary: var(--parchment-300);
+  --color-text-navigation-muted: var(--walnut-200);
+  --color-text-navigation-selected: var(--parchment-100);
+  --color-text-navigation-hover: var(--parchment-100);
+  --color-text-navigation-section: var(--walnut-200);
+  --color-text-navigation-brand: var(--parchment-300);
+  --color-border-navigation: var(--walnut-600);
+  --color-divider-navigation: var(--walnut-800);
+  --color-divider-navigation-subtle: rgba(237, 225, 205, 0.04);
+
+  /* Scrollbar */
+  --color-scrollbar-track: var(--walnut-900);
+  --color-scrollbar-thumb: rgba(237, 225, 205, 0.16);
+  --color-scrollbar-thumb-hover: rgba(237, 225, 205, 0.30);
+
+  /* Tab indicator — brass rule under the active tab */
+  --tab-indicator-color: var(--brass-500);
+  --tab-indicator-height: 2px;
+
+  /* Terminal — parchment on walnut; every colour ≥ 3:1, text ≥ 4.5:1 on --walnut-950 */
+  --color-terminal-bg: var(--walnut-950);
+  --color-terminal-fg: var(--parchment-100);
+  --color-terminal-cursor: var(--brass-500);
+  --color-terminal-black: var(--walnut-950);
+  --color-terminal-red: #d8776c;
+  --color-terminal-green: #98b67e;
+  --color-terminal-yellow: #d9b25f;
+  --color-terminal-blue: #8fa6bd;
+  --color-terminal-magenta: #c395b3;
+  --color-terminal-cyan: #83b3ab;
+  --color-terminal-white: var(--parchment-200);
+  --color-terminal-bright-black: var(--walnut-300);
+  --color-terminal-bright-red: #e6948a;
+  --color-terminal-bright-green: #b0ca99;
+  --color-terminal-bright-yellow: #e6c77e;
+  --color-terminal-bright-blue: #a9bccf;
+  --color-terminal-bright-magenta: #d4adc7;
+  --color-terminal-bright-cyan: #9fc9c1;
+  --color-terminal-bright-white: var(--parchment-50);
+  --color-terminal-selection-bg: #c9a24d40;
+}
+
 /* Light Rounded — inherits light tokens, overrides shell/chrome behavior */
 :root.light-rounded {
   --color-bg-chrome: var(--gh-light-50);
@@ -1828,3 +2375,27 @@
   --color-text-navigation-muted: #b59888;
   --color-text-navigation-section: #b59888;
 }
+
+/* Folio */
+:root.high-contrast.folio {
+  --color-text-muted: #4f4740;              /* 8.0:1 on --folio-paper */
+  --color-text-interactive-muted: #4f4740;
+  --color-text-navigation-muted: #4f4740;
+  --color-text-navigation-section: #4f4740;
+}
+
+/* Newsprint */
+:root.high-contrast.newsprint {
+  --color-text-muted: #4a5056;              /* 7.3:1 on --news-paper */
+  --color-text-interactive-muted: #4a5056;
+  --color-text-navigation-muted: #4a5056;
+  --color-text-navigation-section: #4a5056;
+}
+
+/* Walnut */
+:root.high-contrast.walnut {
+  --color-text-muted: #bba992;              /* 7.9:1 on --walnut-900 */
+  --color-text-interactive-muted: #bba992;
+  --color-text-navigation-muted: #bba992;
+  --color-text-navigation-section: #bba992;
+}
diff --git a/frontend/src/styles/tokens/effects.css b/frontend/src/styles/tokens/effects.css
index 5694de9b..09d731cd 100644
--- a/frontend/src/styles/tokens/effects.css
+++ b/frontend/src/styles/tokens/effects.css
@@ -207,3 +207,43 @@
   --panel-shell-radius: var(--radius-xl);
   --panel-shell-shadow: var(--shadow-sm);
 }
+
+/* Folio / Newsprint / Walnut deliberately keep the flat, edge-to-edge shell
+   treatment of the base light/dark themes (no --app-shell-radius /
+   --panel-shell-* islands, no index.css shell borders): a printed sheet is
+   one surface with rule lines, not a stack of cards. */
+
+/* Folio — set type: crisp corners, no drop shadows, depth from tonal steps only */
+:root.folio {
+  --button-radius: var(--radius-sm);
+  --card-radius: var(--radius-default);
+  --input-radius: var(--radius-sm);
+  --modal-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-none);
+  --dropdown-shadow: 0 6px 18px rgba(31, 27, 23, 0.14);
+}
+
+/* Newsprint — column rules, square-ish corners, no drop shadows */
+:root.newsprint {
+  --button-radius: var(--radius-sm);
+  --card-radius: var(--radius-default);
+  --input-radius: var(--radius-sm);
+  --modal-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-none);
+  --dropdown-shadow: 0 6px 18px rgba(36, 39, 43, 0.16);
+}
+
+/* Walnut — soft-bound: gentle radius, shallow shadows */
+:root.walnut {
+  --button-radius: var(--radius-md);
+  --card-radius: var(--radius-lg);
+  --input-radius: var(--radius-md);
+  --button-shadow: var(--shadow-none);
+  --button-shadow-hover: var(--shadow-none);
+  --card-shadow: var(--shadow-xs);
+  --dropdown-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+}
diff --git a/frontend/src/types/config.ts b/frontend/src/types/config.ts
index 1b7b33f0..8e948203 100644
--- a/frontend/src/types/config.ts
+++ b/frontend/src/types/config.ts
@@ -81,7 +81,7 @@ export interface AppConfig {
   stravuApiKey?: string;
   stravuServerUrl?: string;
   // Theme preference
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'folio' | 'newsprint' | 'walnut';
   // Opt-in high contrast mode: raises muted chrome text to AAA and the terminal's
   // minimumContrastRatio so dim CLI output stays legible
   highContrast?: boolean;
diff --git a/main/src/types/config.ts b/main/src/types/config.ts
index dffa889c..7dc99877 100644
--- a/main/src/types/config.ts
+++ b/main/src/types/config.ts
@@ -67,7 +67,7 @@ export interface AppConfig {
   stravuApiKey?: string;
   stravuServerUrl?: string;
   // Theme preference
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'folio' | 'newsprint' | 'walnut';
   // Opt-in high contrast mode: raises muted chrome text to AAA and the terminal's
   // minimumContrastRatio so dim CLI output stays legible
   highContrast?: boolean;
@@ -167,7 +167,7 @@ export interface UpdateConfigRequest {
   keepAwakeWhileSessionsActive?: boolean;
   stravuApiKey?: string;
   stravuServerUrl?: string;
-  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta';
+  theme?: 'light' | 'light-rounded' | 'dark' | 'oled' | 'dusk' | 'dusk-oled' | 'forge' | 'ember' | 'aurora' | 'night-owl' | 'night-owl-oled' | 'terracotta' | 'folio' | 'newsprint' | 'walnut';
   highContrast?: boolean;
   uiScale?: number;
   notifications?: {
diff --git a/screenshots/themes/appearance-picker.png b/screenshots/themes/appearance-picker.png
new file mode 100644
index 00000000..ac08a09f
Binary files /dev/null and b/screenshots/themes/appearance-picker.png differ
diff --git a/screenshots/themes/folio.png b/screenshots/themes/folio.png
new file mode 100644
index 00000000..7a6f39ca
Binary files /dev/null and b/screenshots/themes/folio.png differ
diff --git a/screenshots/themes/newsprint.png b/screenshots/themes/newsprint.png
new file mode 100644
index 00000000..83373b0b
Binary files /dev/null and b/screenshots/themes/newsprint.png differ
diff --git a/screenshots/themes/walnut.png b/screenshots/themes/walnut.png
new file mode 100644
index 00000000..04f8d145
Binary files /dev/null and b/screenshots/themes/walnut.png differ
diff --git a/tests/theme-screenshots.spec.ts b/tests/theme-screenshots.spec.ts
new file mode 100644
index 00000000..b4b0f90a
--- /dev/null
+++ b/tests/theme-screenshots.spec.ts
@@ -0,0 +1,248 @@
+import { mkdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { expect, test, type Page, type TestInfo } from '@playwright/test';
+import { installElectronApiMock } from './electronApiMock';
+
+/**
+ * Captures one screenshot per theme of the main app view (sidebar + session
+ * with the diff panel and the terminal dock) plus the Appearance picker.
+ *
+ * By default the PNGs land in the Playwright output dir and are attached to
+ * the report. Set THEME_SCREENSHOT_DIR (e.g. `screenshots/themes`) to write
+ * them to a stable path for committing as PR evidence:
+ *
+ *   THEME_SCREENSHOT_DIR=screenshots/themes pnpm test -- tests/theme-screenshots.spec.ts
+ */
+
+const THEMES = ['folio', 'newsprint', 'walnut'] as const;
+
+const project = {
+  id: 501,
+  name: 'pane',
+  path: '/tmp/pane',
+  active: true,
+  created_at: '2026-08-01T00:00:00.000Z',
+  updated_at: '2026-08-01T00:00:00.000Z',
+};
+
+const session = {
+  id: 'themes-editorial',
+  name: 'themes-editorial',
+  worktreePath: '/tmp/pane/themes-editorial',
+  prompt: 'Add three editorial themes',
+  status: 'stopped',
+  createdAt: '2026-08-01T00:00:00.000Z',
+  lastActivity: '2026-08-01T00:00:00.000Z',
+  output: [],
+  jsonMessages: [],
+  isRunning: false,
+  permissionMode: 'ignore',
+  projectId: project.id,
+  displayOrder: 0,
+  isFavorite: false,
+  toolType: 'none',
+  archived: false,
+  gitStatus: {
+    state: 'ahead',
+    ahead: 2,
+    behind: 0,
+    hasUncommittedChanges: true,
+    hasUntrackedFiles: false,
+    filesChanged: 3,
+    additions: 42,
+    deletions: 7,
+    totalCommits: 2,
+  },
+};
+
+const panelMeta = (position: number) => ({
+  createdAt: '2026-08-01T00:00:00.000Z',
+  lastActiveAt: '2026-08-01T00:00:00.000Z',
+  position,
+  permanent: true,
+});
+
+const panels = [
+  {
+    id: 'themes-terminal',
+    sessionId: session.id,
+    type: 'terminal',
+    title: 'Terminal',
+    state: { isActive: false, hasBeenViewed: true, customState: { isInitialized: true } },
+    metadata: panelMeta(0),
+  },
+  {
+    id: 'themes-explorer',
+    sessionId: session.id,
+    type: 'explorer',
+    title: 'Explorer',
+    state: { isActive: false, hasBeenViewed: true },
+    metadata: panelMeta(1),
+  },
+  {
+    id: 'themes-diff',
+    sessionId: session.id,
+    type: 'diff',
+    title: 'Diff',
+    state: { isActive: true, hasBeenViewed: true },
+    metadata: panelMeta(2),
+  },
+];
+
+const executions = [{
+  id: 1,
+  session_id: session.id,
+  execution_sequence: 1,
+  after_commit_hash: 'abcdef1234567890',
+  commit_message: 'Add Folio, Newsprint and Walnut themes',
+  timestamp: '2026-08-17T12:00:00.000Z',
+  stats_additions: 42,
+  stats_deletions: 7,
+  stats_files_changed: 3,
+  author: 'Pane',
+  comparison_branch: 'origin/main',
+  history_source: 'branch',
+}];
+
+const combinedDiff = {
+  diff: [
+    'diff --git a/frontend/src/contexts/themeContextValue.ts b/frontend/src/contexts/themeContextValue.ts',
+    'index 1111111..2222222 100644',
+    '--- a/frontend/src/contexts/themeContextValue.ts',
+    '+++ b/frontend/src/contexts/themeContextValue.ts',
+    '@@ -1,6 +1,9 @@',
+    " import { createContext } from 'react';",
+    ' ',
+    "-export type Theme = 'light' | 'dark' | 'dusk' | 'forge' | 'terracotta';",
+    "+export type Theme =",
+    "+  | 'light' | 'dark' | 'dusk' | 'forge' | 'terracotta'",
+    "+  | 'folio' | 'newsprint' | 'walnut';",
+    ' ',
+    ' export interface ThemeContextType {',
+    '   theme: Theme;',
+    'diff --git a/frontend/src/styles/tokens/colors.css b/frontend/src/styles/tokens/colors.css',
+    'index 3333333..4444444 100644',
+    '--- a/frontend/src/styles/tokens/colors.css',
+    '+++ b/frontend/src/styles/tokens/colors.css',
+    '@@ -158,6 +158,14 @@',
+    '   --terra-accent10: #e6b498;',
+    '+',
+    '+  /* Folio primitives — warm cream paper and near-black ink (print) */',
+    '+  --folio-paper: #f6f0e4;',
+    '+  --folio-sheet: #fbf7ee;',
+    '+  --folio-ink: #1f1b17;',
+    '+  --folio-rubric: #b3321c;',
+    ' }',
+  ].join('\n'),
+  stats: { additions: 42, deletions: 7, filesChanged: 3 },
+  changedFiles: ['frontend/src/contexts/themeContextValue.ts', 'frontend/src/styles/tokens/colors.css'],
+};
+
+// ANSI sample replayed into the terminal dock so every palette slot is on screen.
+const ESC = '\u001b[';
+const ansi = (code: number | string, text: string) => `${ESC}${code}m${text}${ESC}0m`;
+const NAMES = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white'];
+const swatchRow = (base: number, label: string) =>
+  `${label.padEnd(8)}${NAMES.map((name, i) => ansi(base + i, name.padEnd(9))).join('')}`;
+const terminalScrollback = [
+  `${ansi(2, '~/pane/themes-editorial')} ${ansi(1, '$')} pnpm --filter frontend test src/styles/themeContrast.test.ts`,
+  '',
+  ` ${ansi(32, '✓')} src/styles/themeContrast.test.ts ${ansi(2, '(45 tests) 26ms')}`,
+  '',
+  ` ${ansi(2, 'Test Files')}  ${ansi(1, '1 passed')} ${ansi(2, '(1)')}`,
+  ` ${ansi(2, '     Tests')}  ${ansi(1, '45 passed')} ${ansi(2, '(45)')}`,
+  '',
+  `${ansi(2, '~/pane/themes-editorial')} ${ansi(1, '$')} git status --short`,
+  `${ansi(32, 'M ')} frontend/src/styles/tokens/colors.css`,
+  `${ansi(32, 'A ')} frontend/src/styles/themeContrast.test.ts`,
+  `${ansi(31, '??')} screenshots/themes/`,
+  '',
+  swatchRow(30, 'normal'),
+  swatchRow(90, 'bright'),
+  `${ansi(2, 'dim')}     ${ansi(1, 'bold')}  ${ansi(3, 'italic')}  ${ansi(4, 'underline')}  ${ansi(7, ' inverse ')}  ${ansi('38;5;208', 'truecolor-ish')}`,
+  '',
+  `${ansi(2, '~/pane/themes-editorial')} ${ansi(1, '$')} `,
+].join('\r\n');
+
+function outputPathFor(testInfo: TestInfo, filename: string): string {
+  const dir = process.env.THEME_SCREENSHOT_DIR;
+  if (!dir) return testInfo.outputPath(filename);
+  const absolute = resolve(process.cwd(), dir);
+  mkdirSync(absolute, { recursive: true });
+  return resolve(absolute, filename);
+}
+
+async function capture(page: Page, testInfo: TestInfo, filename: string): Promise<void> {
+  // Park the pointer over inert editor space so no hover tooltip is in frame.
+  await page.mouse.move(1_100, 620);
+  await page.waitForTimeout(400);
+  const path = outputPathFor(testInfo, filename);
+  await page.screenshot({ path });
+  await testInfo.attach(filename, { path, contentType: 'image/png' });
+}
+
+async function bootTheme(page: Page, theme: (typeof THEMES)[number]): Promise<void> {
+  await page.addInitScript((value: string) => {
+    localStorage.setItem('theme', value);
+    // Taller terminal dock so the full ANSI sample is in frame.
+    localStorage.setItem('pane-bottom-terminal-height', '360');
+    localStorage.setItem('pane-terminal-collapsed', 'false');
+  }, theme);
+  await installElectronApiMock(page, {
+    initialConfig: { theme },
+    initialProjects: [project],
+    initialSessions: [session],
+    initialPanels: panels,
+    initialExecutions: executions,
+    initialCombinedDiff: combinedDiff,
+    initialTerminalStates: { 'themes-terminal': { scrollbackBuffer: terminalScrollback } },
+    activeProjectId: project.id,
+    initialUiState: { expandedProjects: [project.id], repositoriesSectionExpanded: true },
+  });
+  await page.setViewportSize({ width: 1_600, height: 1_000 });
+  await page.goto('/', { waitUntil: 'domcontentloaded', timeout: 30_000 });
+  await expect(page.locator('[data-testid="sidebar"]').first()).toBeVisible({ timeout: 10_000 });
+  await expect(page.locator('html')).toHaveClass(new RegExp(`\\b${theme}\\b`));
+}
+
+for (const theme of THEMES) {
+  test(`${theme}: session view with diff and terminal`, async ({ page }, testInfo) => {
+    await bootTheme(page, theme);
+    await page.getByRole('button', { name: session.name, exact: true }).click();
+    const reviewTab = page.getByRole('tab', { name: 'Review', exact: true });
+    await expect(reviewTab).toBeVisible();
+    await reviewTab.click();
+    // Open a file so the diff body (not just the file list) is in frame.
+    await page.getByRole('button', { name: /colors\.css/ }).first().click();
+    // The persistent terminal dock starts collapsed; expand it so the terminal surface shows.
+    const expandTerminal = page.getByRole('button', { name: 'Expand terminal' });
+    if (await expandTerminal.isVisible().catch(() => false)) await expandTerminal.click();
+    await expect(page.locator('.pane-terminal-dock')).toBeVisible();
+    await expect(page.locator('.pane-terminal-dock .xterm-screen')).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByRole('status', { name: 'Loading terminal' })).toHaveCount(0);
+    // Drop focus so no incidental focus ring from the last click is in frame.
+    await page.evaluate(() => {
+      const active = document.activeElement;
+      if (active instanceof HTMLElement) active.blur();
+    });
+    await page.waitForTimeout(800);
+    await capture(page, testInfo, `${theme}.png`);
+  });
+}
+
+test('appearance picker lists the editorial themes', async ({ page }, testInfo) => {
+  await bootTheme(page, 'folio');
+  const collapse = page.getByRole('button', { name: 'Collapse sidebar' });
+  if (await collapse.isVisible().catch(() => false)) await collapse.click();
+  const settingsButton = page.getByRole('button', { name: 'Settings' }).first();
+  await expect(settingsButton).toBeVisible();
+  await settingsButton.click();
+  await expect(page.getByRole('dialog', { name: 'Pane Settings' })).toBeVisible();
+  await page.getByRole('button', { name: 'Appearance', exact: true }).click();
+  await expect(page.getByRole('heading', { name: 'Appearance', exact: true })).toBeVisible();
+  await page.getByRole('combobox', { name: 'Theme' }).click();
+  for (const name of ['Folio', 'Newsprint', 'Walnut']) {
+    await expect(page.getByRole('option', { name: new RegExp(`^${name}`) })).toBeVisible();
+  }
+  await capture(page, testInfo, 'appearance-picker.png');
+});