diff --git a/docs/logo-wordmark.svg b/docs/logo-wordmark.svg
new file mode 100644
index 00000000..26b200b8
--- /dev/null
+++ b/docs/logo-wordmark.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 200" width="800" height="200">
+  <defs>
+    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#059669" />
+      <stop offset="100%" style="stop-color:#0d9488" />
+    </linearGradient>
+    <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#34d399" />
+      <stop offset="100%" style="stop-color:#2dd4bf" />
+    </linearGradient>
+    <linearGradient id="g3" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#047857" />
+      <stop offset="100%" style="stop-color:#0f766e" />
+    </linearGradient>
+  </defs>
+
+  <!-- Icon: 2x2 module grid -->
+  <rect x="24" y="24" width="68" height="68" rx="12" fill="url(#g1)" />
+  <rect x="108" y="24" width="68" height="68" rx="12" fill="url(#g2)" />
+  <rect x="24" y="108" width="68" height="68" rx="12" fill="url(#g2)" />
+  <rect x="108" y="108" width="68" height="68" rx="12" fill="url(#g3)" />
+
+  <!-- Connector dots -->
+  <circle cx="100" cy="58" r="3" fill="#a7f3d0" />
+  <circle cx="100" cy="142" r="3" fill="#a7f3d0" />
+  <circle cx="58" cy="100" r="3" fill="#a7f3d0" />
+  <circle cx="142" cy="100" r="3" fill="#a7f3d0" />
+
+  <!-- Dashed connectors -->
+  <line x1="92" y1="58" x2="108" y2="58" stroke="#a7f3d0" stroke-width="2" stroke-dasharray="4,3" />
+  <line x1="92" y1="142" x2="108" y2="142" stroke="#a7f3d0" stroke-width="2" stroke-dasharray="4,3" />
+  <line x1="58" y1="92" x2="58" y2="108" stroke="#a7f3d0" stroke-width="2" stroke-dasharray="4,3" />
+  <line x1="142" y1="92" x2="142" y2="108" stroke="#a7f3d0" stroke-width="2" stroke-dasharray="4,3" />
+
+  <!-- Subtle highlight bars -->
+  <rect x="36" y="36" width="44" height="4" rx="2" fill="white" opacity="0.3" />
+  <rect x="120" y="164" width="44" height="4" rx="2" fill="white" opacity="0.3" />
+
+  <!-- Wordmark -->
+  <text x="220" y="118" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif" font-size="64" font-weight="700" fill="#022c22" letter-spacing="-2">
+    Simple<tspan fill="url(#g1)">Module</tspan>
+  </text>
+</svg>
diff --git a/docs/logo.svg b/docs/logo.svg
new file mode 100644
index 00000000..cf9de0a4
--- /dev/null
+++ b/docs/logo.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#059669;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0d9488;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#34d399;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2dd4bf;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad3" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#047857;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0f766e;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Module block: top-left -->
+  <rect x="96" y="96" width="140" height="140" rx="20" fill="url(#grad1)" />
+
+  <!-- Module block: top-right -->
+  <rect x="276" y="96" width="140" height="140" rx="20" fill="url(#grad2)" />
+
+  <!-- Module block: bottom-left -->
+  <rect x="96" y="276" width="140" height="140" rx="20" fill="url(#grad2)" />
+
+  <!-- Module block: bottom-right (accent - the "active" module) -->
+  <rect x="276" y="276" width="140" height="140" rx="20" fill="url(#grad3)" />
+
+  <!-- Connector lines between modules (subtle) -->
+  <line x1="236" y1="166" x2="276" y2="166" stroke="#a7f3d0" stroke-width="3" stroke-linecap="round" stroke-dasharray="6,4" />
+  <line x1="236" y1="346" x2="276" y2="346" stroke="#a7f3d0" stroke-width="3" stroke-linecap="round" stroke-dasharray="6,4" />
+  <line x1="166" y1="236" x2="166" y2="276" stroke="#a7f3d0" stroke-width="3" stroke-linecap="round" stroke-dasharray="6,4" />
+  <line x1="346" y1="236" x2="346" y2="276" stroke="#a7f3d0" stroke-width="3" stroke-linecap="round" stroke-dasharray="6,4" />
+
+  <!-- "S" letterform subtly embedded via highlights on top-left and bottom-right blocks -->
+  <rect x="116" y="116" width="100" height="6" rx="3" fill="white" opacity="0.35" />
+  <rect x="296" y="390" width="100" height="6" rx="3" fill="white" opacity="0.35" />
+
+  <!-- Small dot connectors at the junction points -->
+  <circle cx="256" cy="166" r="5" fill="#a7f3d0" />
+  <circle cx="256" cy="346" r="5" fill="#a7f3d0" />
+  <circle cx="166" cy="256" r="5" fill="#a7f3d0" />
+  <circle cx="346" cy="256" r="5" fill="#a7f3d0" />
+</svg>
diff --git a/packages/SimpleModule.Theme.Default/theme.css b/packages/SimpleModule.Theme.Default/theme.css
index 8c000855..81bf35cd 100644
--- a/packages/SimpleModule.Theme.Default/theme.css
+++ b/packages/SimpleModule.Theme.Default/theme.css
@@ -4,22 +4,22 @@
    ============================================================ */
 
 @theme {
-  /* --- Primary: Forest Green --- */
-  --color-primary: #16a34a;
-  --color-primary-hover: #15803d;
-  --color-primary-light: #4ade80;
-  --color-primary-subtle: rgba(22, 163, 74, 0.08);
-  --color-primary-ring: rgba(22, 163, 74, 0.25);
+  /* --- Primary: Emerald --- */
+  --color-primary: #059669;
+  --color-primary-hover: #047857;
+  --color-primary-light: #34d399;
+  --color-primary-subtle: rgba(5, 150, 105, 0.08);
+  --color-primary-ring: rgba(5, 150, 105, 0.25);
 
-  /* --- Accent: Deep Evergreen --- */
-  --color-accent: #166534;
-  --color-accent-hover: #14532d;
+  /* --- Accent: Teal --- */
+  --color-accent: #0f766e;
+  --color-accent-hover: #115e59;
 
   /* --- Semantic: Success --- */
-  --color-success: #16a34a;
-  --color-success-light: #4ade80;
-  --color-success-bg: rgba(22, 163, 74, 0.1);
-  --color-success-text: #15803d;
+  --color-success: #059669;
+  --color-success-light: #34d399;
+  --color-success-bg: rgba(5, 150, 105, 0.1);
+  --color-success-text: #047857;
 
   /* --- Semantic: Danger --- */
   --color-danger: #e11d48;
@@ -60,11 +60,11 @@
   /* --- Misc --- */
   --color-dark: #0f172a;
   --color-muted: #94a3b8;
-  --color-ring: rgba(22, 163, 74, 0.4);
+  --color-ring: rgba(5, 150, 105, 0.4);
 
   /* --- Shadows (themeable) --- */
-  --shadow-primary: 0 4px 14px rgba(22, 163, 74, 0.35);
-  --shadow-primary-hover: 0 6px 20px rgba(22, 163, 74, 0.5);
+  --shadow-primary: 0 4px 14px rgba(5, 150, 105, 0.35);
+  --shadow-primary-hover: 0 6px 20px rgba(5, 150, 105, 0.5);
   --shadow-danger: 0 4px 14px rgba(225, 29, 72, 0.25);
   --shadow-danger-hover: 0 6px 20px rgba(225, 29, 72, 0.4);
 }
@@ -73,11 +73,11 @@
    Dark Mode Overrides
    ============================================================ */
 .dark {
-  --color-primary-subtle: rgba(22, 163, 74, 0.15);
-  --color-primary-ring: rgba(22, 163, 74, 0.35);
+  --color-primary-subtle: rgba(5, 150, 105, 0.15);
+  --color-primary-ring: rgba(5, 150, 105, 0.35);
 
-  --color-success-bg: rgba(74, 222, 128, 0.12);
-  --color-success-text: #86efac;
+  --color-success-bg: rgba(52, 211, 153, 0.12);
+  --color-success-text: #6ee7b7;
 
   --color-danger-bg: rgba(225, 29, 72, 0.12);
   --color-danger-text: #fda4af;
@@ -171,7 +171,7 @@
   }
 
   ::selection {
-    background: rgba(22, 163, 74, 0.2);
+    background: rgba(5, 150, 105, 0.2);
   }
 }
 
@@ -211,10 +211,10 @@
   .btn-primary {
     @apply text-white;
     background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
-    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
+    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
   }
   .btn-primary:hover {
-    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.5);
+    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.5);
     transform: translateY(-1px);
   }