diff --git a/biome.json b/biome.json
new file mode 100644
index 000000000..c488ed2d3
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  }
+}
diff --git a/bun.lock b/bun.lock
new file mode 100644
index 000000000..210065ea3
--- /dev/null
+++ b/bun.lock
@@ -0,0 +1,44 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "vibe-design-plugins",
+      "dependencies": {
+        "tailwindcss": "^4.1.18",
+      },
+      "devDependencies": {
+        "bun-plugin-tailwind": "^0.1.2",
+      },
+    },
+  },
+  "packages": {
+    "@oven/bun-darwin-aarch64": ["@oven/bun-darwin-aarch64@1.3.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-2Ie4jDGvNGuPSD+pyyBKL8dJmX+bZfDNYEalwgROImVtwB1XYAatJK20dMaRlPA7jOhjvS9Io+4IZAJu7Js0AA=="],
+
+    "@oven/bun-darwin-x64": ["@oven/bun-darwin-x64@1.3.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-4/BJojT8hk5g6Gecjn5yI7y96/+9Mtzsvdp9+2dcy9sTMdlV7jBvDzswqyJPZyQqw0F3HV3Vu9XuMubZwKd9lA=="],
+
+    "@oven/bun-darwin-x64-baseline": ["@oven/bun-darwin-x64-baseline@1.3.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZYxzIOCDqylTMsnWYERjKMMuK2b4an4qbloBmUZTwLHmVzos00yrhtpitZhJBgH6yB/l4Q5eoJ2W98UKtFFeiQ=="],
+
+    "@oven/bun-linux-aarch64": ["@oven/bun-linux-aarch64@1.3.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-8DUIlanftMdFxLGq2FxwKwfrp8O4ZofF/8Oc6lxCyEFmg2hixbHhL04+fPfJIi5D4hZloynxZdwTeDbGv/Kc4A=="],
+
+    "@oven/bun-linux-aarch64-musl": ["@oven/bun-linux-aarch64-musl@1.3.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-6UtmM4wXgRKz+gnLZEfddfsuBSVQpJr09K12e5pbdnLzeWgXYlBT5FG8S7SVn1t6cbgBMnigEsFjWwfTuMNoCw=="],
+
+    "@oven/bun-linux-x64": ["@oven/bun-linux-x64@1.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-03iSDMqdrmIFAsvsRptq+A7EGNjkg20dNzPnqxAlXHk5rc1PeIRWIP0eIn0i3nI6mmdj33mimf9AGr0+d0lKMg=="],
+
+    "@oven/bun-linux-x64-baseline": ["@oven/bun-linux-x64-baseline@1.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-ZMGPbFPqmG/VYJv61D+Y1V7T23jPK57vYl7yYLakmkTRjG6vcJ0Akhb2qR1iW94rHvfEBjeuVDAZBp8Qp9oyWA=="],
+
+    "@oven/bun-linux-x64-musl": ["@oven/bun-linux-x64-musl@1.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-xUXPuJHndGhk4K3Cx1FgTyTgDZOn+ki3eWvdXYqKdfi0EaNA9KpUq+/vUtpJbZRjzpHs9L+OJcdDILq5H0LX4g=="],
+
+    "@oven/bun-linux-x64-musl-baseline": ["@oven/bun-linux-x64-musl-baseline@1.3.4", "", { "os": "linux", "cpu": "x64" }, "sha512-qsGSSlNsxiX8lAayK2uYCfMLtqu776F0nn7qoyzg9Ti7mElM3woNh7RtGClTwQ6qsp5/UvgqT9g4pLaDHmqJFg=="],
+
+    "@oven/bun-windows-x64": ["@oven/bun-windows-x64@1.3.4", "", { "os": "win32", "cpu": "x64" }, "sha512-nswsuN6+HZPim6x4tFpDFpMa/qpTKfywbGvCkzxwrbJO9MtpuW/54NA1nFbHhpV14OLU0xuxyBj2PK4FHq4MlA=="],
+
+    "@oven/bun-windows-x64-baseline": ["@oven/bun-windows-x64-baseline@1.3.4", "", { "os": "win32", "cpu": "x64" }, "sha512-ZQiSDFfSUdOrPTiL2GvkxlC/kMED4fsJwdZnwJK6S9ylXnk9xY/9ZXfe1615SFLQl2LsVRzJAtjQLeM0BifIKQ=="],
+
+    "bun": ["bun@1.3.4", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "1.3.4", "@oven/bun-darwin-x64": "1.3.4", "@oven/bun-darwin-x64-baseline": "1.3.4", "@oven/bun-linux-aarch64": "1.3.4", "@oven/bun-linux-aarch64-musl": "1.3.4", "@oven/bun-linux-x64": "1.3.4", "@oven/bun-linux-x64-baseline": "1.3.4", "@oven/bun-linux-x64-musl": "1.3.4", "@oven/bun-linux-x64-musl-baseline": "1.3.4", "@oven/bun-windows-x64": "1.3.4", "@oven/bun-windows-x64-baseline": "1.3.4" }, "os": [ "linux", "win32", "darwin", ], "cpu": [ "x64", "arm64", ], "bin": { "bun": "bin/bun.exe", "bunx": "bin/bunx.exe" } }, "sha512-xV6KgD5ImquuKsoghzbWmYzeCXmmSgN6yJGz444hri2W+NGKNRFUNrEhy9+/rRXbvNA2qF0K0jAwqFNy1/GhBg=="],
+
+    "bun-plugin-tailwind": ["bun-plugin-tailwind@0.1.2", "", { "peerDependencies": { "bun": ">=1.0.0" } }, "sha512-41jNC1tZRSK3s1o7pTNrLuQG8kL/0vR/JgiTmZAJ1eHwe0w5j6HFPKeqEk0WAD13jfrUC7+ULuewFBBCoADPpg=="],
+
+    "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
+  }
+}
diff --git a/bunfig.toml b/bunfig.toml
new file mode 100644
index 000000000..88894bd16
--- /dev/null
+++ b/bunfig.toml
@@ -0,0 +1,3 @@
+# Configure Tailwind CSS plugin for Bun's static server and bundler
+[serve.static]
+plugins = ["bun-plugin-tailwind"]
diff --git a/package.json b/package.json
index 9551c0dea..59e3f976c 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,11 @@
     "ux"
   ],
   "author": "Paul Bakaus",
-  "license": "SEE LICENSE FILE"
+  "license": "SEE LICENSE FILE",
+  "devDependencies": {
+    "bun-plugin-tailwind": "^0.1.2"
+  },
+  "dependencies": {
+    "tailwindcss": "^4.1.18"
+  }
 }
-
diff --git a/public/css/animations.css b/public/css/animations.css
deleted file mode 100644
index cba78e423..000000000
--- a/public/css/animations.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/* Animations & Keyframes */
-
-/* Background Atmosphere */
-body::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  background: 
-    radial-gradient(circle at 20% 30%, var(--c-accent-dim) 0%, transparent 50%),
-    radial-gradient(circle at 80% 70%, var(--c-accent-dim) 0%, transparent 50%);
-  opacity: 0;
-  z-index: -1;
-  animation: fadeInBg var(--duration-slowest) var(--ease-out) 0.3s forwards;
-  pointer-events: none;
-}
-
-/* Keyframe Definitions */
-@keyframes fadeInBg {
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-40px);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(40px);
-  }
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes expandLine {
-  from {
-    width: 0;
-  }
-}
-
-@keyframes drawCircle {
-  from {
-    opacity: 0;
-    scale: 0;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* Animation Utilities */
-[data-animate] {
-  opacity: 0;
-  transform: translateY(20px);
-  
-  &.animated {
-    animation: fadeInUp var(--duration-slow) var(--ease-out) both;
-  }
-}
-
diff --git a/public/css/buttons.css b/public/css/buttons.css
deleted file mode 100644
index 5817ba2fd..000000000
--- a/public/css/buttons.css
+++ /dev/null
@@ -1,69 +0,0 @@
-/* Button Components */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.875rem 2rem;
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border: none;
-  cursor: pointer;
-  transition: all var(--duration-base) var(--ease-out);
-  position: relative;
-  overflow: hidden;
-  text-decoration: none;
-}
-
-/* Primary Button */
-.btn-primary {
-  background: var(--c-accent);
-  color: var(--c-paper);
-  width: 100%;
-  position: relative;
-  z-index: 1;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--c-ink);
-    transform: translateY(100%);
-    transition: transform var(--duration-base) var(--ease-out);
-    z-index: -1;
-  }
-  
-  &:hover::before {
-    transform: translateY(0);
-  }
-}
-
-/* Secondary Button */
-.btn-secondary {
-  background: transparent;
-  color: var(--c-ink);
-  border: 1px solid var(--c-ink);
-  
-  &:hover {
-    background: var(--c-ink);
-    color: var(--c-paper);
-  }
-}
-
-/* Small Button Variant */
-.btn-small {
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-  border: 1px solid var(--c-mist);
-  background: transparent;
-  color: var(--c-ink);
-  
-  &:hover {
-    border-color: var(--c-accent);
-    color: var(--c-accent);
-  }
-}
-
diff --git a/public/css/cards.css b/public/css/cards.css
deleted file mode 100644
index 34235f745..000000000
--- a/public/css/cards.css
+++ /dev/null
@@ -1,112 +0,0 @@
-/* Card Components */
-
-/* Download Bundles Section */
-.download-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: var(--s-md);
-  
-  @media (max-width: 640px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.download-card {
-  opacity: 0;
-  transform: translateY(20px);
-  
-  &.animated {
-    animation: fadeInUp var(--duration-slow) var(--ease-out) both;
-  }
-}
-
-.card-inner {
-  height: 100%;
-  padding: var(--s-lg);
-  background: var(--c-paper);
-  border: 1px solid var(--c-mist);
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-md);
-  transition: all var(--duration-base) var(--ease-out);
-  position: relative;
-  overflow: hidden;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: var(--c-accent);
-    transform: translateX(-100%);
-    transition: transform 0.4s var(--ease-out);
-  }
-  
-  &:hover {
-    border-color: var(--c-accent);
-    transform: translateY(-4px);
-    
-    &::before {
-      transform: translateX(0);
-    }
-  }
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--s-md);
-  
-  h3 {
-    font-size: 1.375rem;
-    font-weight: 500;
-    margin: 0;
-  }
-}
-
-.badge {
-  font-size: 0.625rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  padding: 0.25em 0.625em;
-  border: 1px solid var(--c-accent);
-  color: var(--c-accent);
-  border-radius: 2px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.card-inner p {
-  color: var(--c-ash);
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  flex-grow: 1;
-  margin: 0;
-}
-
-/* Contribute Section */
-.contribute {
-  padding: var(--s-2xl) 0;
-  text-align: center;
-}
-
-.contribute-content {
-  max-width: 480px;
-  margin: 0 auto;
-}
-
-.contribute h2 {
-  font-size: 2rem;
-  font-weight: 600;
-  margin-bottom: var(--s-sm);
-}
-
-.contribute p {
-  font-size: 1.125rem;
-  color: var(--c-ash);
-  margin-bottom: var(--s-lg);
-  line-height: 1.6;
-}
diff --git a/public/css/footer.css b/public/css/footer.css
deleted file mode 100644
index 939e279ab..000000000
--- a/public/css/footer.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/* Footer & Contribute Section */
-
-.contribute {
-  padding: var(--s-2xl) 0;
-  border-top: 1px solid var(--c-mist);
-  text-align: center;
-}
-
-.contribute-content {
-  max-width: var(--content-width);
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--s-md);
-  
-  h2 {
-    font-size: clamp(2rem, 4vw, 3rem);
-    font-weight: 600;
-  }
-  
-  p {
-    font-size: 1.125rem;
-    color: var(--c-ash);
-    max-width: 42ch;
-  }
-}
-
-footer {
-  border-top: 1px solid var(--c-mist);
-  padding: var(--s-2xl) var(--s-lg);
-  background: var(--c-paper);
-}
-
-.footer-content {
-  max-width: var(--max-width);
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 0.875rem;
-  color: var(--c-ash);
-  
-  a {
-    color: var(--c-ink);
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-  }
-  
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: var(--s-sm);
-    text-align: center;
-  }
-}
-
-/* Print Styles */
-@media print {
-  body::before,
-  .hero-decoration,
-  .btn {
-    display: none;
-  }
-}
-
diff --git a/public/css/gallery.css b/public/css/gallery.css
index 6f3b52eb7..c20cd97ea 100644
--- a/public/css/gallery.css
+++ b/public/css/gallery.css
@@ -10,11 +10,11 @@
 }
 
 .skill-nav-item {
-  padding: var(--s-sm) var(--s-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   background: transparent;
   border: none;
   border-left: 2px solid transparent;
-  color: var(--c-ash);
+  color: var(--color-ash);
   font-family: var(--font-body);
   font-size: 0.9375rem;
   font-weight: 400;
@@ -26,14 +26,14 @@
 }
 
 .skill-nav-item:hover {
-  color: var(--c-text);
-  background: color-mix(in oklch, var(--c-paper) 85%, var(--c-accent));
+  color: var(--color-text);
+  background: color-mix(in oklch, var(--color-paper) 85%, var(--color-accent));
 }
 
 .skill-nav-item.active {
-  color: var(--c-accent);
-  border-left-color: var(--c-accent);
-  background: color-mix(in oklch, var(--c-accent) 5%, var(--c-paper));
+  color: var(--color-accent);
+  border-left-color: var(--color-accent);
+  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
   font-weight: 500;
 }
 
@@ -41,17 +41,17 @@
   .skills-nav {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--s-xs);
+    gap: var(--spacing-xs);
   }
   
   .skill-nav-item {
     border-left: none;
     border-bottom: 2px solid transparent;
-    padding: var(--s-xs) var(--s-md);
+    padding: var(--spacing-xs) var(--spacing-md);
   }
   
   .skill-nav-item.active {
-    border-bottom-color: var(--c-accent);
+    border-bottom-color: var(--color-accent);
   }
 }
 
@@ -59,7 +59,7 @@
 .skills-showcase {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
-  gap: var(--s-lg);
+  gap: var(--spacing-lg);
   align-items: start;
   
   @media (max-width: 1100px) {
@@ -86,7 +86,7 @@
 }
 
 .skill-header {
-  margin-bottom: var(--s-md);
+  margin-bottom: var(--spacing-md);
 }
 
 .skill-header h3 {
@@ -94,17 +94,17 @@
   font-size: 1.75rem;
   font-weight: 300;
   font-style: italic;
-  margin: 0 0 var(--s-xs) 0;
-  color: var(--c-text);
+  margin: 0 0 var(--spacing-xs) 0;
+  color: var(--color-text);
   letter-spacing: -0.02em;
   line-height: 1.1;
 }
 
 .skill-header .meta {
   display: flex;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
   align-items: center;
-  color: var(--c-ash);
+  color: var(--color-ash);
   font-size: 0.8125rem;
   font-weight: 400;
   letter-spacing: 0.03em;
@@ -112,7 +112,7 @@
 }
 
 .skill-header .meta a {
-  color: var(--c-accent);
+  color: var(--color-accent);
   text-decoration: none;
   transition: opacity 0.2s ease;
 }
@@ -124,22 +124,22 @@
 .skill-description {
   font-size: 0.9375rem;
   line-height: 1.6;
-  margin-bottom: var(--s-md);
-  color: var(--c-charcoal);
+  margin-bottom: var(--spacing-md);
+  color: var(--color-charcoal);
   max-width: 50ch;
 }
 
 /* Skill Sections (Focus Areas, Relationships) */
 .skill-section {
-  margin-bottom: var(--s-lg);
+  margin-bottom: var(--spacing-lg);
 }
 
 .skill-section h4 {
   font-family: var(--font-body);
   font-size: 0.75rem;
   font-weight: 600;
-  margin: 0 0 var(--s-sm) 0;
-  color: var(--c-ash);
+  margin: 0 0 var(--spacing-sm) 0;
+  color: var(--color-ash);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }
@@ -148,26 +148,26 @@
 .focus-areas-compact {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--s-xs);
+  gap: var(--spacing-xs);
 }
 
 .focus-area-tag {
   display: inline-flex;
   align-items: center;
-  gap: var(--s-xs);
-  padding: var(--s-xs) var(--s-sm);
-  background: var(--c-paper);
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--color-paper);
   border-radius: 3px;
   font-size: 0.8125rem;
 }
 
 .focus-area-tag strong {
-  color: var(--c-text);
+  color: var(--color-text);
   font-weight: 500;
 }
 
 .focus-area-tag span {
-  color: var(--c-ash);
+  color: var(--color-ash);
   font-size: 0.75rem;
 }
 
@@ -175,15 +175,15 @@
 .relationship-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--s-xs);
+  gap: var(--spacing-xs);
 }
 
 .relationship-tag {
   display: inline-block;
-  padding: var(--s-xs) var(--s-sm);
-  background: var(--c-paper);
-  color: var(--c-text);
-  border: 1px solid color-mix(in oklch, var(--c-accent) 30%, transparent);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--color-paper);
+  color: var(--color-text);
+  border: 1px solid color-mix(in oklch, var(--color-accent) 30%, transparent);
   font-size: 0.8125rem;
   font-weight: 400;
   border-radius: 2px;
@@ -192,36 +192,36 @@
 }
 
 .relationship-tag:hover {
-  border-color: var(--c-accent);
-  color: var(--c-accent);
-  background: color-mix(in oklch, var(--c-accent) 5%, var(--c-paper));
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
 }
 
 /* Skill Downloads (Icons) */
 .skill-downloads {
   display: flex;
   align-items: center;
-  gap: var(--s-sm);
-  padding-top: var(--s-md);
-  margin-top: var(--s-md);
-  border-top: 1px solid var(--c-mist);
+  gap: var(--spacing-sm);
+  padding-top: var(--spacing-md);
+  margin-top: var(--spacing-md);
+  border-top: 1px solid var(--color-mist);
 }
 
 .downloads-label {
   font-size: 0.75rem;
-  color: var(--c-ash);
-  margin-right: var(--s-xs);
+  color: var(--color-ash);
+  margin-right: var(--spacing-xs);
 }
 
 .download-icon {
   display: flex;
   align-items: center;
-  gap: var(--s-xs);
+  gap: var(--spacing-xs);
   padding: 6px 10px;
   border-radius: 4px;
   background: transparent;
-  border: 1px solid var(--c-mist);
-  color: var(--c-ash);
+  border: 1px solid var(--color-mist);
+  color: var(--color-ash);
   text-decoration: none;
   font-size: 0.75rem;
   transition: all 0.15s ease;
@@ -234,16 +234,16 @@
 }
 
 .download-icon:hover {
-  color: var(--c-accent);
-  border-color: var(--c-accent);
-  background: color-mix(in oklch, var(--c-accent) 5%, transparent);
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  background: color-mix(in oklch, var(--color-accent) 5%, transparent);
 }
 
 /* Command Detail Panel - mirrors skills showcase */
 .command-detail-panel {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
-  gap: var(--s-lg);
+  gap: var(--spacing-lg);
   align-items: start;
   
   @media (max-width: 1100px) {
@@ -263,15 +263,15 @@
   font-family: 'Space Grotesk', monospace;
   font-size: 2rem;
   font-weight: 500;
-  margin: 0 0 var(--s-xs) 0;
-  color: var(--c-text);
+  margin: 0 0 var(--spacing-xs) 0;
+  color: var(--color-text);
 }
 
 .command-header .meta {
   display: flex;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
   align-items: center;
-  color: var(--c-ash);
+  color: var(--color-ash);
   font-size: 0.8125rem;
   text-transform: uppercase;
   letter-spacing: 0.03em;
@@ -280,24 +280,24 @@
 .command-description {
   font-size: 1rem;
   line-height: 1.7;
-  color: var(--c-charcoal);
-  margin-bottom: var(--s-lg);
+  color: var(--color-charcoal);
+  margin-bottom: var(--spacing-lg);
 }
 
 /* Process Steps - Compact */
 .process-steps-compact {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
   counter-reset: step;
 }
 
 .process-step-compact {
   display: flex;
   align-items: center;
-  gap: var(--s-xs);
-  padding: var(--s-xs) var(--s-sm);
-  background: var(--c-paper);
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--color-paper);
   border-radius: 3px;
   font-size: 0.8125rem;
 }
@@ -310,8 +310,8 @@
   justify-content: center;
   width: 20px;
   height: 20px;
-  background: var(--c-accent);
-  color: var(--c-paper);
+  background: var(--color-accent);
+  color: var(--color-paper);
   border-radius: 50%;
   font-size: 0.6875rem;
   font-weight: 600;
@@ -331,10 +331,10 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 2px 5px;
-  background: var(--c-mist);
-  color: var(--c-ash);
+  background: var(--color-mist);
+  color: var(--color-ash);
   border-radius: 2px;
-  margin-left: var(--s-xs);
+  margin-left: var(--spacing-xs);
   vertical-align: middle;
 }
 
