cafitac · cafitac · Apr 27, 2026 · Apr 27, 2026
diff --git 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
@@ -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
@@ -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
diff --git a/docs/assets/hermit-social-preview.svg b/docs/assets/hermit-social-preview.svg
diff --git 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