diff --git a/README.md b/README.md
index 8e1f141..cb372ec 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,17 @@ assets and a [simplified favicon](static/img/community-favicon.svg). The
 desktop navbar and mobile menu. Keep the two mark variants geometrically identical.
 The green Docusaurus icon in the external link and footer still identifies the upstream project.
 
+The default social share image is [community-social-card.png](static/img/community-social-card.png)
+(1200 x 630). Its editable source is [community-social-card.svg](static/img/community-social-card.svg).
+After editing the SVG, regenerate the PNG from the repository root with the existing Sharp dependency:
+
+```powershell
+yarn node -e "require('sharp')('static\\img\\community-social-card.svg').png().toFile('static\\img\\community-social-card.png').catch(error => { console.error(error); process.exitCode = 1 })"
+```
+
+The site configuration uses the PNG for Open Graph and Twitter cards, since social crawlers do not
+reliably support SVG previews. The image is intentionally fixed to the light brand palette.
+
 ## Deployment
 
 Using SSH:
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 1d3330b..c59c47e 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -109,8 +109,7 @@ const config: Config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     {
-      // Replace with your project's social card
-      image: 'img/docusaurus-social-card.jpg',
+      image: 'img/community-social-card.png',
       colorMode: {
         defaultMode: 'dark',
         disableSwitch: false,
diff --git a/static/img/community-social-card.png b/static/img/community-social-card.png
new file mode 100644
index 0000000..7d59965
Binary files /dev/null and b/static/img/community-social-card.png differ
diff --git a/static/img/community-social-card.svg b/static/img/community-social-card.svg
new file mode 100644
index 0000000..cfff5c7
--- /dev/null
+++ b/static/img/community-social-card.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
+  <rect width="1200" height="630" fill="#f7f4ef"/>
+  <path d="M0 0h1200v8H0z" fill="#b11f4b"/>
+  <g font-family="Segoe UI, Arial, sans-serif">
+    <text x="64" y="89" font-size="30" font-weight="600" letter-spacing="-1" fill="#242424">docusaurus<tspan fill="#b11f4b">.community</tspan></text>
+    <text x="64" y="218" font-size="72" font-weight="700" letter-spacing="-3" fill="#242424">Building with</text>
+    <text x="64" y="300" font-size="72" font-weight="700" letter-spacing="-3" fill="#b11f4b">Docusaurus?</text>
+    <g font-size="26" fill="#5c5c5c">
+      <text x="64" y="364">Guides, plugins, and components</text>
+      <text x="64" y="403">shared by people building sites like yours.</text>
+    </g>
+    <rect x="848" y="147" width="288" height="288" rx="32" fill="#fcfbf8" stroke="#dedede" stroke-width="2"/>
+    <g transform="translate(884 179) scale(3.375)">
+      <g fill="#b11f4b">
+        <path fill-rule="evenodd" d="M18 5h28a15 15 0 0 1 15 15v20a15 15 0 0 1-15 15H27L12 63V54A15 15 0 0 1 3 40V20A15 15 0 0 1 18 5Zm0 4A11 11 0 0 0 7 20v20a11 11 0 0 0 7.3 10.36L16 51v5.3L26 51h20a11 11 0 0 0 11-11V20A11 11 0 0 0 46 9H18Z"/>
+        <path d="m18 39-4-4 5-2-4-5 6-1-2-6 6 1 1-6 5 4h9a7 7 0 0 1 7 7v2h5v7H37v4h9a7 7 0 0 1-7 6H21v-7Z"/>
+      </g>
+      <circle cx="39" cy="27" r="2" fill="#fcfbf8"/>
+    </g>
+    <path d="M64 490h1072" stroke="#dedede" stroke-width="2"/>
+    <text x="64" y="548" font-size="21" font-weight="600" fill="#242424">A little help with your next site.</text>
+    <text x="64" y="582" font-size="17" fill="#5c5c5c">Unofficial. Open source. Everyone's welcome.</text>
+    <text x="1136" y="559" text-anchor="end" font-size="21" font-weight="600" fill="#b11f4b">docusaurus.community</text>
+  </g>
+</svg>