@@ -344,13 +344,13 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: var(--s-2xl);
+  padding: var(--spacing-2xl);
   min-height: 300px;
 }
 
 .coming-soon-icon {
-  color: var(--c-mist);
-  margin-bottom: var(--s-lg);
+  color: var(--color-mist);
+  margin-bottom: var(--spacing-lg);
 }
 
 .coming-soon-showcase h3 {
@@ -358,20 +358,20 @@
   font-size: 1.75rem;
   font-weight: 300;
   font-style: italic;
-  margin: 0 0 var(--s-sm) 0;
-  color: var(--c-text);
+  margin: 0 0 var(--spacing-sm) 0;
+  color: var(--color-text);
 }
 
 .coming-soon-text {
   font-size: 1rem;
-  color: var(--c-accent);
+  color: var(--color-accent);
   font-weight: 500;
-  margin-bottom: var(--s-md);
+  margin-bottom: var(--spacing-md);
 }
 
 .coming-soon-showcase .skill-description {
   max-width: 50ch;
-  color: var(--c-ash);
+  color: var(--color-ash);
   font-size: 0.9375rem;
   line-height: 1.6;
 }
diff --git a/public/css/hero.css b/public/css/hero.css
deleted file mode 100644
index d6aaa5bb9..000000000
--- a/public/css/hero.css
+++ /dev/null
@@ -1,119 +0,0 @@
-/* Hero Section */
-
-.hero {
-  min-height: 85vh;
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding: var(--s-2xl) var(--s-lg);
-  overflow: hidden;
-}
-
-.hero-grid {
-  max-width: var(--max-width);
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--s-2xl);
-  align-items: center;
-  width: 100%;
-  position: relative;
-}
-
-.hero-content {
-  animation: slideInLeft var(--duration-slower) var(--ease-out) 0.1s both;
-}
-
-/* Title Styling */
-.title {
-  font-size: clamp(3rem, 8vw, 7rem);
-  font-weight: 300;
-  line-height: 0.9;
-  margin-bottom: var(--s-lg);
-  display: flex;
-  flex-direction: column;
-  gap: -0.1em;
-}
-
-.title-main {
-  font-weight: 400;
-  letter-spacing: -0.03em;
-}
-
-.title-sub {
-  font-weight: 300;
-  font-style: italic;
-  color: var(--c-accent);
-  letter-spacing: -0.02em;
-}
-
-/* Tagline & Providers */
-.tagline {
-  font-size: clamp(1.125rem, 2vw, 1.5rem);
-  line-height: 1.4;
-  color: var(--c-charcoal);
-  margin-bottom: var(--s-md);
-  max-width: 32ch;
-}
-
-.providers {
-  font-size: 0.875rem;
-  color: var(--c-ash);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-weight: 500;
-}
-
-/* Decorative Elements */
-.hero-decoration {
-  width: 240px;
-  height: 240px;
-  position: relative;
-  animation: slideInRight var(--duration-slower) var(--ease-out) 0.3s both;
-}
-
-.deco-line {
-  position: absolute;
-  width: 160px;
-  height: 2px;
-  background: var(--c-accent);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-25deg);
-  animation: expandLine 1s var(--ease-out) 0.6s both;
-}
-
-.deco-circle {
-  position: absolute;
-  width: 120px;
-  height: 120px;
-  border: 2px solid var(--c-accent);
-  border-radius: 50%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: drawCircle 1s var(--ease-out) 0.8s both;
-  opacity: 0.3;
-}
-
-/* Hero Responsive */
-@media (max-width: 768px) {
-  .hero {
-    min-height: 70vh;
-    padding: var(--s-xl) var(--s-md);
-  }
-  
-  .hero-grid {
-    grid-template-columns: 1fr;
-    gap: var(--s-xl);
-  }
-  
-  .hero-decoration {
-    display: none;
-  }
-  
-  .title {
-    font-size: clamp(2.5rem, 12vw, 4rem);
-  }
-}
-
diff --git a/public/css/intro.css b/public/css/intro.css
deleted file mode 100644
index 1ea6e82de..000000000
--- a/public/css/intro.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* Intro Section */
-
-.intro {
-  padding: var(--s-2xl) 0;
-}
-
-.intro-grid {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: var(--s-2xl);
-  align-items: start;
-  
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-    gap: var(--s-xl);
-  }
-}
-
-.intro-content h2 {
-  font-size: clamp(1.75rem, 3vw, 2.5rem);
-  font-weight: 400;
-  line-height: 1.3;
-  color: var(--c-charcoal);
-}
-
-/* Meta Statistics */
-.intro-meta {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-lg);
-  padding-top: var(--s-md);
-  
-  @media (max-width: 768px) {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-}
-
-.meta-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-xs);
-}
-
-.meta-number {
-  font-family: var(--font-display);
-  font-size: 3rem;
-  font-weight: 600;
-  line-height: 1;
-  color: var(--c-accent);
-  
-  @media (max-width: 480px) {
-    font-size: 2.5rem;
-  }
-}
-
-.meta-label {
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--c-ash);
-  font-weight: 500;
-}
-
diff --git a/public/css/layout.css b/public/css/layout.css
deleted file mode 100644
index 1da3ee5ba..000000000
--- a/public/css/layout.css
+++ /dev/null
@@ -1,160 +0,0 @@
-/* Layout Components */
-
-.container {
-  max-width: var(--max-width);
-  margin: 0 auto;
-  padding: 0 var(--s-lg);
-  
-  @media (max-width: 640px) {
-    padding: 0 var(--s-md);
-  }
-}
-
-/* Section Styling */
-section {
-  border-top: 1px solid var(--c-mist);
-}
-
-.section-title {
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 600;
-  margin-bottom: 0;
-  padding-bottom: var(--s-sm);
-  position: relative;
-  display: block;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: -0.25em;
-    left: 0;
-    width: 80px;
-    height: 2px;
-    background: var(--c-accent);
-  }
-  
-  @media (max-width: 968px) {
-    margin-bottom: var(--s-lg);
-  }
-}
-
-.section-subtitle {
-  font-size: 1.125rem;
-  color: var(--c-ash);
-  margin-top: var(--s-md);
-  max-width: 50ch;
-}
-
-/* Section Headers */
-.section-header-sticky {
-  margin-bottom: var(--s-lg);
-  
-  .section-title {
-    margin-bottom: var(--s-sm);
-  }
-  
-  .section-subtitle {
-    margin-top: var(--s-sm);
-  }
-}
-
-/* Skills Section Layout */
-.skills-section {
-  padding: var(--s-xl) 0;
-}
-
-.skills-layout {
-  display: grid;
-  grid-template-columns: 180px 1fr;
-  gap: var(--s-lg);
-  align-items: start;
-  
-  @media (max-width: 968px) {
-    grid-template-columns: 1fr;
-    gap: var(--s-md);
-  }
-}
-
-.skills-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  
-  @media (max-width: 968px) {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--s-xs);
-  }
-}
-
-.skills-showcase {
-  /* Contain the showcase to prevent excessive scrolling */
-}
-
-/* Commands Section Layout - mirrors skills layout */
-.commands-section {
-  padding: var(--s-xl) 0;
-}
-
-.commands-layout {
-  display: grid;
-  grid-template-columns: 180px 1fr;
-  gap: var(--s-lg);
-  align-items: start;
-  
-  @media (max-width: 968px) {
-    grid-template-columns: 1fr;
-    gap: var(--s-md);
-  }
-}
-
-.commands-nav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-sm);
-  
-  @media (max-width: 968px) {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--s-xs);
-  }
-}
-
-.commands-showcase {
-  /* Contains demo + info */
-}
-
-/* Downloads Section */
-.downloads-section {
-  padding: var(--s-2xl) 0;
-}
-
-.downloads-header {
-  margin-bottom: var(--s-xl);
-  max-width: 600px;
-}
-
-.downloads-header .section-title {
-  margin-bottom: var(--s-md);
-}
-
-.downloads-lead {
-  font-size: 1.125rem;
-  line-height: 1.6;
-  color: var(--c-ash);
-}
-
-/* Grid Utilities */
-.item-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: var(--s-md);
-}
-
-/* Loading State */
-.loading {
-  padding: var(--s-xl);
-  text-align: center;
-  color: var(--c-ash);
-  font-style: italic;
-}
diff --git a/public/css/main.css b/public/css/main.css
index ad9c890c7..8f57a0d33 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,29 +1,377 @@
 /* 
- * impeccable.style — Modular CSS Architecture
+ * impeccable.style — Tailwind CSS v4 + Custom Components
  * 
- * Uses Bun's CSS bundler for:
- * - CSS nesting (no preprocessor needed)
- * - OKLCH colors with automatic fallbacks
- * - Automatic bundling via @import
- * 
- * Structure:
- * - tokens.css: Design system (colors, spacing, typography)
- * - reset.css: Modern baseline
- * - animations.css: Keyframes & utilities
- * - layout.css: Grid & section primitives
- * - hero/intro/buttons/cards/footer.css: Component styles
+ * Architecture:
+ * - Tailwind v4 with custom theme tokens
+ * - Custom components for complex UI patterns
+ * - Minimal CSS for what Tailwind can't express
  */
 
-@import "./tokens.css";
-@import "./reset.css";
-@import "./animations.css";
-@import "./layout.css";
-@import "./hero.css";
-@import "./buttons.css";
-@import "./cards.css";
-@import "./gallery.css";
+@import "tailwindcss";
+
+/* ============================================
+   TAILWIND THEME - Static Design Tokens
+   ============================================ */
+
+@theme {
+  /* Typography */
+  --font-display: 'Cormorant Garamond', Georgia, serif;
+  --font-body: 'Instrument Sans', system-ui, sans-serif;
+  --font-mono: 'Space Grotesk', monospace;
+  
+  /* Spacing Scale */
+  --spacing-xs: 8px;
+  --spacing-sm: 16px;
+  --spacing-md: 24px;
+  --spacing-lg: 48px;
+  --spacing-xl: 80px;
+  --spacing-2xl: 128px;
+  --spacing-3xl: 192px;
+  
+  /* Width */
+  --width-max: 1280px;
+  --width-content: 840px;
+  
+  /* Animation */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --duration-fast: 0.2s;
+  --duration-base: 0.3s;
+  --duration-slow: 0.6s;
+  --duration-slower: 0.8s;
+  --duration-slowest: 1.2s;
+}
+
+/* ============================================
+   COLOR TOKENS - Light/Dark Mode via CSS
+   ============================================ */
+
+:root {
+  /* Colors - Light Mode */
+  --color-ink: oklch(10% 0 0);
+  --color-text: oklch(10% 0 0);
+  --color-paper: oklch(98% 0 0);
+  --color-charcoal: oklch(25% 0 0);
+  --color-ash: oklch(55% 0 0);
+  --color-mist: oklch(92% 0 0);
+  --color-bg: oklch(96% 0.005 350);
+  --color-accent: oklch(60% 0.25 350);
+  --color-accent-hover: oklch(52% 0.25 350);
+  --color-accent-dim: oklch(60% 0.25 350 / 0.15);
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-ink: oklch(98% 0 0);
+    --color-text: oklch(98% 0 0);
+    --color-paper: oklch(10% 0 0);
+    --color-charcoal: oklch(92% 0 0);
+    --color-ash: oklch(65% 0 0);
+    --color-mist: oklch(20% 0 0);
+    --color-bg: oklch(12% 0.005 350);
+    --color-accent: oklch(68% 0.23 350);
+    --color-accent-hover: oklch(76% 0.23 350);
+  }
+}
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  font-family: var(--font-body);
+  color: var(--color-ink);
+  background: var(--color-paper);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+a:hover {
+  opacity: 0.7;
+}
+
+/* ============================================
+   SECTION TITLE - With accent underline
+   ============================================ */
+
+.section-title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 600;
+  position: relative;
+  display: block;
+  padding-bottom: var(--spacing-sm);
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -0.25em;
+  left: 0;
+  width: 80px;
+  height: 2px;
+  background: var(--color-accent);
+}
+
+/* ============================================
+   BACKGROUND ATMOSPHERE
+   ============================================ */
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: 
+    radial-gradient(circle at 20% 30%, var(--color-accent-dim) 0%, transparent 50%),
+    radial-gradient(circle at 80% 70%, var(--color-accent-dim) 0%, transparent 50%);
+  opacity: 0;
+  z-index: -1;
+  animation: fadeInBg var(--duration-slowest) var(--ease-out) 0.3s forwards;
+  pointer-events: none;
+}
+
+/* ============================================
+   HERO DECORATIONS
+   ============================================ */
+
+.deco-line {
+  position: absolute;
+  width: 160px;
+  height: 2px;
+  background: var(--color-accent);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-25deg);
+  animation: expandLine 1s var(--ease-out) 0.6s both;
+}
+
+.deco-circle {
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  border: 2px solid var(--color-accent);
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: drawCircle 1s var(--ease-out) 0.8s both;
+  opacity: 0.3;
+}
+
+/* ============================================
+   BUTTONS
+   ============================================ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.875rem 2rem;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border: none;
+  cursor: pointer;
+  transition: all var(--duration-base) var(--ease-out);
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background: var(--color-accent);
+  color: var(--color-paper);
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.btn-primary::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--color-ink);
+  transform: translateY(100%);
+  transition: transform var(--duration-base) var(--ease-out);
+  z-index: -1;
+}
+
+.btn-primary:hover::before {
+  transform: translateY(0);
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--color-ink);
+  border: 1px solid var(--color-ink);
+}
+
+.btn-secondary:hover {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+
+/* ============================================
+   CARD COMPONENTS
+   ============================================ */
+
+.card-inner {
+  height: 100%;
+  padding: var(--spacing-lg);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  transition: all var(--duration-base) var(--ease-out);
+  position: relative;
+  overflow: hidden;
+}
+
+.card-inner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--color-accent);
+  transform: translateX(-100%);
+  transition: transform 0.4s var(--ease-out);
+}
+
+.card-inner:hover {
+  border-color: var(--color-accent);
+  transform: translateY(-4px);
+}
+
+.card-inner:hover::before {
+  transform: translateX(0);
+}
+
+.badge {
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 0.25em 0.625em;
+  border: 1px solid var(--color-accent);
+  color: var(--color-accent);
+  border-radius: 2px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* ============================================
+   SOLUTION CARDS
+   ============================================ */
+
+.solution-card {
+  padding: var(--spacing-lg);
+  background: var(--color-paper);
+  border-left: 3px solid var(--color-accent);
+  transition: all var(--duration-base) var(--ease-out);
+}
+
+.solution-card:hover {
+  background: color-mix(in oklch, var(--color-paper) 90%, var(--color-accent));
+  transform: translateX(4px);
+}
+
+.solution-card code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: color-mix(in oklch, var(--color-accent) 15%, transparent);
+  color: var(--color-accent);
+  padding: 0.125em 0.375em;
+  border-radius: 3px;
+}
+
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+
+@keyframes fadeInBg {
+  to { opacity: 1; }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-40px);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes expandLine {
+  from { width: 0; }
+}
+
+@keyframes drawCircle {
+  from {
+    opacity: 0;
+    scale: 0;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+[data-animate] {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+[data-animate].animated {
+  animation: fadeInUp var(--duration-slow) var(--ease-out) both;
+}
+
+/* Hero animations */
+.hero-content {
+  animation: slideInLeft var(--duration-slower) var(--ease-out) 0.1s both;
+}
+
+.hero-decoration {
+  animation: slideInRight var(--duration-slower) var(--ease-out) 0.3s both;
+}
+
+/* ============================================
+   IMPORTS - Complex components that need custom CSS
+   ============================================ */
+
 @import "./problem-section.css";
-@import "./solution-section.css";
 @import "./skill-demos.css";
+@import "./gallery.css";
 @import "./workflow.css";
-@import "./footer.css";
diff --git a/public/css/problem-section.css b/public/css/problem-section.css
index 9149e44a5..e33dd5724 100644
--- a/public/css/problem-section.css
+++ b/public/css/problem-section.css
@@ -4,19 +4,19 @@
  */
 
 .problem-section {
-  padding: var(--s-2xl) 0;
-  border-top: 1px solid var(--c-mist);
+  padding: var(--spacing-2xl) 0;
+  border-top: 1px solid var(--color-mist);
 }
 
 .problem-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--s-2xl);
+  gap: var(--spacing-2xl);
   align-items: center;
   
   @media (max-width: 968px) {
     grid-template-columns: 1fr;
-    gap: var(--s-xl);
+    gap: var(--spacing-xl);
   }
 }
 
@@ -25,13 +25,13 @@
 }
 
 .problem-content .section-title {
-  margin-bottom: var(--s-md);
+  margin-bottom: var(--spacing-md);
 }
 
 .problem-lead {
   font-size: 1.25rem;
   line-height: 1.6;
-  color: var(--c-charcoal);
+  color: var(--color-charcoal);
 }
 
 /* AI Slop Demo - Deliberately generic design */
@@ -124,10 +124,10 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--c-accent);
-  background: var(--c-paper);
+  color: var(--color-accent);
+  background: var(--color-paper);
   padding: 4px 8px;
-  border: 1px solid var(--c-accent);
+  border: 1px solid var(--color-accent);
   border-radius: 2px;
   white-space: nowrap;
   opacity: 0;
