diff --git a/frontend/public/hexagram-tsing-flat.svg b/frontend/public/hexagram-tsing-flat.svg
new file mode 100644
index 0000000..1cf5a83
--- /dev/null
+++ b/frontend/public/hexagram-tsing-flat.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" fill="currentColor">
+  <!-- Hexagram 48 — 井 Tsing — Le Puits (flat) -->
+  <rect x="10" y="10" width="80" height="18" rx="2"/>
+  <rect x="110" y="10" width="80" height="18" rx="2"/>
+  <rect x="10" y="52" width="180" height="18" rx="2"/>
+  <rect x="10" y="94" width="80" height="18" rx="2"/>
+  <rect x="110" y="94" width="80" height="18" rx="2"/>
+  <rect x="10" y="136" width="180" height="18" rx="2"/>
+  <rect x="10" y="178" width="180" height="18" rx="2"/>
+  <rect x="10" y="220" width="80" height="18" rx="2"/>
+  <rect x="110" y="220" width="80" height="18" rx="2"/>
+</svg>
diff --git a/frontend/public/hexagram-tsing.svg b/frontend/public/hexagram-tsing.svg
new file mode 100644
index 0000000..b8cee5b
--- /dev/null
+++ b/frontend/public/hexagram-tsing.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240" fill="currentColor">
+  <!-- Hexagram 48 — 井 Tsing — Le Puits -->
+  <!-- K'an (Eau) / Souen (Bois) — signature Yvv -->
+
+  <defs>
+    <filter id="emboss" x="-10%" y="-10%" width="120%" height="120%">
+      <!-- Invert alpha: outside shape = opaque -->
+      <feComponentTransfer in="SourceAlpha" result="inv">
+        <feFuncA type="table" tableValues="1 0"/>
+      </feComponentTransfer>
+
+      <!-- Inset shadow: dark on top-left inner edges -->
+      <feOffset in="inv" dx="4" dy="4" result="sOff"/>
+      <feGaussianBlur in="sOff" stdDeviation="2.5" result="sBlur"/>
+      <feFlood flood-color="#000" flood-opacity="0.35"/>
+      <feComposite in2="sBlur" operator="in" result="sDark"/>
+      <feComposite in="sDark" in2="SourceAlpha" operator="in" result="sClip"/>
+
+      <!-- Inset highlight: light on bottom-right inner edges -->
+      <feOffset in="inv" dx="-3" dy="-3" result="hOff"/>
+      <feGaussianBlur in="hOff" stdDeviation="2" result="hBlur"/>
+      <feFlood flood-color="#fff" flood-opacity="0.45"/>
+      <feComposite in2="hBlur" operator="in" result="hLight"/>
+      <feComposite in="hLight" in2="SourceAlpha" operator="in" result="hClip"/>
+
+      <!-- Stack: base shape + shadow + highlight -->
+      <feMerge>
+        <feMergeNode in="SourceGraphic"/>
+        <feMergeNode in="sClip"/>
+        <feMergeNode in="hClip"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <g filter="url(#emboss)">
+    <!-- Line 6 (top) — yin -->
+    <rect x="10" y="10" width="80" height="18" rx="2"/>
+    <rect x="110" y="10" width="80" height="18" rx="2"/>
+    <!-- Line 5 — yang -->
+    <rect x="10" y="52" width="180" height="18" rx="2"/>
+    <!-- Line 4 — yin -->
+    <rect x="10" y="94" width="80" height="18" rx="2"/>
+    <rect x="110" y="94" width="80" height="18" rx="2"/>
+    <!-- Line 3 — yang -->
+    <rect x="10" y="136" width="180" height="18" rx="2"/>
+    <!-- Line 2 — yang -->
+    <rect x="10" y="178" width="180" height="18" rx="2"/>
+    <!-- Line 1 (bottom) — yin -->
+    <rect x="10" y="220" width="80" height="18" rx="2"/>
+    <rect x="110" y="220" width="80" height="18" rx="2"/>
+  </g>
+</svg>