diff --git a/website/figures.md b/website/figures.md
index 73fc70c42c..cef6c871e6 100644
--- a/website/figures.md
+++ b/website/figures.md
@@ -52,6 +52,11 @@ preparation. Check the rendered image for readable text and spacing before
 publishing. The build uses DejaVu Sans for consistent typography; only the SVG
 source is committed. Metadata and build instructions are in the website README.
 
+The card and `public/assets/favicon.svg` each carry a dark
+`prefers-color-scheme` block for people who open the SVG directly or use a dark
+browser tab strip. CairoSVG ignores it, so the PNG that link previews fetch
+stays light.
+
 ## Beginner homepage and dinosaur reconstruction
 
 The manual/agent comparison and Calculator percentage controls are semantic
diff --git a/website/public/assets/favicon.svg b/website/public/assets/favicon.svg
index 78512ef981..10a2e315c7 100644
--- a/website/public/assets/favicon.svg
+++ b/website/public/assets/favicon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="5" fill="#20252b"/><path fill="#fff" d="M9 7h7.5c5 0 7.5 2.3 7.5 6.2 0 2.8-1.4 4.7-4 5.6L25 25h-5l-4.5-5.8H13V25H9zm4 3.5v5.2h3.5c2.3 0 3.5-.8 3.5-2.6s-1.2-2.6-3.5-2.6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>@media (prefers-color-scheme: dark){rect{fill:#89b4fa}path{fill:#11111b}}</style><rect width="32" height="32" rx="5" fill="#20252b"/><path fill="#fff" d="M9 7h7.5c5 0 7.5 2.3 7.5 6.2 0 2.8-1.4 4.7-4 5.6L25 25h-5l-4.5-5.8H13V25H9zm4 3.5v5.2h3.5c2.3 0 3.5-.8 3.5-2.6s-1.2-2.6-3.5-2.6z"/></svg>
diff --git a/website/public/assets/social-card.svg b/website/public/assets/social-card.svg
index faab21bd25..2e30ac9eec 100644
--- a/website/public/assets/social-card.svg
+++ b/website/public/assets/social-card.svg
@@ -1,6 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
   <title id="title">REA — Find out how software works.</title>
   <desc id="desc">Reverse engineering with your coding agent. REA connects your agent to analysis tools and returns evidence.</desc>
+  <style>
+@media (prefers-color-scheme: dark){
+[fill="#ffffff"]{fill:#181825}
+[fill="#f0f5fa"]{fill:#313244}
+[fill="#20252b"]{fill:#cdd6f4}
+[fill="#5b6570"]{fill:#a6adc8}
+[fill="#294f82"]{fill:#89b4fa}
+[stroke="#dce2e8"]{stroke:#45475a}
+[stroke="#5b6570"]{stroke:#a6adc8}
+[stroke="#294f82"]{stroke:#89b4fa}
+}
+  </style>
   <rect width="1200" height="630" fill="#ffffff"/>
   <g font-family="DejaVu Sans, sans-serif" fill="#20252b">
     <text x="72" y="110" font-size="44" font-weight="700">REA</text>