diff --git a/branding/avatar.png b/branding/avatar.png
new file mode 100644
index 0000000..d82c6c6
Binary files /dev/null and b/branding/avatar.png differ
diff --git a/branding/avatar.svg b/branding/avatar.svg
new file mode 100644
index 0000000..5549534
--- /dev/null
+++ b/branding/avatar.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <radialGradient id="bg" cx="50%" cy="40%" r="75%">
+      <stop offset="0" stop-color="#2a2368"/>
+      <stop offset="1" stop-color="#0d0b26"/>
+    </radialGradient>
+    <linearGradient id="strap" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#2b2660"/>
+      <stop offset="0.5" stop-color="#3b3580"/>
+      <stop offset="1" stop-color="#2b2660"/>
+    </linearGradient>
+    <linearGradient id="case" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#6d68c9"/>
+      <stop offset="1" stop-color="#3a3488"/>
+    </linearGradient>
+    <linearGradient id="teal" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2fc7b0"/>
+      <stop offset="1" stop-color="#3f6fd8"/>
+    </linearGradient>
+    <linearGradient id="coral" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#ff8a5c"/>
+      <stop offset="1" stop-color="#e2475f"/>
+    </linearGradient>
+    <radialGradient id="ball" cx="38%" cy="35%" r="70%">
+      <stop offset="0" stop-color="#ffb08f"/>
+      <stop offset="0.5" stop-color="#f2614f"/>
+      <stop offset="1" stop-color="#b7323f"/>
+    </radialGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="10"/>
+    </filter>
+  </defs>
+
+  <!-- background -->
+  <rect width="512" height="512" fill="url(#bg)"/>
+
+  <!-- straps -->
+  <path d="M186 40 h140 l-10 100 h-120 z" fill="url(#strap)"/>
+  <path d="M196 372 h120 l10 100 h-140 z" fill="url(#strap)"/>
+
+  <!-- crown and side button -->
+  <rect x="394" y="196" width="22" height="50" rx="8" fill="#5b56b8"/>
+  <rect x="396" y="270" width="14" height="40" rx="6" fill="#4a4599"/>
+
+  <!-- case -->
+  <rect x="106" y="116" width="294" height="280" rx="78" fill="url(#case)"/>
+  <!-- screen -->
+  <rect x="124" y="134" width="258" height="244" rx="62" fill="#07061a"/>
+
+  <!-- soft glow behind the mark -->
+  <ellipse cx="253" cy="256" rx="80" ry="90" fill="#4c45c2" opacity="0.45" filter="url(#glow)"/>
+
+  <!-- balance mark: two loops and a ball, as in the app icon -->
+  <rect x="190" y="166" width="126" height="94" rx="47" fill="none" stroke="url(#teal)" stroke-width="28"/>
+  <rect x="190" y="252" width="126" height="94" rx="47" fill="none" stroke="url(#coral)" stroke-width="28"/>
+  <!-- teal loop overlaps coral on the left, like the original figure -->
+  <path d="M204 213 v40" stroke="url(#teal)" stroke-width="28" stroke-linecap="round"/>
+  <circle cx="253" cy="256" r="24" fill="url(#ball)"/>
+  <ellipse cx="246" cy="247" rx="8" ry="5" fill="#ffffff" opacity="0.35"/>
+</svg>