diff --git a/public/css/reset.css b/public/css/reset.css
deleted file mode 100644
index 0eea8f9c1..000000000
--- a/public/css/reset.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/* Modern CSS Reset */
-
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  font-family: var(--font-body);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--c-ink);
-  background: var(--c-paper);
-  overflow-x: hidden;
-  min-height: 100vh;
-}
-
-/* Typography Defaults */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-display);
-  font-weight: 600;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-}
-
-p {
-  max-width: 65ch;
-}
-
-a {
-  color: var(--c-accent);
-  text-decoration: none;
-  transition: opacity var(--duration-fast) var(--ease-out);
-  
-  &:hover {
-    opacity: 0.7;
-  }
-}
-
-/* Better image defaults */
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-/* Remove default button styles */
-button {
-  font: inherit;
-  cursor: pointer;
-}
-
diff --git a/public/css/skill-demos.css b/public/css/skill-demos.css
index 4eb08022b..21a335678 100644
--- a/public/css/skill-demos.css
+++ b/public/css/skill-demos.css
@@ -14,30 +14,30 @@
 .demo-tabs {
   display: flex;
   gap: 2px;
-  margin-bottom: var(--s-sm);
+  margin-bottom: var(--spacing-sm);
   justify-content: center;
 }
 
 .demo-tab {
-  padding: var(--s-xs) var(--s-md);
+  padding: var(--spacing-xs) var(--spacing-md);
   background: transparent;
   border: none;
   border-bottom: 2px solid transparent;
   font-family: var(--font-body);
   font-size: 0.8125rem;
   font-weight: 400;
-  color: var(--c-ash);
+  color: var(--color-ash);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .demo-tab:hover {
-  color: var(--c-text);
+  color: var(--color-text);
 }
 
 .demo-tab.active {
-  color: var(--c-accent);
-  border-bottom-color: var(--c-accent);
+  color: var(--color-accent);
+  border-bottom-color: var(--color-accent);
   font-weight: 500;
 }
 
@@ -58,8 +58,8 @@
    ============================================ */
 
 .demo-container {
-  background: var(--c-paper);
-  border: 1px solid var(--c-mist);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
   border-radius: 6px;
   overflow: hidden;
 }
@@ -68,16 +68,16 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: var(--s-xs) var(--s-md);
-  background: var(--c-bg);
-  border-bottom: 1px solid var(--c-mist);
+  padding: var(--spacing-xs) var(--spacing-md);
+  background: var(--color-bg);
+  border-bottom: 1px solid var(--color-mist);
   min-height: 40px;
 }
 
 .demo-toggle {
   display: flex;
   align-items: center;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
 }
 
 .demo-toggle-label {
@@ -85,19 +85,19 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--c-ash);
+  color: var(--color-ash);
   transition: color 0.15s ease;
 }
 
 .demo-toggle-label.active {
-  color: var(--c-accent);
+  color: var(--color-accent);
 }
 
 .demo-toggle-switch {
   position: relative;
   width: 36px;
   height: 20px;
-  background: var(--c-mist);
+  background: var(--color-mist);
   border-radius: 10px;
   cursor: pointer;
   transition: background 0.15s ease;
@@ -110,14 +110,14 @@
   left: 2px;
   width: 16px;
   height: 16px;
-  background: var(--c-paper);
+  background: var(--color-paper);
   border-radius: 50%;
   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
   transition: transform 0.15s ease;
 }
 
 .demo-toggle-switch.active {
-  background: var(--c-accent);
+  background: var(--color-accent);
 }
 
 .demo-toggle-switch.active::after {
@@ -125,20 +125,20 @@
 }
 
 .demo-viewport {
-  padding: var(--s-lg);
+  padding: var(--spacing-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 200px;
-  background: var(--c-bg);
+  background: var(--color-bg);
 }
 
 .demo-caption {
-  padding: var(--s-xs) var(--s-md);
+  padding: var(--spacing-xs) var(--spacing-md);
   font-size: 0.75rem;
-  color: var(--c-ash);
-  border-top: 1px solid var(--c-mist);
-  background: var(--c-bg);
+  color: var(--color-ash);
+  border-top: 1px solid var(--color-mist);
+  background: var(--color-bg);
   text-align: center;
 }
 
@@ -149,39 +149,39 @@
 .uxw-demo {
   width: 100%;
   max-width: 320px;
-  padding: var(--s-lg);
-  background: var(--c-paper);
-  border: 1px solid var(--c-mist);
+  padding: var(--spacing-lg);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
   border-radius: 6px;
   text-align: center;
 }
 
 /* Error Messages */
-.uxw-error-icon { font-size: 2rem; margin-bottom: var(--s-sm); }
-.uxw-error-title { font-weight: 600; color: #c00; margin-bottom: var(--s-xs); }
-.uxw-error-text { font-size: 0.875rem; color: var(--c-ash); }
-.uxw-error-action { margin-top: var(--s-sm); font-size: 0.875rem; color: var(--c-accent); cursor: pointer; text-decoration: underline; }
+.uxw-error-icon { font-size: 2rem; margin-bottom: var(--spacing-sm); }
+.uxw-error-title { font-weight: 600; color: #c00; margin-bottom: var(--spacing-xs); }
+.uxw-error-text { font-size: 0.875rem; color: var(--color-ash); }
+.uxw-error-action { margin-top: var(--spacing-sm); font-size: 0.875rem; color: var(--color-accent); cursor: pointer; text-decoration: underline; }
 
-.uxw-error-after .uxw-error-icon { color: var(--c-accent); }
-.uxw-error-after .uxw-error-title { color: var(--c-text); }
-.uxw-error-after .uxw-error-text { color: var(--c-charcoal); }
+.uxw-error-after .uxw-error-icon { color: var(--color-accent); }
+.uxw-error-after .uxw-error-title { color: var(--color-text); }
+.uxw-error-after .uxw-error-text { color: var(--color-charcoal); }
 
 /* Button Labels */
-.uxw-button-context { font-size: 0.875rem; color: var(--c-charcoal); margin-bottom: var(--s-md); font-weight: 500; }
-.uxw-button-row { display: flex; gap: var(--s-sm); justify-content: center; }
-.uxw-btn { padding: var(--s-xs) var(--s-md); border-radius: 4px; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; }
-.uxw-btn-primary { background: var(--c-text); color: var(--c-paper); }
-.uxw-btn-secondary { background: transparent; color: var(--c-ash); border: 1px solid var(--c-mist); }
+.uxw-button-context { font-size: 0.875rem; color: var(--color-charcoal); margin-bottom: var(--spacing-md); font-weight: 500; }
+.uxw-button-row { display: flex; gap: var(--spacing-sm); justify-content: center; }
+.uxw-btn { padding: var(--spacing-xs) var(--spacing-md); border-radius: 4px; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; }
+.uxw-btn-primary { background: var(--color-text); color: var(--color-paper); }
+.uxw-btn-secondary { background: transparent; color: var(--color-ash); border: 1px solid var(--color-mist); }
 .uxw-btn-danger { background: #c00; color: white; }
 
 /* Empty States */
-.uxw-empty-icon { font-size: 2.5rem; margin-bottom: var(--s-sm); opacity: 0.4; }
-.uxw-empty-title { font-weight: 500; color: var(--c-ash); }
-.uxw-empty-text { font-size: 0.875rem; color: var(--c-charcoal); margin-top: var(--s-xs); }
-.uxw-empty-action { margin-top: var(--s-md); }
+.uxw-empty-icon { font-size: 2.5rem; margin-bottom: var(--spacing-sm); opacity: 0.4; }
+.uxw-empty-title { font-weight: 500; color: var(--color-ash); }
+.uxw-empty-text { font-size: 0.875rem; color: var(--color-charcoal); margin-top: var(--spacing-xs); }
+.uxw-empty-action { margin-top: var(--spacing-md); }
 
 .uxw-empty-after .uxw-empty-icon { opacity: 1; }
-.uxw-empty-after .uxw-empty-title { color: var(--c-text); }
+.uxw-empty-after .uxw-empty-title { color: var(--color-text); }
 
 /* ============================================
    SPATIAL DESIGN DEMOS
@@ -190,9 +190,9 @@
 .spatial-demo {
   width: 100%;
   max-width: 340px;
-  padding: var(--s-md);
-  background: var(--c-paper);
-  border: 1px solid var(--c-mist);
+  padding: var(--spacing-md);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
   border-radius: 6px;
 }
 
@@ -206,16 +206,16 @@
 .spatial-grid-after {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
 }
 
 .spatial-card-item {
-  padding: var(--s-sm);
-  background: var(--c-bg);
-  border: 1px solid var(--c-mist);
+  padding: var(--spacing-sm);
+  background: var(--color-bg);
+  border: 1px solid var(--color-mist);
   border-radius: 4px;
   font-size: 0.8125rem;
-  color: var(--c-charcoal);
+  color: var(--color-charcoal);
   text-align: center;
 }
 
@@ -229,8 +229,8 @@
 .spatial-hierarchy-before .spatial-h-cta,
 .spatial-hierarchy-before .spatial-h-link {
   font-size: 0.9375rem;
-  margin-bottom: var(--s-xs);
-  color: var(--c-charcoal);
+  margin-bottom: var(--spacing-xs);
+  color: var(--color-charcoal);
 }
 
 .spatial-hierarchy-after .spatial-h-title {
@@ -238,52 +238,52 @@
   font-size: 1.75rem;
   font-weight: 300;
   font-style: italic;
-  margin-bottom: var(--s-xs);
-  color: var(--c-text);
+  margin-bottom: var(--spacing-xs);
+  color: var(--color-text);
 }
 
 .spatial-hierarchy-after .spatial-h-subtitle {
   font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--c-ash);
-  margin-bottom: var(--s-md);
+  color: var(--color-ash);
+  margin-bottom: var(--spacing-md);
 }
 
 .spatial-hierarchy-after .spatial-h-cta {
   display: inline-block;
-  padding: var(--s-sm) var(--s-lg);
-  background: var(--c-text);
-  color: var(--c-paper);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  background: var(--color-text);
+  color: var(--color-paper);
   font-size: 0.875rem;
   font-weight: 500;
   border-radius: 4px;
-  margin-bottom: var(--s-sm);
+  margin-bottom: var(--spacing-sm);
 }
 
 .spatial-hierarchy-after .spatial-h-link {
   font-size: 0.75rem;
-  color: var(--c-ash);
+  color: var(--color-ash);
 }
 
 /* Whitespace */
 .spatial-whitespace-before {
-  padding: var(--s-xs) !important;
+  padding: var(--spacing-xs) !important;
 }
 
 .spatial-whitespace-before .spatial-ws-title { font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
-.spatial-whitespace-before .spatial-ws-price { font-size: 0.875rem; color: var(--c-ash); margin-bottom: 4px; }
-.spatial-whitespace-before .spatial-ws-features { font-size: 0.75rem; color: var(--c-ash); margin-bottom: 6px; }
-.spatial-whitespace-before .spatial-ws-btn { width: 100%; padding: 6px; font-size: 0.75rem; background: var(--c-text); color: var(--c-paper); border: none; border-radius: 3px; cursor: pointer; }
+.spatial-whitespace-before .spatial-ws-price { font-size: 0.875rem; color: var(--color-ash); margin-bottom: 4px; }
+.spatial-whitespace-before .spatial-ws-features { font-size: 0.75rem; color: var(--color-ash); margin-bottom: 6px; }
+.spatial-whitespace-before .spatial-ws-btn { width: 100%; padding: 6px; font-size: 0.75rem; background: var(--color-text); color: var(--color-paper); border: none; border-radius: 3px; cursor: pointer; }
 
 .spatial-whitespace-after {
-  padding: var(--s-lg) !important;
+  padding: var(--spacing-lg) !important;
 }
 
-.spatial-whitespace-after .spatial-ws-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin-bottom: var(--s-sm); }
-.spatial-whitespace-after .spatial-ws-price { font-size: 1.25rem; font-weight: 600; color: var(--c-text); margin-bottom: var(--s-sm); }
-.spatial-whitespace-after .spatial-ws-features { font-size: 0.8125rem; color: var(--c-ash); margin-bottom: var(--s-lg); line-height: 1.6; }
-.spatial-whitespace-after .spatial-ws-btn { width: 100%; padding: var(--s-sm); font-size: 0.875rem; background: var(--c-text); color: var(--c-paper); border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }
+.spatial-whitespace-after .spatial-ws-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin-bottom: var(--spacing-sm); }
+.spatial-whitespace-after .spatial-ws-price { font-size: 1.25rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--spacing-sm); }
+.spatial-whitespace-after .spatial-ws-features { font-size: 0.8125rem; color: var(--color-ash); margin-bottom: var(--spacing-lg); line-height: 1.6; }
+.spatial-whitespace-after .spatial-ws-btn { width: 100%; padding: var(--spacing-sm); font-size: 0.875rem; background: var(--color-text); color: var(--color-paper); border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }
 
 /* ============================================
    MOTION DESIGN DEMOS
@@ -293,7 +293,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
   width: 100%;
   max-width: 280px;
 }
@@ -306,19 +306,19 @@
 .motion-list-item {
   display: flex;
   align-items: center;
-  gap: var(--s-sm);
-  padding: var(--s-sm) var(--s-md);
-  background: var(--c-bg);
-  border: 1px solid var(--c-mist);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-bg);
+  border: 1px solid var(--color-mist);
   border-radius: 4px;
   font-size: 0.875rem;
-  color: var(--c-charcoal);
+  color: var(--color-charcoal);
 }
 
 .motion-dot {
   width: 8px;
   height: 8px;
-  background: var(--c-accent);
+  background: var(--color-accent);
   border-radius: 50%;
 }
 
@@ -348,13 +348,13 @@
 }
 
 .motion-btn-before {
-  background: var(--c-charcoal);
-  color: var(--c-paper);
+  background: var(--color-charcoal);
+  color: var(--color-paper);
 }
 
 .motion-btn-after {
-  background: var(--c-text);
-  color: var(--c-paper);
+  background: var(--color-text);
+  color: var(--color-paper);
   transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
 }
 
@@ -369,24 +369,24 @@
 
 /* State Transitions */
 .motion-card {
-  padding: var(--s-md);
-  background: var(--c-bg);
-  border: 1px solid var(--c-mist);
+  padding: var(--spacing-md);
+  background: var(--color-bg);
+  border: 1px solid var(--color-mist);
   border-radius: 6px;
   text-align: center;
   min-width: 140px;
 }
 
-.motion-card-icon { font-size: 1.5rem; margin-bottom: var(--s-xs); }
-.motion-card-text { font-size: 0.8125rem; color: var(--c-charcoal); }
+.motion-card-icon { font-size: 1.5rem; margin-bottom: var(--spacing-xs); }
+.motion-card-text { font-size: 0.8125rem; color: var(--color-charcoal); }
 
 .motion-card-after {
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .demo-viewport[data-state="after"] .motion-card-after {
-  background: color-mix(in oklch, var(--c-accent) 10%, var(--c-paper));
-  border-color: var(--c-accent);
+  background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper));
+  border-color: var(--color-accent);
 }
 
 .demo-viewport[data-state="after"] .motion-card-after .motion-card-icon {
@@ -415,13 +415,13 @@
 .typo-pairing-before .typo-heading {
   font-size: 1.5rem;
   font-weight: 600;
-  margin-bottom: var(--s-xs);
+  margin-bottom: var(--spacing-xs);
 }
 
 .typo-pairing-before .typo-body {
   font-size: 0.9375rem;
   line-height: 1.5;
-  color: var(--c-ash);
+  color: var(--color-ash);
 }
 
 .typo-pairing-after .typo-heading {
@@ -430,21 +430,21 @@
   font-weight: 300;
   font-style: italic;
   letter-spacing: -0.02em;
-  margin-bottom: var(--s-sm);
-  color: var(--c-text);
+  margin-bottom: var(--spacing-sm);
+  color: var(--color-text);
 }
 
 .typo-pairing-after .typo-body {
   font-family: var(--font-body);
   font-size: 0.9375rem;
   line-height: 1.7;
-  color: var(--c-charcoal);
+  color: var(--color-charcoal);
 }
 
 /* Hierarchy */
 .typo-hierarchy-before .typo-h1 { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; }
-.typo-hierarchy-before .typo-meta { font-size: 0.9375rem; color: var(--c-ash); margin-bottom: var(--s-xs); }
-.typo-hierarchy-before .typo-p { font-size: 0.875rem; line-height: 1.5; color: var(--c-charcoal); }
+.typo-hierarchy-before .typo-meta { font-size: 0.9375rem; color: var(--color-ash); margin-bottom: var(--spacing-xs); }
+.typo-hierarchy-before .typo-p { font-size: 0.875rem; line-height: 1.5; color: var(--color-charcoal); }
 
 .typo-hierarchy-after .typo-h1 {
   font-family: var(--font-display);
@@ -459,14 +459,14 @@
   font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
-  color: var(--c-accent);
-  margin-bottom: var(--s-md);
+  color: var(--color-accent);
+  margin-bottom: var(--spacing-md);
 }
 
 .typo-hierarchy-after .typo-p {
   font-size: 0.9375rem;
   line-height: 1.7;
-  color: var(--c-ash);
+  color: var(--color-ash);
 }
 
 /* ============================================
@@ -476,33 +476,33 @@
 .int-demo {
   display: flex;
   flex-direction: column;
-  gap: var(--s-md);
+  gap: var(--spacing-md);
   width: 100%;
   max-width: 280px;
 }
 
 /* Button States */
 .int-states-demo {
-  gap: var(--s-lg);
+  gap: var(--spacing-lg);
 }
 
 .int-state-row {
   display: flex;
   align-items: center;
-  gap: var(--s-md);
+  gap: var(--spacing-md);
 }
 
 .int-state-label {
   font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--c-ash);
+  color: var(--color-ash);
   width: 40px;
 }
 
 .int-btn {
   flex: 1;
-  padding: var(--s-sm) var(--s-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: 0.875rem;
   font-weight: 500;
   border-radius: 4px;
@@ -510,26 +510,26 @@
 }
 
 .int-btn-poor {
-  background: var(--c-charcoal);
-  color: var(--c-paper);
+  background: var(--color-charcoal);
+  color: var(--color-paper);
   border: none;
 }
 
 .int-btn-good {
-  background: var(--c-text);
-  color: var(--c-paper);
+  background: var(--color-text);
+  color: var(--color-paper);
   border: 2px solid transparent;
   transition: all 0.15s ease;
 }
 
 .int-btn-good:hover {
-  background: var(--c-charcoal);
+  background: var(--color-charcoal);
 }
 
 .int-btn-good:focus {
   outline: none;
-  border-color: var(--c-accent);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-accent) 25%, transparent);
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent);
 }
 
 .int-btn-good:active {
@@ -538,18 +538,18 @@
 
 /* Affordances */
 .int-aff-item {
-  padding: var(--s-sm) var(--s-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   border-radius: 4px;
   font-size: 0.875rem;
   cursor: pointer;
 }
 
 .int-aff-poor {
-  color: var(--c-charcoal);
+  color: var(--color-charcoal);
 }
 
 .int-aff-good {
-  color: var(--c-accent);
+  color: var(--color-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
@@ -559,16 +559,16 @@
 }
 
 .int-affordance-after .int-aff-item {
-  background: var(--c-bg);
-  border: 1px solid var(--c-mist);
-  color: var(--c-accent);
+  background: var(--color-bg);
+  border: 1px solid var(--color-mist);
+  color: var(--color-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
   transition: background 0.15s ease;
 }
 
 .int-affordance-after .int-aff-item:hover {
-  background: color-mix(in oklch, var(--c-accent) 5%, var(--c-paper));
+  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
 }
 
 .int-affordance-after .int-aff-item::after {
@@ -580,7 +580,7 @@
 .int-feedback-after {
   display: flex;
   align-items: center;
-  gap: var(--s-md);
+  gap: var(--spacing-md);
   flex-direction: row;
 }
 
@@ -601,13 +601,13 @@
 }
 
 .int-fb-silent {
-  background: var(--c-mist);
-  color: var(--c-ash);
+  background: var(--color-mist);
+  color: var(--color-ash);
 }
 
 .int-fb-active {
-  background: var(--c-charcoal);
-  color: var(--c-paper);
+  background: var(--color-charcoal);
+  color: var(--color-paper);
   transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -620,7 +620,7 @@
 }
 
 .int-fb-active.liked {
-  background: var(--c-accent);
+  background: var(--color-accent);
   animation: heartPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -630,7 +630,7 @@
 
 .int-fb-label {
   font-size: 0.875rem;
-  color: var(--c-charcoal);
+  color: var(--color-charcoal);
 }
 
 /* ============================================
@@ -647,10 +647,10 @@
 .color-palette-after {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--s-xs);
-  padding: var(--s-md);
-  background: var(--c-paper);
-  border: 1px solid var(--c-mist);
+  gap: var(--spacing-xs);
+  padding: var(--spacing-md);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
   border-radius: 6px;
 }
 
@@ -663,10 +663,10 @@
 
 .color-card {
   width: 100%;
-  margin-top: var(--s-sm);
-  padding: var(--s-sm);
-  background: var(--c-paper);
-  border: 1px solid var(--c-mist);
+  margin-top: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
   border-radius: 4px;
   display: flex;
   flex-direction: column;
@@ -687,18 +687,18 @@
 .color-palette-before .card-btn { background: #ffe66d; color: #333; }
 
 /* After - Harmonious palette */
-.color-palette-after .swatch-1 { background: var(--c-text); }
-.color-palette-after .swatch-2 { background: var(--c-charcoal); }
-.color-palette-after .swatch-3 { background: var(--c-ash); }
-.color-palette-after .swatch-4 { background: var(--c-mist); }
-.color-palette-after .swatch-5 { background: var(--c-accent); }
-.color-palette-after .card-title { color: var(--c-text); }
-.color-palette-after .card-subtitle { color: var(--c-ash); }
-.color-palette-after .card-btn { background: var(--c-accent); color: var(--c-paper); }
+.color-palette-after .swatch-1 { background: var(--color-text); }
+.color-palette-after .swatch-2 { background: var(--color-charcoal); }
+.color-palette-after .swatch-3 { background: var(--color-ash); }
+.color-palette-after .swatch-4 { background: var(--color-mist); }
+.color-palette-after .swatch-5 { background: var(--color-accent); }
+.color-palette-after .card-title { color: var(--color-text); }
+.color-palette-after .card-subtitle { color: var(--color-ash); }
+.color-palette-after .card-btn { background: var(--color-accent); color: var(--color-paper); }
 
 /* Strategic Accent */
 .color-accent-card {
-  padding: var(--s-md);
+  padding: var(--spacing-md);
   border-radius: 6px;
 }
 
@@ -708,27 +708,27 @@
 }
 
 .color-accent-before .color-accent-title { font-weight: 600; color: #333; margin-bottom: 4px; }
-.color-accent-before .color-accent-text { font-size: 0.8125rem; color: #666; margin-bottom: var(--s-sm); }
-.color-accent-before .color-accent-btn { width: 100%; padding: var(--s-xs); background: #333; color: white; border: none; border-radius: 4px; font-size: 0.8125rem; cursor: pointer; }
+.color-accent-before .color-accent-text { font-size: 0.8125rem; color: #666; margin-bottom: var(--spacing-sm); }
+.color-accent-before .color-accent-btn { width: 100%; padding: var(--spacing-xs); background: #333; color: white; border: none; border-radius: 4px; font-size: 0.8125rem; cursor: pointer; }
 
 .color-accent-after .color-accent-card {
-  background: color-mix(in oklch, var(--c-accent) 8%, var(--c-paper));
-  border: 1px solid color-mix(in oklch, var(--c-accent) 20%, var(--c-paper));
+  background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper));
+  border: 1px solid color-mix(in oklch, var(--color-accent) 20%, var(--color-paper));
 }
 
-.color-accent-after .color-accent-title { font-weight: 600; color: var(--c-text); margin-bottom: 4px; }
-.color-accent-after .color-accent-text { font-size: 0.8125rem; color: var(--c-ash); margin-bottom: var(--s-sm); }
-.color-accent-after .color-accent-btn { width: 100%; padding: var(--s-xs); background: var(--c-accent); color: var(--c-paper); border: none; border-radius: 4px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
+.color-accent-after .color-accent-title { font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
+.color-accent-after .color-accent-text { font-size: 0.8125rem; color: var(--color-ash); margin-bottom: var(--spacing-sm); }
+.color-accent-after .color-accent-btn { width: 100%; padding: var(--spacing-xs); background: var(--color-accent); color: var(--color-paper); border: none; border-radius: 4px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
 
 /* Contrast Ratios */
 .color-contrast-static {
   display: flex;
   flex-direction: column;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
 }
 
 .contrast-example {
-  padding: var(--s-md);
+  padding: var(--spacing-md);
   border-radius: 6px;
   text-align: center;
 }
@@ -739,8 +739,8 @@
 }
 
 .contrast-pass {
-  background: var(--c-charcoal);
-  color: var(--c-paper);
+  background: var(--color-charcoal);
+  color: var(--color-paper);
 }
 
 .contrast-badge {
@@ -755,7 +755,7 @@
 }
 
 .contrast-fail .contrast-badge { background: #ddd; }
-.contrast-pass .contrast-badge { background: var(--c-accent); color: var(--c-paper); }
+.contrast-pass .contrast-badge { background: var(--color-accent); color: var(--color-paper); }
 
 .contrast-text { font-size: 1rem; font-weight: 500; margin-bottom: 2px; }
 .contrast-ratio { font-size: 0.6875rem; opacity: 0.7; }
@@ -773,20 +773,20 @@
 .resp-touch-demo {
   display: flex;
   flex-direction: column;
-  gap: var(--s-lg);
+  gap: var(--spacing-lg);
 }
 
 .resp-touch-row {
   display: flex;
   align-items: center;
-  gap: var(--s-md);
+  gap: var(--spacing-md);
 }
 
 .resp-label {
   font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--c-ash);
+  color: var(--color-ash);
   width: 70px;
 }
 
@@ -806,36 +806,36 @@
   width: 24px;
   height: 24px;
   font-size: 0.75rem;
-  background: var(--c-mist);
-  color: var(--c-ash);
+  background: var(--color-mist);
+  color: var(--color-ash);
 }
 
 .resp-touch-good button {
   width: 44px;
   height: 44px;
   font-size: 1rem;
-  background: var(--c-text);
-  color: var(--c-paper);
+  background: var(--color-text);
+  color: var(--color-paper);
 }
 
 /* Fluid Layout */
 .resp-fluid-demo {
-  padding: var(--s-md);
-  background: var(--c-bg);
-  border: 1px solid var(--c-mist);
+  padding: var(--spacing-md);
+  background: var(--color-bg);
+  border: 1px solid var(--color-mist);
   border-radius: 6px;
 }
 
 .resp-fluid-container {
   display: flex;
   flex-direction: column;
-  gap: var(--s-md);
+  gap: var(--spacing-md);
 }
 
 .resp-fluid-fixed,
 .resp-fluid-adaptive {
   font-size: 0.75rem;
-  color: var(--c-ash);
+  color: var(--color-ash);
 }
 
 .resp-fluid-fixed span,
@@ -846,18 +846,18 @@
 
 .resp-fluid-bar {
   height: 24px;
-  background: var(--c-mist);
+  background: var(--color-mist);
   border-radius: 4px;
 }
 
 .resp-fluid-adaptive .resp-fluid-bar {
-  background: var(--c-accent);
+  background: var(--color-accent);
 }
 
 /* Adaptive Content */
 .resp-adapt-demo {
   display: flex;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
   align-items: flex-end;
 }
 
@@ -869,14 +869,14 @@
   display: block;
   margin-top: 4px;
   font-size: 0.625rem;
-  color: var(--c-ash);
+  color: var(--color-ash);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
 .resp-device-screen {
-  background: var(--c-paper);
-  border: 2px solid var(--c-mist);
+  background: var(--color-paper);
+  border: 2px solid var(--color-mist);
   border-radius: 4px;
   padding: 4px;
   display: flex;
@@ -889,7 +889,7 @@
 .resp-device-desktop .resp-device-screen { width: 120px; height: 70px; }
 
 .resp-block {
-  background: var(--c-mist);
+  background: var(--color-mist);
   border-radius: 2px;
 }
 
@@ -899,8 +899,8 @@
   flex: 1;
 }
 
-.resp-header { height: 16px; background: var(--c-charcoal); }
-.resp-sidebar { width: 30%; background: var(--c-charcoal); }
+.resp-header { height: 16px; background: var(--color-charcoal); }
+.resp-sidebar { width: 30%; background: var(--color-charcoal); }
 .resp-content { flex: 1; }
 
 /* ============================================
diff --git a/public/css/solution-section.css b/public/css/solution-section.css
deleted file mode 100644
index da34d1f9b..000000000
--- a/public/css/solution-section.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Solution Section - Skills + Commands explanation
- */
-
-.solution-section {
-  padding: var(--s-2xl) 0;
-  border-top: 1px solid var(--c-mist);
-}
-
-.solution-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--s-xl);
-}
-
-.solution-content {
-  max-width: 680px;
-}
-
-.solution-content .section-title {
-  margin-bottom: var(--s-md);
-}
-
-.solution-lead {
-  font-size: 1.375rem;
-  line-height: 1.6;
-  color: var(--c-charcoal);
-}
-
-.solution-lead strong {
-  color: var(--c-text);
-  font-weight: 600;
-}
-
-/* Solution Cards - Side by side */
-.solution-cards {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--s-lg);
-  
-  @media (max-width: 640px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.solution-card {
-  padding: var(--s-lg);
-  background: var(--c-paper);
-  border-left: 3px solid var(--c-accent);
-  transition: all var(--duration-base) var(--ease-out);
-}
-
-.solution-card:hover {
-  background: color-mix(in oklch, var(--c-paper) 90%, var(--c-accent));
-  transform: translateX(4px);
-}
-
-.solution-icon {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: var(--s-md);
-  color: var(--c-accent);
-}
-
-.solution-card h3 {
-  font-family: var(--font-display);
-  font-size: 1.75rem;
-  font-weight: 400;
-  margin: 0 0 var(--s-sm) 0;
-  color: var(--c-text);
-}
-
-.solution-card p {
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--c-ash);
-  margin: 0;
-}
-
-.solution-card code {
-  font-family: 'Space Grotesk', monospace;
-  font-size: 0.875em;
-  background: color-mix(in oklch, var(--c-accent) 15%, transparent);
-  color: var(--c-accent);
-  padding: 0.125em 0.375em;
-  border-radius: 3px;
-}
-
-.solution-card em {
-  font-style: italic;
-  color: var(--c-charcoal);
-}
-
diff --git a/public/css/tokens.css b/public/css/tokens.css
deleted file mode 100644
index 61d6f0fd8..000000000
--- a/public/css/tokens.css
+++ /dev/null
@@ -1,66 +0,0 @@
-/* Design Tokens — Single Source of Truth */
-
-:root {
-  /* Typography Scale */
-  --font-display: 'Cormorant Garamond', Georgia, serif;
-  --font-body: 'Instrument Sans', system-ui, sans-serif;
-  
-  /* Base Colors — Refined Monochrome + Electric Accent */
-  --c-ink: oklch(10% 0 0);
-  --c-paper: oklch(98% 0 0);
-  --c-charcoal: oklch(25% 0 0);
-  --c-ash: oklch(55% 0 0);
-  --c-mist: oklch(92% 0 0);
-  
-  /* Semantic aliases for common use */
-  --c-text: var(--c-ink);
-  --c-bg: oklch(96% 0.005 350);  /* Very subtle pink tint */
-  
-  /* Accent — Vibrant Electric Pink using OKLCH for perceptual uniformity */
-  --c-accent: oklch(60% 0.25 350);
-  --c-accent-hover: oklch(from var(--c-accent) calc(l - 8%) c h);
-  --c-accent-dim: color-mix(in oklch, var(--c-accent), transparent 85%);
-  
-  /* Spacing Scale — 8px base unit */
-  --s-unit: 8px;
-  --s-xs: calc(var(--s-unit) * 1);   /* 8px */
-  --s-sm: calc(var(--s-unit) * 2);   /* 16px */
-  --s-md: calc(var(--s-unit) * 3);   /* 24px */
-  --s-lg: calc(var(--s-unit) * 6);   /* 48px */
-  --s-xl: calc(var(--s-unit) * 10);  /* 80px */
-  --s-2xl: calc(var(--s-unit) * 16); /* 128px */
-  --s-3xl: calc(var(--s-unit) * 24); /* 192px */
-  
-  /* Layout Constraints */
-  --max-width: 1280px;
-  --content-width: 840px;
-  
-  /* Animation Curves */
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-  --duration-fast: 0.2s;
-  --duration-base: 0.3s;
-  --duration-slow: 0.6s;
-  --duration-slower: 0.8s;
-  --duration-slowest: 1.2s;
-  
-  /* Shadows */
-  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--c-ink), transparent 90%);
-  --shadow-md: 0 4px 8px color-mix(in oklch, var(--c-ink), transparent 85%);
-}
-
-/* Dark Mode — Automatic via prefers-color-scheme */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --c-ink: oklch(98% 0 0);
-    --c-paper: oklch(10% 0 0);
-    --c-charcoal: oklch(92% 0 0);
-    --c-ash: oklch(65% 0 0);
-    --c-mist: oklch(20% 0 0);
-    --c-accent: oklch(68% 0.23 350);
-    --c-accent-hover: oklch(from var(--c-accent) calc(l + 8%) c h);
-    --c-text: var(--c-ink);
-    --c-bg: oklch(12% 0.005 350);
-  }
-}
-
diff --git a/public/css/workflow.css b/public/css/workflow.css
index 76be59c66..357cf9004 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -14,7 +14,7 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  margin-bottom: var(--s-sm);
+  margin-bottom: var(--spacing-sm);
   
   &:last-child {
     margin-bottom: 0;
@@ -26,10 +26,10 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--c-ash);
-  padding: var(--s-xs) var(--s-md);
+  color: var(--color-ash);
+  padding: var(--spacing-xs) var(--spacing-md);
   margin-bottom: 2px;
-  margin-top: var(--s-xs);
+  margin-top: var(--spacing-xs);
   
   &:first-child {
     margin-top: 0;
@@ -37,11 +37,11 @@
 }
 
 .command-nav-item {
-  padding: var(--s-xs) var(--s-md);
+  padding: var(--spacing-xs) var(--spacing-md);
   background: transparent;
   border: none;
   border-left: 2px solid transparent;
-  color: var(--c-ash);
+  color: var(--color-ash);
   font-family: 'Space Grotesk', monospace;
   font-size: 0.875rem;
   font-weight: 400;
@@ -52,14 +52,14 @@
 }
 
 .command-nav-item:hover {
-  color: var(--c-text);
-  background: color-mix(in oklch, var(--c-paper) 85%, var(--c-accent));
+  color: var(--color-text);
+  background: color-mix(in oklch, var(--color-paper) 85%, var(--color-accent));
 }
 
 .command-nav-item.active {
-  color: var(--c-accent);
-  border-left-color: var(--c-accent);
-  background: color-mix(in oklch, var(--c-accent) 5%, var(--c-paper));
+  color: var(--color-accent);
+  border-left-color: var(--color-accent);
+  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
   font-weight: 500;
 }
 
@@ -67,30 +67,30 @@
   .commands-nav {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--s-xs);
+    gap: var(--spacing-xs);
   }
   
   .command-nav-group {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--s-xs);
-    margin-bottom: var(--s-sm);
+    gap: var(--spacing-xs);
+    margin-bottom: var(--spacing-sm);
   }
   
   .command-nav-label {
     width: 100%;
-    padding: var(--s-xs) 0;
+    padding: var(--spacing-xs) 0;
     margin-top: 0;
   }
   
   .command-nav-item {
     border-left: none;
     border-bottom: 2px solid transparent;
-    padding: var(--s-xs) var(--s-sm);
+    padding: var(--spacing-xs) var(--spacing-sm);
   }
   
   .command-nav-item.active {
-    border-bottom-color: var(--c-accent);
+    border-bottom-color: var(--color-accent);
   }
 }
 
