diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index 383c5c4bb..c7cdfa24f 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -2761,10 +2761,10 @@ select.input {
 }
 
 .empty-state-title {
-  font-family: var(--font-mono);
+  font-family: var(--font-serif);
   font-size: clamp(1.5rem, 3vw, var(--text-3xl));
-  font-weight: var(--font-weight-regular);
-  letter-spacing: -0.03em;
+  font-weight: 480;
+  letter-spacing: -0.02em;
   color: var(--color-text-primary);
   margin: 0;
   line-height: 1.15;
@@ -2797,6 +2797,13 @@ select.input {
   background: var(--color-border-strong);
 }
 
+.empty-state__actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  margin-top: var(--spacing-xs);
+}
+
 /* Animations */
 @keyframes spin {
   to { transform: rotate(360deg); }
diff --git a/core/http/react-ui/src/components/EmptyState.jsx b/core/http/react-ui/src/components/EmptyState.jsx
new file mode 100644
index 000000000..b68173454
--- /dev/null
+++ b/core/http/react-ui/src/components/EmptyState.jsx
@@ -0,0 +1,13 @@
+// Editorial empty state: optional eyebrow + icon, serif title, lede, actions.
+// Wraps the existing .empty-state CSS so legacy callers keep working.
+export default function EmptyState({ icon, eyebrow, title, body, actions, className = '' }) {
+  return (
+    <div className={`empty-state ${className}`.trim()}>
+      {eyebrow && <span className="empty-state__eyebrow">{eyebrow}</span>}
+      {icon && <i className={`empty-state-icon fas ${icon}`} aria-hidden="true" />}
+      {title && <h2 className="empty-state-title">{title}</h2>}
+      {body && <p className="empty-state-text">{body}</p>}
+      {actions && <div className="empty-state__actions">{actions}</div>}
+    </div>
+  )
+}