diff --git a/hermes/branding/index.html b/hermes/branding/index.html
index a1c4702..be8bced 100644
--- a/hermes/branding/index.html
+++ b/hermes/branding/index.html
@@ -56,15 +56,7 @@
 
 <header class="hero">
   <div class="mark mark-xl" aria-hidden="true">
-    <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>
+    <img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block">
   </div>
   <h1>Hermes <span class="pill p-brand" style="vertical-align:middle;font-size:12px;margin-left:.6rem;background:rgba(214,255,61,.12);color:var(--acid);padding:2px 8px;border-radius:999px">brand</span></h1>
   <p class="tag">Mark, palette, name, tone. One page so client builds, add-on
@@ -97,23 +89,23 @@
 
   <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="mark.webp" alt="Hermes" width="5" height="22" style="display:block"></div>
       <small>16 px — simplified stroke variant</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="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
       <small>32 px — standard</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="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
       <small>64 px — on 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="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
       <small>on acid green</small>
     </div>
     <div class="cell">
-      <div class="mark-amber"><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-amber"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
       <small>amber (unread badge)</small>
     </div>
   </div>
diff --git a/hermes/branding/mark-variant.webp b/hermes/branding/mark-variant.webp
new file mode 100644
index 0000000..ce229b1
Binary files /dev/null and b/hermes/branding/mark-variant.webp differ
diff --git a/hermes/branding/mark-wings-both.webp b/hermes/branding/mark-wings-both.webp
new file mode 100644
index 0000000..f789650
Binary files /dev/null and b/hermes/branding/mark-wings-both.webp differ
diff --git a/hermes/branding/mark.webp b/hermes/branding/mark.webp
new file mode 100644
index 0000000..8208e4a
Binary files /dev/null and b/hermes/branding/mark.webp differ
diff --git a/hermes/index.html b/hermes/index.html
index e28dd04..afc5582 100644
--- a/hermes/index.html
+++ b/hermes/index.html
@@ -31,16 +31,8 @@
 </nav>
 
 <header class="hero">
-  <div class="mark" style="color:var(--acid); line-height:0; display:inline-flex">
-    <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" width="80" height="80" aria-label="Hermes">
-      <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 class="mark" style="line-height:0; display:inline-flex">
+    <img src="branding/mark.webp" alt="Hermes" width="120" height="120" style="display:block">
   </div>
   <h1>Hermes <span class="pill p-shipped" style="vertical-align:middle;font-size:12px;margin-left:.6rem;background:rgba(79,209,165,.12);color:#4fd1a5;padding:2px 10px;border-radius:999px">MVP · desktop</span></h1>
   <p class="tag">End-to-end encrypted DMs over Nostr, addressed by your