@@ -98,7 +98,7 @@
 .workflow-row {
   display: flex;
   align-items: center;
-  gap: var(--s-md);
+  gap: var(--spacing-md);
   flex-wrap: wrap;
 }
 
@@ -107,20 +107,20 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--c-ash);
+  color: var(--color-ash);
   width: 120px;
   flex-shrink: 0;
   
   @media (max-width: 768px) {
     width: 100%;
-    margin-bottom: var(--s-xs);
+    margin-bottom: var(--spacing-xs);
   }
 }
 
 .workflow-row-content {
   display: flex;
   align-items: center;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
   flex-wrap: wrap;
 }
 
@@ -130,35 +130,35 @@
   align-items: center;
   padding: 4px 10px;
   background: transparent;
-  border: 1px solid var(--c-mist);
+  border: 1px solid var(--color-mist);
   border-radius: 3px;
   font-family: 'Space Grotesk', monospace;
   font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--c-charcoal);
+  color: var(--color-charcoal);
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-out);
 }
 
 .workflow-node:hover {
-  border-color: var(--c-accent);
-  color: var(--c-accent);
-  background: color-mix(in oklch, var(--c-accent) 5%, transparent);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: color-mix(in oklch, var(--color-accent) 5%, transparent);
 }
 
 .workflow-node.active {
-  background: var(--c-accent);
-  border-color: var(--c-accent);
-  color: var(--c-paper);
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-paper);
 }
 
 /* Workflow Arrow */
 .workflow-arrow {
   display: flex;
   align-items: center;
-  color: var(--c-ash);
+  color: var(--color-ash);
   font-size: 1.25rem;
-  padding: 0 var(--s-xs);
+  padding: 0 var(--spacing-xs);
 }
 
 .workflow-arrow-bidirectional::before {
@@ -178,17 +178,17 @@
 .workflow-group {
   display: flex;
   align-items: center;
-  gap: var(--s-sm);
-  padding: var(--s-sm);
-  background: color-mix(in oklch, var(--c-paper) 50%, transparent);
-  border: 1px dashed var(--c-mist);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  background: color-mix(in oklch, var(--color-paper) 50%, transparent);
+  border: 1px dashed var(--color-mist);
   border-radius: 4px;
 }
 
 .workflow-group-label {
   font-size: 0.6875rem;
   font-weight: 500;
-  color: var(--c-ash);
+  color: var(--color-ash);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   writing-mode: vertical-lr;
@@ -198,7 +198,7 @@
     writing-mode: horizontal-tb;
     transform: none;
     width: 100%;
-    margin-bottom: var(--s-xs);
+    margin-bottom: var(--spacing-xs);
   }
 }
 
@@ -206,20 +206,20 @@
 .workflow-production {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: var(--s-md);
+  gap: var(--spacing-md);
   align-items: start;
 }
 
 .workflow-production-stages {
   display: flex;
   flex-direction: column;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
 }
 
 .workflow-stage {
   display: flex;
   align-items: center;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
 }
 
 .workflow-stage-label {
@@ -227,21 +227,21 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--c-ash);
+  color: var(--color-ash);
   width: 80px;
 }
 
 .workflow-stage-nodes {
   display: flex;
-  gap: var(--s-xs);
+  gap: var(--spacing-xs);
   flex-wrap: wrap;
 }
 
 /* Aesthetic Adjustments Section */
 .workflow-aesthetics {
-  border-top: 1px solid var(--c-mist);
-  padding-top: var(--s-lg);
-  margin-top: var(--s-sm);
+  border-top: 1px solid var(--color-mist);
+  padding-top: var(--spacing-lg);
+  margin-top: var(--spacing-sm);
 }
 
 .workflow-aesthetics-title {
@@ -249,26 +249,26 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--c-ash);
-  margin-bottom: var(--s-md);
+  color: var(--color-ash);
+  margin-bottom: var(--spacing-md);
 }
 
 .workflow-pairs {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--s-lg);
+  gap: var(--spacing-lg);
 }
 
 .workflow-pair {
   display: flex;
   align-items: center;
-  gap: var(--s-sm);
+  gap: var(--spacing-sm);
 }
 
 /* Responsive */
 @media (max-width: 768px) {
   .workflow-container {
-    padding: var(--s-md);
+    padding: var(--spacing-md);
   }
   
   .workflow-production {
@@ -282,15 +282,15 @@
   
   .workflow-stage-label {
     width: auto;
-    margin-bottom: var(--s-xs);
+    margin-bottom: var(--spacing-xs);
   }
 }
 
 /* Command Card in Grid */
 .command-card {
-  padding: var(--s-sm) var(--s-md);
-  background: var(--c-paper);
-  border: 1px solid var(--c-mist);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
   border-radius: 3px;
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-out);
@@ -298,27 +298,27 @@
 }
 
 .command-card:hover {
-  border-color: var(--c-accent);
+  border-color: var(--color-accent);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px color-mix(in oklch, var(--c-accent) 10%, transparent);
+  box-shadow: 0 4px 12px color-mix(in oklch, var(--color-accent) 10%, transparent);
 }
 
 .command-card.active {
-  border-color: var(--c-accent);
-  background: color-mix(in oklch, var(--c-accent) 5%, var(--c-paper));
+  border-color: var(--color-accent);
+  background: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper));
 }
 
 .command-card-name {
   font-family: 'Space Grotesk', monospace;
   font-size: 0.9375rem;
   font-weight: 500;
-  color: var(--c-text);
+  color: var(--color-text);
   margin-bottom: 2px;
 }
 
 .command-card-desc {
   font-size: 0.75rem;
-  color: var(--c-ash);
+  color: var(--color-ash);
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -334,9 +334,9 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   padding: 2px 6px;
-  background: var(--c-mist);
-  color: var(--c-ash);
+  background: var(--color-mist);
+  color: var(--color-ash);
   border-radius: 2px;
-  margin-top: var(--s-xs);
+  margin-top: var(--spacing-xs);
 }
 
diff --git a/public/index.html b/public/index.html
index 94631304c..e6653d312 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,37 +7,38 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="tailwindcss" />
   <link rel="stylesheet" href="./css/main.css">
 </head>
-<body>
+<body class="min-h-screen overflow-x-hidden leading-relaxed">
   <!-- 1. HERO - Hook with the problem statement -->
-  <header class="hero">
-    <div class="hero-grid">
+  <header class="min-h-[85vh] flex items-center relative py-32 px-12 overflow-hidden max-md:min-h-[70vh] max-md:py-20 max-md:px-6">
+    <div class="max-w-max mx-auto grid grid-cols-[1fr_auto] gap-32 items-center w-full relative max-md:grid-cols-1 max-md:gap-20">
       <div class="hero-content">
-        <h1 class="title">
-          <span class="title-main">Impeccable style</span>
-          <span class="title-sub">made easy</span>
+        <h1 class="font-display text-[clamp(3rem,8vw,7rem)] font-light leading-[0.9] mb-12 flex flex-col max-md:text-[clamp(2.5rem,12vw,4rem)]">
+          <span class="font-normal tracking-tight">Impeccable style</span>
+          <span class="font-light italic text-accent tracking-tight">made easy</span>
         </h1>
