diff --git a/public/og-image.svg b/public/og-image.svg
index f01d17c3..7dd39b96 100644
--- a/public/og-image.svg
+++ b/public/og-image.svg
@@ -1,46 +1,37 @@
 <svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <radialGradient id="purpleGlow" cx="180" cy="160" r="600" gradientUnits="userSpaceOnUse">
-      <stop offset="0%" stop-color="hsl(259,60%,60%)" stop-opacity="0.18"/>
-      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
 
-  <!-- Background -->
-  <rect width="1200" height="630" fill="#000000"/>
-
-  <!-- Subtle purple atmospheric glow, top-left -->
-  <ellipse cx="180" cy="160" rx="520" ry="320" fill="url(#purpleGlow)"/>
+  <!-- Background: deep bark -->
+  <rect width="1200" height="630" fill="#14110d"/>
 
   <!-- Outer border card -->
-  <rect x="40" y="40" width="1120" height="550" rx="16" fill="none"
-    stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
+  <rect x="40" y="40" width="1120" height="550" rx="8" fill="none"
+    stroke="#2d2820" stroke-width="1"/>
 
-  <!-- Purple accent rule -->
-  <rect x="80" y="108" width="48" height="4" rx="2" fill="hsl(259,60%,60%)"/>
+  <!-- Ember accent rule -->
+  <rect x="80" y="108" width="48" height="4" rx="2" fill="#ff7a4d"/>
 
   <!-- "INTERNET COMPUTER" label -->
   <text x="80" y="176"
     font-family="Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif"
-    font-size="15" font-weight="500" letter-spacing="3.5" fill="hsl(259,60%,60%)"
-    text-transform="uppercase">INTERNET COMPUTER</text>
+    font-size="15" font-weight="500" letter-spacing="3.5" fill="#ff7a4d">INTERNET COMPUTER</text>
 
   <!-- Main headline -->
-  <text x="80" y="288"
-    font-family="Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif"
-    font-size="86" font-weight="700" fill="#ffffff">Developer Docs</text>
+  <text x="80" y="296"
+    font-family="Georgia,'Times New Roman',ui-serif,serif"
+    font-size="86" font-weight="400" fill="#f0ebe0">Developer Docs</text>
 
-  <!-- Tagline line 1 -->
+  <!-- Tagline -->
   <text x="80" y="354"
     font-family="Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif"
-    font-size="26" font-weight="400" fill="rgba(255,255,255,0.56)">Build tamperproof full-stack applications on the Internet Computer.</text>
+    font-size="26" font-weight="400" fill="#a29a8d">Build tamperproof full-stack applications on the Internet Computer.</text>
 
   <!-- Divider -->
-  <line x1="80" y1="512" x2="1120" y2="512" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
+  <line x1="80" y1="512" x2="1120" y2="512" stroke="#2d2820" stroke-width="1"/>
 
-  <!-- Footer: DFINITY dot + URL -->
-  <circle cx="80" cy="560" r="5" fill="hsl(259,60%,60%)"/>
+  <!-- Footer: ember dot + URL -->
+  <circle cx="80" cy="560" r="5" fill="#ff7a4d"/>
   <text x="96" y="566"
     font-family="Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif"
-    font-size="17" font-weight="400" fill="rgba(255,255,255,0.36)">DFINITY Foundation  ·  beta-docs.internetcomputer.org</text>
+    font-size="17" font-weight="400" fill="#6e6660">DFINITY Foundation  ·  beta-docs.internetcomputer.org</text>
+
 </svg>