diff --git a/src/components/MetricStrip.astro b/src/components/MetricStrip.astro
new file mode 100644
index 0000000000..aa51df0d69
--- /dev/null
+++ b/src/components/MetricStrip.astro
@@ -0,0 +1,79 @@
+---
+/**
+ * A row of headline figures — "3-5×, faster merge throughput".
+ *
+ * The homepage and the Merge Queue hub carry the same three numbers, and until
+ * this component they drew them two different ways: the homepage through
+ * `.home-metrics-strip` in `index.css`, the hub through nested `<div>`s with
+ * inline styles in the MDX itself. The inline copy hardcoded its padding,
+ * radius and font sizes, set its numerals at weight 700 where the type scale's
+ * 1.5rem step is 500, and reached for `--color-teal-*` primitives directly —
+ * the only content file on the site that did. Being inline, it also could not
+ * pick up the dark-mode remap the way every other surface does, so the same
+ * claim looked like a different kind of object depending on which page you
+ * came from.
+ *
+ * One component, semantic tokens, one treatment.
+ */
+interface Metric {
+  /** The figure itself: "3-5×", "60-90%", "0". */
+  value: string;
+  /** What it measures, in lower case: "faster merge throughput". */
+  label: string;
+}
+
+interface Props {
+  metrics: Metric[];
+  /** Names the group for screen readers, since the figures alone carry no context. */
+  label?: string;
+}
+
+const { metrics, label = 'Impact at a glance' } = Astro.props;
+---
+
+<section class="metric-strip" aria-label={label}>
+  {
+    metrics.map((m) => (
+      <div class="metric">
+        <div class="metric-value">{m.value}</div>
+        <div class="metric-label">{m.label}</div>
+      </div>
+    ))
+  }
+</section>
+
+<style>
+  .metric-strip {
+    background: var(--theme-bg);
+    border: 1px solid var(--theme-border-subtle);
+    border-radius: 12px;
+    padding-block: 2rem;
+    padding-inline: var(--min-spacing-inline);
+    margin-block: 1.5rem 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+  }
+
+  .metric {
+    text-align: center;
+    min-width: 8rem;
+  }
+
+  /* 1.5rem at 500 is the type scale's `heading-section` step. The inline
+     version this replaces used 700, which is why the hub's numerals read
+     heavier than the homepage's. */
+  .metric-value {
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: var(--theme-text);
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+
+  .metric-label {
+    font-size: 0.875rem;
+    color: var(--theme-text-muted);
+    margin-top: 0.25rem;
+  }
+</style>
diff --git a/src/components/Verdict.astro b/src/components/Verdict.astro
new file mode 100644
index 0000000000..f1cbd8c228
--- /dev/null
+++ b/src/components/Verdict.astro
@@ -0,0 +1,53 @@
+---
+import { Icon } from 'astro-icon/components';
+
+/**
+ * A yes/no mark with its text, for comparison tables.
+ *
+ * These were two `export const` arrow functions inside `merge-queue.mdx`, each
+ * with a hand-written inline `<svg>` and its colour set from a `--color-*`
+ * primitive in a `style` attribute. That made the hub the last content file
+ * reaching for primitives directly, and the icons duplicated marks the site
+ * already has in its icon set.
+ *
+ * The colour stays a product primitive rather than a `--theme-*` token: yes and
+ * no are a semantic pair with no semantic token behind them, and DESIGN.md
+ * allows a primitive inside a component for exactly this case. The point of
+ * moving it here is that the content file no longer carries it.
+ */
+interface Props {
+  /** `true` renders the affirmative mark, `false` the negative one. */
+  yes: boolean;
+}
+
+const { yes } = Astro.props;
+---
+
+<span class:list={['verdict', yes ? 'is-yes' : 'is-no']}>
+  <Icon name={yes ? 'lucide:check' : 'lucide:x'} class="verdict-mark" aria-hidden="true" />
+  <slot />
+</span>
+
+<style>
+  .verdict {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 600;
+  }
+
+  .verdict-mark {
+    width: 1em;
+    height: 1em;
+    flex: none;
+    stroke-width: 3;
+  }
+
+  .is-yes {
+    color: var(--color-teal-700);
+  }
+
+  .is-no {
+    color: var(--color-coral-700);
+  }
+</style>
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
index 2e9875a507..3330e5583e 100644
--- a/src/content/docs/index.mdx
+++ b/src/content/docs/index.mdx
@@ -10,6 +10,7 @@ import CommunityButton from '~/components/CommunityButton.astro';
 import Docset from '~/components/DocsetGrid/Docset.astro';
 import DocsetGrid from '~/components/DocsetGrid/DocsetGrid.astro';
 import mergeQueueHero from './images/merge-queue-hero.jpg';
+import MetricStrip from '~/components/MetricStrip.astro';
 
 <div id="home">
   {/* ---------------- HERO ---------------- */}
@@ -44,20 +45,14 @@ import mergeQueueHero from './images/merge-queue-hero.jpg';
 
   {/* ---------------- METRICS STRIP ---------------- */}
 
-  <section class="home-metrics-strip" aria-label="Mergify impact at a glance">
-    <div class="home-metric">
-      <div class="home-metric-value">3-5×</div>
-      <div class="home-metric-label">faster merge throughput</div>
-    </div>
-    <div class="home-metric">
-      <div class="home-metric-value">60-90%</div>
-      <div class="home-metric-label">CI cost reduction</div>
-    </div>
-    <div class="home-metric">
-      <div class="home-metric-value">0</div>
-      <div class="home-metric-label">broken builds</div>
-    </div>
-  </section>
+  <MetricStrip
+    label="Mergify impact at a glance"
+    metrics={[
+      { value: '3-5×', label: 'faster merge throughput' },
+      { value: '60-90%', label: 'CI cost reduction' },
+      { value: '0', label: 'broken builds' },
+    ]}
+  />
 
   {/* -------------- PROBLEM CARDS -------------- */}
 
diff --git a/src/content/docs/merge-queue.mdx b/src/content/docs/merge-queue.mdx
index f4a0a60cec..243bc93743 100644
--- a/src/content/docs/merge-queue.mdx
+++ b/src/content/docs/merge-queue.mdx
@@ -8,88 +8,17 @@ import Button from '~/components/Button.astro';
 import AcademyCallout from '~/components/AcademyCallout.astro';
 import DocsetGrid from '~/components/DocsetGrid/DocsetGrid.astro';
 import Docset from '~/components/DocsetGrid/Docset.astro';
-
-export const Yes = ({children}) => (
-  <span style={{color: 'var(--color-teal-700)', fontWeight: '600'}}>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-      stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
-      style={{verticalAlign: 'middle', marginRight: '4px'}} aria-hidden="true">
-      <polyline points="20 6 9 17 4 12"></polyline>
-    </svg>
-    {children}
-  </span>
-);
-
-export const No = ({children}) => (
-  <span style={{color: 'var(--color-coral-700)', fontWeight: '600'}}>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-      stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
-      style={{verticalAlign: 'middle', marginRight: '4px'}} aria-hidden="true">
-      <line x1="18" y1="6" x2="6" y2="18"></line>
-      <line x1="6" y1="6" x2="18" y2="18"></line>
-    </svg>
-    {children}
-  </span>
-);
-
-<div style={{
-  display: 'flex',
-  flexWrap: 'wrap',
-  gap: '1rem',
-  margin: '1.5rem 0'
-}}>
-  <div style={{
-    flex: '1 1 200px',
-    padding: '1rem 1.25rem',
-    borderRadius: '8px',
-    background: 'color-mix(in srgb, var(--color-teal-400) 25%, transparent)',
-    borderLeft: '4px solid var(--color-teal-700)'
-  }}>
-    <div style={{
-      fontSize: '1.5rem',
-      fontWeight: 'bold',
-      color: 'var(--color-teal-700)'
-    }}>3-5x</div>
-    <div style={{
-      fontSize: '0.9rem',
-      color: 'var(--theme-text-secondary)'
-    }}>merge throughput</div>
-  </div>
-  <div style={{
-    flex: '1 1 200px',
-    padding: '1rem 1.25rem',
-    borderRadius: '8px',
-    background: 'color-mix(in srgb, var(--color-teal-400) 25%, transparent)',
-    borderLeft: '4px solid var(--color-teal-700)'
-  }}>
-    <div style={{
-      fontSize: '1.5rem',
-      fontWeight: 'bold',
-      color: 'var(--color-teal-700)'
-    }}>60-90%</div>
-    <div style={{
-      fontSize: '0.9rem',
-      color: 'var(--theme-text-secondary)'
-    }}>CI cost reduction</div>
-  </div>
-  <div style={{
-    flex: '1 1 200px',
-    padding: '1rem 1.25rem',
-    borderRadius: '8px',
-    background: 'color-mix(in srgb, var(--color-teal-400) 25%, transparent)',
-    borderLeft: '4px solid var(--color-teal-700)'
-  }}>
-    <div style={{
-      fontSize: '1.5rem',
-      fontWeight: 'bold',
-      color: 'var(--color-teal-700)'
-    }}>Zero</div>
-    <div style={{
-      fontSize: '0.9rem',
-      color: 'var(--theme-text-secondary)'
-    }}>broken builds</div>
-  </div>
-</div>
+import MetricStrip from '~/components/MetricStrip.astro';
+import Verdict from '~/components/Verdict.astro';
+
+<MetricStrip
+  label="Merge Queue impact at a glance"
+  metrics={[
+    { value: '3-5×', label: 'faster merge throughput' },
+    { value: '60-90%', label: 'CI cost reduction' },
+    { value: '0', label: 'broken builds' },
+  ]}
+/>
 
 Stop wasting engineering time on merge conflicts and broken main branches.
 Mergify's merge queue tests every PR against the latest code before merging,
@@ -190,14 +119,14 @@ which services a PR affects and only batches compatible changes together.
 
 | Capability | GitHub Native | Mergify |
 |------------|---------------|---------|
-| Parallel speculative checks | <Yes>Up to 100</Yes> | <Yes>Up to 128</Yes> |
-| Batch multiple PRs | <No /> | <Yes>Configurable size + CI optimization</Yes> |
-| Priority queues | <No /> | <Yes>Label or rule-based</Yes> |
-| Monorepo scopes | <No /> | <Yes>Path-based queues + Bazel/Nx integration</Yes> |
-| Two-step CI | <No /> | <Yes>Draft CI + merge CI</Yes> |
-| Pause/freeze queue | <No /> | <Yes>API + dashboard</Yes> |
-| Cross-repo queues | <No /> | <Yes>Coordinate dependent repos</Yes> |
-| Queue analytics | <No /> | <Yes>Wait times, throughput, failures</Yes> |
+| Parallel speculative checks | <Verdict yes={true}>Up to 100</Verdict> | <Verdict yes={true}>Up to 128</Verdict> |
+| Batch multiple PRs | <Verdict yes={false} /> | <Verdict yes={true}>Configurable size + CI optimization</Verdict> |
+| Priority queues | <Verdict yes={false} /> | <Verdict yes={true}>Label or rule-based</Verdict> |
+| Monorepo scopes | <Verdict yes={false} /> | <Verdict yes={true}>Path-based queues + Bazel/Nx integration</Verdict> |
+| Two-step CI | <Verdict yes={false} /> | <Verdict yes={true}>Draft CI + merge CI</Verdict> |
+| Pause/freeze queue | <Verdict yes={false} /> | <Verdict yes={true}>API + dashboard</Verdict> |
+| Cross-repo queues | <Verdict yes={false} /> | <Verdict yes={true}>Coordinate dependent repos</Verdict> |
+| Queue analytics | <Verdict yes={false} /> | <Verdict yes={true}>Wait times, throughput, failures</Verdict> |
 
 ## Learn More
 
diff --git a/src/styles/index.css b/src/styles/index.css
index 743d0e5c17..6b4733321f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -599,35 +599,6 @@ a.current-header-link {
   display: block;
 }
 
-/* METRICS STRIP */
-.home-metrics-strip {
-  background: var(--theme-bg);
-  border: 1px solid var(--theme-border-subtle);
-  border-radius: 12px;
-  padding-block: 2rem;
-  padding-inline: var(--min-spacing-inline);
-  margin-bottom: 2rem;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-.home-metric {
-  text-align: center;
-  min-width: 8rem;
-}
-.home-metric-value {
-  font-size: 1.5rem;
-  font-weight: 500;
-  color: var(--theme-text);
-  line-height: 1.2;
-  letter-spacing: -0.02em;
-}
-.home-metric-label {
-  font-size: 0.875rem;
-  color: var(--theme-text-muted);
-  margin-top: 0.25rem;
-}
-
 /* PROBLEM CARDS */
 .home-problems {
   padding-block: 3rem 2rem;