-        <p class="tagline">Your LLM can design beautiful interfaces.<br>It just needs to know what to ask for.</p>
-        <p class="providers">Works with Cursor · Claude Code · Gemini CLI · Codex CLI</p>
+        <p class="text-[clamp(1.125rem,2vw,1.5rem)] leading-snug text-charcoal mb-6 max-w-[32ch]">Your LLM can design beautiful interfaces.<br>It just needs to know what to ask for.</p>
+        <p class="text-sm text-ash uppercase tracking-widest font-medium">Works with Cursor · Claude Code · Gemini CLI · Codex CLI</p>
       </div>
-      <div class="hero-decoration" aria-hidden="true">
+      <div class="hero-decoration w-60 h-60 relative max-md:hidden" aria-hidden="true">
         <div class="deco-line"></div>
         <div class="deco-circle"></div>
       </div>
     </div>
   </header>
 
-  <main class="container">
+  <main class="max-w-max mx-auto px-12 max-sm:px-6">
     <!-- 2. THE PROBLEM - Show the "AI slop" aesthetic -->
-    <section class="problem-section">
-      <div class="problem-grid">
-        <div class="problem-content">
-          <h2 class="section-title">The Problem</h2>
-          <p class="problem-lead">LLMs are biased toward safe, generic design choices. Without guidance, you get the same predictable aesthetic every time.</p>
+    <section class="problem-section py-32 border-t border-mist">
+      <div class="problem-grid grid grid-cols-2 gap-32 items-center max-lg:grid-cols-1 max-lg:gap-20">
+        <div class="max-w-md">
+          <h2 class="section-title mb-6">The Problem</h2>
+          <p class="text-xl leading-relaxed text-charcoal">LLMs are biased toward safe, generic design choices. Without guidance, you get the same predictable aesthetic every time.</p>
         </div>
-        <div class="problem-showcase">
-          <div class="ai-slop-demo">
+        <div class="problem-showcase flex justify-center">
+          <div class="ai-slop-demo relative max-w-sm w-full">
             <div class="slop-card">
               <div class="slop-header">
                 <div class="slop-avatar"></div>
@@ -61,118 +62,118 @@
     </section>
 
     <!-- 3. THE SOLUTION - Brief explanation -->
-    <section class="solution-section">
-      <div class="solution-grid">
-        <div class="solution-content">
-          <h2 class="section-title">The Solution</h2>
-          <p class="solution-lead">Teach your AI assistant the language of design. <strong>Skills</strong> provide deep design knowledge. <strong>Commands</strong> give you precise control over the creative process.</p>
+    <section class="py-32 border-t border-mist">
+      <div class="grid gap-20">
+        <div class="max-w-2xl">
+          <h2 class="section-title mb-6">The Solution</h2>
+          <p class="text-[1.375rem] leading-relaxed text-charcoal">Teach your AI assistant the language of design. <strong class="text-ink font-semibold">Skills</strong> provide deep design knowledge. <strong class="text-ink font-semibold">Commands</strong> give you precise control over the creative process.</p>
         </div>
-        <div class="solution-cards">
+        <div class="grid grid-cols-2 gap-12 max-sm:grid-cols-1">
           <div class="solution-card">
-            <div class="solution-icon">
+            <div class="w-12 h-12 flex items-center justify-center mb-6 text-accent">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                 <path d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
               </svg>
             </div>
-            <h3>8 Skills</h3>
-            <p>Deep knowledge in typography, color, motion, spatial design, and more. The AI learns <em>how</em> to think about design.</p>
+            <h3 class="font-display text-3xl font-normal mb-4">8 Skills</h3>
+            <p class="text-base leading-relaxed text-ash">Deep knowledge in typography, color, motion, spatial design, and more. The AI learns <em class="italic text-charcoal">how</em> to think about design.</p>
           </div>
           <div class="solution-card">
-            <div class="solution-icon">
+            <div class="w-12 h-12 flex items-center justify-center mb-6 text-accent">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                 <path d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/>
               </svg>
             </div>
-            <h3>15 Commands</h3>
-            <p>Precise actions like <code>/bolder</code>, <code>/animate</code>, <code>/audit</code>. Steer the AI through iterative design refinement.</p>
+            <h3 class="font-display text-3xl font-normal mb-4">15 Commands</h3>
+            <p class="text-base leading-relaxed text-ash">Precise actions like <code>/bolder</code>, <code>/animate</code>, <code>/audit</code>. Steer the AI through iterative design refinement.</p>
           </div>
         </div>
       </div>
     </section>
 
     <!-- 4. SKILLS SHOWCASE - Interactive demos -->
-    <section class="skills-section" id="skills-section">
-      <div class="section-header-sticky">
-        <h2 class="section-title">Skills</h2>
-        <p class="section-subtitle">Design knowledge that transforms AI output</p>
+    <section class="skills-section py-20 border-t border-mist" id="skills-section">
+      <div class="mb-12">
+        <h2 class="section-title mb-4">Skills</h2>
+        <p class="text-lg text-ash mt-6 max-w-[50ch]">Design knowledge that transforms AI output</p>
       </div>
-      <div class="skills-layout">
-        <nav class="skills-nav" id="skills-nav">
-          <div class="loading">Loading...</div>
+      <div class="skills-layout grid grid-cols-[180px_1fr] gap-12 items-start max-lg:grid-cols-1 max-lg:gap-6">
+        <nav class="skills-nav flex flex-col gap-0.5 max-lg:flex-row max-lg:flex-wrap max-lg:gap-2" id="skills-nav">
+          <div class="py-20 text-center text-ash italic">Loading...</div>
         </nav>
         <div class="skills-showcase" id="skills-detail">
-          <div class="loading">Select a skill to see it in action</div>
+          <div class="py-20 text-center text-ash italic">Select a skill to see it in action</div>
         </div>
       </div>
     </section>
 
     <!-- 5. COMMANDS - Sidebar nav + details (mirrors skills layout) -->
-    <section class="commands-section" id="commands-section">
-      <div class="section-header-sticky">
-        <h2 class="section-title">Commands</h2>
-        <p class="section-subtitle">Precise control over the design process</p>
+    <section class="commands-section py-20 border-t border-mist" id="commands-section">
+      <div class="mb-12">
+        <h2 class="section-title mb-4">Commands</h2>
+        <p class="text-lg text-ash mt-6 max-w-[50ch]">Precise control over the design process</p>
       </div>
       
-      <div class="commands-layout">
+      <div class="commands-layout grid grid-cols-[180px_1fr] gap-12 items-start max-lg:grid-cols-1 max-lg:gap-6">
         <!-- Commands nav (left sidebar) -->
-        <nav class="commands-nav" id="workflow-diagram">
+        <nav class="commands-nav flex flex-col gap-4 max-lg:flex-row max-lg:flex-wrap max-lg:gap-2" id="workflow-diagram">
           <!-- Will be rendered by JS -->
         </nav>
         
         <!-- Command detail (right side) -->
         <div class="commands-showcase" id="commands-detail">
-          <div class="loading">Select a command to view details</div>
+          <div class="py-20 text-center text-ash italic">Select a command to view details</div>
         </div>
       </div>
     </section>
 
     <!-- 6. DOWNLOAD BUNDLES - After demonstrating value -->
-    <section class="downloads-section" id="downloads">
-      <div class="downloads-header">
-        <h2 class="section-title">Get Started</h2>
-        <p class="downloads-lead">Download the complete bundle for your preferred AI tool. Extract into your project root and start creating.</p>
+    <section class="py-32 border-t border-mist" id="downloads">
+      <div class="mb-20 max-w-xl">
+        <h2 class="section-title mb-6">Get Started</h2>
+        <p class="text-lg leading-relaxed text-ash">Download the complete bundle for your preferred AI tool. Extract into your project root and start creating.</p>
       </div>
-      <div class="download-grid">
+      <div class="grid grid-cols-[repeat(auto-fit,minmax(260px,1fr))] gap-6 max-sm:grid-cols-1">
         <article class="download-card" data-animate>
           <div class="card-inner">
-            <div class="card-header">
-              <h3>Cursor</h3>
+            <div class="flex justify-between items-start gap-6">
+              <h3 class="font-display text-xl font-medium">Cursor</h3>
               <span class="badge">Rules + Commands</span>
             </div>
-            <p>Commands and rules for Cursor IDE. Works via appending, no frontmatter required.</p>
+            <p class="text-ash text-[0.9375rem] leading-relaxed flex-grow">Commands and rules for Cursor IDE. Works via appending, no frontmatter required.</p>
             <button class="btn btn-primary" data-bundle="cursor">Download</button>
           </div>
         </article>
 
         <article class="download-card" data-animate>
           <div class="card-inner">
-            <div class="card-header">
-              <h3>Claude Code</h3>
+            <div class="flex justify-between items-start gap-6">
+              <h3 class="font-display text-xl font-medium">Claude Code</h3>
               <span class="badge">Full Featured</span>
             </div>
-            <p>Complete YAML frontmatter with argument support. Follows Anthropic Skills specification.</p>
+            <p class="text-ash text-[0.9375rem] leading-relaxed flex-grow">Complete YAML frontmatter with argument support. Follows Anthropic Skills specification.</p>
             <button class="btn btn-primary" data-bundle="claude-code">Download</button>
           </div>
         </article>
 
         <article class="download-card" data-animate>
           <div class="card-inner">
-            <div class="card-header">
-              <h3>Gemini CLI</h3>
+            <div class="flex justify-between items-start gap-6">
+              <h3 class="font-display text-xl font-medium">Gemini CLI</h3>
               <span class="badge">TOML + Modular</span>
             </div>
-            <p>TOML-formatted commands with modular skill imports via GEMINI.md.</p>
+            <p class="text-ash text-[0.9375rem] leading-relaxed flex-grow">TOML-formatted commands with modular skill imports via GEMINI.md.</p>
             <button class="btn btn-primary" data-bundle="gemini">Download</button>
           </div>
         </article>
 
         <article class="download-card" data-animate>
           <div class="card-inner">
-            <div class="card-header">
-              <h3>Codex CLI</h3>
+            <div class="flex justify-between items-start gap-6">
+              <h3 class="font-display text-xl font-medium">Codex CLI</h3>
               <span class="badge">Prompts + Routing</span>
             </div>
-            <p>Custom prompt format with skill routing through AGENTS.md architecture.</p>
+            <p class="text-ash text-[0.9375rem] leading-relaxed flex-grow">Custom prompt format with skill routing through AGENTS.md architecture.</p>
             <button class="btn btn-primary" data-bundle="codex">Download</button>
           </div>
         </article>
@@ -180,19 +181,19 @@
     </section>
 
     <!-- 7. OPEN SOURCE -->
-    <section class="contribute">
-      <div class="contribute-content">
-        <h2>Open Source</h2>
-        <p>View the source, contribute skills and commands, or report issues on GitHub.</p>
+    <section class="py-32 border-t border-mist text-center">
+      <div class="max-w-md mx-auto flex flex-col items-center gap-6">
+        <h2 class="font-display text-[clamp(2rem,4vw,3rem)] font-semibold">Open Source</h2>
+        <p class="text-lg text-ash max-w-[42ch]">View the source, contribute skills and commands, or report issues on GitHub.</p>
         <a href="https://github.com/pbakaus/vibe-design-plugins" class="btn btn-secondary">View Repository</a>
       </div>
     </section>
   </main>
 
-  <footer>
-    <div class="footer-content">
+  <footer class="border-t border-mist py-32 px-12 bg-paper">
+    <div class="max-w-max mx-auto flex justify-between items-center text-sm text-ash max-md:flex-col max-md:gap-4 max-md:text-center">
       <p>impeccable.style</p>
-      <p><a href="https://github.com/pbakaus/vibe-design-plugins">GitHub</a></p>
+      <p><a href="https://github.com/pbakaus/vibe-design-plugins" class="text-ink underline underline-offset-2">GitHub</a></p>
     </div>
   </footer>
 
diff --git a/public/js/command-demos.js b/public/js/command-demos.js
deleted file mode 100644
index 788061843..000000000
--- a/public/js/command-demos.js
+++ /dev/null
@@ -1,110 +0,0 @@
-// ============================================
-// COMMAND DEMOS - Before/after demonstrations for commands
-// ============================================
-
-export function renderCommandDemo(commandId) {
-  const demos = {
-    'bolder': renderBolderDemo,
-    'animate': renderAnimateDemo,
-    'normalize': renderNormalizeDemo
-  };
-  
-  const renderFn = demos[commandId];
-  if (renderFn) return renderFn();
-  
-  return `
-    <div class="demo-container">
-      <div class="demo-header">
-        <span class="demo-title">Command Preview</span>
-      </div>
-      <div class="demo-viewport">
-        <div style="text-align: center; color: var(--c-ash); font-style: italic;">
-          Visual demo for /${commandId} coming soon
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-function renderBolderDemo() {
-  return `
-    <div class="demo-container">
-      <div class="demo-header">
-        <span class="demo-title">Before / After</span>
-        <div class="demo-toggle">
-          <span class="demo-toggle-label active">Before</span>
-          <div class="demo-toggle-switch" data-demo="command-bolder"></div>
-          <span class="demo-toggle-label">After</span>
-        </div>
-      </div>
-      <div class="demo-viewport" data-state="before" id="command-bolder-viewport">
-        <div style="text-align: center; padding: var(--s-md); max-width: 280px;">
-          <div style="font-size: 1.125rem; font-weight: 500; margin-bottom: 8px; color: var(--c-charcoal);">Introducing Our Product</div>
-          <div style="font-size: 0.875rem; color: var(--c-ash); margin-bottom: 16px;">A solution for modern teams</div>
-          <button style="padding: 8px 16px; background: var(--c-mist); color: var(--c-charcoal); border: none; border-radius: 4px; font-size: 0.875rem;">Learn More</button>
-        </div>
-      </div>
-      <div class="demo-caption">Timid design → Bold, confident design</div>
-    </div>
-  `;
-}
-
-function renderAnimateDemo() {
-  return `
-    <div class="demo-container">
-      <div class="demo-header">
-        <span class="demo-title">Before / After</span>
-        <div class="demo-toggle">
-          <span class="demo-toggle-label active">Before</span>
-          <div class="demo-toggle-switch" data-demo="command-animate"></div>
-          <span class="demo-toggle-label">After</span>
-        </div>
-      </div>
-      <div class="demo-viewport demo-viewport-dark" data-state="before" id="command-animate-viewport">
-        <div class="motion-demo-page" style="opacity: 1;">
-          <div class="motion-demo-page-hero" style="opacity: 1; transform: none;">Hero</div>
-          <div class="motion-demo-page-content">
-            <div class="motion-demo-page-heading" style="opacity: 1; transform: none;"></div>
-            <div class="motion-demo-page-text" style="opacity: 1; transform: none;"></div>
-            <div class="motion-demo-page-text" style="opacity: 1; transform: none;"></div>
-            <div class="motion-demo-page-text" style="opacity: 1; transform: none;"></div>
-          </div>
-        </div>
-      </div>
-      <div class="demo-caption">Static page → Choreographed page load</div>
-    </div>
-  `;
-}
-
-function renderNormalizeDemo() {
-  return `
-    <div class="demo-container">
-      <div class="demo-header">
-        <span class="demo-title">Before / After</span>
-        <div class="demo-toggle">
-          <span class="demo-toggle-label active">Before</span>
-          <div class="demo-toggle-switch" data-demo="command-normalize"></div>
-          <span class="demo-toggle-label">After</span>
-        </div>
-      </div>
-      <div class="demo-viewport" data-state="before" id="command-normalize-viewport">
-        <div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px;">
-          <div style="padding: 12px 16px; background: #f0f0f0; border-radius: 6px;">
-            <div style="font-size: 14px; font-weight: 600; margin-bottom: 4px;">Card One</div>
-            <div style="font-size: 13px; color: #888;">Some description text here</div>
-          </div>
-          <div style="padding: 18px 12px; background: #e8e8e8; border-radius: 12px;">
-            <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">Card Two</div>
-            <div style="font-size: 14px; color: #666;">Different spacing and styles</div>
-          </div>
-          <div style="padding: 10px 20px; background: #f5f5f5; border-radius: 4px;">
-            <div style="font-size: 15px; font-weight: 700; margin-bottom: 2px;">Card Three</div>
-            <div style="font-size: 12px; color: #999;">Yet another variation</div>
-          </div>
-        </div>
-      </div>
-      <div class="demo-caption">Inconsistent styles → Systematic design tokens</div>
-    </div>
-  `;
-}
-
diff --git a/public/js/commands.js b/public/js/commands.js
index 7fc4eae7c..a68d2395a 100644
--- a/public/js/commands.js
+++ b/public/js/commands.js
@@ -2,13 +2,13 @@
 // COMMANDS - Rendering, workflow, and category logic
 // ============================================
 
-import { renderCommandDemo } from "./command-demos.js";
 import {
 	commandCategories,
 	commandProcessSteps,
 	commandRelationships,
 	readyCommands,
 } from "./data.js";
+import { renderCommandDemo } from "./demo-renderer.js";
 import { setupCommandDemoToggles } from "./demo-toggles.js";
 
 let currentCommand = null;
@@ -25,28 +25,43 @@ export function renderWorkflowDiagram(allCommands, onSelectCommand) {
 
 	// Group commands by category for the sidebar
 	const groups = {
-		production: ['audit', 'normalize', 'adapt', 'clarify', 'harden', 'optimize', 'polish'],
-		aesthetic: ['bolder', 'quieter', 'animate', 'delight', 'colorize', 'simplify'],
-		system: ['extract', 'onboard']
+		production: [
+			"audit",
+			"normalize",
+			"adapt",
+			"clarify",
+			"harden",
+			"optimize",
+			"polish",
+		],
+		aesthetic: [
+			"bolder",
+			"quieter",
+			"animate",
+			"delight",
+			"colorize",
+			"simplify",
+		],
+		system: ["extract", "onboard"],
 	};
 
 	const renderNavItem = (id) => {
 		const ready = isCommandReady(id);
-		return `<button class="command-nav-item ${!ready ? 'coming-soon' : ''}" data-command="${id}">/${id}${!ready ? '<span class="coming-soon-badge">Soon</span>' : ''}</button>`;
+		return `<button class="command-nav-item ${!ready ? "coming-soon" : ""}" data-command="${id}">/${id}${!ready ? '<span class="coming-soon-badge">Soon</span>' : ""}</button>`;
 	};
 
 	container.innerHTML = `
     <div class="command-nav-group">
       <span class="command-nav-label">Production</span>
-      ${groups.production.map(renderNavItem).join('')}
+      ${groups.production.map(renderNavItem).join("")}
     </div>
     <div class="command-nav-group">
       <span class="command-nav-label">Aesthetic</span>
-      ${groups.aesthetic.map(renderNavItem).join('')}
+      ${groups.aesthetic.map(renderNavItem).join("")}
     </div>
     <div class="command-nav-group">
       <span class="command-nav-label">System</span>
-      ${groups.system.map(renderNavItem).join('')}
+      ${groups.system.map(renderNavItem).join("")}
     </div>
   `;
 
diff --git a/public/js/demo-renderer.js b/public/js/demo-renderer.js
new file mode 100644
index 000000000..6c1089364
--- /dev/null
+++ b/public/js/demo-renderer.js
@@ -0,0 +1,129 @@
+// ============================================
+// DEMO RENDERER - Generic rendering for command and skill demos
+// ============================================
+
+import { getCommandDemo } from './demos/commands/index.js';
+import { getSkillDemo } from './demos/skills/index.js';
+
+/**
+ * Render a command demo
+ */
+export function renderCommandDemo(commandId) {
+  const demo = getCommandDemo(commandId);
+  
+  if (!demo) {
+    return `
+      <div class="demo-container">
+        <div class="demo-viewport">
+          <div style="text-align: center; color: var(--color-ash); font-style: italic; padding: var(--spacing-lg);">
+            Visual demo for /${commandId} coming soon
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  
+  const viewportClass = demo.viewportClass ? ` ${demo.viewportClass}` : '';
+  
+  return `
+    <div class="demo-container">
+      <div class="demo-header">
+        <div class="demo-toggle">
+          <span class="demo-toggle-label active">Before</span>
+          <div class="demo-toggle-switch" data-demo="command-${demo.id}"></div>
+          <span class="demo-toggle-label">After</span>
+        </div>
+      </div>
+      <div class="demo-viewport${viewportClass}" data-state="before" id="command-${demo.id}-viewport">
+        ${demo.before}
+      </div>
+      <div class="demo-caption">${demo.caption}</div>
+    </div>
+  `;
+}
+
+/**
+ * Render a skill demo (with tabs if multiple demos)
+ */
+export function renderSkillDemo(skillId) {
+  const skill = getSkillDemo(skillId);
+  
+  if (!skill || !skill.tabs || skill.tabs.length === 0) {
+    return `
+      <div class="demo-container">
+        <div class="demo-viewport">
+          <div style="text-align: center; color: var(--color-ash); padding: var(--spacing-xl);">
+            <p>Demo for ${skillId.replace(/-/g, ' ')} coming soon</p>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  
+  const showTabs = skill.tabs.length > 1;
+  
+  const tabs = showTabs ? skill.tabs.map((tab, i) => `
+    <button class="demo-tab ${i === 0 ? 'active' : ''}" data-demo-tab="${tab.id}" data-skill="${skillId}">
+      ${tab.label}
+    </button>
+  `).join('') : '';
+  
+  const panels = skill.tabs.map((tab, i) => `
+    <div class="demo-panel ${i === 0 ? 'active' : ''}" data-demo-panel="${tab.id}">
+      ${renderSkillTabDemo(skillId, tab)}
+    </div>
+  `).join('');
+  
+  return `
+    <div class="demo-tabbed-container">
+      ${showTabs ? `<div class="demo-tabs">${tabs}</div>` : ''}
+      <div class="demo-panels">
+        ${panels}
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Render a single skill tab demo
+ */
+function renderSkillTabDemo(skillId, tab) {
+  const hasToggle = tab.hasToggle !== false;
+  const demoId = `${skillId}-${tab.id}`;
+  
+  return `
+    <div class="demo-container">
+      <div class="demo-header">
+        ${hasToggle ? `
+          <div class="demo-toggle">
+            <span class="demo-toggle-label active">Before</span>
+            <div class="demo-toggle-switch" data-demo="${demoId}"></div>
+            <span class="demo-toggle-label">After</span>
+          </div>
+        ` : ''}
+      </div>
+      <div class="demo-viewport" data-state="before" id="${demoId}-viewport">
+        ${tab.before}
+      </div>
+      <div class="demo-caption">${tab.caption}</div>
+    </div>
+  `;
+}
+
+/**
+ * Setup demo tab switching
+ */
+export function setupDemoTabs() {
+  document.querySelectorAll('.demo-tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+      const tabId = tab.dataset.demoTab;
+      const container = tab.closest('.demo-tabbed-container');
+      
+      container.querySelectorAll('.demo-tab').forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+      
+      container.querySelectorAll('.demo-panel').forEach(p => p.classList.remove('active'));
+      container.querySelector(`[data-demo-panel="${tabId}"]`)?.classList.add('active');
+    });
+  });
+}
diff --git a/public/js/demo-toggles.js b/public/js/demo-toggles.js
index 23bdbc3a6..7aaaf5ed6 100644
--- a/public/js/demo-toggles.js
+++ b/public/js/demo-toggles.js
@@ -2,8 +2,18 @@
 // DEMO TOGGLES - Handle before/after toggle interactions
 // ============================================
 
