diff --git a/CHANGELOG.md b/CHANGELOG.md
index acecd31..2b7e0fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@
 - Added a comparison section that explains why teams would pair Hermit with Claude Code or Codex instead of treating it as a replacement orchestrator.
 - Added explicit "who Hermit is for / not for" guidance so the landing page qualifies the intended audience instead of only describing features.
 - Added a reusable `docs/open-source-positioning.md` copy deck for repository descriptions, social preview messaging, release framing, and audience-fit guidance.
-- Added an editable `docs/assets/hermit-social-preview.svg` starter asset for repo cards, launch posts, and future GitHub social preview work.
+- Added a final social-preview asset set: editable SVG, ready-to-upload PNG export, and a local review page under `docs/assets/` for GitHub/social-preview iteration.
 - Updated package and repository-facing descriptions to emphasize the MCP executor + cheaper execution lane story instead of the outdated Codex-first fallback wording.
 - Tightened the public metadata around predictable local / flat-rate defaults so the repository pitch matches the current install and routing policy.
 
diff --git a/README.md b/README.md
index 4ae07a1..e71935a 100644
--- a/README.md
+++ b/README.md
@@ -161,6 +161,8 @@ MIT — see [LICENSE](LICENSE).
 - [docs/hermit-variants.md](docs/hermit-variants.md) — the `-hermit` skill family
 - [docs/measure-savings.md](docs/measure-savings.md) — cost-savings measurement protocol
 - [docs/open-source-positioning.md](docs/open-source-positioning.md) — short public-facing copy for descriptions, releases, and future social previews
-- [docs/assets/hermit-social-preview.svg](docs/assets/hermit-social-preview.svg) — editable social-preview starter asset for repo cards and launch posts
+- [docs/assets/hermit-social-preview.svg](docs/assets/hermit-social-preview.svg) — final editable social-preview asset for repo cards and launch posts
+- [docs/assets/hermit-social-preview.png](docs/assets/hermit-social-preview.png) — ready-to-upload GitHub social-preview export
+- [docs/assets/hermit-social-preview-review.html](docs/assets/hermit-social-preview-review.html) — local review page for checking the social-preview composition before export
 - [CHANGELOG.md](CHANGELOG.md) — notable release and policy changes
 - [benchmarks/](benchmarks/) — reproducible task specs and community datapoints
