diff --git a/public/og-image.png b/public/og-image.png
index 5907dd9..b4c7c7e 100644
Binary files a/public/og-image.png and b/public/og-image.png differ
diff --git a/public/og-image.svg b/public/og-image.svg
index 9d9e562..169e208 100644
--- a/public/og-image.svg
+++ b/public/og-image.svg
@@ -1,8 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
+  <!-- Grid paper texture -->
+  <defs>
+    <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse" x="-1" y="-1">
+      <path d="M 24 0 L 0 0 0 24" fill="none" stroke="rgba(240,235,224,0.05)" stroke-width="1"/>
+    </pattern>
+  </defs>
   <rect width="1200" height="630" fill="#14110d"/>
+  <rect width="1200" height="630" fill="url(#grid)" opacity="0.8"/>
+  <!-- Content -->
   <g fill="#f0ebe0" font-family="Newsreader, Charter, Georgia, serif">
     <text x="80" y="300" font-size="96" font-weight="400" letter-spacing="-1.5">ICP Skills</text>
-    <text x="80" y="378" font-size="34" font-style="italic" fill="#c25a37">A library for agents, and the humans who direct them.</text>
+    <text x="80" y="378" font-size="34" font-style="italic">
+      <tspan fill="#f0ebe0">A library for </tspan><tspan fill="#c25a37">agents</tspan><tspan fill="#f0ebe0">, and the humans who direct them.</tspan>
+    </text>
   </g>
   <g font-family="Inter, system-ui, sans-serif">
     <text x="80" y="550" font-size="18" letter-spacing="3" font-weight="500" fill="#c25a37">ICP SKILLS</text>
diff --git a/public/styles.css b/public/styles.css
index d781e75..a2d9f2e 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -17,6 +17,8 @@
   --accent-dim: rgba(168, 72, 43, 0.10);
   --code-bg: #efe8da;
   --code-fg: #1a1a1a;
+  --grid-line: rgba(26, 26, 26, 0.04);  /* hero grid paper texture */
+  --grid-tile: 24px;
 
   --serif: "Newsreader", Charter, Georgia, Cambria, "Times New Roman", serif;
   --sans: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
@@ -49,6 +51,7 @@
   --accent-dim: rgba(194, 90, 55, 0.16);
   --code-bg: #1b1812;
   --code-fg: #f0ebe0;
+  --grid-line: rgba(240, 235, 224, 0.05);
 }
 
 * { box-sizing: border-box; }
@@ -144,8 +147,21 @@ h4 { font-size: 1.05rem; }
 .site-footer a:hover { color: var(--accent); border-color: var(--accent); }
 .machine-links { white-space: normal; }
 
+/* ---------- Grid paper overlay ---------- */
+.grid-paper-overlay {
+  position: absolute; inset: 0; pointer-events: none; z-index: 0;
+  opacity: 0.8;
+  background-image:
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
+    linear-gradient(var(--grid-line) 1px, transparent 1px);
+  background-size: var(--grid-tile) var(--grid-tile);
+  background-position: -1px -1px;
+  background-repeat: repeat;
+}
+
 /* ---------- Home: hero ---------- */
-.hero { padding: 5rem 0 3rem; max-width: 52rem; }
+.hero { padding: 5rem 0 3rem; position: relative; overflow: hidden; }
+.hero-inner { max-width: 52rem; position: relative; z-index: 1; }
 .hero .eyebrow {
   font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em;
   color: var(--fg-secondary); font-weight: 500;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 829856e..ca57f90 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -37,19 +37,22 @@ const collectionLd = {
   jsonLd={[collectionLd]}
 >
   <section class="hero">
-    <div class="eyebrow">A library for agents, and the humans who direct them</div>
-    <h1>Skills that make <em>agents</em> actually good at the Internet&nbsp;Computer.</h1>
-    <p class="lede">
-      A curated database of skill files. Each one captures correct dependency versions,
-      configuration formats, and the pitfalls that prevent build failures. An agent
-      can load it, ship working code, and stop guessing.
-    </p>
-    <div class="hero-actions">
-      <button id="copy-prompt" class="cta cta-primary" style="display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: inherit; font-family: inherit;">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
-        <span id="copy-label">Give your agent ICP skills</span>
-      </button>
-      <a class="cta cta-secondary" href="/how-it-works/">Read how it works &rarr;</a>
+    <div class="grid-paper-overlay" aria-hidden="true"></div>
+    <div class="hero-inner">
+      <div class="eyebrow">A library for agents, and the humans who direct them</div>
+      <h1>Skills that make <em>agents</em> actually good at the Internet&nbsp;Computer.</h1>
+      <p class="lede">
+        A curated database of skill files. Each one captures correct dependency versions,
+        configuration formats, and the pitfalls that prevent build failures. An agent
+        can load it, ship working code, and stop guessing.
+      </p>
+      <div class="hero-actions">
+        <button id="copy-prompt" class="cta cta-primary" style="display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: inherit; font-family: inherit;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>
+          <span id="copy-label">Give your agent ICP skills</span>
+        </button>
+        <a class="cta cta-secondary" href="/how-it-works/">Read how it works &rarr;</a>
+      </div>
     </div>
   </section>