diff --git a/core/http/react-ui/e2e/design-system.spec.js b/core/http/react-ui/e2e/design-system.spec.js
new file mode 100644
index 000000000..8388d4553
--- /dev/null
+++ b/core/http/react-ui/e2e/design-system.spec.js
@@ -0,0 +1,11 @@
+import { test, expect } from './coverage-fixtures.js'
+
+test.describe('Editorial design system', () => {
+  test('page titles render in the Fraunces serif', async ({ page }) => {
+    await page.goto('/app/settings')
+    const title = page.locator('.page-title').first()
+    await expect(title).toBeVisible({ timeout: 15_000 })
+    const family = await title.evaluate(el => getComputedStyle(el).fontFamily)
+    expect(family.toLowerCase()).toContain('fraunces')
+  })
+})
diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index 837cb1dca..b0ce673b4 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -1118,14 +1118,26 @@
 }
 
 .page-title {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: -0.015em;
+  font-family: var(--font-serif);
+  font-size: clamp(1.5rem, 1.15rem + 1.4vw, var(--text-3xl));
+  font-weight: 480;
+  letter-spacing: -0.018em;
   line-height: var(--leading-tight);
   margin-bottom: var(--spacing-xs);
   color: var(--color-text-primary);
 }
 
+/* Mid hierarchy tier — between page title and the xs uppercase group labels */
+.section-heading {
+  font-family: var(--font-sans);
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: -0.005em;
+  line-height: var(--leading-snug);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
 .page-subtitle {
   font-size: var(--text-sm);
   color: var(--color-text-secondary);
diff --git a/core/http/react-ui/src/index.css b/core/http/react-ui/src/index.css
index ef1e92521..335694e9d 100644
--- a/core/http/react-ui/src/index.css
+++ b/core/http/react-ui/src/index.css
@@ -53,8 +53,8 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--color-text-primary);
   line-height: var(--leading-tight);
 }
-h1 { font-size: var(--text-3xl); font-weight: var(--font-weight-medium); letter-spacing: -0.02em; }
-h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-medium); letter-spacing: -0.015em; }
+h1 { font-family: var(--font-serif); font-size: clamp(1.75rem, 1.2rem + 2.4vw, var(--text-4xl)); font-weight: 480; letter-spacing: -0.02em; }
+h2 { font-family: var(--font-serif); font-size: clamp(1.4rem, 1.05rem + 1.6vw, var(--text-3xl)); font-weight: 480; letter-spacing: -0.015em; }
 h3 { font-size: var(--text-xl);  font-weight: var(--font-weight-medium); letter-spacing: -0.01em; }
 h4 { font-size: var(--text-lg);  font-weight: var(--font-weight-medium); letter-spacing: -0.005em; }
 h5 { font-size: var(--text-base);font-weight: var(--font-weight-semibold); }