diff --git a/docs/assets/hermit-social-preview-review.html b/docs/assets/hermit-social-preview-review.html
new file mode 100644
index 0000000..f4a2dea
--- /dev/null
+++ b/docs/assets/hermit-social-preview-review.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Hermit social preview review</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #020617;
+      --panel: #0f172a;
+      --panel-2: #111827;
+      --border: #1f2937;
+      --text: #e5eef8;
+      --muted: #94a3b8;
+      --accent: #38bdf8;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: Inter, Arial, sans-serif;
+      background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 24%), var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+    }
+    main {
+      max-width: 1420px;
+      margin: 0 auto;
+      padding: 40px 28px 56px;
+      display: grid;
+      gap: 28px;
+    }
+    .hero {
+      display: grid;
+      gap: 10px;
+    }
+    .eyebrow {
+      color: var(--accent);
+      text-transform: uppercase;
+      letter-spacing: 0.16em;
+      font-size: 12px;
+      font-weight: 700;
+    }
+    h1 {
+      margin: 0;
+      font-size: clamp(28px, 4vw, 50px);
+      line-height: 1.04;
+    }
+    .lede {
+      margin: 0;
+      max-width: 900px;
+      color: var(--muted);
+      font-size: 18px;
+      line-height: 1.6;
+    }
+    .frame {
+      background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.82));
+      border: 1px solid var(--border);
+      border-radius: 28px;
+      padding: 24px;
+      overflow: hidden;
+      box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
+    }
+    .frame img {
+      width: 100%;
+      display: block;
+      border-radius: 22px;
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      background: #050b16;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 16px;
+    }
+    .card {
+      background: rgba(15, 23, 42, 0.72);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 18px 18px 20px;
+    }
+    .card h2 {
+      margin: 0 0 10px;
+      font-size: 17px;
+    }
+    .card p, .card li {
+      color: var(--muted);
+      line-height: 1.55;
+      font-size: 15px;
+    }
+    .card ul { margin: 0; padding-left: 18px; }
+    code {
+      color: #bae6fd;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 0.95em;
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <section class="hero">
+      <div class="eyebrow">Social preview review</div>
+      <h1>Hermit social preview final candidate</h1>
+      <p class="lede">This review page shows the repository social-preview card at full width, with the intended message hierarchy: plan with Claude Code or Codex, and route repetitive repo work through Hermit's MCP executor lane.</p>
+    </section>
+
+    <section class="frame">
+      <img src="./hermit-social-preview.svg" alt="Hermit social preview card" />
+    </section>
+
+    <section class="grid">
+      <article class="card">
+        <h2>Message hierarchy</h2>
+        <ul>
+          <li>Top line: premium judgment vs cheaper execution.</li>
+          <li>Main headline: keep Claude Code or Codex for planning and review.</li>
+          <li>Accent line: use Hermit for repetitive repo work.</li>
+        </ul>
+      </article>
+      <article class="card">
+        <h2>Visual posture</h2>
+        <ul>
+          <li>Dark terminal-like card for GitHub-native context.</li>
+          <li>Bright cyan accent only where the executor-lane value needs emphasis.</li>
+          <li>Right-side proof points reinforce routing and team-shared infrastructure.</li>
+        </ul>
+      </article>
+      <article class="card">
+        <h2>Repository use</h2>
+        <p>Use <code>docs/assets/hermit-social-preview.svg</code> as the editable source and this HTML file as the local review surface before exporting a PNG for GitHub's social preview setting.</p>
+      </article>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/docs/assets/hermit-social-preview.png b/docs/assets/hermit-social-preview.png
new file mode 100644
index 0000000..ff4fd93
Binary files /dev/null and b/docs/assets/hermit-social-preview.png differ
diff --git a/docs/assets/hermit-social-preview.svg b/docs/assets/hermit-social-preview.svg
index 1d3399d..dfe11d2 100644
--- a/docs/assets/hermit-social-preview.svg
+++ b/docs/assets/hermit-social-preview.svg
@@ -1,25 +1,56 @@
 <svg width="1280" height="640" viewBox="0 0 1280 640" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="1280" height="640" rx="32" fill="#0B1020"/>
-  <rect x="40" y="40" width="1200" height="560" rx="24" fill="#0F172A" stroke="#1E293B" stroke-width="2"/>
-  <circle cx="88" cy="88" r="8" fill="#FB7185"/>
-  <circle cx="116" cy="88" r="8" fill="#F59E0B"/>
-  <circle cx="144" cy="88" r="8" fill="#22C55E"/>
-  <text x="178" y="94" fill="#94A3B8" font-family="Inter, Arial, sans-serif" font-size="22">HermitAgent</text>
+  <defs>
+    <linearGradient id="bg" x1="120" y1="60" x2="1160" y2="580" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#08111F"/>
+      <stop offset="1" stop-color="#111827"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="1">
+      <stop stop-color="#22D3EE"/>
+      <stop offset="1" stop-color="#60A5FA"/>
+    </linearGradient>
+    <filter id="glow" x="0" y="0" width="1280" height="640" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="40" result="blur"/>
+      <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 0.8 0 0 0  0 0.95 1 0 0  0 0 0 0.24 0"/>
+    </filter>
+  </defs>
 
-  <text x="84" y="180" fill="#E2E8F0" font-family="Inter, Arial, sans-serif" font-size="54" font-weight="700">Keep the premium orchestrator</text>
-  <text x="84" y="246" fill="#E2E8F0" font-family="Inter, Arial, sans-serif" font-size="54" font-weight="700">for judgment.</text>
-  <text x="84" y="332" fill="#38BDF8" font-family="Inter, Arial, sans-serif" font-size="54" font-weight="700">Use Hermit for the repetitive repo work.</text>
+  <rect width="1280" height="640" rx="36" fill="#050B16"/>
+  <g filter="url(#glow)">
+    <ellipse cx="1060" cy="132" rx="190" ry="96" fill="#38BDF8"/>
+  </g>
+  <rect x="32" y="32" width="1216" height="576" rx="28" fill="url(#bg)" stroke="#1F2937" stroke-width="2"/>
 
-  <rect x="84" y="400" width="510" height="124" rx="20" fill="#111827" stroke="#334155" stroke-width="2"/>
-  <text x="116" y="448" fill="#F8FAFC" font-family="Inter, Arial, sans-serif" font-size="30" font-weight="600">Claude Code / Codex</text>
-  <text x="116" y="490" fill="#94A3B8" font-family="Inter, Arial, sans-serif" font-size="24">planning • review • judgment</text>
+  <circle cx="88" cy="86" r="7" fill="#FB7185"/>
+  <circle cx="114" cy="86" r="7" fill="#F59E0B"/>
+  <circle cx="140" cy="86" r="7" fill="#22C55E"/>
+  <text x="170" y="93" fill="#94A3B8" font-family="Inter, Arial, sans-serif" font-size="22">cafitac/hermit-agent</text>
 
-  <rect x="648" y="400" width="548" height="124" rx="20" fill="#082F49" stroke="#0EA5E9" stroke-width="2"/>
-  <text x="680" y="448" fill="#E0F2FE" font-family="Inter, Arial, sans-serif" font-size="30" font-weight="600">Hermit MCP executor lane</text>
-  <text x="680" y="490" fill="#BAE6FD" font-family="Inter, Arial, sans-serif" font-size="24">edits • tests • commits • release follow-through</text>
+  <text x="80" y="172" fill="#E5EEF8" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700" letter-spacing="1.6">PREMIUM JUDGMENT · MCP EXECUTION</text>
+  <text x="80" y="244" fill="#F8FAFC" font-family="Inter, Arial, sans-serif" font-size="60" font-weight="800">Plan with Claude Code or Codex.</text>
+  <text x="80" y="314" fill="url(#accent)" font-family="Inter, Arial, sans-serif" font-size="60" font-weight="800">Execute the repo work with Hermit.</text>
 
-  <path d="M612 462H642" stroke="#64748B" stroke-width="6" stroke-linecap="round"/>
-  <path d="M628 446L644 462L628 478" stroke="#64748B" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+  <text x="80" y="386" fill="#9FB2C8" font-family="Inter, Arial, sans-serif" font-size="25">MCP execution for edits, tests, commits, and release follow-through</text>
 
-  <text x="84" y="570" fill="#94A3B8" font-family="Inter, Arial, sans-serif" font-size="24">MCP executor for Claude Code or Codex • predictable local / flat-rate execution by default</text>
+  <rect x="80" y="500" width="328" height="64" rx="18" fill="#0F172A" stroke="#334155" stroke-width="2"/>
+  <text x="112" y="540" fill="#F8FAFC" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700">Claude Code / Codex</text>
+  <text x="112" y="572" fill="#94A3B8" font-family="Inter, Arial, sans-serif" font-size="20">judgment · planning · review</text>
+
+  <path d="M438 536H516" stroke="#64748B" stroke-width="8" stroke-linecap="round"/>
+  <path d="M492 514L520 536L492 558" stroke="#64748B" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <rect x="548" y="500" width="484" height="64" rx="18" fill="#082F49" stroke="#38BDF8" stroke-width="2"/>
+  <text x="580" y="540" fill="#E0F2FE" font-family="Inter, Arial, sans-serif" font-size="28" font-weight="700">Hermit MCP executor lane</text>
+  <text x="580" y="572" fill="#B6E5FF" font-family="Inter, Arial, sans-serif" font-size="20">edits · tests · commits · release ops</text>
+
+  <rect x="1056" y="188" width="144" height="44" rx="14" fill="#0B1220" stroke="#1E293B"/>
+  <text x="1087" y="216" fill="#93C5FD" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="700">MCP</text>
+
+  <rect x="970" y="246" width="230" height="54" rx="18" fill="#0F172A" stroke="#233146"/>
+  <text x="1002" y="279" fill="#E5EEF8" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="700">predictable routing</text>
+
+  <rect x="970" y="316" width="230" height="54" rx="18" fill="#0F172A" stroke="#233146"/>
+  <text x="1002" y="349" fill="#E5EEF8" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="700">local / flat-rate first</text>
+
+  <rect x="970" y="386" width="230" height="54" rx="18" fill="#0F172A" stroke="#233146"/>
+  <text x="1002" y="419" fill="#E5EEF8" font-family="Inter, Arial, sans-serif" font-size="24" font-weight="700">shared by teams</text>
 </svg>
diff --git a/docs/open-source-positioning.md b/docs/open-source-positioning.md
index d998c76..78c8466 100644
--- a/docs/open-source-positioning.md
+++ b/docs/open-source-positioning.md
@@ -60,9 +60,12 @@ Cheaper execution across multiple orchestrators.
 
 ## Social preview asset
 
-- Starter asset: `docs/assets/hermit-social-preview.svg`
-- Intended use: GitHub social preview image mockups, release cards, launch posts, and docs screenshots.
+- Final editable asset: `docs/assets/hermit-social-preview.svg`
+- Ready-to-upload export: `docs/assets/hermit-social-preview.png`
+- Local review page: `docs/assets/hermit-social-preview-review.html`
+- Intended use: GitHub social preview image export, release cards, launch posts, and docs screenshots.
 - Design direction: dark terminal-like card, premium planner on top, cheaper execution lane underneath, no provider-specific billing claims beyond predictable local / flat-rate defaults.
+- Message hierarchy: plan with Claude Code or Codex, execute repetitive repo work with Hermit, and reinforce predictable local / flat-rate routing on the supporting side of the card.
 
 ## Release-note framing
 
