diff --git a/.w4c/preview.svg b/.w4c/preview.svg
new file mode 100644
index 0000000..1a7aa5e
--- /dev/null
+++ b/.w4c/preview.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-label="SaaS Starter template preview">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0f172a"/>
+      <stop offset="1" stop-color="#1e293b"/>
+    </linearGradient>
+    <linearGradient id="a" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#22d3ee"/>
+      <stop offset="1" stop-color="#3b82f6"/>
+    </linearGradient>
+  </defs>
+  <rect width="640" height="360" rx="18" fill="url(#bg)"/>
+  <rect x="48" y="48" width="544" height="44" rx="10" stroke="#334155" stroke-width="2" fill="none"/>
+  <rect x="66" y="64" width="110" height="12" rx="6" fill="#22d3ee"/>
+  <rect x="48" y="112" width="120" height="174" rx="12" stroke="#334155" stroke-width="2" fill="none"/><rect x="188" y="112" width="404" height="80" rx="12" fill="url(#a)" opacity="0.9"/><rect x="188" y="206" width="196" height="80" rx="12" stroke="#334155" stroke-width="2" fill="none"/><rect x="396" y="206" width="196" height="80" rx="12" stroke="#334155" stroke-width="2" fill="none"/><rect x="64" y="130" width="90" height="12" rx="6" fill="#94a3b8"/><rect x="64" y="150" width="70" height="12" rx="6" fill="#94a3b8"/><rect x="64" y="170" width="84" height="12" rx="6" fill="#94a3b8"/>
+</svg>