diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index 9f2a7ca48..dd8eb0f2a 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -1159,6 +1159,36 @@
   margin: 0;
 }
 
+.page-header--editorial {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-lg);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-section, var(--spacing-xl));
+}
+.page-header__lead { display: flex; flex-direction: column; gap: var(--spacing-xs); min-width: 0; }
+.page-header__eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--color-eyebrow);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.page-header__eyebrow::before {
+  content: '';
+  width: 18px;
+  height: 1px;
+  background: var(--color-eyebrow);
+  opacity: 0.7;
+}
+.page-header__supporting { color: var(--color-text-secondary); font-size: var(--text-base); margin: 0; max-width: 60ch; }
+.page-header__meta { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
+
 .page-subtitle {
   font-size: var(--text-sm);
   color: var(--color-text-secondary);
diff --git a/core/http/react-ui/src/components/PageHeader.jsx b/core/http/react-ui/src/components/PageHeader.jsx
new file mode 100644
index 000000000..bb4bfedd1
--- /dev/null
+++ b/core/http/react-ui/src/components/PageHeader.jsx
@@ -0,0 +1,14 @@
+// Editorial page header: left eyebrow + serif title + supporting line,
+// right-aligned meta/actions slot. Asymmetric, left-aligned.
+export default function PageHeader({ eyebrow, title, supporting, actions, className = '' }) {
+  return (
+    <header className={`page-header page-header--editorial ${className}`.trim()}>
+      <div className="page-header__lead">
+        {eyebrow && <span className="page-header__eyebrow">{eyebrow}</span>}
+        {title && <h1 className="page-title">{title}</h1>}
+        {supporting && <p className="page-header__supporting">{supporting}</p>}
+      </div>
+      {actions && <div className="page-header__meta">{actions}</div>}
+    </header>
+  )
+}
diff --git a/core/http/react-ui/src/components/SectionHeading.jsx b/core/http/react-ui/src/components/SectionHeading.jsx
new file mode 100644
index 000000000..d69bca9d3
--- /dev/null
+++ b/core/http/react-ui/src/components/SectionHeading.jsx
@@ -0,0 +1,3 @@
+export default function SectionHeading({ children, className = '' }) {
+  return <h3 className={`section-heading ${className}`.trim()}>{children}</h3>
+}
diff --git a/core/http/react-ui/src/theme.css b/core/http/react-ui/src/theme.css
index a6027fdd5..b0c426225 100644
--- a/core/http/react-ui/src/theme.css
+++ b/core/http/react-ui/src/theme.css
@@ -112,6 +112,7 @@
   --spacing-xl: 2rem;
   --spacing-2xl: 3rem;
   --spacing-3xl: 4rem;
+  --space-section: clamp(2rem, 1.2rem + 3vw, 3.5rem);
 
   /* Radii — sharp, editorial */
   --radius-sm: 3px;