diff --git a/assets/mark-variant.webp b/assets/mark-variant.webp
new file mode 100644
index 0000000..ce229b1
Binary files /dev/null and b/assets/mark-variant.webp differ
diff --git a/assets/mark-wings-both.webp b/assets/mark-wings-both.webp
new file mode 100644
index 0000000..f789650
Binary files /dev/null and b/assets/mark-wings-both.webp differ
diff --git a/assets/mark.webp b/assets/mark.webp
new file mode 100644
index 0000000..8208e4a
Binary files /dev/null and b/assets/mark.webp differ
diff --git a/branding/index.html b/branding/index.html
index cd15297..953d453 100644
--- a/branding/index.html
+++ b/branding/index.html
@@ -44,7 +44,7 @@
 
 <nav class="topnav">
   <a class="brand" href="../">
-    <svg viewBox="0 0 64 64" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 36 L-4 36"/></g></svg>
+    <img src="../assets/mark.webp" alt="Hermes" width="5" height="22" style="display:block">
     hermes<span class="x">.x</span>
   </a>
   <a href="../">Overview</a>
@@ -55,7 +55,7 @@
 
 <header class="hero">
   <div class="mark mark-xl" aria-hidden="true">
-    <svg viewBox="0 0 64 64"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg>
+    <img src="../assets/mark.webp" alt="Hermes" width="3" height="22" style="display:block">
   </div>
   <h1>Brand kit</h1>
   <p class="tag">Mark, palette, name, voice. One page so client builds, add-on
@@ -83,19 +83,19 @@
 
   <div class="mark-row">
     <div class="cell">
-      <div class="mark-16"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 36 L-4 36"/></g></svg></div>
+      <div class="mark-16"><img src="../assets/mark.webp" alt="Hermes" width="5" height="22" style="display:block"></div>
       <small>16 px — stroke variant (one trail)</small>
     </div>
     <div class="cell">
-      <div class="mark-32"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg></div>
+      <div class="mark-32"><img src="../assets/mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
       <small>32 px — standard (3 tapered trails)</small>
     </div>
     <div class="cell">
-      <div class="mark-64"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg></div>
+      <div class="mark-64"><img src="../assets/mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
       <small>64 px — in-panel</small>
     </div>
     <div class="cell">
-      <div class="mark-neg"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg></div>
+      <div class="mark-neg"><img src="../assets/mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
       <small>on sky background</small>
     </div>
   </div>
diff --git a/index.html b/index.html
index 153a398..4ba73c8 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
 
 <nav class="topnav">
   <a class="brand" href="./">
-    <svg viewBox="0 0 64 64" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 36 L-4 36"/></g></svg>
+    <img src="assets/mark.webp" alt="Hermes" width="5" height="22" style="display:block">
     hermes<span class="x">.x</span>
   </a>
   <a href="./" class="here">Overview</a>
@@ -33,7 +33,7 @@
 
 <header class="hero">
   <div class="mark" aria-hidden="true">
-    <svg viewBox="0 0 64 64"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg>
+    <img src="assets/mark.webp" alt="Hermes" width="3" height="22" style="display:block">
   </div>
   <h1>Message by name<span class="x">.</span></h1>
   <p class="tag">End-to-end encrypted DMs over Nostr, addressed by your
diff --git a/messenger/index.html b/messenger/index.html
index 01e43cd..1a8676c 100644
--- a/messenger/index.html
+++ b/messenger/index.html
@@ -85,7 +85,7 @@
 
 <nav class="topnav">
   <a class="brand" href="../">
-    <svg viewBox="0 0 64 64" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 36 L-4 36"/></g></svg>
+    <img src="../assets/mark.webp" alt="Hermes" width="5" height="22" style="display:block">
     hermes<span class="x">.x</span>
   </a>
   <a href="../">Overview</a>
@@ -96,7 +96,7 @@
 
 <header class="hero">
   <div class="mark" style="color:var(--sky); line-height:0; display:inline-flex" aria-hidden="true">
-    <svg viewBox="0 0 64 64" width="96" height="96"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg>
+    <img src="../assets/mark.webp" alt="Hermes" width="96" height="96" style="display:block">
   </div>
   <h1>Messenger</h1>
   <p class="tag">Hermes in a browser tab — end-to-end encrypted DMs over Nostr,