emily-css 1.0.20 → 1.0.22

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to `emily-css` are documented here.
 
 ---
 
+## v1.0.22 — May 2026
+
+**· Improve purge extraction and package robustness tests**
+
+---
+## v1.0.21 — May 2026
+
+**"Include bundled showcase template**
+
+---
 ## v1.0.20 — May 2026
 
 **replace folder structure template to tempalates**

package/bin/emilyui.js

@@ -1,6 +1,9 @@
 #!/usr/bin/env node
 
+const path = require("path");
+
 const command = process.argv[2];
+const packageJson = require(path.join(__dirname, "..", "package.json"));
 
 if (command === "init") {
   require("../src/init.js");
@@ -11,6 +14,8 @@ if (command === "init") {
   require("../src/watch.js");
 } else if (command === "showcase") {
   require("../src/showcase.js");
+} else if (command === "version" || command === "--version" || command === "-v") {
+  console.log(packageJson.version);
 } else if (command === "help") {
   console.log(`
   emily-css — Config-driven CSS framework generator
@@ -20,6 +25,7 @@ if (command === "init") {
     emily-css build       Generate production CSS to the configured output path
     emily-css watch       Dev mode: watch for changes and rebuild
     emily-css showcase    Launch the component showcase in your browser
+    emily-css version     Show installed version
     emily-css help        Show this help text
   
   npm scripts (added by init):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emily-css",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
   "main": "src/index.js",
   "bin": {
@@ -52,7 +52,6 @@
     "chalk": "^4.1.2",
     "chokidar": "^5.0.0",
     "cross-spawn": "^7.0.6",
-    "emily-css": "^1.0.8",
     "enquirer": "^2.4.1",
     "fast-glob": "^3.3.3",
     "ora": "^5.4.1"

package/src/purge.js

@@ -57,7 +57,7 @@ function getAllFiles(dir, extensions = DEFAULT_EXTENSIONS) {
 
 function extractClassNames(content) {
   const classNames = new Set();
-  const classRegex = /class\s*=\s*["']([^"']+)["']/g;
+  const classRegex = /(?:class|className)\s*=\s*["']([^"']+)["']/g;
   let match;
 
   while ((match = classRegex.exec(content)) !== null) {
@@ -76,6 +76,24 @@ function extractClassNames(content) {
     });
   }
 
+  const templateStringRegex = /`([^`]+)`/g;
+
+  while ((match = templateStringRegex.exec(content)) !== null) {
+    const possibleClasses = match[1].split(/\s+/);
+
+    possibleClasses.forEach((cls) => {
+      const cleaned = cls.trim();
+
+      if (
+        cleaned &&
+        /^[a-zA-Z0-9:_./-]+$/.test(cleaned) &&
+        /[-:]/.test(cleaned)
+      ) {
+        classNames.add(cleaned);
+      }
+    });
+  }
+
   return classNames;
 }
 

package/src/watch.js

@@ -21,7 +21,9 @@ function readConfig() {
   const configPath = path.join(process.cwd(), "emily.config.json");
 
   if (!fs.existsSync(configPath)) {
-    console.error('\n  emily-css: No config found. Run "emily-css init" first.\n');
+    console.error(
+      '\n  emily-css: No config found. Run "emily-css init" first.\n',
+    );
     process.exit(1);
   }
 
@@ -46,7 +48,9 @@ function shouldIgnore(filePath) {
     "coverage/",
     ".cache/",
     ".vite/",
-  ].some((part) => normalised.includes("/" + part) || normalised.startsWith(part));
+  ].some(
+    (part) => normalised.includes("/" + part) || normalised.startsWith(part),
+  );
 }
 
 function runQuietly(fn) {
@@ -83,7 +87,9 @@ function getScanFiles(config) {
     ".njk",
     ".liquid",
     ".hbs",
+    ".js",
     ".jsx",
+    ".ts",
     ".tsx",
     ".vue",
     ".php",
@@ -124,7 +130,9 @@ function collectUsedClasses(config) {
 
 function getClassDiff(currentClasses) {
   const added = [...currentClasses].filter((cls) => !previousClasses.has(cls));
-  const removed = [...previousClasses].filter((cls) => !currentClasses.has(cls));
+  const removed = [...previousClasses].filter(
+    (cls) => !currentClasses.has(cls),
+  );
 
   previousClasses = new Set(currentClasses);
 
@@ -141,35 +149,24 @@ function formatClassList(classes) {
 }
 
 function printSummary({ currentClasses, result, added, removed }) {
-  const reduction = (
-    ((result.originalSize - result.outputSize) / result.originalSize) *
-    100
-  ).toFixed(1);
+  const reduction =
+    currentClasses.size === 0
+      ? "100.0"
+      : (
+          ((result.originalSize - result.outputSize) / result.originalSize) *
+          100
+        ).toFixed(1);
+
+  const sizeKb =
+    currentClasses.size === 0 ? "0.0" : (result.outputSize / 1024).toFixed(1);
 
-  const sizeKb = (result.outputSize / 1024).toFixed(1);
   const outputPath = result.outputPath
     ? path.relative(process.cwd(), result.outputPath)
     : "emily.min.css";
 
   const time = new Date().toLocaleTimeString();
 
-  console.log(
-    chalk.green("✓ " + time + " updated") +
-      chalk.gray(
-        " | " +
-          currentClasses.size +
-          " classes | " +
-          sizeKb +
-          " KB | " +
-          reduction +
-          "% reduced | " +
-          outputPath,
-      ),
-  );
-
-  if (!hasRunOnce) return;
-
-  if (removed.length > 0) {
+  if (hasRunOnce && removed.length > 0) {
     console.log(
       chalk.red(
         "− removed " +
@@ -180,16 +177,27 @@ function printSummary({ currentClasses, result, added, removed }) {
     );
   }
 
-  if (added.length > 0) {
+  if (hasRunOnce && added.length > 0) {
     console.log(
       chalk.green(
-        "+ added " +
-          added.length +
-          " class" +
-          (added.length === 1 ? "" : "es"),
+        "+ added " + added.length + " class" + (added.length === 1 ? "" : "es"),
       ) + chalk.gray(" (" + formatClassList(added) + ")"),
     );
   }
+
+  console.log(
+    chalk.green("✓ " + time + " updated") +
+      chalk.gray(
+        " | " +
+          currentClasses.size +
+          " classes | " +
+          sizeKb +
+          " KB | " +
+          reduction +
+          "% reduced | " +
+          outputPath,
+      ),
+  );
 }
 
 function runProductionUpdate(filePath) {
@@ -232,10 +240,7 @@ function runProductionUpdate(filePath) {
 }
 
 function getWatchPaths(config) {
-  return [
-    config.purge?.sourceDir || ".",
-    "emily.config.json",
-  ];
+  return [config.purge?.sourceDir || ".", "emily.config.json"];
 }
 
 function queueUpdate(filePath) {
@@ -247,14 +252,19 @@ function runWatch() {
   const config = readConfig();
   const watchPaths = getWatchPaths(config);
 
-  console.log("\n👀 EmilyUI is watching...");
-console.log(chalk.gray("   Project: " + (config.purge?.projectType || "Unknown")));
-console.log(chalk.gray("   Output:  " + (config.output?.css || "dist/emily.min.css")));
-console.log(chalk.gray("   Watching:"));
+  console.log("");
+  console.log(chalk.cyan("👀 EmilyUI is watching..."));
+  console.log(
+    chalk.gray("   Project: " + (config.purge?.projectType || "Unknown")),
+  );
+  console.log(
+    chalk.gray("   Output:  " + (config.output?.css || "dist/emily.min.css")),
+  );
+  console.log(chalk.gray("   Watching:"));
 
-watchPaths.forEach((item) => {
-  console.log(chalk.gray("   - " + item));
-});
+  watchPaths.forEach((item) => {
+    console.log(chalk.gray("   - " + item));
+  });
 
   runQuietly(() => ensureFullFramework());
   runProductionUpdate();

package/templates/showcase.html

@@ -0,0 +1,992 @@
+<!doctype html>
+<html lang="en" style="scroll-behavior: smooth;">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>EmilyUI Showcase</title>
+  <link rel="stylesheet" href="./dist/emily.min.css">
+<style>
+  html {
+    scroll-behavior: smooth;
+  }
+
+  [id] {
+    scroll-margin-top: 7rem;
+  }
+</style>
+</head>
+
+<body class="bg-neutral-10 text-neutral-90 font-inter p-4 md:p-6">
+  <header class="sticky top-4 z-50 max-w-7xl mx-auto mb-6">
+    <nav class="flex items-center justify-between bg-white border border-neutral-20 rounded-lg shadow-md p-4">
+      <div class="flex items-center gap-3">
+        <span class="inline-flex items-center justify-center bg-primary-80 text-white rounded-md w-10 h-10 font-bold">
+          E
+        </span>
+        <div>
+          <p class="font-bold text-lg">EmilyUI</p>
+          <p class="text-sm text-neutral-70">Component showcase</p>
+        </div>
+      </div>
+
+      <div class="hidden md:flex items-center gap-4 text-base font-medium">
+                <a class="text-neutral-80 hover:text-primary-80" href="#colours">Colours</a>
+        <a class="text-neutral-80 hover:text-primary-80" href="#design-tokens">Tokens</a>
+        <a class="text-neutral-80 hover:text-primary-80" href="#buttons">Buttons</a>
+        <a class="text-neutral-80 hover:text-primary-80" href="#forms">Forms</a>
+        <a class="text-neutral-80 hover:text-primary-80" href="#component-library">Components</a>
+        <a class="text-neutral-80 hover:text-primary-80" href="#utility-coverage">Utilities</a>
+        <a class="text-neutral-80 hover:text-primary-80" href="#accessibility-examples">A11y</a>
+        <a class="text-neutral-80 hover:text-primary-80" href="#patterns">Patterns</a>
+      </div>
+    </nav>
+  </header>
+
+  <main id="main-content" class="max-w-7xl mx-auto">
+    <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+      <div class="bg-white rounded-lg shadow-md border border-neutral-20 p-8">
+        <span class="inline-block bg-primary-20 text-primary-90 px-3 py-1 rounded-full text-sm font-bold mb-4">
+          Utility-first CSS
+        </span>
+
+        <h1 class="text-3xl md:text-4xl font-bold mb-4 text-primary-90">
+          Build consistent interfaces without a heavy frontend setup.
+        </h1>
+
+        <p class="text-lg leading-relaxed mb-6 text-neutral-80">
+          This page tests EmilyUI colour, spacing, typography, layout, buttons, forms, alerts, cards, badges and responsive utilities.
+        </p>
+
+        <div class="flex flex-wrap gap-3">
+          <a href="#buttons" class="inline-flex items-center justify-center bg-primary-80 text-white px-5 py-3 rounded-md font-semibold shadow hover:bg-primary-90 focus-visible:ring-2 ring-primary-80">
+            View components
+          </a>
+
+          <a href="#colours" class="inline-flex items-center justify-center bg-white text-primary-90 border border-primary-80 px-5 py-3 rounded-md font-semibold hover:bg-primary-10">
+            View tokens
+          </a>
+        </div>
+      </div>
+
+      <div class="bg-primary-90 text-white rounded-lg shadow-md p-8">
+        <h2 class="text-2xl font-bold mb-4">Quick stats</h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="bg-primary-80 rounded-md p-4">
+            <p class="text-sm opacity-75">Components</p>
+            <p class="text-3xl font-bold">12</p>
+          </div>
+
+          <div class="bg-primary-80 rounded-md p-4">
+            <p class="text-sm opacity-75">Token groups</p>
+            <p class="text-3xl font-bold">6</p>
+          </div>
+
+          <div class="bg-primary-80 rounded-md p-4">
+            <p class="text-sm opacity-75">Layouts</p>
+            <p class="text-3xl font-bold">4</p>
+          </div>
+
+          <div class="bg-primary-80 rounded-md p-4">
+            <p class="text-sm opacity-75">Focus states</p>
+            <p class="text-3xl font-bold">Yes</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="colours" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-4">Colour tokens</h2>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div class="rounded-md overflow-hidden border border-neutral-20">
+          <div class="bg-primary-80 h-20"></div>
+          <div class="p-4">
+            <p class="font-bold">Primary</p>
+            <p class="text-sm text-neutral-70">bg-primary-80</p>
+          </div>
+        </div>
+
+        <div class="rounded-md overflow-hidden border border-neutral-20">
+          <div class="bg-secondary-80 h-20"></div>
+          <div class="p-4">
+            <p class="font-bold">Secondary</p>
+            <p class="text-sm text-neutral-70">bg-secondary-80</p>
+          </div>
+        </div>
+
+        <div class="rounded-md overflow-hidden border border-neutral-20">
+          <div class="bg-success-80 h-20"></div>
+          <div class="p-4">
+            <p class="font-bold">Success</p>
+            <p class="text-sm text-neutral-70">bg-success-80</p>
+          </div>
+        </div>
+
+        <div class="rounded-md overflow-hidden border border-neutral-20">
+          <div class="bg-warning-80 h-20"></div>
+          <div class="p-4">
+            <p class="font-bold">Warning</p>
+            <p class="text-sm text-neutral-70">bg-warning-80</p>
+          </div>
+        </div>
+
+        <div class="rounded-md overflow-hidden border border-neutral-20">
+          <div class="bg-error-80 h-20"></div>
+          <div class="p-4">
+            <p class="font-bold">Error</p>
+            <p class="text-sm text-neutral-70">bg-error-80</p>
+          </div>
+        </div>
+
+        <div class="rounded-md overflow-hidden border border-neutral-20">
+          <div class="bg-neutral-80 h-20"></div>
+          <div class="p-4">
+            <p class="font-bold">Neutral</p>
+            <p class="text-sm text-neutral-70">bg-neutral-80</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="buttons" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6 background-neutral-100">
+      <h2 class="text-2xl font-bold mb-4">Buttons</h2>
+
+      <div class="flex flex-wrap gap-3">
+        <button class="bg-primary-80 text-white px-5 py-3 rounded-md font-semibold shadow hover:bg-primary-90 focus-visible:ring-2 ring-primary-80">
+          Primary
+        </button>
+
+        <button class="bg-secondary-80 text-white px-5 py-3 rounded-md font-semibold shadow hover:bg-secondary-90 focus-visible:ring-2 ring-secondary-80">
+          Secondary
+        </button>
+
+<button class="bg-white text-primary-90 border border-primary-80 px-5 py-3 rounded-md font-semibold hover:bg-primary-10 focus-visible:ring-2 ring-primary-80">
+  Outline
+</button>
+
+        <button class="bg-neutral-20 text-neutral-90 px-5 py-3 rounded-md font-semibold hover:bg-neutral-30">
+          Neutral
+        </button>
+
+        <button class="bg-error-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-error-90">
+          Destructive
+        </button>
+      </div>
+    </section>
+
+    <section id="cards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
+      <article class="bg-white rounded-lg shadow-md border border-neutral-20 p-6">
+        <span class="inline-block bg-primary-20 text-primary-90 px-3 py-1 rounded-full text-sm font-bold mb-4">Card</span>
+        <h2 class="text-xl font-bold mb-2">Reusable patterns</h2>
+        <p class="text-neutral-80 mb-4">Use utility classes to build patterns that work across static sites, Nuxt, Drupal and more.</p>
+        <a href="#" class="font-semibold text-primary-80 underline">Read more</a>
+      </article>
+
+      <article class="bg-white rounded-lg shadow-md border border-neutral-20 p-6">
+        <span class="inline-block bg-success-20 text-success-90 px-3 py-1 rounded-full text-sm font-bold mb-4">Accessible</span>
+        <h2 class="text-xl font-bold mb-2">Clear defaults</h2>
+        <p class="text-neutral-80 mb-4">Spacing, contrast and focus utilities make common interface decisions quicker and more consistent.</p>
+        <a href="#" class="font-semibold text-primary-80 underline">View guidance</a>
+      </article>
+
+      <article class="bg-white rounded-lg shadow-md border border-neutral-20 p-6">
+        <span class="inline-block bg-secondary-20 text-secondary-90 px-3 py-1 rounded-full text-sm font-bold mb-4">Portable</span>
+        <h2 class="text-xl font-bold mb-2">Framework agnostic</h2>
+        <p class="text-neutral-80 mb-4">Generate CSS from one config and use it where build pipelines are awkward or locked down.</p>
+        <a href="#" class="font-semibold text-primary-80 underline">See setup</a>
+      </article>
+    </section>
+
+    <section id="forms" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6 shadow-lg">
+      <h2 class="text-2xl font-bold mb-4">Form elements</h2>
+
+      <form class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label class="block font-semibold mb-2" for="name">Name</label>
+          <input id="name" class="w-full border border-neutral-40 rounded-md p-3 focus-visible:ring-2 ring-primary-80" type="text" value="EmilyUI">
+        </div>
+
+        <div>
+          <label class="block font-semibold mb-2" for="type">Project type</label>
+          <select id="type" class="w-full border border-neutral-40 rounded-md p-3 pr-12 focus-visible:ring-2 ring-primary-80">
+            <option>Nuxt</option>
+            <option>Drupal</option>
+            <option>Static</option>
+          </select>
+        </div>
+
+        <div class="col-span-full">
+          <label class="block font-semibold mb-2" for="message">Notes</label>
+          <textarea id="message" class="w-full border border-neutral-40 rounded-md p-3 focus-visible:ring-2 ring-primary-80" rows="4">This tests form spacing, borders and focus states.</textarea>
+        </div>
+
+        <div class="col-span-full flex items-center gap-3">
+          <input id="check" class="w-6 h-6 accent-primary-80" type="checkbox" checked>
+          <label for="check">Use accessible defaults where possible</label>
+        </div>
+      </form>
+    </section>
+
+    <section id="alerts" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+      <div class="bg-success-20 border border-success-80 rounded-md p-4">
+        <h2 class="text-lg font-bold text-success-90 mb-1">Success alert</h2>
+        <p class="text-success-90">Your CSS has been generated successfully.</p>
+      </div>
+
+      <div class="bg-warning-20 border border-warning-80 rounded-md p-4">
+        <h2 class="text-lg font-bold text-warning-90 mb-1">Warning alert</h2>
+        <p class="text-warning-90">Check your scan paths before publishing.</p>
+      </div>
+
+      <div class="bg-error-20 border border-error-80 rounded-md p-4">
+        <h2 class="text-lg font-bold text-error-90 mb-1">Error alert</h2>
+        <p class="text-error-90">Something failed during the build step.</p>
+      </div>
+
+      <div class="bg-secondary-20 border border-secondary-80 rounded-md p-4">
+        <h2 class="text-lg font-bold text-secondary-90 mb-1">Info alert</h2>
+        <p class="text-secondary-90">EmilyUI works best when config is kept simple.</p>
+      </div>
+    </section>
+
+    <section class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-4">Table</h2>
+
+      <div class="overflow-x-auto">
+        <table class="w-full border-collapse">
+          <thead>
+            <tr class="bg-neutral-20">
+              <th class="text-left p-3 border border-neutral-30">Component</th>
+              <th class="text-left p-3 border border-neutral-30">Classes tested</th>
+              <th class="text-left p-3 border border-neutral-30">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="p-3 border border-neutral-30">Buttons</td>
+              <td class="p-3 border border-neutral-30">bg, text, px, py, rounded, hover</td>
+              <td class="p-3 border border-neutral-30"><span class="bg-success-20 text-success-90 px-2 py-1 rounded-full text-sm font-bold">Pass</span></td>
+            </tr>
+            <tr>
+              <td class="p-3 border border-neutral-30">Cards</td>
+              <td class="p-3 border border-neutral-30">shadow, border, grid, gap</td>
+              <td class="p-3 border border-neutral-30"><span class="bg-success-20 text-success-90 px-2 py-1 rounded-full text-sm font-bold">Pass</span></td>
+            </tr>
+            <tr>
+              <td class="p-3 border border-neutral-30">Forms</td>
+              <td class="p-3 border border-neutral-30">input, border, ring, accent</td>
+              <td class="p-3 border border-neutral-30"><span class="bg-warning-20 text-warning-90 px-2 py-1 rounded-full text-sm font-bold">Check</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+
+    <section id="design-tokens" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Design tokens</h2>
+      <p class="text-neutral-80 mb-6">A quick reference for the core EmilyUI tokens generated from your config.</p>
+
+      <h3 class="text-xl font-bold mb-3">Colour scales</h3>
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <div><div class="bg-primary-10 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">primary-10</p></div>
+        <div><div class="bg-primary-20 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">primary-20</p></div>
+        <div><div class="bg-primary-40 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">primary-40</p></div>
+        <div><div class="bg-primary-60 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">primary-60</p></div>
+        <div><div class="bg-primary-80 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">primary-80</p></div>
+        <div><div class="bg-primary-100 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">primary-100</p></div>
+            </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <div><div class="bg-secondary-10 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">secondary-10</p></div>
+        <div><div class="bg-secondary-20 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">secondary-20</p></div>
+        <div><div class="bg-secondary-40 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">secondary-40</p></div>
+        <div><div class="bg-secondary-60 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">secondary-60</p></div>
+        <div><div class="bg-secondary-80 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">secondary-80</p></div>
+        <div><div class="bg-secondary-100 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">secondary-100</p></div>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <div><div class="bg-success-10 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">success-10</p></div>
+        <div><div class="bg-success-20 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">success-20</p></div>
+        <div><div class="bg-success-40 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">success-40</p></div>
+        <div><div class="bg-success-60 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">success-60</p></div>
+        <div><div class="bg-success-80 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">success-80</p></div>
+        <div><div class="bg-success-100 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">success-100</p></div>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <div><div class="bg-warning-10 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">warning-10</p></div>
+        <div><div class="bg-warning-20 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">warning-20</p></div>
+        <div><div class="bg-warning-40 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">warning-40</p></div>
+        <div><div class="bg-warning-60 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">warning-60</p></div>
+        <div><div class="bg-warning-80 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">warning-80</p></div>
+        <div><div class="bg-warning-100 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">warning-100</p></div>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <div><div class="bg-error-10 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">error-10</p></div>
+        <div><div class="bg-error-20 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">error-20</p></div>
+        <div><div class="bg-error-40 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">error-40</p></div>
+        <div><div class="bg-error-60 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">error-60</p></div>
+        <div><div class="bg-error-80 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">error-80</p></div>
+        <div><div class="bg-error-100 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">error-100</p></div>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <div><div class="bg-neutral-10 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">neutral-10</p></div>
+        <div><div class="bg-neutral-20 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">neutral-20</p></div>
+        <div><div class="bg-neutral-40 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">neutral-40</p></div>
+        <div><div class="bg-neutral-60 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">neutral-60</p></div>
+        <div><div class="bg-neutral-80 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">neutral-80</p></div>
+        <div><div class="bg-neutral-100 h-12 rounded-md border border-neutral-20"></div><p class="text-sm mt-2">neutral-100</p></div>
+      </div>
+
+      <h3 class="text-xl font-bold mb-3">Spacing</h3>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <div class="border border-neutral-20 rounded-md p-4"><div class="bg-primary-80 h-4 w-4 rounded-sm"></div><p class="text-sm mt-2">space 4</p></div>
+        <div class="border border-neutral-20 rounded-md p-4"><div class="bg-primary-80 h-6 w-6 rounded-sm"></div><p class="text-sm mt-2">space 6</p></div>
+        <div class="border border-neutral-20 rounded-md p-4"><div class="bg-primary-80 h-8 w-8 rounded-sm"></div><p class="text-sm mt-2">space 8</p></div>
+        <div class="border border-neutral-20 rounded-md p-4"><div class="bg-primary-80 h-12 w-12 rounded-sm"></div><p class="text-sm mt-2">space 12</p></div>
+      </div>
+
+      <h3 class="text-xl font-bold mb-3">Typography</h3>
+      <div class="space-y-3">
+        <p class="text-xs">text-xs: Small helper text</p>
+        <p class="text-sm">text-sm: Secondary body text</p>
+        <p class="text-base">text-base: Default body text</p>
+        <p class="text-lg">text-lg: Larger body text</p>
+        <p class="text-xl font-semibold">text-xl: Section heading</p>
+        <p class="text-2xl font-bold">text-2xl: Component heading</p>
+        <p class="text-3xl md:text-4xl font-bold">text-4xl: Page heading</p>
+      </div>
+    </section>
+
+    <section id="component-library" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Component library</h2>
+      <p class="text-neutral-80 mb-6">Common interface components built only with EmilyUI utility classes.</p>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="border border-neutral-20 rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-3">Breadcrumbs</h3>
+          <nav aria-label="Breadcrumb">
+            <ol class="flex gap-2 text-sm text-primary-100">
+              <li><a href="#" class="text-primary-80 underline">Home</a></li>
+              <li>/</li>
+              <li><a href="#" class="text-primary-80 underline">Components</a></li>
+              <li>/</li>
+              <li aria-current="page">Breadcrumbs</li>
+            </ol>
+          </nav>
+        </div>
+
+        <div class="border border-neutral-20 rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-3">Pagination</h3>
+          <nav class="flex gap-2" aria-label="Pagination">
+            <a href="#" class="border border-neutral-30 px-3 py-2 rounded-md">Previous</a>
+            <a href="#" class="bg-primary-80 text-white px-3 py-2 rounded-md">1</a>
+            <a href="#" class="border border-neutral-30 px-3 py-2 rounded-md">2</a>
+            <a href="#" class="border border-neutral-30 px-3 py-2 rounded-md">Next</a>
+          </nav>
+        </div>
+
+        <div class="border border-neutral-20 rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-3">Tabs</h3>
+          <div class="flex gap-2 border-b border-neutral-30">
+            <button class="px-4 py-2 border-b-2 border-primary-80 font-semibold">Overview</button>
+            <button class="px-4 py-2 text-neutral-70">Usage</button>
+            <button class="px-4 py-2 text-neutral-70">Code</button>
+          </div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-3">Progress</h3>
+          <div class="bg-neutral-20 rounded-full h-4 overflow-hidden">
+            <div class="bg-primary-80 h-4 w-72"></div>
+          </div>
+          <p class="text-sm text-neutral-70 mt-2">75% complete</p>
+        </div>
+
+        <div class="border border-neutral-20 rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-3">Notification banner</h3>
+          <div class="bg-secondary-20 border-l-4 border-secondary-80 p-4">
+            <p class="font-bold text-secondary-90">Information</p>
+            <p class="text-secondary-90">This is a standard notification message.</p>
+          </div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-3">Modal preview</h3>
+          <div class="border border-neutral-30 rounded-lg p-5 shadow-lg">
+            <h4 class="text-lg font-bold mb-2">Confirm action</h4>
+            <p class="text-neutral-80 mb-4">This shows modal spacing and button grouping.</p>
+            <div class="flex gap-3">
+              <button class="bg-primary-80 text-white px-4 py-2 rounded-md font-semibold">Confirm</button>
+              <button class="border border-neutral-40 px-4 py-2 rounded-md">Cancel</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-3">Accordion</h3>
+          <details class="border border-neutral-30 rounded-md p-4">
+            <summary class="font-semibold cursor-pointer">What is EmilyUI?</summary>
+            <p class="text-neutral-80 mt-3">A config-driven CSS utility system for constrained projects.</p>
+          </details>
+        </div>
+
+        <div class="border border-neutral-20 rounded-lg p-5">
+          <h3 class="text-xl font-bold mb-3">Stat card</h3>
+          <div class="bg-primary-10 border border-primary-30 rounded-lg p-5">
+            <p class="text-sm text-primary-90">CSS generated</p>
+            <p class="text-3xl md:text-4xl font-bold text-primary-90">100%</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+
+    <section id="utility-coverage" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Utility coverage</h2>
+      <p class="text-neutral-80 mb-6">A practical check that common utility groups are being generated and surviving the production build.</p>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div class="border border-neutral-20 rounded-md p-4">
+          <h3 class="font-bold mb-2">Display</h3>
+          <div class="flex gap-2">
+            <span class="inline-block bg-primary-20 px-2 py-1 rounded-sm text-sm">block</span>
+            <span class="inline-flex bg-primary-20 px-2 py-1 rounded-sm text-sm">inline-flex</span>
+          </div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <h3 class="font-bold mb-2">Flex</h3>
+          <div class="flex items-center justify-between gap-2">
+            <span class="bg-secondary-20 p-2 rounded-sm">A</span>
+            <span class="bg-secondary-20 p-2 rounded-sm">B</span>
+            <span class="bg-secondary-20 p-2 rounded-sm">C</span>
+          </div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <h3 class="font-bold mb-2">Grid</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <span class="bg-success-20 h-8 rounded-sm"></span>
+            <span class="bg-success-20 h-8 rounded-sm"></span>
+            <span class="bg-success-20 h-8 rounded-sm"></span>
+          </div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4 overflow-hidden">
+          <h3 class="font-bold mb-2">Overflow</h3>
+          <p class="truncate text-sm bg-neutral-20 p-2 rounded-sm">This line is intentionally long so truncate can be tested properly.</p>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <h3 class="font-bold mb-2">Sizing</h3>
+          <div class="w-full bg-neutral-20 rounded-sm">
+            <div class="w-48 h-6 bg-primary-80 rounded-sm"></div>
+          </div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <h3 class="font-bold mb-2">Borders</h3>
+          <div class="border-4 border-primary-80 rounded-lg p-3 text-sm">border-4 rounded-lg</div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <h3 class="font-bold mb-2">Shadows</h3>
+          <div class="shadow-lg rounded-md p-3 text-sm">shadow-lg</div>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <h3 class="font-bold mb-2">Opacity</h3>
+          <div class="flex gap-2">
+            <span class="bg-primary-80 opacity-25 h-8 w-8 rounded-sm"></span>
+            <span class="bg-primary-80 opacity-50 h-8 w-8 rounded-sm"></span>
+            <span class="bg-primary-80 opacity-100 h-8 w-8 rounded-sm"></span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="responsive-examples" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Responsive examples</h2>
+      <p class="text-neutral-80 mb-6">These cards change layout using responsive variants.</p>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div class="bg-primary-10 border border-primary-30 rounded-md p-4">
+          <p class="font-bold">Mobile</p>
+          <p class="text-sm">1 column by default</p>
+        </div>
+        <div class="bg-secondary-10 border border-secondary-30 rounded-md p-4">
+          <p class="font-bold">Small</p>
+          <p class="text-sm">2 columns from sm</p>
+        </div>
+        <div class="bg-success-10 border border-success-30 rounded-md p-4">
+          <p class="font-bold">Large</p>
+          <p class="text-sm">4 columns from lg</p>
+        </div>
+        <div class="bg-warning-10 border border-warning-30 rounded-md p-4">
+          <p class="font-bold">Build check</p>
+          <p class="text-sm">sm: and lg: classes used</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="state-examples" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">State examples</h2>
+      <p class="text-neutral-80 mb-6">Tests hover, focus-visible, active and disabled variants.</p>
+
+      <div class="flex flex-wrap gap-3">
+        <button class="bg-primary-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-primary-90 active:bg-primary-100 focus-visible:ring-2 ring-primary-80">
+          Hover and focus
+        </button>
+
+        <button class="bg-secondary-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-secondary-90 active:bg-secondary-100 focus-visible:ring-2 ring-secondary-80">
+          Active state
+        </button>
+
+        <button disabled class="bg-neutral-30 text-neutral-70 px-5 py-3 rounded-md font-semibold disabled:opacity-50">
+          Disabled
+        </button>
+
+        <a href="#" class="inline-flex items-center justify-center text-primary-80 underline decoration-2 hover:text-primary-90 focus-visible:ring-2 ring-primary-80 rounded-sm">
+          Focusable link
+        </a>
+      </div>
+    </section>
+
+    <section id="dark-mode" class="bg-white dark:bg-neutral-90 rounded-lg shadow-md border border-neutral-20 dark:border-neutral-70 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2 text-neutral-90 dark:text-neutral-10">Dark mode example</h2>
+      <p class="text-neutral-80 dark:text-neutral-20 mb-6">This section tests dark: colour variants.</p>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="bg-neutral-10 dark:bg-neutral-80 border border-neutral-20 dark:border-neutral-60 rounded-md p-4">
+          <p class="font-bold text-neutral-90 dark:text-neutral-10">Panel</p>
+          <p class="text-sm text-neutral-70 dark:text-neutral-20">dark:bg-neutral-80</p>
+        </div>
+
+        <div class="bg-primary-10 dark:bg-primary-90 border border-primary-30 dark:border-primary-70 rounded-md p-4">
+          <p class="font-bold text-primary-90 dark:text-primary-10">Brand</p>
+          <p class="text-sm text-primary-90 dark:text-primary-10">dark:bg-primary-90</p>
+        </div>
+
+        <div class="bg-secondary-10 dark:bg-secondary-90 border border-secondary-30 dark:border-secondary-70 rounded-md p-4">
+          <p class="font-bold text-secondary-90 dark:text-secondary-10">Accent</p>
+          <p class="text-sm text-secondary-90 dark:text-secondary-10">dark:text-secondary-10</p>
+        </div>
+      </div>
+    </section>
+
+    <section id="accessibility-examples" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Accessibility examples</h2>
+      <p class="text-neutral-80 mb-6">Examples for focus, labels, errors, hidden text and live messages.</p>
+
+      <a href="#main-content" class="skip-link">
+        Skip to main content
+      </a>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <form class="border border-neutral-20 rounded-md p-5">
+          <h3 class="text-xl font-bold mb-4">Form error</h3>
+
+          <label for="email-error" class="block font-semibold mb-2">Email address</label>
+          <p id="email-error-message" class="text-error-90 font-semibold mb-2">Enter an email address in the correct format.</p>
+          <input id="email-error" aria-describedby="email-error-message" aria-invalid="true" class="w-full border-2 border-error-80 rounded-md p-3 focus-visible:ring-2 ring-error-80" type="email" value="andy">
+        </form>
+
+        <div class="border border-neutral-20 rounded-md p-5">
+          <h3 class="text-xl font-bold mb-4">Live region</h3>
+          <div role="status" aria-live="polite" class="bg-success-20 border border-success-80 rounded-md p-4 flex items-start justify-between">
+            <div>
+              <p class="font-bold text-success-90">Saved</p>
+              <p class="text-success-90">Your changes have been saved.</p>
+            </div>
+            <button aria-label="Dismiss" class="touch-target text-success-80 hover:text-success-90 ml-2 text-lg leading-none">&times;</button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="page-patterns" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Real page patterns</h2>
+      <p class="text-neutral-80 mb-6">Larger patterns you would actually use on a site or app.</p>
+
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <article class="lg:col-span-2 border border-neutral-20 rounded-lg p-6">
+          <p class="text-sm font-bold text-primary-80 mb-2">Article layout</p>
+          <h3 class="text-3xl font-bold mb-3">Design systems work best when they reduce decisions.</h3>
+          <p class="text-neutral-80 leading-relaxed mb-4">A good utility system should help teams move faster without removing judgement. This pattern tests headings, body copy, spacing and readable measure.</p>
+          <a href="#" class="text-primary-80 font-semibold underline">Continue reading</a>
+        </article>
+
+        <aside class="border border-neutral-20 rounded-lg p-6 bg-neutral-10">
+          <p class="text-sm font-bold text-neutral-70 mb-2">Dashboard panel</p>
+          <p class="text-4xl font-bold text-primary-90 mb-2">64%</p>
+          <p class="text-neutral-80">CSS reduction after production build.</p>
+        </aside>
+
+        <div class="border border-primary-30 bg-primary-10 rounded-lg p-6 lg:col-span-3">
+          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+            <div>
+              <h3 class="text-2xl font-bold text-primary-90 mb-2">Ready to ship?</h3>
+              <p class="text-primary-90">Use this section as a call-to-action pattern.</p>
+            </div>
+            <a href="#" class="inline-flex justify-center bg-primary-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-primary-90">
+              Get started
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="code-snippets" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Code snippets</h2>
+      <p class="text-neutral-80 mb-6">Live preview with full copy-ready HTML.</p>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+        <!-- Primary button -->
+        <div>
+          <h3 class="font-bold mb-3">Primary button</h3>
+          <div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6 flex items-center justify-center" style="min-height: 80px;">
+            <button class="bg-primary-80 text-white px-5 py-3 rounded-md font-semibold hover:bg-primary-90 focus-visible:ring-2 ring-primary-80">Get started</button>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span>
+              <span class="code-dot code-dot-yellow"></span>
+              <span class="code-dot code-dot-green"></span>
+              <span class="code-filename">button.html</span>
+            </div>
+            <pre><code><span class="token-line-number"> 1</span><span class="token-tag">&lt;button</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-attr">bg-primary-80</span> <span class="token-attr">text-white</span>
+<span class="token-line-number"> 2</span>         <span class="token-attr">px-5</span> <span class="token-attr">py-3</span> <span class="token-utility">rounded-md</span>
+<span class="token-line-number"> 3</span>         <span class="token-utility">font-semibold</span>
+<span class="token-line-number"> 4</span>         <span class="token-variant">hover:</span><span class="token-attr">bg-primary-90</span>
+<span class="token-line-number"> 5</span>         <span class="token-variant">focus-visible:</span><span class="token-attr">ring-2</span>
+<span class="token-line-number"> 6</span>         <span class="token-attr">ring-primary-80</span><span class="token-string">"</span><span class="token-tag">&gt;</span>
+<span class="token-line-number"> 7</span>  Get started
+<span class="token-line-number"> 8</span><span class="token-tag">&lt;/button&gt;</span></code></pre>
+          </div>
+        </div>
+
+        <!-- Responsive card grid -->
+        <div>
+          <h3 class="font-bold mb-3">Responsive card grid</h3>
+          <div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-4" style="min-height: 80px;">
+            <div class="grid grid-cols-3 gap-3">
+              <div class="bg-white border border-neutral-20 rounded-md p-3 text-sm text-neutral-70">Card one</div>
+              <div class="bg-white border border-neutral-20 rounded-md p-3 text-sm text-neutral-70">Card two</div>
+              <div class="bg-white border border-neutral-20 rounded-md p-3 text-sm text-neutral-70">Card three</div>
+            </div>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span>
+              <span class="code-dot code-dot-yellow"></span>
+              <span class="code-dot code-dot-green"></span>
+              <span class="code-filename">grid.html</span>
+            </div>
+            <pre><code><span class="token-line-number"> 1</span><span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-attr">grid</span> <span class="token-attr">grid-cols-1</span>
+<span class="token-line-number"> 2</span>      <span class="token-variant">md:</span><span class="token-attr">grid-cols-2</span>
+<span class="token-line-number"> 3</span>      <span class="token-variant">lg:</span><span class="token-attr">grid-cols-3</span>
+<span class="token-line-number"> 4</span>      <span class="token-attr">gap-6</span><span class="token-string">"</span><span class="token-tag">&gt;</span>
+<span class="token-line-number"> 5</span>  <span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-attr">bg-white</span> <span class="token-attr">border</span>
+<span class="token-line-number"> 6</span>       <span class="token-attr">border-neutral-20</span> <span class="token-utility">rounded-md</span>
+<span class="token-line-number"> 7</span>       <span class="token-attr">p-4</span><span class="token-string">"</span><span class="token-tag">&gt;</span>Card one<span class="token-tag">&lt;/div&gt;</span>
+<span class="token-line-number"> 8</span>  <span class="token-comment">&lt;!-- repeat for each card --&gt;</span>
+<span class="token-line-number"> 9</span><span class="token-tag">&lt;/div&gt;</span></code></pre>
+          </div>
+        </div>
+
+        <!-- Alert -->
+        <div>
+          <h3 class="font-bold mb-3">Alert</h3>
+          <div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6 flex items-center" style="min-height: 80px;">
+            <div class="bg-success-20 border border-success-80 rounded-md p-4 text-success-90 w-full"><strong>Success:</strong> Your changes have been saved.</div>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span>
+              <span class="code-dot code-dot-yellow"></span>
+              <span class="code-dot code-dot-green"></span>
+              <span class="code-filename">alert.html</span>
+            </div>
+            <pre><code><span class="token-line-number"> 1</span><span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-colour">bg-success-20</span>
+<span class="token-line-number"> 2</span>      <span class="token-attr">border</span> <span class="token-colour">border-success-80</span>
+<span class="token-line-number"> 3</span>      <span class="token-utility">rounded-md</span> <span class="token-attr">p-4</span>
+<span class="token-line-number"> 4</span>      <span class="token-colour">text-success-90</span><span class="token-string">"</span><span class="token-tag">&gt;</span>
+<span class="token-line-number"> 5</span>  <span class="token-tag">&lt;strong&gt;</span>Success:<span class="token-tag">&lt;/strong&gt;</span>
+<span class="token-line-number"> 6</span>  Your changes have been saved.
+<span class="token-line-number"> 7</span><span class="token-tag">&lt;/div&gt;</span></code></pre>
+          </div>
+        </div>
+
+        <!-- Dark panel -->
+        <div>
+          <h3 class="font-bold mb-3">Dark mode panel</h3>
+          <div class="bg-neutral-80 border border-neutral-20 rounded-t-lg p-6 flex items-center" style="min-height: 80px;">
+            <div class="bg-neutral-90 text-neutral-10 rounded-lg p-5 w-full">
+              <p class="font-semibold mb-1">Dark panel</p>
+              <p class="text-sm text-neutral-30">Content adapts to dark mode automatically.</p>
+            </div>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span>
+              <span class="code-dot code-dot-yellow"></span>
+              <span class="code-dot code-dot-green"></span>
+              <span class="code-filename">dark-panel.html</span>
+            </div>
+            <pre><code><span class="token-line-number"> 1</span><span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-attr">bg-white</span>
+<span class="token-line-number"> 2</span>      <span class="token-variant">dark:</span><span class="token-attr">bg-neutral-90</span>
+<span class="token-line-number"> 3</span>      <span class="token-attr">text-neutral-90</span>
+<span class="token-line-number"> 4</span>      <span class="token-variant">dark:</span><span class="token-attr">text-neutral-10</span>
+<span class="token-line-number"> 5</span>      <span class="token-utility">rounded-lg</span> <span class="token-attr">p-5</span><span class="token-string">"</span><span class="token-tag">&gt;</span>
+<span class="token-line-number"> 6</span>  <span class="token-tag">&lt;p</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-utility">font-semibold</span><span class="token-string">"</span><span class="token-tag">&gt;</span>Dark panel<span class="token-tag">&lt;/p&gt;</span>
+<span class="token-line-number"> 7</span>  <span class="token-tag">&lt;p</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"</span><span class="token-attr">text-sm</span> <span class="token-attr">text-neutral-30</span><span class="token-string">"</span><span class="token-tag">&gt;</span>
+<span class="token-line-number"> 8</span>    Content adapts to dark mode.
+<span class="token-line-number"> 9</span>  <span class="token-tag">&lt;/p&gt;</span>
+<span class="token-line-number">10</span><span class="token-tag">&lt;/div&gt;</span></code></pre>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+
+    <section id="install" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Install and setup</h2>
+      <p class="text-neutral-80 mb-6">Basic commands for getting EmilyCSS running in a project.</p>
+
+      <div class="flex flex-col gap-3">
+
+        <div class="code-window">
+          <div class="code-title-bar">
+            <span class="code-dot code-dot-red"></span>
+            <span class="code-dot code-dot-yellow"></span>
+            <span class="code-dot code-dot-green"></span>
+            <span class="code-filename">terminal</span>
+          </div>
+          <pre><code><span class="token-keyword">npm</span> install <span class="token-string">emily-css</span></code></pre>
+        </div>
+
+        <div class="code-window">
+          <div class="code-title-bar">
+            <span class="code-dot code-dot-red"></span>
+            <span class="code-dot code-dot-yellow"></span>
+            <span class="code-dot code-dot-green"></span>
+            <span class="code-filename">terminal</span>
+          </div>
+          <pre><code><span class="token-keyword">npx</span> <span class="token-string">emily-css</span> init</code></pre>
+        </div>
+
+        <div class="code-window">
+          <div class="code-title-bar">
+            <span class="code-dot code-dot-red"></span>
+            <span class="code-dot code-dot-yellow"></span>
+            <span class="code-dot code-dot-green"></span>
+            <span class="code-filename">terminal</span>
+          </div>
+          <pre><code><span class="token-keyword">npm</span> run <span class="token-string">emily:watch</span></code></pre>
+        </div>
+
+        <div class="code-window">
+          <div class="code-title-bar">
+            <span class="code-dot code-dot-red"></span>
+            <span class="code-dot code-dot-yellow"></span>
+            <span class="code-dot code-dot-green"></span>
+            <span class="code-filename">terminal</span>
+          </div>
+          <pre><code><span class="token-keyword">npm</span> run <span class="token-string">emily:build</span></code></pre>
+        </div>
+
+        <div class="code-window">
+          <div class="code-title-bar">
+            <span class="code-dot code-dot-red"></span>
+            <span class="code-dot code-dot-yellow"></span>
+            <span class="code-dot code-dot-green"></span>
+            <span class="code-filename">index.html</span>
+          </div>
+          <pre><code><span class="token-tag">&lt;link</span> <span class="token-attr">rel</span><span class="token-operator">=</span><span class="token-string">"stylesheet"</span> <span class="token-attr">href</span><span class="token-operator">=</span><span class="token-string">"./dist/emily.min.css"</span><span class="token-tag">&gt;</span></code></pre>
+        </div>
+
+      </div>
+    </section>
+
+    <section id="build-output" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Build output</h2>
+      <p class="text-neutral-80 mb-6">How EmilyCSS handles local development and production output.</p>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="border border-neutral-20 rounded-md p-4">
+          <p class="font-bold">dist/emily.min.css</p>
+          <p class="text-sm text-neutral-70">Production-ready CSS. This is the file you link to in your project.</p>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <p class="font-bold">dist/emily.css</p>
+          <p class="text-sm text-neutral-70">Temporary local framework source. Watch keeps it available when needed.</p>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <p class="font-bold">emily-css build</p>
+          <p class="text-sm text-neutral-70">Outputs dist/emily.min.css and removes dist/emily.css by default.</p>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+        <div class="border border-neutral-20 rounded-md p-4">
+          <p class="font-bold">Development</p>
+          <p class="text-sm text-neutral-70">Run npm run emily:watch. It keeps a full local emily.css available when needed and regenerates emily.min.css as classes change.</p>
+        </div>
+
+        <div class="border border-neutral-20 rounded-md p-4">
+          <p class="font-bold">Production</p>
+          <p class="text-sm text-neutral-70">Run npm run emily:build. Production should only ship dist/emily.min.css.</p>
+        </div>
+      </div>
+    </section>
+
+
+    <section id="patterns" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
+      <h2 class="text-2xl font-bold mb-2">Pattern components</h2>
+      <p class="text-neutral-80 mb-6">Single classes that combine multiple utilities into named patterns. They live in <code class="text-sm bg-neutral-20 px-1 rounded">@layer components</code> so utility classes always override them.</p>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+        <div>
+          <h3 class="font-bold mb-3">.prose</h3>
+          <div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6" style="min-height: 100px;">
+            <div class="prose">
+              <p class="text-neutral-80 leading-relaxed">Inside <code>.prose</code>. Line length is capped at 65 characters and the block centres itself — ideal for article copy and documentation.</p>
+            </div>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span><span class="code-dot code-dot-yellow"></span><span class="code-dot code-dot-green"></span>
+              <span class="code-filename">prose.html</span>
+            </div>
+            <pre><code><span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"prose"</span><span class="token-tag">&gt;</span>
+  <span class="token-tag">&lt;p&gt;</span>Article copy here.<span class="token-tag">&lt;/p&gt;</span>
+<span class="token-tag">&lt;/div&gt;</span>
+<span class="token-comment">&lt;!-- max-width: 65ch; margin-inline: auto --&gt;</span></code></pre>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="font-bold mb-3">.stack</h3>
+          <div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6" style="min-height: 100px;">
+            <div class="stack">
+              <div class="bg-primary-20 text-primary-90 rounded-md p-3 text-sm font-medium">First item</div>
+              <div class="bg-primary-20 text-primary-90 rounded-md p-3 text-sm font-medium">Second item</div>
+              <div class="bg-primary-20 text-primary-90 rounded-md p-3 text-sm font-medium">Third item</div>
+            </div>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span><span class="code-dot code-dot-yellow"></span><span class="code-dot code-dot-green"></span>
+              <span class="code-filename">stack.html</span>
+            </div>
+            <pre><code><span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"stack"</span><span class="token-tag">&gt;</span>
+  <span class="token-tag">&lt;div&gt;</span>Item one<span class="token-tag">&lt;/div&gt;</span>
+  <span class="token-tag">&lt;div&gt;</span>Item two<span class="token-tag">&lt;/div&gt;</span>
+<span class="token-tag">&lt;/div&gt;</span>
+<span class="token-comment">&lt;!-- flex-direction: column; gap: var(--space-4) --&gt;</span></code></pre>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="font-bold mb-3">.cluster</h3>
+          <div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6" style="min-height: 100px;">
+            <div class="cluster">
+              <span class="bg-primary-20 text-primary-90 px-3 py-1 rounded-full text-sm font-medium">Design systems</span>
+              <span class="bg-secondary-20 text-secondary-90 px-3 py-1 rounded-full text-sm font-medium">Accessible</span>
+              <span class="bg-success-20 text-success-90 px-3 py-1 rounded-full text-sm font-medium">No build step</span>
+              <span class="bg-warning-20 text-warning-90 px-3 py-1 rounded-full text-sm font-medium">Config-driven</span>
+            </div>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span><span class="code-dot code-dot-yellow"></span><span class="code-dot code-dot-green"></span>
+              <span class="code-filename">cluster.html</span>
+            </div>
+            <pre><code><span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"cluster"</span><span class="token-tag">&gt;</span>
+  <span class="token-tag">&lt;span&gt;</span>Tag one<span class="token-tag">&lt;/span&gt;</span>
+  <span class="token-tag">&lt;span&gt;</span>Tag two<span class="token-tag">&lt;/span&gt;</span>
+<span class="token-tag">&lt;/div&gt;</span>
+<span class="token-comment">&lt;!-- flex-wrap: wrap; gap: var(--space-4);
+     align-items: center --&gt;</span></code></pre>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="font-bold mb-3">.center-absolute</h3>
+          <div class="bg-neutral-10 border border-neutral-20 rounded-t-lg p-6" style="min-height: 160px;">
+            <div class="relative bg-neutral-20 rounded-md" style="height: 140px;">
+              <div class="center-absolute bg-white rounded-md shadow-md border border-neutral-30 p-4 text-sm text-center" style="width: max-content;">
+                <p class="font-semibold">Centred content</p>
+                <p class="text-neutral-70 text-xs mt-1">via .center-absolute</p>
+              </div>
+            </div>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span><span class="code-dot code-dot-yellow"></span><span class="code-dot code-dot-green"></span>
+              <span class="code-filename">center-absolute.html</span>
+            </div>
+            <pre><code><span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"relative"</span><span class="token-tag">&gt;</span>
+  <span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"center-absolute"</span><span class="token-tag">&gt;</span>
+    Centred content
+  <span class="token-tag">&lt;/div&gt;</span>
+<span class="token-tag">&lt;/div&gt;</span>
+<span class="token-comment">&lt;!-- position: absolute; top: 50%; left: 50%;
+     transform: translate(-50%, -50%) --&gt;</span></code></pre>
+          </div>
+        </div>
+
+        <div class="lg:col-span-2">
+          <h3 class="font-bold mb-3">.center-screen</h3>
+          <div class="border border-neutral-20 rounded-t-lg overflow-hidden bg-neutral-80" style="min-height: 200px; position: relative;">
+            <div class="center-screen" style="position: absolute;">
+              <div class="bg-white rounded-lg shadow-lg border border-neutral-20 p-6 text-center" style="max-width: 340px; width: 90%;">
+                <h4 class="text-lg font-bold mb-2">Confirm action</h4>
+                <p class="text-neutral-80 text-sm mb-4">This is how center-screen looks. In production it uses position: fixed and covers the full viewport.</p>
+                <div class="flex gap-3" style="justify-content: center;">
+                  <button class="bg-primary-80 text-white px-4 py-2 rounded-md font-semibold text-sm">Confirm</button>
+                  <button class="border border-neutral-40 px-4 py-2 rounded-md text-sm">Cancel</button>
+                </div>
+              </div>
+            </div>
+            <p class="absolute top-3 right-3 text-xs text-neutral-40 font-medium">Simulated preview</p>
+          </div>
+          <div class="code-window" style="border-top-left-radius: 0; border-top-right-radius: 0; border-top: none;">
+            <div class="code-title-bar">
+              <span class="code-dot code-dot-red"></span><span class="code-dot code-dot-yellow"></span><span class="code-dot code-dot-green"></span>
+              <span class="code-filename">center-screen.html</span>
+            </div>
+            <pre><code><span class="token-comment">&lt;!-- Backdrop --&gt;</span>
+<span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"center-screen bg-neutral-90 opacity-50"</span><span class="token-tag">&gt;&lt;/div&gt;</span>
+
+<span class="token-comment">&lt;!-- Modal --&gt;</span>
+<span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"center-screen"</span><span class="token-tag">&gt;</span>
+  <span class="token-tag">&lt;div</span> <span class="token-attr">class</span><span class="token-operator">=</span><span class="token-string">"bg-white rounded-lg p-6 shadow-lg z-modal"</span><span class="token-tag">&gt;</span>
+    Modal content
+  <span class="token-tag">&lt;/div&gt;</span>
+<span class="token-tag">&lt;/div&gt;</span>
+<span class="token-comment">&lt;!-- position: fixed; inset: 0; display: flex;
+     align-items: center; justify-content: center --&gt;</span></code></pre>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <footer class="text-center text-sm text-neutral-70 py-6">
+      Built with EmilyUI utility classes.
+    </footer>
+  </main>
+</body>
+</html>