+import { getCommandDemo } from './demos/commands/index.js';
+import { getSkillDemo } from './demos/skills/index.js';
+
+/**
+ * Setup toggle handlers for skill demos
+ */
 export function setupDemoToggles() {
   document.querySelectorAll('.demo-toggle-switch').forEach(toggle => {
+    // Skip if already has handler
+    if (toggle.dataset.initialized) return;
+    toggle.dataset.initialized = 'true';
+    
     toggle.addEventListener('click', () => {
       const demoId = toggle.dataset.demo;
       const isActive = toggle.classList.toggle('active');
@@ -22,8 +32,15 @@ export function setupDemoToggles() {
   setupInteractiveButtons();
 }
 
+/**
+ * Setup toggle handlers for command demos
+ */
 export function setupCommandDemoToggles(allCommands, selectCommand) {
   document.querySelectorAll('.command-demo-area .demo-toggle-switch').forEach(toggle => {
+    // Skip if already has handler
+    if (toggle.dataset.initialized) return;
+    toggle.dataset.initialized = 'true';
+    
     toggle.addEventListener('click', () => {
       const demoId = toggle.dataset.demo;
       const isActive = toggle.classList.toggle('active');
@@ -45,376 +62,93 @@ export function setupCommandDemoToggles(allCommands, selectCommand) {
   });
 }
 
+/**
+ * Setup interactive demo buttons (like the "like" button)
+ */
 function setupInteractiveButtons() {
-  // Like button feedback demo
   document.querySelectorAll('.int-fb-active[data-action="like"]').forEach(btn => {
+    if (btn.dataset.initialized) return;
+    btn.dataset.initialized = 'true';
+    
     btn.addEventListener('click', () => {
       btn.classList.toggle('liked');
       const label = btn.nextElementSibling;
       if (label) {
-        label.textContent = btn.classList.contains('liked') ? 'Liked!' : 'Click me!';
+        label.textContent = btn.classList.contains('liked') ? 'Liked!' : 'Click to try!';
       }
     });
   });
 }
 
+/**
+ * Handle skill demo toggle
+ */
 function handleDemoToggle(demoId, isAfter) {
   const viewport = document.getElementById(`${demoId}-viewport`);
   if (!viewport) return;
   
   viewport.dataset.state = isAfter ? 'after' : 'before';
   
-  // Handle specific demo transformations
-  switch (demoId) {
-    // UX Writing
-    case 'uxwriting-error':
-      toggleUXError(viewport, isAfter);
-      break;
-    case 'uxwriting-buttons':
-      toggleUXButtons(viewport, isAfter);
-      break;
-    case 'uxwriting-empty':
-      toggleUXEmpty(viewport, isAfter);
-      break;
-      
-    // Spatial Design
-    case 'spatial-grid':
-      toggleSpatialGrid(viewport, isAfter);
-      break;
-    case 'spatial-hierarchy':
-      toggleSpatialHierarchy(viewport, isAfter);
-      break;
-    case 'spatial-whitespace':
-      toggleSpatialWhitespace(viewport, isAfter);
-      break;
-      
-    // Motion Design
-    case 'motion-stagger':
-      toggleMotionStagger(viewport, isAfter);
-      break;
-    case 'motion-micro':
-      toggleMotionMicro(viewport, isAfter);
-      break;
-    case 'motion-transition':
-      toggleMotionTransition(viewport, isAfter);
-      break;
-      
-    // Typography
-    case 'typography-pairing':
-      toggleTypoPairing(viewport, isAfter);
-      break;
-    case 'typography-hierarchy':
-      toggleTypoHierarchy(viewport, isAfter);
-      break;
-      
-    // Interaction Design
-    case 'interaction-states':
-      // No content change needed - CSS handles it
-      break;
-    case 'interaction-affordance':
-      toggleAffordance(viewport, isAfter);
-      break;
-    case 'interaction-feedback':
-      toggleFeedback(viewport, isAfter);
-      break;
-      
-    // Color & Contrast
-    case 'color-palette':
-      toggleColorPalette(viewport, isAfter);
-      break;
-    case 'color-accent':
-      toggleColorAccent(viewport, isAfter);
-      break;
+  // Parse skill ID and tab ID from demoId (e.g., "ux-writing-errors")
+  const parts = demoId.split('-');
+  const tabId = parts.pop();
+  const skillId = parts.join('-');
+  
+  const skill = getSkillDemo(skillId);
+  if (!skill) return;
+  
+  const tab = skill.tabs.find(t => t.id === tabId);
+  if (!tab) return;
+  
+  // Check for custom toggle handler
+  if (tab.onToggle) {
+    tab.onToggle(viewport, isAfter);
+    return;
   }
-}
-
-// ========== UX WRITING ==========
-
-function toggleUXError(viewport, isAfter) {
-  const demo = viewport.querySelector('.uxw-demo');
-  if (!demo) return;
   
-  if (isAfter) {
-    demo.className = 'uxw-demo uxw-error-after';
-    demo.innerHTML = `
-      <div class="uxw-error-icon">🔐</div>
-      <div class="uxw-error-title">You don't have access</div>
-      <div class="uxw-error-text">Your session may have expired. Sign in again to continue.</div>
-      <div class="uxw-error-action">Sign in →</div>
-    `;
-  } else {
-    demo.className = 'uxw-demo uxw-error-before';
-    demo.innerHTML = `
-      <div class="uxw-error-icon">⚠</div>
-      <div class="uxw-error-title">Error 403</div>
-      <div class="uxw-error-text">Access denied. Authentication failure occurred.</div>
-    `;
+  // Check for CSS class toggle
+  if (tab.beforeClass && tab.afterClass) {
+    const demo = viewport.firstElementChild;
+    if (demo) {
+      demo.className = isAfter ? tab.afterClass : tab.beforeClass;
+    }
+    return;
   }
-}
-
-function toggleUXButtons(viewport, isAfter) {
-  const demo = viewport.querySelector('.uxw-demo');
-  if (!demo) return;
   
-  if (isAfter) {
-    demo.innerHTML = `
-      <div class="uxw-button-context">Delete account permanently?</div>
-      <div class="uxw-button-row">
-        <button class="uxw-btn uxw-btn-danger">Delete My Account</button>
-        <button class="uxw-btn uxw-btn-secondary">Keep Account</button>
-      </div>
-    `;
-  } else {
-    demo.innerHTML = `
-      <div class="uxw-button-context">Delete account permanently?</div>
-      <div class="uxw-button-row">
-        <button class="uxw-btn uxw-btn-primary">Submit</button>
-        <button class="uxw-btn uxw-btn-secondary">Cancel</button>
-      </div>
-    `;
-  }
-}
-
-function toggleUXEmpty(viewport, isAfter) {
-  const demo = viewport.querySelector('.uxw-demo');
-  if (!demo) return;
-  
-  if (isAfter) {
-    demo.className = 'uxw-demo uxw-empty-after';
-    demo.innerHTML = `
-      <div class="uxw-empty-icon">📝</div>
-      <div class="uxw-empty-title">No projects yet</div>
-      <div class="uxw-empty-text">Create your first project to get started.</div>
-      <div class="uxw-empty-action"><button class="uxw-btn uxw-btn-primary">Create Project</button></div>
-    `;
-  } else {
-    demo.className = 'uxw-demo uxw-empty-before';
-    demo.innerHTML = `
-      <div class="uxw-empty-icon">📁</div>
-      <div class="uxw-empty-title">No items</div>
-    `;
-  }
-}
-
-// ========== SPATIAL DESIGN ==========
-
-function toggleSpatialGrid(viewport, isAfter) {
-  const demo = viewport.querySelector('.spatial-demo');
-  if (!demo) return;
-  
-  demo.className = isAfter ? 'spatial-demo spatial-grid-after' : 'spatial-demo spatial-grid-before';
-  
-  // Reset inline styles on children
-  demo.querySelectorAll('.spatial-card-item').forEach((item, i) => {
-    item.style.width = isAfter ? '' : ['45%', '30%', '55%', '25%'][i];
-  });
-}
-
-function toggleSpatialHierarchy(viewport, isAfter) {
-  const demo = viewport.querySelector('.spatial-demo');
-  if (!demo) return;
-  
-  demo.className = isAfter ? 'spatial-demo spatial-hierarchy-after' : 'spatial-demo spatial-hierarchy-before';
-}
-
-function toggleSpatialWhitespace(viewport, isAfter) {
-  const demo = viewport.querySelector('.spatial-demo');
-  if (!demo) return;
-  
-  demo.className = isAfter ? 'spatial-demo spatial-whitespace-after' : 'spatial-demo spatial-whitespace-before';
-}
-
-// ========== MOTION DESIGN ==========
-
-function toggleMotionStagger(viewport, isAfter) {
-  if (isAfter) {
-    // Trigger re-animation by cloning elements
-    const items = viewport.querySelectorAll('.motion-list-item');
-    items.forEach(item => {
-      const clone = item.cloneNode(true);
-      item.parentNode.replaceChild(clone, item);
-    });
-  }
-}
-
-function toggleMotionMicro(viewport, isAfter) {
-  const btn = viewport.querySelector('.motion-btn');
-  if (!btn) return;
-  
-  btn.className = isAfter ? 'motion-btn motion-btn-after' : 'motion-btn motion-btn-before';
-}
-
-function toggleMotionTransition(viewport, isAfter) {
-  const card = viewport.querySelector('.motion-card');
-  if (!card) return;
-  
-  card.className = isAfter ? 'motion-card motion-card-after' : 'motion-card motion-card-before';
-  
-  if (isAfter) {
-    card.querySelector('.motion-card-icon').textContent = '✓';
-    card.querySelector('.motion-card-text').textContent = 'Order Confirmed';
-  } else {
-    card.querySelector('.motion-card-icon').textContent = '📦';
-    card.querySelector('.motion-card-text').textContent = 'Order Placed';
-  }
-}
-
-// ========== TYPOGRAPHY ==========
-
-function toggleTypoPairing(viewport, isAfter) {
-  const demo = viewport.querySelector('.typo-demo');
-  if (!demo) return;
-  
-  demo.className = isAfter ? 'typo-demo typo-pairing-after' : 'typo-demo typo-pairing-before';
-}
-
-function toggleTypoHierarchy(viewport, isAfter) {
-  const demo = viewport.querySelector('.typo-demo');
-  if (!demo) return;
-  
-  demo.className = isAfter ? 'typo-demo typo-hierarchy-after' : 'typo-demo typo-hierarchy-before';
-}
-
-// ========== INTERACTION DESIGN ==========
-
-function toggleAffordance(viewport, isAfter) {
-  const demo = viewport.querySelector('.int-demo');
-  if (!demo) return;
-  
-  demo.className = isAfter ? 'int-demo int-affordance-after' : 'int-demo int-affordance-before';
-}
-
-function toggleFeedback(viewport, isAfter) {
-  const demo = viewport.querySelector('.int-demo');
-  if (!demo) return;
-  
-  if (isAfter) {
-    demo.className = 'int-demo int-feedback-after';
-    demo.innerHTML = `
-      <button class="int-fb-btn int-fb-active" data-action="like">
-        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
-      </button>
-      <span class="int-fb-label">Click to try!</span>
-    `;
-    // Re-setup interactive button
-    setupInteractiveButtons();
-  } else {
-    demo.className = 'int-demo int-feedback-before';
-    demo.innerHTML = `
-      <button class="int-fb-btn int-fb-silent">
-        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
-      </button>
-      <span class="int-fb-label">Click — nothing happens</span>
-    `;
-  }
-}
-
-// ========== COLOR & CONTRAST ==========
-
-function toggleColorPalette(viewport, isAfter) {
-  const demo = viewport.querySelector('.color-demo');
-  if (!demo) return;
-  
-  demo.className = isAfter ? 'color-demo color-palette-after' : 'color-demo color-palette-before';
-}
-
-function toggleColorAccent(viewport, isAfter) {
-  const demo = viewport.querySelector('.color-demo');
-  if (!demo) return;
-  
-  demo.className = isAfter ? 'color-demo color-accent-after' : 'color-demo color-accent-before';
-}
-
-// ========== COMMAND DEMOS ==========
-
-function handleCommandDemoToggle(demoId, isAfter) {
-  switch (demoId) {
-    case 'command-bolder':
-      handleBolderDemo(isAfter);
-      break;
-    case 'command-animate':
-      handleAnimateDemo(isAfter);
-      break;
-    case 'command-normalize':
-      handleNormalizeDemo(isAfter);
-      break;
-  }
-}
-
-function handleBolderDemo(isAfter) {
-  const viewport = document.getElementById('command-bolder-viewport');
-  if (!viewport) return;
-  
-  if (isAfter) {
-    viewport.innerHTML = `
-      <div style="text-align: center; padding: var(--s-lg); max-width: 320px;">
-        <div style="font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; font-style: italic; margin-bottom: 12px; color: var(--c-text); line-height: 1;">Introducing Our Product</div>
-        <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--c-accent); margin-bottom: 24px;">A solution for modern teams</div>
-        <button style="padding: 14px 32px; background: var(--c-text); color: var(--c-paper); border: none; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em;">Learn More</button>
-      </div>
-    `;
-  } else {
-    viewport.innerHTML = `
-      <div style="text-align: center; padding: var(--s-md); max-width: 280px;">
-        <div style="font-size: 1.125rem; font-weight: 500; margin-bottom: 8px; color: var(--c-charcoal);">Introducing Our Product</div>
-        <div style="font-size: 0.875rem; color: var(--c-ash); margin-bottom: 16px;">A solution for modern teams</div>
-        <button style="padding: 8px 16px; background: var(--c-mist); color: var(--c-charcoal); border: none; border-radius: 4px; font-size: 0.875rem;">Learn More</button>
-      </div>
-    `;
-  }
-}
-
-function handleAnimateDemo(isAfter) {
-  const viewport = document.getElementById('command-animate-viewport');
-  if (viewport) {
-    viewport.dataset.state = isAfter ? 'after' : 'before';
-    if (isAfter) {
-      const page = viewport.querySelector('.motion-demo-page');
-      if (page) {
-        const clone = page.cloneNode(true);
-        page.parentNode.replaceChild(clone, page);
-      }
+  // HTML swap
+  if (tab.after && tab.before) {
+    viewport.innerHTML = isAfter ? tab.after : tab.before;
+    
+    // Run after-render callback if exists
+    if (isAfter && tab.onAfterRender) {
+      tab.onAfterRender();
     }
   }
 }
 
-function handleNormalizeDemo(isAfter) {
-  const viewport = document.getElementById('command-normalize-viewport');
+/**
+ * Handle command demo toggle
+ */
+function handleCommandDemoToggle(demoId, isAfter) {
+  // Extract command ID from demoId (e.g., "command-normalize" -> "normalize")
+  const commandId = demoId.replace('command-', '');
+  const demo = getCommandDemo(commandId);
+  
+  if (!demo) return;
+  
+  const viewport = document.getElementById(`${demoId}-viewport`);
   if (!viewport) return;
   
-  if (isAfter) {
-    viewport.innerHTML = `
-      <div style="display: flex; flex-direction: column; gap: var(--s-sm); width: 100%; max-width: 260px;">
-        <div style="padding: var(--s-md); background: var(--c-bg); border-radius: 4px; border-left: 2px solid var(--c-accent);">
-          <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--c-text);">Card One</div>
-          <div style="font-size: 0.8125rem; color: var(--c-ash);">Consistent description text</div>
-        </div>
-        <div style="padding: var(--s-md); background: var(--c-bg); border-radius: 4px; border-left: 2px solid var(--c-accent);">
-          <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--c-text);">Card Two</div>
-          <div style="font-size: 0.8125rem; color: var(--c-ash);">Same spacing and styles</div>
-        </div>
-        <div style="padding: var(--s-md); background: var(--c-bg); border-radius: 4px; border-left: 2px solid var(--c-accent);">
-          <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--c-text);">Card Three</div>
-          <div style="font-size: 0.8125rem; color: var(--c-ash);">Unified design system</div>
-        </div>
-      </div>
-    `;
-  } else {
-    viewport.innerHTML = `
-      <div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px;">
-        <div style="padding: 12px 16px; background: #f0f0f0; border-radius: 6px;">
-          <div style="font-size: 14px; font-weight: 600; margin-bottom: 4px;">Card One</div>
-          <div style="font-size: 13px; color: #888;">Some description text here</div>
-        </div>
-        <div style="padding: 18px 12px; background: #e8e8e8; border-radius: 12px;">
-          <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">Card Two</div>
-          <div style="font-size: 14px; color: #666;">Different spacing and styles</div>
-        </div>
-        <div style="padding: 10px 20px; background: #f5f5f5; border-radius: 4px;">
-          <div style="font-size: 15px; font-weight: 700; margin-bottom: 2px;">Card Three</div>
-          <div style="font-size: 12px; color: #999;">Yet another variation</div>
-        </div>
-      </div>
-    `;
+  viewport.dataset.state = isAfter ? 'after' : 'before';
+  
+  // Check for custom toggle handler
+  if (demo.onToggle) {
+    demo.onToggle(viewport, isAfter);
+    return;
+  }
+  
+  // HTML swap
+  if (demo.after && demo.before) {
+    viewport.innerHTML = isAfter ? demo.after : demo.before;
   }
 }
diff --git a/public/js/demos/commands/animate.js b/public/js/demos/commands/animate.js
new file mode 100644
index 000000000..fc355c805
--- /dev/null
+++ b/public/js/demos/commands/animate.js
@@ -0,0 +1,36 @@
+// Animate command demo - shows static page becoming choreographed
+export default {
+  id: 'animate',
+  caption: 'Static page → Choreographed page load',
+  
+  // This demo uses CSS animations triggered by data-state attribute
+  // The before/after states are the same HTML, animation is CSS-driven
+  before: `
+    <div class="motion-demo-page" style="opacity: 1;">
+      <div class="motion-demo-page-hero" style="opacity: 1; transform: none;">Hero</div>
+      <div class="motion-demo-page-content">
+        <div class="motion-demo-page-heading" style="opacity: 1; transform: none;"></div>
+        <div class="motion-demo-page-text" style="opacity: 1; transform: none;"></div>
+        <div class="motion-demo-page-text" style="opacity: 1; transform: none;"></div>
+        <div class="motion-demo-page-text" style="opacity: 1; transform: none;"></div>
+      </div>
+    </div>
+  `,
+  
+  after: null, // Uses CSS animation, no HTML change needed
+  
+  // Custom toggle handler for animation re-triggering
+  onToggle: (viewport, isAfter) => {
+    viewport.dataset.state = isAfter ? 'after' : 'before';
+    if (isAfter) {
+      // Re-trigger animation by cloning the element
+      const page = viewport.querySelector('.motion-demo-page');
+      if (page) {
+        const clone = page.cloneNode(true);
+        page.parentNode.replaceChild(clone, page);
+      }
+    }
+  },
+  
+  viewportClass: 'demo-viewport-dark'
+};
diff --git a/public/js/demos/commands/bolder.js b/public/js/demos/commands/bolder.js
new file mode 100644
index 000000000..267f871c0
--- /dev/null
+++ b/public/js/demos/commands/bolder.js
@@ -0,0 +1,21 @@
+// Bolder command demo - shows timid design becoming bold and confident
+export default {
+  id: 'bolder',
+  caption: 'Timid design → Bold, confident design',
+  
+  before: `
+    <div style="text-align: center; padding: var(--spacing-md); max-width: 280px;">
+      <div style="font-size: 1.125rem; font-weight: 500; margin-bottom: 8px; color: var(--color-charcoal);">Introducing Our Product</div>
+      <div style="font-size: 0.875rem; color: var(--color-ash); margin-bottom: 16px;">A solution for modern teams</div>
+      <button style="padding: 8px 16px; background: var(--color-mist); color: var(--color-charcoal); border: none; border-radius: 4px; font-size: 0.875rem;">Learn More</button>
+    </div>
+  `,
+  
+  after: `
+    <div style="text-align: center; padding: var(--spacing-lg); max-width: 320px;">
+      <div style="font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; font-style: italic; margin-bottom: 12px; color: var(--color-ink); line-height: 1;">Introducing Our Product</div>
+      <div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: 24px;">A solution for modern teams</div>
+      <button style="padding: 14px 32px; background: var(--color-ink); color: var(--color-paper); border: none; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em;">Learn More</button>
+    </div>
+  `
+};
diff --git a/public/js/demos/commands/index.js b/public/js/demos/commands/index.js
new file mode 100644
index 000000000..7fef11e41
--- /dev/null
+++ b/public/js/demos/commands/index.js
@@ -0,0 +1,15 @@
+// Command demos registry
+
+import animate from "./animate.js";
+import bolder from "./bolder.js";
+import normalize from "./normalize.js";
+
+export const commandDemos = {
+	normalize,
+	bolder,
+	animate,
+};
+
+export function getCommandDemo(commandId) {
+	return commandDemos[commandId] || null;
+}
diff --git a/public/js/demos/commands/normalize.js b/public/js/demos/commands/normalize.js
new file mode 100644
index 000000000..8aa2c78f8
--- /dev/null
+++ b/public/js/demos/commands/normalize.js
@@ -0,0 +1,39 @@
+// Normalize command demo - shows inconsistent styles becoming systematic
+export default {
+  id: 'normalize',
+  caption: 'Inconsistent styles → Systematic design tokens',
+  
+  before: `
+    <div style="display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px;">
+      <div style="padding: 12px 16px; background: #f0f0f0; border-radius: 6px;">
+        <div style="font-size: 14px; font-weight: 600; margin-bottom: 4px;">Card One</div>
+        <div style="font-size: 13px; color: #888;">Some description text here</div>
+      </div>
+      <div style="padding: 18px 12px; background: #e8e8e8; border-radius: 12px;">
+        <div style="font-size: 16px; font-weight: 500; margin-bottom: 8px;">Card Two</div>
+        <div style="font-size: 14px; color: #666;">Different spacing and styles</div>
+      </div>
+      <div style="padding: 10px 20px; background: #f5f5f5; border-radius: 4px;">
+        <div style="font-size: 15px; font-weight: 700; margin-bottom: 2px;">Card Three</div>
+        <div style="font-size: 12px; color: #999;">Yet another variation</div>
+      </div>
+    </div>
+  `,
+  
+  after: `
+    <div style="display: flex; flex-direction: column; gap: var(--spacing-sm); width: 100%; max-width: 260px;">
+      <div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
+        <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card One</div>
+        <div style="font-size: 0.8125rem; color: var(--color-ash);">Consistent description text</div>
+      </div>
+      <div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
+        <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card Two</div>
+        <div style="font-size: 0.8125rem; color: var(--color-ash);">Same spacing and styles</div>
+      </div>
+      <div style="padding: var(--spacing-md); background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
+        <div style="font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; color: var(--color-ink);">Card Three</div>
+        <div style="font-size: 0.8125rem; color: var(--color-ash);">Unified design system</div>
+      </div>
+    </div>
+  `
+};
diff --git a/public/js/demos/index.js b/public/js/demos/index.js
new file mode 100644
index 000000000..5bdfe8a5c
--- /dev/null
+++ b/public/js/demos/index.js
@@ -0,0 +1,3 @@
+// Main demos registry - exports all demos
+export { commandDemos, getCommandDemo } from "./commands/index.js";
+export { getSkillDemo, skillDemos } from "./skills/index.js";
diff --git a/public/js/demos/skills/color-and-contrast.js b/public/js/demos/skills/color-and-contrast.js
new file mode 100644
index 000000000..0f503755e
--- /dev/null
+++ b/public/js/demos/skills/color-and-contrast.js
@@ -0,0 +1,65 @@
+// Color and Contrast skill demos
+export default {
+  id: 'color-and-contrast',
+  tabs: [
+    {
+      id: 'palette',
+      label: 'Color Harmony',
+      caption: 'Clashing colors vs harmonious palette',
+      beforeClass: 'color-demo color-palette-before',
+      afterClass: 'color-demo color-palette-after',
+      before: `
+        <div class="color-demo color-palette-before">
+          <div class="color-swatch swatch-1"></div>
+          <div class="color-swatch swatch-2"></div>
+          <div class="color-swatch swatch-3"></div>
+          <div class="color-swatch swatch-4"></div>
+          <div class="color-swatch swatch-5"></div>
+          <div class="color-card">
+            <span class="card-title">Title</span>
+            <span class="card-subtitle">Subtitle</span>
+            <button class="card-btn">Action</button>
+          </div>
+        </div>
+      `,
+      after: null // Uses CSS class toggle
+    },
+    {
+      id: 'accent',
+      label: 'Strategic Accent',
+      caption: 'Monochrome monotony vs strategic accent',
+      beforeClass: 'color-demo color-accent-before',
+      afterClass: 'color-demo color-accent-after',
+      before: `
+        <div class="color-demo color-accent-before">
+          <div class="color-accent-card">
+            <div class="color-accent-title">Premium Plan</div>
+            <div class="color-accent-text">Unlock all features and get priority support.</div>
+            <button class="color-accent-btn">Upgrade Now</button>
+          </div>
+        </div>
+      `,
+      after: null // Uses CSS class toggle
+    },
+    {
+      id: 'contrast',
+      label: 'Contrast Ratios',
+      caption: 'Accessibility failures vs WCAG compliance',
+      hasToggle: false, // Static comparison
+      before: `
+        <div class="color-demo color-contrast-static">
+          <div class="contrast-example contrast-fail">
+            <span class="contrast-badge">Fails WCAG</span>
+            <div class="contrast-text">Hard to Read</div>
+            <div class="contrast-ratio">2.5:1</div>
+          </div>
+          <div class="contrast-example contrast-pass">
+            <span class="contrast-badge">Passes AAA</span>
+            <div class="contrast-text">Easy to Read</div>
+            <div class="contrast-ratio">12.6:1</div>
+          </div>
+        </div>
+      `
+    }
+  ]
+};
diff --git a/public/js/demos/skills/index.js b/public/js/demos/skills/index.js
new file mode 100644
index 000000000..107b339db
--- /dev/null
+++ b/public/js/demos/skills/index.js
@@ -0,0 +1,23 @@
+// Skill demos registry
+
+import colorAndContrast from "./color-and-contrast.js";
+import interactionDesign from "./interaction-design.js";
+import motionDesign from "./motion-design.js";
+import responsiveDesign from "./responsive-design.js";
+import spatialDesign from "./spatial-design.js";
+import typography from "./typography.js";
+import uxWriting from "./ux-writing.js";
+
+export const skillDemos = {
+	"ux-writing": uxWriting,
+	"spatial-design": spatialDesign,
+	"motion-design": motionDesign,
+	typography: typography,
+	"interaction-design": interactionDesign,
+	"color-and-contrast": colorAndContrast,
+	"responsive-design": responsiveDesign,
+};
+
+export function getSkillDemo(skillId) {
+	return skillDemos[skillId] || null;
+}
diff --git a/public/js/demos/skills/interaction-design.js b/public/js/demos/skills/interaction-design.js
new file mode 100644
index 000000000..d27c14544
--- /dev/null
+++ b/public/js/demos/skills/interaction-design.js
@@ -0,0 +1,76 @@
+// Interaction Design skill demos
+export default {
+  id: 'interaction-design',
+  tabs: [
+    {
+      id: 'states',
+      label: 'Button States',
+      caption: 'Missing states vs complete interaction feedback',
+      // This demo shows both states side-by-side, no toggle needed
+      hasToggle: false,
+      before: `
+        <div class="int-demo int-states-demo">
+          <div class="int-state-row">
+            <span class="int-state-label">Poor</span>
+            <button class="int-btn int-btn-poor">Click Me</button>
+          </div>
+          <div class="int-state-row">
+            <span class="int-state-label">Good</span>
+            <button class="int-btn int-btn-good">Click Me</button>
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'affordance',
+      label: 'Affordances',
+      caption: 'Unclear actions vs obvious clickability',
+      beforeClass: 'int-demo int-affordance-before',
+      afterClass: 'int-demo int-affordance-after',
+      before: `
+        <div class="int-demo int-affordance-before">
+          <div class="int-aff-item int-aff-poor">
+            <span>Learn more</span>
+          </div>
+          <div class="int-aff-item int-aff-poor">
+            <span>Settings</span>
+          </div>
+        </div>
+      `,
+      after: null // Uses CSS class toggle
+    },
+    {
+      id: 'feedback',
+      label: 'Feedback',
+      caption: 'Silent actions vs immediate confirmation',
+      before: `
+        <div class="int-demo int-feedback-before">
+          <button class="int-fb-btn int-fb-silent">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+          </button>
+          <span class="int-fb-label">Click — nothing happens</span>
+        </div>
+      `,
+      after: `
+        <div class="int-demo int-feedback-after">
+          <button class="int-fb-btn int-fb-active" data-action="like">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+          </button>
+          <span class="int-fb-label">Click to try!</span>
+        </div>
+      `,
+      onAfterRender: () => {
+        // Setup interactive like button
+        document.querySelectorAll('.int-fb-active[data-action="like"]').forEach(btn => {
+          btn.addEventListener('click', () => {
+            btn.classList.toggle('liked');
+            const label = btn.nextElementSibling;
+            if (label) {
+              label.textContent = btn.classList.contains('liked') ? 'Liked!' : 'Click to try!';
+            }
+          });
+        });
+      }
+    }
+  ]
+};
diff --git a/public/js/demos/skills/motion-design.js b/public/js/demos/skills/motion-design.js
new file mode 100644
index 000000000..7e7482f72
--- /dev/null
+++ b/public/js/demos/skills/motion-design.js
@@ -0,0 +1,66 @@
+// Motion Design skill demos
+export default {
+  id: 'motion-design',
+  tabs: [
+    {
+      id: 'stagger',
+      label: 'Staggered Reveal',
+      caption: 'Instant appearance vs orchestrated reveal',
+      before: `
+        <div class="motion-demo motion-stagger-demo">
+          <div class="motion-list-item"><span class="motion-dot"></span>Dashboard</div>
+          <div class="motion-list-item"><span class="motion-dot"></span>Analytics</div>
+          <div class="motion-list-item"><span class="motion-dot"></span>Settings</div>
+          <div class="motion-list-item"><span class="motion-dot"></span>Profile</div>
+        </div>
+      `,
+      after: null, // CSS animation triggered by data-state
+      onToggle: (viewport, isAfter) => {
+        if (isAfter) {
+          // Re-trigger animation by cloning elements
+          const items = viewport.querySelectorAll('.motion-list-item');
+          items.forEach(item => {
+            const clone = item.cloneNode(true);
+            item.parentNode.replaceChild(clone, item);
+          });
+        }
+      }
+    },
+    {
+      id: 'micro',
+      label: 'Micro-interactions',
+      caption: 'Static button vs responsive feedback',
+      before: `
+        <div class="motion-demo motion-micro-demo">
+          <button class="motion-btn motion-btn-before">Add to Cart</button>
+        </div>
+      `,
+      after: `
+        <div class="motion-demo motion-micro-demo">
+          <button class="motion-btn motion-btn-after">Add to Cart</button>
+        </div>
+      `
+    },
+    {
+      id: 'transition',
+      label: 'State Changes',
+      caption: 'Jarring change vs smooth transition',
+      before: `
+        <div class="motion-demo motion-transition-demo">
+          <div class="motion-card motion-card-before">
+            <div class="motion-card-icon">📦</div>
+            <div class="motion-card-text">Order Placed</div>
+          </div>
+        </div>
+      `,
+      after: `
+        <div class="motion-demo motion-transition-demo">
+          <div class="motion-card motion-card-after">
+            <div class="motion-card-icon">✓</div>
+            <div class="motion-card-text">Order Confirmed</div>
+          </div>
+        </div>
+      `
+    }
+  ]
+};
diff --git a/public/js/demos/skills/responsive-design.js b/public/js/demos/skills/responsive-design.js
new file mode 100644
index 000000000..c161ed1b9
--- /dev/null
+++ b/public/js/demos/skills/responsive-design.js
@@ -0,0 +1,88 @@
+// Responsive Design skill demos
+export default {
+  id: 'responsive-design',
+  tabs: [
+    {
+      id: 'touch',
+      label: 'Touch Targets',
+      caption: 'Tiny targets vs accessible touch areas',
+      hasToggle: false, // Static comparison
+      before: `
+        <div class="resp-demo resp-touch-demo">
+          <div class="resp-touch-row">
+            <span class="resp-label">Too Small</span>
+            <div class="resp-touch-targets resp-touch-bad">
+              <button>×</button>
+              <button>−</button>
+              <button>+</button>
+            </div>
+          </div>
+          <div class="resp-touch-row">
+            <span class="resp-label">Accessible</span>
+            <div class="resp-touch-targets resp-touch-good">
+              <button>×</button>
+              <button>−</button>
+              <button>+</button>
+            </div>
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'fluid',
+      label: 'Fluid Layout',
+      caption: 'Fixed breakage vs fluid adaptation',
+      hasToggle: false, // Static comparison
+      before: `
+        <div class="resp-demo resp-fluid-demo">
+          <div class="resp-fluid-container">
+            <div class="resp-fluid-fixed">
+              <span>Fixed 400px</span>
+              <div class="resp-fluid-bar" style="width: 400px; max-width: 100%;"></div>
+            </div>
+            <div class="resp-fluid-adaptive">
+              <span>Fluid 80%</span>
+              <div class="resp-fluid-bar" style="width: 80%;"></div>
+            </div>
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'adapt',
+      label: 'Adaptive Content',
+      caption: 'Same layout vs optimized for context',
+      hasToggle: false, // Static comparison
+      before: `
+        <div class="resp-demo resp-adapt-demo">
+          <div class="resp-device resp-device-mobile">
+            <div class="resp-device-screen">
+              <div class="resp-block resp-header"></div>
+              <div class="resp-block resp-content"></div>
+            </div>
+            <span>Mobile</span>
+          </div>
+          <div class="resp-device resp-device-tablet">
+            <div class="resp-device-screen">
+              <div class="resp-block resp-header"></div>
+              <div class="resp-block-row">
+                <div class="resp-block resp-content"></div>
+                <div class="resp-block resp-content"></div>
+              </div>
+            </div>
+            <span>Tablet</span>
+          </div>
+          <div class="resp-device resp-device-desktop">
+            <div class="resp-device-screen">
+              <div class="resp-block-row">
+                <div class="resp-block resp-sidebar"></div>
+                <div class="resp-block resp-content"></div>
+              </div>
+            </div>
+            <span>Desktop</span>
+          </div>
+        </div>
+      `
+    }
+  ]
+};
diff --git a/public/js/demos/skills/spatial-design.js b/public/js/demos/skills/spatial-design.js
new file mode 100644
index 000000000..febc0de8c
--- /dev/null
+++ b/public/js/demos/skills/spatial-design.js
@@ -0,0 +1,59 @@
+// Spatial Design skill demos
+export default {
+  id: 'spatial-design',
+  tabs: [
+    {
+      id: 'grid',
+      label: 'Grid Systems',
+      caption: 'Chaotic placement vs intentional grid alignment',
+      before: `
+        <div class="spatial-demo spatial-grid-before">
+          <div class="spatial-card-item" style="width: 45%;">Card One</div>
+          <div class="spatial-card-item" style="width: 30%;">Card Two</div>
+          <div class="spatial-card-item" style="width: 55%;">Card Three</div>
+          <div class="spatial-card-item" style="width: 25%;">Card Four</div>
+        </div>
+      `,
+      after: `
+        <div class="spatial-demo spatial-grid-after">
+          <div class="spatial-card-item">Card One</div>
+          <div class="spatial-card-item">Card Two</div>
+          <div class="spatial-card-item">Card Three</div>
+          <div class="spatial-card-item">Card Four</div>
+        </div>
+      `
+    },
+    {
+      id: 'hierarchy',
+      label: 'Visual Weight',
+      caption: 'Equal weight vs clear visual priority',
+      beforeClass: 'spatial-demo spatial-hierarchy-before',
+      afterClass: 'spatial-demo spatial-hierarchy-after',
+      before: `
+        <div class="spatial-demo spatial-hierarchy-before">
+          <div class="spatial-h-title">Welcome Back</div>
+          <div class="spatial-h-subtitle">Dashboard</div>
+          <div class="spatial-h-cta">View Reports</div>
+          <div class="spatial-h-link">Settings</div>
+        </div>
+      `,
+      after: null // Uses CSS class toggle
+    },
+    {
+      id: 'whitespace',
+      label: 'Breathing Room',
+      caption: 'Cramped elements vs comfortable spacing',
+      beforeClass: 'spatial-demo spatial-whitespace-before',
+      afterClass: 'spatial-demo spatial-whitespace-after',
+      before: `
+        <div class="spatial-demo spatial-whitespace-before">
+          <div class="spatial-ws-title">Premium Plan</div>
+          <div class="spatial-ws-price">$29/mo</div>
+          <div class="spatial-ws-features">Unlimited projects • Priority support • Advanced analytics</div>
+          <button class="spatial-ws-btn">Upgrade Now</button>
+        </div>
+      `,
+      after: null // Uses CSS class toggle
+    }
+  ]
+};
diff --git a/public/js/demos/skills/typography.js b/public/js/demos/skills/typography.js
new file mode 100644
index 000000000..fd60389d6
--- /dev/null
+++ b/public/js/demos/skills/typography.js
@@ -0,0 +1,35 @@
+// Typography skill demos
+export default {
+  id: 'typography',
+  tabs: [
+    {
+      id: 'pairing',
+      label: 'Font Pairing',
+      caption: 'Generic system fonts vs distinctive pairing',
+      beforeClass: 'typo-demo typo-pairing-before',
+      afterClass: 'typo-demo typo-pairing-after',
+      before: `
+        <div class="typo-demo typo-pairing-before">
+          <div class="typo-heading">Welcome to the Future</div>
+          <div class="typo-body">Experience innovation like never before with our cutting-edge platform designed for modern teams.</div>
+        </div>
+      `,
+      after: null // Uses CSS class toggle
+    },
+    {
+      id: 'hierarchy',
+      label: 'Scale & Hierarchy',
+      caption: 'Flat sizing vs dramatic scale contrast',
+      beforeClass: 'typo-demo typo-hierarchy-before',
+      afterClass: 'typo-demo typo-hierarchy-after',
+      before: `
+        <div class="typo-demo typo-hierarchy-before">
+          <div class="typo-h1">Article Title</div>
+          <div class="typo-meta">Published January 2025</div>
+          <div class="typo-p">This is the body text of the article containing the main content and ideas.</div>
+        </div>
+      `,
+      after: null // Uses CSS class toggle
+    }
+  ]
+};
diff --git a/public/js/demos/skills/ux-writing.js b/public/js/demos/skills/ux-writing.js
new file mode 100644
index 000000000..b3ab4cab8
--- /dev/null
+++ b/public/js/demos/skills/ux-writing.js
@@ -0,0 +1,68 @@
+// UX Writing skill demos
+export default {
+  id: 'ux-writing',
+  tabs: [
+    {
+      id: 'errors',
+      label: 'Error Messages',
+      caption: 'Technical jargon vs human, actionable guidance',
+      before: `
+        <div class="uxw-demo uxw-error-before">
+          <div class="uxw-error-icon">⚠</div>
+          <div class="uxw-error-title">Error 403</div>
+          <div class="uxw-error-text">Access denied. Authentication failure occurred.</div>
+        </div>
+      `,
+      after: `
+        <div class="uxw-demo uxw-error-after">
+          <div class="uxw-error-icon">🔐</div>
+          <div class="uxw-error-title">You don't have access</div>
+          <div class="uxw-error-text">Your session may have expired. Sign in again to continue.</div>
+          <div class="uxw-error-action">Sign in →</div>
+        </div>
+      `
+    },
+    {
+      id: 'buttons',
+      label: 'Button Labels',
+      caption: 'Vague labels vs clear, specific actions',
+      before: `
+        <div class="uxw-demo uxw-buttons-before">
+          <div class="uxw-button-context">Delete account permanently?</div>
+          <div class="uxw-button-row">
+            <button class="uxw-btn uxw-btn-primary">Submit</button>
+            <button class="uxw-btn uxw-btn-secondary">Cancel</button>
+          </div>
+        </div>
+      `,
+      after: `
+        <div class="uxw-demo uxw-buttons-after">
+          <div class="uxw-button-context">Delete account permanently?</div>
+          <div class="uxw-button-row">
+            <button class="uxw-btn uxw-btn-danger">Delete My Account</button>
+            <button class="uxw-btn uxw-btn-secondary">Keep Account</button>
+          </div>
+        </div>
+      `
+    },
+    {
+      id: 'empty',
+      label: 'Empty States',
+      caption: 'Blank nothing vs helpful, encouraging guidance',
+      before: `
+        <div class="uxw-demo uxw-empty-before">
+          <div class="uxw-empty-icon">📁</div>
+          <div class="uxw-empty-title">No items</div>
+        </div>
+      `,
+      after: `
+        <div class="uxw-demo uxw-empty-after">
+          <div class="uxw-empty-icon">📝</div>
+          <div class="uxw-empty-title">No projects yet</div>
+          <div class="uxw-empty-text">Create your first project to get started.</div>
+          <div class="uxw-empty-action"><button class="uxw-btn uxw-btn-primary">Create Project</button></div>
+        </div>
+      `
+    }
+  ]
+};
diff --git a/public/js/skill-demos.js b/public/js/skill-demos.js
deleted file mode 100644
index 369222b90..000000000
--- a/public/js/skill-demos.js
+++ /dev/null
@@ -1,386 +0,0 @@
-// ============================================
-// SKILL DEMOS - Interactive before/after demonstrations
-// Each skill has multiple demos selectable via tabs
-// ============================================
-
-// Demo definitions for each skill
-const skillDemoDefinitions = {
-  'ux-writing': [
-    { id: 'errors', label: 'Error Messages', demo: 'uxwriting-error' },
-    { id: 'buttons', label: 'Button Labels', demo: 'uxwriting-buttons' },
-    { id: 'empty', label: 'Empty States', demo: 'uxwriting-empty' }
-  ],
-  'spatial-design': [
-    { id: 'grid', label: 'Grid Systems', demo: 'spatial-grid' },
-    { id: 'hierarchy', label: 'Visual Weight', demo: 'spatial-hierarchy' },
-    { id: 'whitespace', label: 'Breathing Room', demo: 'spatial-whitespace' }
-  ],
-  'motion-design': [
-    { id: 'stagger', label: 'Staggered Reveal', demo: 'motion-stagger' },
-    { id: 'micro', label: 'Micro-interactions', demo: 'motion-micro' },
-    { id: 'transition', label: 'State Changes', demo: 'motion-transition' }
-  ],
-  'typography': [
-    { id: 'pairing', label: 'Font Pairing', demo: 'typography-pairing' },
-    { id: 'hierarchy', label: 'Scale & Hierarchy', demo: 'typography-hierarchy' }
-  ],
-  'interaction-design': [
-    { id: 'states', label: 'Button States', demo: 'interaction-states' },
-    { id: 'affordance', label: 'Affordances', demo: 'interaction-affordance' },
-    { id: 'feedback', label: 'Feedback', demo: 'interaction-feedback' }
-  ],
-  'color-and-contrast': [
-    { id: 'palette', label: 'Color Harmony', demo: 'color-palette' },
-    { id: 'accent', label: 'Strategic Accent', demo: 'color-accent' },
-    { id: 'contrast', label: 'Contrast Ratios', demo: 'color-contrast' }
-  ],
-  'responsive-design': [
-    { id: 'touch', label: 'Touch Targets', demo: 'responsive-touch' },
-    { id: 'fluid', label: 'Fluid Layout', demo: 'responsive-fluid' },
-    { id: 'adapt', label: 'Adaptive Content', demo: 'responsive-adapt' }
-  ]
-};
-
-export function renderSkillDemo(skillId) {
-  const demos = skillDemoDefinitions[skillId];
-  if (!demos || demos.length === 0) {
-    return renderGenericDemo(skillId);
-  }
-  
-  const showTabs = demos.length > 1;
-  
-  const tabs = showTabs ? demos.map((d, i) => `
-    <button class="demo-tab ${i === 0 ? 'active' : ''}" data-demo-tab="${d.id}" data-skill="${skillId}">
-      ${d.label}
-    </button>
-  `).join('') : '';
-  
-  const demoContents = demos.map((d, i) => `
-    <div class="demo-panel ${i === 0 ? 'active' : ''}" data-demo-panel="${d.id}">
-      ${renderDemoContent(skillId, d)}
-    </div>
-  `).join('');
-  
-  return `
-    <div class="demo-tabbed-container">
-      ${showTabs ? `<div class="demo-tabs">${tabs}</div>` : ''}
-      <div class="demo-panels">
-        ${demoContents}
-      </div>
-    </div>
-  `;
-}
-
-function renderDemoContent(_skillId, demoConfig) {
-  const demoId = demoConfig.demo;
-  const noToggle = ['color-contrast', 'responsive-touch', 'responsive-fluid', 'responsive-adapt'];
-  const hasToggle = !noToggle.includes(demoId);
-  
-  return `
-    <div class="demo-container">
-      <div class="demo-header">
-        ${hasToggle ? `
-          <div class="demo-toggle">
-            <span class="demo-toggle-label active">Before</span>
-            <div class="demo-toggle-switch" data-demo="${demoId}"></div>
-            <span class="demo-toggle-label">After</span>
-          </div>
-        ` : ''}
-      </div>
-      <div class="demo-viewport" data-state="before" id="${demoId}-viewport">
-        ${getDemoInitialContent(demoId)}
-      </div>
-      <div class="demo-caption">${getDemoCaption(demoId)}</div>
-    </div>
-  `;
-}
-
-function getDemoCaption(demoId) {
-  const captions = {
-    // UX Writing
-    'uxwriting-error': 'Technical jargon vs human, actionable guidance',
-    'uxwriting-buttons': 'Vague labels vs clear, specific actions',
-    'uxwriting-empty': 'Blank nothing vs helpful, encouraging guidance',
-    // Spatial Design
-    'spatial-grid': 'Chaotic placement vs intentional grid alignment',
-    'spatial-hierarchy': 'Equal weight vs clear visual priority',
-    'spatial-whitespace': 'Cramped elements vs comfortable spacing',
-    // Motion Design
-    'motion-stagger': 'Instant appearance vs orchestrated reveal',
-    'motion-micro': 'Static button vs responsive feedback',
-    'motion-transition': 'Jarring change vs smooth transition',
-    // Typography
-    'typography-pairing': 'Generic system fonts vs distinctive pairing',
-    'typography-hierarchy': 'Flat sizing vs dramatic scale contrast',
-    // Interaction Design
-    'interaction-states': 'Missing states vs complete interaction feedback',
-    'interaction-affordance': 'Unclear actions vs obvious clickability',
-    'interaction-feedback': 'Silent actions vs immediate confirmation',
-    // Color & Contrast
-    'color-palette': 'Clashing colors vs harmonious palette',
-    'color-accent': 'Monochrome monotony vs strategic accent',
-    'color-contrast': 'Accessibility failures vs WCAG compliance',
-    // Responsive Design
-    'responsive-touch': 'Tiny targets vs accessible touch areas',
-    'responsive-fluid': 'Fixed breakage vs fluid adaptation',
-    'responsive-adapt': 'Same layout vs optimized for context'
-  };
-  return captions[demoId] || '';
-}
-
-function getDemoInitialContent(demoId) {
-  const contents = {
-    // ========== UX WRITING ==========
-    'uxwriting-error': `
-      <div class="uxw-demo uxw-error-before">
-        <div class="uxw-error-icon">⚠</div>
-        <div class="uxw-error-title">Error 403</div>
-        <div class="uxw-error-text">Access denied. Authentication failure occurred.</div>
-      </div>
-    `,
-    'uxwriting-buttons': `
-      <div class="uxw-demo uxw-buttons-before">
-        <div class="uxw-button-row">
-          <button class="uxw-btn uxw-btn-primary">Submit</button>
-          <button class="uxw-btn uxw-btn-secondary">Cancel</button>
-        </div>
-        <div class="uxw-button-context">Delete account permanently?</div>
-      </div>
-    `,
-    'uxwriting-empty': `
-      <div class="uxw-demo uxw-empty-before">
-        <div class="uxw-empty-icon">📁</div>
-        <div class="uxw-empty-title">No items</div>
-      </div>
-    `,
-    
-    // ========== SPATIAL DESIGN ==========
-    'spatial-grid': `
-      <div class="spatial-demo spatial-grid-before">
-        <div class="spatial-card-item" style="width: 45%;">Card One</div>
-        <div class="spatial-card-item" style="width: 30%;">Card Two</div>
-        <div class="spatial-card-item" style="width: 55%;">Card Three</div>
-        <div class="spatial-card-item" style="width: 25%;">Card Four</div>
-      </div>
-    `,
-    'spatial-hierarchy': `
-      <div class="spatial-demo spatial-hierarchy-before">
-        <div class="spatial-h-title">Welcome Back</div>
-        <div class="spatial-h-subtitle">Dashboard</div>
-        <div class="spatial-h-cta">View Reports</div>
-        <div class="spatial-h-link">Settings</div>
-      </div>
-    `,
-    'spatial-whitespace': `
-      <div class="spatial-demo spatial-whitespace-before">
-        <div class="spatial-ws-title">Premium Plan</div>
-        <div class="spatial-ws-price">$29/mo</div>
-        <div class="spatial-ws-features">Unlimited projects • Priority support • Advanced analytics</div>
-        <button class="spatial-ws-btn">Upgrade Now</button>
-      </div>
-    `,
-    
-    // ========== MOTION DESIGN ==========
-    'motion-stagger': `
-      <div class="motion-demo motion-stagger-demo">
-        <div class="motion-list-item"><span class="motion-dot"></span>Dashboard</div>
-        <div class="motion-list-item"><span class="motion-dot"></span>Analytics</div>
-        <div class="motion-list-item"><span class="motion-dot"></span>Settings</div>
-        <div class="motion-list-item"><span class="motion-dot"></span>Profile</div>
-      </div>
-    `,
-    'motion-micro': `
-      <div class="motion-demo motion-micro-demo">
-        <button class="motion-btn motion-btn-before">Add to Cart</button>
-      </div>
-    `,
-    'motion-transition': `
-      <div class="motion-demo motion-transition-demo">
-        <div class="motion-card motion-card-before">
-          <div class="motion-card-icon">📦</div>
-          <div class="motion-card-text">Order Placed</div>
-        </div>
-      </div>
-    `,
-    
-    // ========== TYPOGRAPHY ==========
-    'typography-pairing': `
-      <div class="typo-demo typo-pairing-before">
-        <div class="typo-heading">Welcome to the Future</div>
-        <div class="typo-body">Experience innovation like never before with our cutting-edge platform designed for modern teams.</div>
-      </div>
-    `,
-    'typography-hierarchy': `
-      <div class="typo-demo typo-hierarchy-before">
-        <div class="typo-h1">Article Title</div>
-        <div class="typo-meta">Published January 2025</div>
-        <div class="typo-p">This is the body text of the article containing the main content and ideas.</div>
-      </div>
-    `,
-    
-    // ========== INTERACTION DESIGN ==========
-    'interaction-states': `
-      <div class="int-demo int-states-demo">
-        <div class="int-state-row">
-          <span class="int-state-label">Poor</span>
-          <button class="int-btn int-btn-poor">Click Me</button>
-        </div>
-        <div class="int-state-row">
-          <span class="int-state-label">Good</span>
-          <button class="int-btn int-btn-good">Click Me</button>
-        </div>
-      </div>
-    `,
-    'interaction-affordance': `
-      <div class="int-demo int-affordance-before">
-        <div class="int-aff-item int-aff-poor">
-          <span>Learn more</span>
-        </div>
-        <div class="int-aff-item int-aff-poor">
-          <span>Settings</span>
-        </div>
-      </div>
-    `,
-    'interaction-feedback': `
-      <div class="int-demo int-feedback-before">
-        <button class="int-fb-btn int-fb-silent">
-          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
-        </button>
-        <span class="int-fb-label">Click — nothing happens</span>
-      </div>
-    `,
-    
-    // ========== COLOR & CONTRAST ==========
-    'color-palette': `
-      <div class="color-demo color-palette-before">
-        <div class="color-swatch swatch-1"></div>
-        <div class="color-swatch swatch-2"></div>
-        <div class="color-swatch swatch-3"></div>
-        <div class="color-swatch swatch-4"></div>
-        <div class="color-swatch swatch-5"></div>
-        <div class="color-card">
-          <span class="card-title">Title</span>
-          <span class="card-subtitle">Subtitle</span>
-          <button class="card-btn">Action</button>
-        </div>
-      </div>
-    `,
-    'color-accent': `
-      <div class="color-demo color-accent-before">
-        <div class="color-accent-card">
-          <div class="color-accent-title">Premium Plan</div>
-          <div class="color-accent-text">Unlock all features and get priority support.</div>
-          <button class="color-accent-btn">Upgrade Now</button>
-        </div>
-      </div>
-    `,
-    'color-contrast': `
-      <div class="color-demo color-contrast-static">
-        <div class="contrast-example contrast-fail">
-          <span class="contrast-badge">Fails WCAG</span>
-          <div class="contrast-text">Hard to Read</div>
-          <div class="contrast-ratio">2.5:1</div>
-        </div>
-        <div class="contrast-example contrast-pass">
-          <span class="contrast-badge">Passes AAA</span>
-          <div class="contrast-text">Easy to Read</div>
-          <div class="contrast-ratio">12.6:1</div>
-        </div>
-      </div>
-    `,
-    
-    // ========== RESPONSIVE DESIGN ==========
-    'responsive-touch': `
-      <div class="resp-demo resp-touch-demo">
-        <div class="resp-touch-row">
-          <span class="resp-label">Too Small</span>
-          <div class="resp-touch-targets resp-touch-bad">
-            <button>×</button>
-            <button>−</button>
-            <button>+</button>
-          </div>
-        </div>
-        <div class="resp-touch-row">
-          <span class="resp-label">Accessible</span>
-          <div class="resp-touch-targets resp-touch-good">
-            <button>×</button>
-            <button>−</button>
-            <button>+</button>
-          </div>
-        </div>
-      </div>
-    `,
-    'responsive-fluid': `
-      <div class="resp-demo resp-fluid-demo">
-        <div class="resp-fluid-container">
-          <div class="resp-fluid-fixed">
-            <span>Fixed 400px</span>
-            <div class="resp-fluid-bar" style="width: 400px; max-width: 100%;"></div>
-          </div>
-          <div class="resp-fluid-adaptive">
-            <span>Fluid 80%</span>
-            <div class="resp-fluid-bar" style="width: 80%;"></div>
-          </div>
-        </div>
-      </div>
-    `,
-    'responsive-adapt': `
-      <div class="resp-demo resp-adapt-demo">
-        <div class="resp-device resp-device-mobile">
-          <div class="resp-device-screen">
-            <div class="resp-block resp-header"></div>
-            <div class="resp-block resp-content"></div>
-          </div>
-          <span>Mobile</span>
-        </div>
-        <div class="resp-device resp-device-tablet">
-          <div class="resp-device-screen">
-            <div class="resp-block resp-header"></div>
-            <div class="resp-block-row">
-              <div class="resp-block resp-content"></div>
-              <div class="resp-block resp-content"></div>
-            </div>
-          </div>
-          <span>Tablet</span>
-        </div>
-        <div class="resp-device resp-device-desktop">
-          <div class="resp-device-screen">
-            <div class="resp-block-row">
-              <div class="resp-block resp-sidebar"></div>
-              <div class="resp-block resp-content"></div>
-            </div>
-          </div>
-          <span>Desktop</span>
-        </div>
-      </div>
-    `
-  };
-  return contents[demoId] || '<div style="padding: 2rem; text-align: center; color: #999;">Demo coming soon</div>';
-}
-
-function renderGenericDemo(skillId) {
-  return `
-    <div class="demo-container">
-      <div class="demo-viewport">
-        <div style="text-align: center; color: var(--c-ash); padding: var(--s-xl);">
-          <p>Demo for ${skillId.replace(/-/g, ' ')} coming soon</p>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-export function setupDemoTabs() {
-  document.querySelectorAll('.demo-tab').forEach(tab => {
-    tab.addEventListener('click', () => {
-      const tabId = tab.dataset.demoTab;
-      const container = tab.closest('.demo-tabbed-container');
-      
-      container.querySelectorAll('.demo-tab').forEach(t => { t.classList.remove('active'); });
-      tab.classList.add('active');
-      
-      container.querySelectorAll('.demo-panel').forEach(p => { p.classList.remove('active'); });
-      container.querySelector(`[data-demo-panel="${tabId}"]`)?.classList.add('active');
-    });
-  });
-}
diff --git a/public/js/skills.js b/public/js/skills.js
index 9b725c144..4b0441c90 100644
--- a/public/js/skills.js
+++ b/public/js/skills.js
@@ -2,9 +2,9 @@
 // SKILLS - Rendering and selection logic
 // ============================================
 
-import { skillFocusAreas, readySkills } from "./data.js";
+import { readySkills, skillFocusAreas } from "./data.js";
+import { renderSkillDemo, setupDemoTabs } from "./demo-renderer.js";
 import { setupDemoToggles } from "./demo-toggles.js";
-import { renderSkillDemo, setupDemoTabs } from "./skill-demos.js";
 
 let currentSkill = null;
 
@@ -39,9 +39,9 @@ export function renderSkillsNav(skills, onSelect) {
 	nav.innerHTML = filteredSkills
 		.map(
 			(skill) => `
-    <button class="skill-nav-item ${!isSkillReady(skill.id) ? 'coming-soon' : ''}" data-id="${skill.id}">
+    <button class="skill-nav-item ${!isSkillReady(skill.id) ? "coming-soon" : ""}" data-id="${skill.id}">
       ${formatSkillName(skill.id)}
-      ${!isSkillReady(skill.id) ? '<span class="coming-soon-badge">Soon</span>' : ''}
+      ${!isSkillReady(skill.id) ? '<span class="coming-soon-badge">Soon</span>' : ""}
     </button>
   `,
 		)