From 0a5d9815138630a354857f088cd445193449b499 Mon Sep 17 00:00:00 2001
From: Marco Walz <marco.walz@dfinity.org>
Date: Thu, 23 Apr 2026 14:20:44 +0200
Subject: [PATCH 1/2] fix(design): update OG image to ICP brand palette

Parchment background, ink headline (Georgia serif), terracotta accent,
muted tagline and footer. Replaces old black/purple design.
---
 public/og-image.svg | 43 +++++++++++++++++--------------------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/public/og-image.svg b/public/og-image.svg
index f01d17c3..8b1eaa89 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: parchment -->
+  <rect width="1200" height="630" fill="#f8f5ef"/>
 
   <!-- 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="#e5ddcf" stroke-width="1"/>
 
-  <!-- Purple accent rule -->
-  <rect x="80" y="108" width="48" height="4" rx="2" fill="hsl(259,60%,60%)"/>
+  <!-- Terracotta accent rule -->
+  <rect x="80" y="108" width="48" height="4" rx="2" fill="#cc5a2b"/>
 
   <!-- "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="#cc5a2b">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="#1a1714">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="#6b6660">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="#e5ddcf" stroke-width="1"/>
 
-  <!-- Footer: DFINITY dot + URL -->
-  <circle cx="80" cy="560" r="5" fill="hsl(259,60%,60%)"/>
+  <!-- Footer: terracotta dot + URL -->
+  <circle cx="80" cy="560" r="5" fill="#cc5a2b"/>
   <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="#9a9490">DFINITY Foundation  ·  beta-docs.internetcomputer.org</text>
+
 </svg>

From 86cc26d173e1ad1ccb1b93d0a6cfde8dd4995898 Mon Sep 17 00:00:00 2001
From: Marco Walz <marco.walz@dfinity.org>
Date: Thu, 23 Apr 2026 14:24:49 +0200
Subject: [PATCH 2/2] fix(design): use dark mode palette for OG image

Deep bark bg (#14110d), bone headline (#f0ebe0), ember accent (#ff7a4d).
---
 public/og-image.svg | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/public/og-image.svg b/public/og-image.svg
index 8b1eaa89..7dd39b96 100644
--- a/public/og-image.svg
+++ b/public/og-image.svg
@@ -1,37 +1,37 @@
 <svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
 
-  <!-- Background: parchment -->
-  <rect width="1200" height="630" fill="#f8f5ef"/>
+  <!-- Background: deep bark -->
+  <rect width="1200" height="630" fill="#14110d"/>
 
   <!-- Outer border card -->
   <rect x="40" y="40" width="1120" height="550" rx="8" fill="none"
-    stroke="#e5ddcf" stroke-width="1"/>
+    stroke="#2d2820" stroke-width="1"/>
 
-  <!-- Terracotta accent rule -->
-  <rect x="80" y="108" width="48" height="4" rx="2" fill="#cc5a2b"/>
+  <!-- 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="#cc5a2b">INTERNET COMPUTER</text>
+    font-size="15" font-weight="500" letter-spacing="3.5" fill="#ff7a4d">INTERNET COMPUTER</text>
 
   <!-- Main headline -->
   <text x="80" y="296"
     font-family="Georgia,'Times New Roman',ui-serif,serif"
-    font-size="86" font-weight="400" fill="#1a1714">Developer Docs</text>
+    font-size="86" font-weight="400" fill="#f0ebe0">Developer Docs</text>
 
   <!-- Tagline -->
   <text x="80" y="354"
     font-family="Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif"
-    font-size="26" font-weight="400" fill="#6b6660">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="#e5ddcf" stroke-width="1"/>
+  <line x1="80" y1="512" x2="1120" y2="512" stroke="#2d2820" stroke-width="1"/>
 
-  <!-- Footer: terracotta dot + URL -->
-  <circle cx="80" cy="560" r="5" fill="#cc5a2b"/>
+  <!-- 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="#9a9490">DFINITY Foundation  ·  beta-docs.internetcomputer.org</text>
+    font-size="17" font-weight="400" fill="#6e6660">DFINITY Foundation  ·  beta-docs.internetcomputer.org</text>
 
 </svg>