@stacklist-app/brandkit 1.1.1 → 1.1.2

package/README.md

@@ -9,7 +9,7 @@ Swap the config and assets to generate a brand guide for any project. An optiona
 ```bash
 npm install github:The-Stack-Lab/brandkit
 # or pin to a tag
-npm install github:The-Stack-Lab/brandkit#v1.1.1
+npm install github:The-Stack-Lab/brandkit#v1.1.2
 ```
 
 Requires Node.js 18+.
@@ -23,7 +23,7 @@ npx brandkit dev brand         # preview at http://localhost:4800 (live reload)
 npx brandkit build brand       # bake into static files for production
 ```
 
-The `brand` directory name is your choice — pass any path.
+`init` scaffolds a complete, ready-to-run demo brand (the self-titled "Brandkit" guide), so `dev` shows a polished guide immediately — then you swap in your own colors, fonts, copy, and logos. The `brand` directory name is your choice — pass any path.
 
 ## CLI
 
@@ -64,7 +64,7 @@ export default {
 
 `config.json` is the single source of truth. Top-level keys:
 
-- `brand` — name, tagline, description, version
+- `brand` — name, tagline, description, version, date; optional `guideLabel` (renames the "Web Style Guide" header/footer label), `headerLogo` and `sidebarLogo` (logo image paths that replace the text wordmark in the header and left menu)
 - `fonts` — display + body with Google Fonts import
 - `theme` — CSS variable map (colors, gradients, font vars)
 - `nav` — sidebar structure
@@ -79,14 +79,22 @@ export default {
 - `accessibility` — contrast ratio grid
 - `cssVariables` — variable reference
 
-See `example/config.json` for a complete reference implementation (Freeway PHX).
+See `example/config.json` for the complete default demo brand — the same config `init` scaffolds.
 
-## How theming works
+## Theming
 
-`dist/styles.css` uses CSS custom properties (`var(--purple)`, `var(--font-display)`, etc.) with no `:root` block.
+`dist/styles.css` ships a baseline `:root` block with sensible defaults for **every** token it consumes, so a minimal or partial config never renders broken. Your config only needs to *override* what it wants to change.
 
-- **Dev**: the engine reads `config.theme` and injects a `<style data-brandkit-theme>` tag at runtime.
-- **Build**: `brandkit build` prepends the generated `:root` block to `styles.css` and injects the Google Fonts `<link>` and page title into `index.html`.
+The accent uses a fill/text split (the same convention as Material and shadcn/ui):
+
+- `--accent` — the fill color (buttons, active states)
+- `--accent-foreground` — text/icons **on** the fill (must meet contrast against `--accent`)
+- `--accent-text` — the accent used **as** text or links on a light surface
+
+This lets a low-contrast fill (say a bright orange) stay accessible: set `--accent-foreground: #000000` and `--accent-text` to a darker shade. Pre-1.1.2 configs that set `--purple` / `--purple-rgb` still work — those feed `--accent`.
+
+- **Dev**: the engine reads `config.theme` and injects a `<style data-brandkit-theme>` block at runtime, which cascades over the defaults.
+- **Build**: `brandkit build` appends the generated `:root` after the stylesheet's defaults and injects the Google Fonts `<link>` and page title into `index.html`.
 
 Swap the config, and every color, gradient, and font token updates everywhere.
 

package/cli/generate.js

@@ -72,6 +72,7 @@ module.exports = function generate(args) {
   // Theme from CSS variables
   if (extracted.cssVars) {
     newFields.theme = extractCSS.mapToTheme(extracted.cssVars);
+    ensureThemeDefaults(newFields.theme);
   }
 
   // Fonts from Tailwind
@@ -202,6 +203,39 @@ module.exports = function generate(args) {
   console.log('');
 };
 
+// Fill in the companion tokens styles.css consumes but a host stylesheet
+// rarely defines: the "r, g, b" variants used by rgba() tints, and the
+// accent on-color pairing. A light fill (e.g. orange) gets a black
+// foreground so buttons stay legible; --accent-text defaults to the fill.
+function ensureThemeDefaults(theme) {
+  if (!theme) return;
+  var rgbPairs = {
+    '--accent': '--accent-rgb',
+    '--ink': '--ink-rgb',
+    '--error': '--error-rgb',
+    '--success': '--success-rgb'
+  };
+  Object.keys(rgbPairs).forEach(function (hexKey) {
+    var rgbKey = rgbPairs[hexKey];
+    var val = theme[hexKey];
+    if (val && !theme[rgbKey] && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(val)) {
+      theme[rgbKey] = helpers.hexToRgbString(val);
+    }
+  });
+  if (theme['--accent'] && !theme['--accent-foreground'] && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(theme['--accent'])) {
+    // Pick the on-fill color with the higher WCAG contrast (not a luminance
+    // threshold — a mid-tone fill like orange reads better with black text
+    // even though it isn't "light").
+    var lum = helpers.relativeLuminance(theme['--accent']);
+    var contrastWhite = 1.05 / (lum + 0.05);
+    var contrastBlack = (lum + 0.05) / 0.05;
+    theme['--accent-foreground'] = contrastBlack >= contrastWhite ? '#000000' : '#FFFFFF';
+  }
+  if (theme['--accent'] && !theme['--accent-text']) {
+    theme['--accent-text'] = theme['--accent'];
+  }
+}
+
 function buildColors(colorList) {
   var brand = [];
   var neutrals = [];
@@ -213,7 +247,7 @@ function buildColors(colorList) {
   for (var i = 0; i < colorList.length; i++) {
     var c = colorList[i];
     // Skip colors without valid hex (Tailwind function-based colors, etc.)
-    if (!c.hex || typeof c.hex !== 'string' || !/^#[0-9a-fA-F]{3,8}$/.test(c.hex)) continue;
+    if (!c.hex || typeof c.hex !== 'string' || !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(c.hex)) continue;
     if (!c.name) continue;
     var lowerName = c.name.toLowerCase();
 

package/cli/init.js

@@ -37,6 +37,22 @@ module.exports = function init(args) {
     }
   }
 
+  // Copy the default showcase logos so the scaffold renders complete out of
+  // the box. Skipped on --update (preserve the user's assets) and skipped per
+  // file if the user already has one with that name.
+  var distLogosDir = path.join(distDir, 'logos');
+  if (!isUpdate && fs.existsSync(distLogosDir)) {
+    var logoFiles = fs.readdirSync(distLogosDir);
+    for (var l = 0; l < logoFiles.length; l++) {
+      var logoSrc = path.join(distLogosDir, logoFiles[l]);
+      var logoDest = path.join(logosDir, logoFiles[l]);
+      if (!fs.existsSync(logoDest)) {
+        fs.copyFileSync(logoSrc, logoDest);
+        console.log('    copied  logos/' + logoFiles[l]);
+      }
+    }
+  }
+
   // Create starter config.json (skip if exists and not forcing)
   var configPath = path.join(targetDir, 'config.json');
   if (!fs.existsSync(configPath) && !isUpdate) {

package/dist/engine.js

@@ -163,8 +163,18 @@
        4. Render gradients
        ============================================================== */
     function renderGradients() {
+      var gradientsSection = document.getElementById('gradients');
+      // No gradient configured → hide the whole section. The swatches are
+      // CSS-backed (var(--gradient-brand)), so leaving the scaffolding would
+      // render the default gradient under an empty "Gradient System" header.
+      if (!cfg.gradients || !cfg.gradients.length) {
+        if (gradientsSection) gradientsSection.style.display = 'none';
+        return;
+      }
+      if (gradientsSection) gradientsSection.style.display = '';
+
       var stopsContainer = document.getElementById('gradient-stops');
-      if (!stopsContainer || !cfg.gradients || !cfg.gradients.length) return;
+      if (!stopsContainer) return;
       var brand = cfg.gradients[0];
       if (brand && brand.stops && brand.stops.length) {
         stopsContainer.innerHTML = brand.stops.map(function (s) {
@@ -732,11 +742,20 @@
        18. Render shell (header, intro, footer, misc)
        ============================================================== */
     function renderShell() {
-      // Header
+      // Header — show brand.headerLogo image if set, else the brand name as text.
+      // brand.guideLabel renames the "Web Style Guide" label (header + footer).
+      var guideLabel = cfg.brand.guideLabel || 'Web Style Guide';
       var wordmark = document.getElementById('header-wordmark');
-      if (wordmark) wordmark.textContent = cfg.brand.name;
+      if (wordmark) {
+        if (cfg.brand.headerLogo) {
+          wordmark.innerHTML = '<img class="header-logo" src="' + esc(cfg.brand.headerLogo) +
+            '" alt="' + esc(cfg.brand.name || 'Logo') + '">';
+        } else {
+          wordmark.textContent = cfg.brand.name;
+        }
+      }
       var meta = document.getElementById('header-meta');
-      if (meta) meta.innerHTML = 'Web Style Guide v' + cfg.brand.version + '<br>' + cfg.brand.date;
+      if (meta) meta.innerHTML = esc(guideLabel) + ' v' + esc(cfg.brand.version) + '<br>' + esc(cfg.brand.date);
 
       // Intro
       var intro = document.getElementById('intro');
@@ -749,8 +768,8 @@
       // Footer
       var footer = document.getElementById('footer');
       if (footer) footer.innerHTML =
-        '<span>' + cfg.brand.url + ' \u00B7 ' + cfg.brand.byline + '</span>' +
-        '<span>Web Style Guide v' + cfg.brand.version + ' \u00B7 ' + cfg.brand.date + '</span>';
+        '<span>' + esc(cfg.brand.url) + ' \u00B7 ' + esc(cfg.brand.byline) + '</span>' +
+        '<span>' + esc(guideLabel) + ' v' + esc(cfg.brand.version) + ' \u00B7 ' + esc(cfg.brand.date) + '</span>';
 
       // Typography specimens — read descriptions from config
       var typeDisplayName = document.getElementById('type-display-name');
@@ -771,11 +790,21 @@
       var testerFont = document.getElementById('type-tester-font');
       var testerInput = document.getElementById('type-tester-input');
       if (testerFont && cfg.fonts) {
-        testerFont.innerHTML =
-          '<option value="' + cfg.fonts.display.family + '">' + cfg.fonts.display.family + '</option>' +
-          '<option value="' + cfg.fonts.body.family + '">' + cfg.fonts.body.family + '</option>';
-        if (testerInput) {
-          testerInput.style.fontFamily = "'" + cfg.fonts.display.family + "', sans-serif";
+        // De-duplicate families so a brand using one typeface for both
+        // display and body shows a single option, not the same one twice.
+        var famList = [];
+        if (cfg.fonts.display && cfg.fonts.display.family) famList.push(cfg.fonts.display.family);
+        if (cfg.fonts.body && cfg.fonts.body.family) famList.push(cfg.fonts.body.family);
+        var seenFam = {};
+        var uniqueFams = [];
+        famList.forEach(function (f) {
+          if (!seenFam[f]) { seenFam[f] = true; uniqueFams.push(f); }
+        });
+        testerFont.innerHTML = uniqueFams.map(function (f) {
+          return '<option value="' + esc(f) + '">' + esc(f) + '</option>';
+        }).join('');
+        if (testerInput && uniqueFams.length) {
+          testerInput.style.fontFamily = "'" + uniqueFams[0] + "', sans-serif";
         }
       }
 
@@ -816,9 +845,16 @@
           '</div>';
       }
 
-      // Sidebar brand name
+      // Sidebar brand — logo image if brand.sidebarLogo is set, else brand name
       var sidebarBrand = document.querySelector('.sidebar-brand');
-      if (sidebarBrand) sidebarBrand.textContent = 'brandkit';
+      if (sidebarBrand) {
+        if (cfg.brand.sidebarLogo) {
+          sidebarBrand.innerHTML = '<img class="sidebar-logo" src="' + esc(cfg.brand.sidebarLogo) +
+            '" alt="' + esc(cfg.brand.name || 'Logo') + '">';
+        } else {
+          sidebarBrand.textContent = cfg.brand.name || 'Brand';
+        }
+      }
     }
 
     /* ==============================================================

package/dist/logos/brandkit-mark-white.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="Brandkit mark, reversed">
+  <rect x="1.5" y="1.5" width="93" height="93" rx="20.5" fill="none" stroke="#FFFFFF" stroke-width="3"/>
+  <g fill="#FFFFFF">
+    <rect x="26" y="28" width="44" height="11" rx="5.5"/>
+    <rect x="26" y="43" width="44" height="11" rx="5.5" opacity="0.82"/>
+    <rect x="26" y="58" width="28" height="11" rx="5.5" opacity="0.64"/>
+  </g>
+</svg>

package/dist/logos/brandkit-mark.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="Brandkit mark">
+  <defs>
+    <linearGradient id="bk-grad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#4F46E5"/>
+      <stop offset="1" stop-color="#7C3AED"/>
+    </linearGradient>
+  </defs>
+  <rect width="96" height="96" rx="22" fill="url(#bk-grad)"/>
+  <g fill="#FFFFFF">
+    <rect x="26" y="28" width="44" height="11" rx="5.5"/>
+    <rect x="26" y="43" width="44" height="11" rx="5.5" opacity="0.82"/>
+    <rect x="26" y="58" width="28" height="11" rx="5.5" opacity="0.64"/>
+  </g>
+</svg>

package/dist/logos/brandkit-wordmark-dark.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="324" height="96" viewBox="0 0 324 96" role="img" aria-label="brandkit">
+  <defs>
+    <linearGradient id="bk-wm-grad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#4F46E5"/>
+      <stop offset="1" stop-color="#7C3AED"/>
+    </linearGradient>
+  </defs>
+  <rect x="0" y="8" width="80" height="80" rx="19" fill="url(#bk-wm-grad)"/>
+  <g fill="#FFFFFF">
+    <rect x="22" y="31" width="36" height="9" rx="4.5"/>
+    <rect x="22" y="44" width="36" height="9" rx="4.5" opacity="0.82"/>
+    <rect x="22" y="57" width="23" height="9" rx="4.5" opacity="0.64"/>
+  </g>
+  <text x="100" y="61" font-family="'Space Grotesk', 'Helvetica Neue', Arial, sans-serif" font-size="46" font-weight="600" letter-spacing="-1.5" fill="#111827">brandkit</text>
+</svg>

package/dist/logos/brandkit-wordmark-light.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="324" height="96" viewBox="0 0 324 96" role="img" aria-label="brandkit, reversed">
+  <rect x="1" y="9" width="78" height="78" rx="18" fill="none" stroke="#FFFFFF" stroke-width="2.5"/>
+  <g fill="#FFFFFF">
+    <rect x="22" y="31" width="36" height="9" rx="4.5"/>
+    <rect x="22" y="44" width="36" height="9" rx="4.5" opacity="0.82"/>
+    <rect x="22" y="57" width="23" height="9" rx="4.5" opacity="0.64"/>
+  </g>
+  <text x="100" y="61" font-family="'Space Grotesk', 'Helvetica Neue', Arial, sans-serif" font-size="46" font-weight="600" letter-spacing="-1.5" fill="#FFFFFF">brandkit</text>
+</svg>

package/dist/styles.css

@@ -4,6 +4,61 @@
    CSS custom properties injected by engine.js from config.json.
    ═══════════════════════════════════════════════════════════════════ */
 
+/* ───────────────────────────────────────────────────────────────────
+   Default tokens — a config only needs to OVERRIDE these.
+   This stylesheet consumes every variable below; shipping defaults here
+   means a minimal or ported config never renders broken (invisible
+   buttons, colorless code, system fonts, transparent tints).
+
+   The injected config.theme (dev) and the generated :root (build) both
+   cascade AFTER this block, so any token a config sets wins.
+
+   Backward compatibility: pre-1.1.2 configs set --purple / --purple-rgb.
+   Those feed --accent / --accent-rgb below, so old configs keep working
+   without setting the new accent tokens.
+   ─────────────────────────────────────────────────────────────────── */
+:root {
+  /* Surfaces & ink */
+  --white: #FFFFFF;
+  --cloud: #F9FAFB;
+  --mist: #F3F4F6;
+  --haze: #D1D5DB;
+  --slate: #6B7280;
+  --graphite: #374151;
+  --ink: #111827;
+  --ink-rgb: 17, 24, 39;
+
+  /* Fonts (overridden per-brand from config.fonts) */
+  --font-display: 'Inter', sans-serif;
+  --font-body: 'Inter', sans-serif;
+
+  /* Accent — fill vs. text split (Material/shadcn "on-color" convention)
+       --accent            the fill color (buttons, active chips)
+       --accent-foreground text/icon color ON the fill (must pass on --accent)
+       --accent-text       the accent used AS text/links on a light surface */
+  --accent: var(--purple, #6366F1);
+  --accent-rgb: var(--purple-rgb, 99, 102, 241);
+  --accent-foreground: #FFFFFF;
+  --accent-text: var(--accent);
+
+  /* Gradients */
+  --gradient-brand: linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #EC4899 100%);
+  --gradient-brand-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(236, 72, 153, 0.06) 100%);
+
+  /* Semantic */
+  --success: #10B981;
+  --success-rgb: 16, 185, 129;
+  --warning: #F59E0B;
+  --error: #EF4444;
+  --error-rgb: 239, 68, 68;
+
+  /* Extended palette (coral accents, code-syntax highlight) */
+  --coral: #F87171;
+  --coral-dark: #DC2626;
+  --coral-light: #FCA5A5;
+  --lavender: #A5B4FC;
+}
+
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
@@ -33,12 +88,20 @@ body {
   font-family: var(--font-display), sans-serif;
   font-size: 18px;
   font-weight: 700;
-  color: var(--purple);
+  color: var(--accent-text);
   padding: 0 24px;
   margin-bottom: 32px;
   letter-spacing: -0.02em;
 }
 
+/* Optional logo image in the sidebar top (brand.sidebarLogo) */
+.sidebar-logo {
+  display: block;
+  max-height: 28px;
+  max-width: 100%;
+  width: auto;
+}
+
 .sidebar-nav { list-style: none; }
 
 .sidebar-nav a {
@@ -52,7 +115,7 @@ body {
 }
 
 .sidebar-nav a:hover { color: var(--ink); background: var(--cloud); }
-.sidebar-nav a.active { color: var(--purple); border-left-color: var(--purple); background: rgba(var(--purple-rgb), 0.04); font-weight: 500; }
+.sidebar-nav a.active { color: var(--accent-text); border-left-color: var(--accent-text); background: rgba(var(--accent-rgb), 0.04); font-weight: 500; }
 
 /* ── Sidebar Grouped Navigation ── */
 .nav-group {
@@ -86,7 +149,7 @@ body {
 }
 
 .nav-group-items a:hover { color: var(--ink); background: var(--cloud); }
-.nav-group-items a.active { color: var(--purple); border-left-color: var(--purple); background: rgba(var(--purple-rgb), 0.04); font-weight: 500; }
+.nav-group-items a.active { color: var(--accent-text); border-left-color: var(--accent-text); background: rgba(var(--accent-rgb), 0.04); font-weight: 500; }
 
 .main { margin-left: 200px; flex: 1; }
 
@@ -126,8 +189,8 @@ body {
 }
 
 .copy-format-bar button.active {
-  background: var(--purple);
-  color: var(--white);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .copy-format-bar button:hover:not(.active) { background: var(--cloud); }
@@ -209,6 +272,14 @@ body {
   z-index: 1;
 }
 
+/* Optional logo image in the header (brand.headerLogo) */
+.header-logo {
+  display: block;
+  max-height: 56px;
+  max-width: 100%;
+  width: auto;
+}
+
 /* ── Section ── */
 .section { margin-bottom: 72px; scroll-margin-top: 24px; }
 
@@ -293,7 +364,7 @@ body {
   padding: 2px 0;
 }
 
-.color-value:hover { color: var(--purple); }
+.color-value:hover { color: var(--accent-text); }
 
 .color-role { font-size: 11px; color: var(--haze); margin-top: 2px; }
 
@@ -428,9 +499,9 @@ body {
   font-family: var(--font-body), sans-serif;
   font-size: 12px;
   font-weight: 500;
-  color: var(--purple);
-  background: rgba(var(--purple-rgb), 0.06);
-  border: 1px solid rgba(var(--purple-rgb), 0.15);
+  color: var(--accent-text);
+  background: rgba(var(--accent-rgb), 0.06);
+  border: 1px solid rgba(var(--accent-rgb), 0.15);
   border-radius: 6px;
   padding: 4px 8px;
   cursor: pointer;
@@ -488,7 +559,7 @@ body {
 .hierarchy-demo .h-primary { font-size: 15px; color: var(--ink); line-height: 1.7; margin-bottom: 14px; }
 .hierarchy-demo .h-secondary { font-size: 15px; color: var(--graphite); line-height: 1.7; margin-bottom: 14px; }
 .hierarchy-demo .h-tertiary { font-size: 13px; color: var(--slate); line-height: 1.6; margin-bottom: 14px; }
-.hierarchy-demo .h-accent { font-size: 15px; font-weight: 500; color: var(--purple); }
+.hierarchy-demo .h-accent { font-size: 15px; font-weight: 500; color: var(--accent-text); }
 
 .hierarchy-labels { display: flex; gap: 28px; flex-wrap: wrap; }
 
@@ -512,8 +583,8 @@ body {
 
 .wordmark-box.on-gradient { background: var(--gradient-brand); color: var(--white); }
 .wordmark-box.on-dark { background: var(--ink); color: var(--white); }
-.wordmark-box.on-light { background: var(--mist); color: var(--purple); }
-.wordmark-box.on-white { background: var(--white); color: var(--purple); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.08); }
+.wordmark-box.on-light { background: var(--mist); color: var(--accent-text); }
+.wordmark-box.on-white { background: var(--white); color: var(--accent-text); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.08); }
 
 .wordmark-note { font-size: 12px; color: var(--slate); text-align: center; margin-top: 6px; }
 
@@ -607,8 +678,8 @@ body {
 }
 
 .logo-format-toggle button.active {
-  background: var(--purple);
-  color: var(--white);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .logo-format-toggle button:hover:not(.active) {
@@ -627,8 +698,8 @@ body {
 }
 
 .logo-card.bg-light .logo-format-toggle button.active {
-  background: var(--purple);
-  color: var(--white);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 
 .logo-card.bg-light .logo-format-toggle button:hover:not(.active) {
@@ -682,8 +753,8 @@ body {
   color: var(--slate);
 }
 .logo-card.on-light .logo-format-toggle button.active {
-  background: var(--purple);
-  color: var(--white);
+  background: var(--accent);
+  color: var(--accent-foreground);
 }
 .logo-card.on-light .logo-format-toggle button:hover:not(.active) {
   background: var(--cloud);
@@ -696,7 +767,7 @@ body {
 .logo-card.on-light .logo-download-btn {
   border-color: var(--haze);
   background: transparent;
-  color: var(--purple);
+  color: var(--accent-text);
 }
 .logo-card.on-light .logo-download-btn:hover {
   background: var(--cloud);
@@ -727,11 +798,11 @@ body {
 .logo-card.bg-light .logo-download-btn {
   border-color: var(--haze);
   background: transparent;
-  color: var(--purple);
+  color: var(--accent-text);
 }
 
 .logo-card.bg-light .logo-download-btn:hover {
-  background: rgba(var(--purple-rgb), 0.06);
+  background: rgba(var(--accent-rgb), 0.06);
 }
 
 /* ── Voice ── */
@@ -759,7 +830,7 @@ body {
   color: var(--ink);
   margin-bottom: 10px;
   padding-left: 16px;
-  border-left: 2px solid rgba(var(--purple-rgb), 0.2);
+  border-left: 2px solid rgba(var(--accent-rgb), 0.2);
 }
 
 .voice-example:last-child { margin-bottom: 0; }
@@ -792,11 +863,11 @@ body {
 .btn-sm { height: 32px; padding: 0 16px; font-size: 13px; border-radius: 9999px; }
 .btn-md { height: 40px; padding: 0 24px; font-size: 14px; border-radius: 9999px; }
 .btn-lg { height: 48px; padding: 0 28px; font-size: 16px; border-radius: 9999px; }
-.btn-primary { background: var(--purple); color: var(--white); }
-.btn-primary:hover { background: #5A2688; }
+.btn-primary { background: var(--accent); color: var(--accent-foreground); }
+.btn-primary:hover { filter: brightness(0.9); }
 .btn-secondary { background: var(--mist); color: var(--ink); }
-.btn-secondary:hover { background: #DDD8E8; }
-.btn-ghost { background: transparent; color: var(--purple); border: 1px solid var(--haze); }
+.btn-secondary:hover { filter: brightness(0.96); }
+.btn-ghost { background: transparent; color: var(--accent-text); border: 1px solid var(--haze); }
 .btn-ghost:hover { background: var(--cloud); }
 .btn-gradient { background: var(--gradient-brand); color: var(--white); }
 .btn-gradient:hover { opacity: 0.9; }
@@ -827,8 +898,8 @@ body {
   font-weight: 500;
   padding: 3px 10px;
   border-radius: 9999px;
-  background: rgba(var(--purple-rgb), 0.08);
-  color: var(--purple);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent-text);
 }
 
 .dark-card-demo { background: var(--ink); border-radius: 20px; padding: 36px; margin-top: 20px; }
@@ -915,7 +986,7 @@ body {
 
 .a11y-badge.pass { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
 .a11y-badge.fail { background: rgba(var(--error-rgb), 0.12); color: var(--error); }
-.a11y-badge.large { background: rgba(var(--purple-rgb), 0.12); color: var(--purple); }
+.a11y-badge.large { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-text); }
 
 /* ── Code Block ── */
 .code-block {

package/lib/config-schema.js

@@ -1,41 +1,62 @@
 /**
- * Starter config template with __TODO markers for AI agents.
- * Every section includes example entries with the correct field names
- * so AI agents can see the exact schema contract.
- * Extractable fields (colors, fonts, spacing, logos) are populated by generate.
+ * Default showcase config — a complete, company-agnostic "Brandkit" brand guide.
+ *
+ * This is what `brandkit init` scaffolds and what the example/ demo renders, so
+ * a fresh standup looks polished immediately. It doubles as living documentation:
+ * every section is populated with real, neutral sample content (no __TODO), using
+ * the v1.1.2 accent convention (--accent / --accent-foreground / --accent-text).
+ *
+ * Swap the values for your own brand. `brandkit generate` overwrites the
+ * extractable fields (colors, fonts, spacing, logos) from your codebase and
+ * preserves the curated ones (voice, components, accessibility copy).
  */
 function starterConfig() {
   return {
     brand: {
-      name: '__TODO',
-      displayName: '__TODO',
-      tagline: '__TODO',
-      description: '__TODO: A brief description of the brand and its visual language.',
-      url: '__TODO',
-      byline: '__TODO',
+      name: 'brandkit',
+      displayName: 'Brandkit',
+      tagline: 'The config-driven brand guide',
+      description: 'Brandkit turns a single config.json into a complete, living brand guide — colors, typography, logos, voice, and components, all driven by design tokens. This is the default guide; swap the config and assets to make it your own.',
+      url: 'github.com/The-Stack-Lab/brandkit',
+      byline: 'Open source · MIT',
       version: '1.0',
-      date: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+      date: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
+      // Renames the "Web Style Guide" label in the header + footer.
+      guideLabel: 'Web Style Guide',
+      // Optional logo images. headerLogo replaces the text wordmark on the
+      // gradient header (use a light/reversed logo); sidebarLogo replaces the
+      // brand name at the top of the left menu (use a dark logo). Leave empty
+      // to fall back to the brand name as text.
+      headerLogo: '',
+      sidebarLogo: 'logos/brandkit-wordmark-dark.svg'
     },
     fonts: {
       display: {
-        family: 'Inter',
-        googleImport: 'Inter:wght@300;400;500;600;700',
-        description: '__TODO: Describe the display font character and usage.'
+        family: 'Space Grotesk',
+        googleImport: 'Space+Grotesk:wght@400;500;600;700',
+        description: 'Space Grotesk — a geometric sans with a little character. Used for headlines, the wordmark, and large display moments.'
       },
       body: {
         family: 'Inter',
         googleImport: 'Inter:wght@300;400;500;600;700',
-        description: '__TODO: Describe the body font character and usage.'
+        description: 'Inter — a highly legible workhorse for body copy, UI labels, and long-form reading at every size.'
       }
     },
     theme: {
-      '--purple': '#6366F1',
-      '--violet': '#4338CA',
+      // Accent fill vs. text split. --accent is the fill; --accent-foreground
+      // is text/icons ON the fill; --accent-text is the accent used AS text on
+      // a light surface. For a low-contrast fill (e.g. a bright orange), set
+      // --accent-foreground to a dark value and --accent-text to a darker shade.
+      '--accent': '#4F46E5',
+      '--accent-rgb': '79, 70, 229',
+      '--accent-foreground': '#FFFFFF',
+      '--accent-text': '#4338CA',
+      '--accent-2': '#7C3AED',
       '--lavender': '#A5B4FC',
-      '--coral': '#F87171',
-      '--coral-dark': '#DC2626',
-      '--coral-light': '#FCA5A5',
-      '--magenta': '#EC4899',
+      '--coral': '#FB7185',
+      '--coral-dark': '#E11D48',
+      '--coral-light': '#FDA4AF',
+      '--magenta': '#DB2777',
       '--ink': '#111827',
       '--graphite': '#374151',
       '--slate': '#6B7280',
@@ -43,16 +64,15 @@ function starterConfig() {
       '--mist': '#F3F4F6',
       '--cloud': '#F9FAFB',
       '--white': '#FFFFFF',
-      '--success': '#10B981',
-      '--warning': '#F59E0B',
-      '--error': '#EF4444',
-      '--info': '#3B82F6',
-      '--gradient-brand': 'linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #EC4899 100%)',
-      '--gradient-brand-subtle': 'linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(236, 72, 153, 0.06) 100%)',
-      '--purple-rgb': '99, 102, 241',
+      '--success': '#16A34A',
+      '--warning': '#D97706',
+      '--error': '#DC2626',
+      '--info': '#2563EB',
+      '--gradient-brand': 'linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)',
+      '--gradient-brand-subtle': 'linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%)',
       '--ink-rgb': '17, 24, 39',
-      '--error-rgb': '239, 68, 68',
-      '--success-rgb': '16, 185, 129'
+      '--error-rgb': '220, 38, 38',
+      '--success-rgb': '22, 163, 74'
     },
     nav: [
       { group: 'Colors', items: [
@@ -76,57 +96,62 @@ function starterConfig() {
     ],
     colors: {
       brand: { label: 'Brand', items: [
-        { name: '__TODO: Primary', hex: '#6366F1', oklch: 'oklch(0.55 0.22 264)', cssVar: '--color-primary', role: '__TODO: Primary accent', light: false },
-        { name: '__TODO: Secondary', hex: '#EC4899', oklch: 'oklch(0.59 0.22 346)', cssVar: '--color-secondary', role: '__TODO: Secondary accent', light: false }
+        { name: 'Indigo', hex: '#4F46E5', oklch: 'oklch(0.51 0.23 277)', cssVar: '--accent', role: 'Primary accent — buttons, links, focus', light: false },
+        { name: 'Violet', hex: '#7C3AED', oklch: 'oklch(0.54 0.25 293)', cssVar: '--accent-2', role: 'Secondary accent, gradient end', light: false }
       ]},
       neutrals: { label: 'Neutrals', items: [
-        { name: 'Ink', hex: '#111827', oklch: 'oklch(0.17 0.02 265)', cssVar: '--foreground', role: 'Primary text, headings', light: false },
-        { name: 'Slate', hex: '#6B7280', oklch: 'oklch(0.55 0.02 265)', cssVar: '--muted-foreground', role: 'Tertiary text, captions', light: false },
-        { name: 'Mist', hex: '#F3F4F6', oklch: 'oklch(0.96 0.01 265)', cssVar: '--secondary', role: 'Section backgrounds', light: true },
-        { name: 'Cloud', hex: '#F9FAFB', oklch: 'oklch(0.98 0.00 265)', cssVar: '--background', role: 'Page background', light: true }
+        { name: 'Ink', hex: '#111827', oklch: 'oklch(0.21 0.03 265)', cssVar: '--ink', role: 'Primary text, headings', light: false },
+        { name: 'Graphite', hex: '#374151', oklch: 'oklch(0.37 0.03 260)', cssVar: '--graphite', role: 'Secondary text, descriptions', light: false },
+        { name: 'Slate', hex: '#6B7280', oklch: 'oklch(0.55 0.02 264)', cssVar: '--slate', role: 'Tertiary text, captions', light: false },
+        { name: 'Mist', hex: '#F3F4F6', oklch: 'oklch(0.97 0.00 265)', cssVar: '--mist', role: 'Borders, section backgrounds', light: true },
+        { name: 'Cloud', hex: '#F9FAFB', oklch: 'oklch(0.98 0.00 248)', cssVar: '--cloud', role: 'Page background', light: true }
       ]},
       semantic: { label: 'Semantic', items: [
-        { name: 'Success', hex: '#10B981', oklch: 'oklch(0.70 0.17 163)', cssVar: '--success', role: 'Confirmations, positive states', light: false },
-        { name: 'Warning', hex: '#F59E0B', oklch: 'oklch(0.78 0.16 80)', cssVar: '--warning', role: 'Attention, caution states', light: false },
-        { name: 'Error', hex: '#EF4444', oklch: 'oklch(0.59 0.22 27)', cssVar: '--destructive', role: 'Errors, destructive actions', light: false }
+        { name: 'Success', hex: '#16A34A', oklch: 'oklch(0.63 0.17 149)', cssVar: '--success', role: 'Confirmations, positive states', light: false },
+        { name: 'Warning', hex: '#D97706', oklch: 'oklch(0.67 0.16 58)', cssVar: '--warning', role: 'Attention, caution states', light: false },
+        { name: 'Error', hex: '#DC2626', oklch: 'oklch(0.58 0.22 27)', cssVar: '--error', role: 'Errors, destructive actions', light: false }
       ]}
     },
     gradients: [
       {
         name: 'Brand',
-        css: 'linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #EC4899 100%)',
-        description: '__TODO: Primary gradient usage',
+        css: 'linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)',
+        description: 'Hero backgrounds, feature headers, the wordmark lockup',
         stops: [
-          { color: '#4338CA', position: '0%', name: 'Violet' },
-          { color: '#6366F1', position: '50%', name: 'Indigo' },
-          { color: '#EC4899', position: '100%', name: 'Pink' }
+          { color: '#4F46E5', position: '0%', name: 'Indigo' },
+          { color: '#7C3AED', position: '100%', name: 'Violet' }
         ]
       },
       {
         name: 'Subtle',
-        css: 'linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(236, 72, 153, 0.06) 100%)',
+        css: 'linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%)',
         description: 'Card tints, section backgrounds, hover states'
       }
     ],
     gradientUsage: {
-      do: ['__TODO: When to use the gradient'],
-      dont: ['__TODO: When not to use the gradient']
+      do: ['Hero and feature section backgrounds', 'Large display headlines (as gradient text)', 'Key stat numbers and accent moments'],
+      dont: ['Body copy or small text', 'Behind dense UI or data tables', 'More than one focal area per screen']
     },
     sections: {
-      gradients: '__TODO: Describe the gradient system.',
-      gradientTextDemo: '__TODO: A headline to demo gradient text.',
-      logos: 'Download logo files for use across web, social, and print materials. Select format and size, then download.',
-      components: '__TODO: Describe the component patterns.',
-      spacing: '__TODO: Describe the spacing scale.',
-      variables: '__TODO: Describe the CSS variable system.'
+      gradients: 'One brand gradient, used sparingly for hero moments and large headlines. The subtle variant tints cards and section backgrounds without competing with content.',
+      gradientTextDemo: 'One config, every token.',
+      logos: 'Download the logo in the format and size you need. Select a variant, then download — raster formats can be resized on the fly.',
+      components: 'A small set of building blocks — buttons, cards, and stats — that inherit every brand token automatically. Change the config and they all update.',
+      spacing: 'A consistent spacing scale keeps layouts in rhythm. Use these tokens for padding, gaps, and margins instead of arbitrary values.',
+      variables: 'Every token below is a CSS custom property. Copy any line and drop it straight into your stylesheet.'
     },
     hierarchy: [
       { class: 'h-primary', label: 'Primary', colorVar: '--ink', colorName: 'Ink', hex: '#111827', description: 'Primary text — body copy, headings, and content where readability is critical.' },
       { class: 'h-secondary', label: 'Secondary', colorVar: '--graphite', colorName: 'Graphite', hex: '#374151', description: 'Secondary text — descriptions, supporting information, and labels.' },
       { class: 'h-tertiary', label: 'Tertiary', colorVar: '--slate', colorName: 'Slate', hex: '#6B7280', description: 'Tertiary text — captions, timestamps, footnotes, and metadata.' },
-      { class: 'h-accent', label: 'Accent', colorVar: '--purple', colorName: 'Primary', hex: '#6366F1', description: 'Accent text — links, interactive labels, and calls to action.' }
+      { class: 'h-accent', label: 'Accent', colorVar: '--accent-text', colorName: 'Indigo', hex: '#4338CA', description: 'Accent text — links, interactive labels, and calls to action.' }
+    ],
+    logos: [
+      { name: 'Wordmark', description: 'Primary lockup — use on light backgrounds.', variants: { svg: 'logos/brandkit-wordmark-dark.svg' }, background: 'light' },
+      { name: 'Wordmark, reversed', description: 'For dark backgrounds and photography.', variants: { svg: 'logos/brandkit-wordmark-light.svg' }, background: 'dark' },
+      { name: 'Monogram', description: 'Compact mark for avatars and favicons.', variants: { svg: 'logos/brandkit-mark.svg' }, background: 'light' },
+      { name: 'Monogram on gradient', description: 'Reversed mark for the brand gradient.', variants: { svg: 'logos/brandkit-mark-white.svg' }, background: 'gradient' }
     ],
-    logos: [],
     logoSizes: [
       { label: 'Original', width: null },
       { label: '800px', width: 800 },
@@ -134,34 +159,44 @@ function starterConfig() {
       { label: '200px', width: 200 }
     ],
     typography: [
-      { name: 'Display XL', font: 'display', size: '72px', weight: 700, tracking: '-0.03em', leading: '1.05', sample: '__TODO: Hero headline' },
-      { name: 'Display', font: 'display', size: '56px', weight: 700, tracking: '-0.025em', leading: '1.1', sample: '__TODO: Section headline' },
-      { name: 'H1', font: 'display', size: '44px', weight: 700, tracking: '-0.02em', leading: '1.15', sample: '__TODO: Page heading' },
-      { name: 'H2', font: 'display', size: '36px', weight: 700, tracking: '-0.015em', leading: '1.2', sample: '__TODO: Section heading' },
-      { name: 'H3', font: 'display', size: '28px', weight: 600, tracking: '-0.01em', leading: '1.3', sample: '__TODO: Subsection heading' },
-      { name: 'H4', font: 'display', size: '22px', weight: 600, tracking: '-0.005em', leading: '1.35', sample: '__TODO: Card heading' },
-      { name: 'Body LG', font: 'body', size: '18px', weight: 400, tracking: '0', leading: '1.7', sample: '__TODO: Intro paragraph' },
-      { name: 'Body', font: 'body', size: '16px', weight: 400, tracking: '0', leading: '1.7', sample: '__TODO: Body copy' },
-      { name: 'Body SM', font: 'body', size: '14px', weight: 400, tracking: '0', leading: '1.6', sample: '__TODO: Small text' },
-      { name: 'Caption', font: 'body', size: '12px', weight: 500, tracking: '0.02em', leading: '1.5', sample: '__TODO: Caption text' },
-      { name: 'Overline', font: 'body', size: '11px', weight: 700, tracking: '0.1em', leading: '1.4', sample: '__TODO: Overline text', uppercase: true }
+      { name: 'Display XL', font: 'display', size: '72px', weight: 700, tracking: '-0.03em', leading: '1.05', sample: 'One config, every token' },
+      { name: 'Display', font: 'display', size: '56px', weight: 700, tracking: '-0.025em', leading: '1.1', sample: 'A brand guide that builds itself' },
+      { name: 'H1', font: 'display', size: '44px', weight: 700, tracking: '-0.02em', leading: '1.15', sample: 'Design tokens, end to end' },
+      { name: 'H2', font: 'display', size: '36px', weight: 700, tracking: '-0.015em', leading: '1.2', sample: 'Colors, type, and components' },
+      { name: 'H3', font: 'display', size: '28px', weight: 600, tracking: '-0.01em', leading: '1.3', sample: 'Consistent by construction' },
+      { name: 'H4', font: 'display', size: '22px', weight: 600, tracking: '-0.005em', leading: '1.35', sample: 'A card heading, set in display' },
+      { name: 'Body LG', font: 'body', size: '18px', weight: 400, tracking: '0', leading: '1.7', sample: 'Lead paragraphs and intros sit comfortably at this size with generous line height.' },
+      { name: 'Body', font: 'body', size: '16px', weight: 400, tracking: '0', leading: '1.7', sample: 'The default for body copy — legible, neutral, and easy on the eyes at any length.' },
+      { name: 'Body SM', font: 'body', size: '14px', weight: 400, tracking: '0', leading: '1.6', sample: 'Smaller supporting text for secondary details and helper copy.' },
+      { name: 'Caption', font: 'body', size: '12px', weight: 500, tracking: '0.02em', leading: '1.5', sample: 'Captions, timestamps, and metadata' },
+      { name: 'Overline', font: 'body', size: '11px', weight: 700, tracking: '0.1em', leading: '1.4', sample: 'Section label', uppercase: true }
     ],
     voice: {
-      description: '__TODO: Describe the brand voice.',
-      do: ['__TODO: Example of good copy'],
-      dont: ['__TODO: Example of bad copy']
+      description: 'Clear, confident, and friendly. Brandkit speaks like a thoughtful teammate — it explains the what and the why without jargon, and never talks down to the reader.',
+      do: ['Swap the config and your whole guide updates.', 'Every token is one source of truth.', 'Ship a polished brand guide in minutes.'],
+      dont: ['Leverage synergistic design paradigms.', 'It just works (somehow).', 'Refer to the documentation for further details.']
     },
     accessibility: [
-      { fg: '#6366F1', bg: '#FFFFFF', fgName: 'Primary', bgName: 'White', ratio: '__TODO', rating: '__TODO', border: true, largeText: false },
-      { fg: '#FFFFFF', bg: '#111827', fgName: 'White', bgName: 'Ink', ratio: '__TODO', rating: '__TODO', border: false, largeText: false }
+      { fg: '#4338CA', bg: '#FFFFFF', fgName: 'Indigo Text', bgName: 'White', ratio: '7.9:1', rating: 'AAA', border: true, largeText: false },
+      { fg: '#FFFFFF', bg: '#4F46E5', fgName: 'White', bgName: 'Indigo', ratio: '6.3:1', rating: 'AA', border: false, largeText: false },
+      { fg: '#FFFFFF', bg: '#111827', fgName: 'White', bgName: 'Ink', ratio: '17.7:1', rating: 'AAA', border: false, largeText: false },
+      { fg: '#374151', bg: '#F9FAFB', fgName: 'Graphite', bgName: 'Cloud', ratio: '9.9:1', rating: 'AAA', border: true, largeText: false },
+      { fg: '#6B7280', bg: '#FFFFFF', fgName: 'Slate', bgName: 'White', ratio: '4.8:1', rating: 'AA', border: true, largeText: false },
+      { fg: '#FFFFFF', bg: '#16A34A', fgName: 'White', bgName: 'Success', ratio: '3.3:1', rating: 'AA Large', border: false, largeText: true }
     ],
     cssVariables: [
-      { section: 'Colors', vars: [
-        { prop: '--color-primary', value: '#6366F1', comment: 'Primary brand color' },
-        { prop: '--foreground', value: '#111827', comment: 'Primary text' }
+      { section: 'Accent', vars: [
+        { prop: '--accent', value: '#4F46E5', comment: 'Fill — buttons, active states' },
+        { prop: '--accent-foreground', value: '#FFFFFF', comment: 'Text/icons on the fill' },
+        { prop: '--accent-text', value: '#4338CA', comment: 'Accent as text on light' }
+      ]},
+      { section: 'Neutrals', vars: [
+        { prop: '--ink', value: '#111827', comment: 'Primary text' },
+        { prop: '--slate', value: '#6B7280', comment: 'Tertiary text' },
+        { prop: '--cloud', value: '#F9FAFB', comment: 'Page background' }
       ]},
       { section: 'Typography', vars: [
-        { prop: '--font-display', value: "'Inter', sans-serif", comment: 'Display font' },
+        { prop: '--font-display', value: "'Space Grotesk', sans-serif", comment: 'Display font' },
         { prop: '--font-body', value: "'Inter', sans-serif", comment: 'Body font' }
       ]}
     ],
@@ -175,14 +210,25 @@ function starterConfig() {
     components: {
       buttons: [
         { variant: 'Primary', items: [
-          { class: 'btn-primary', sizes: ['sm', 'md', 'lg'], labels: ['Small', '__TODO: Medium CTA', '__TODO: Large CTA'] }
+          { class: 'btn-primary', sizes: ['sm', 'md', 'lg'], labels: ['Get started', 'Get started', 'Get started'] }
+        ]},
+        { variant: 'Secondary & ghost', items: [
+          { class: 'btn-secondary', sizes: ['md'], labels: ['Documentation'] },
+          { class: 'btn-ghost', sizes: ['md'], labels: ['Learn more'] }
+        ]},
+        { variant: 'Gradient', items: [
+          { class: 'btn-gradient', sizes: ['md'], labels: ['Try the demo'] }
         ]}
       ],
       cards: [
-        { title: '__TODO: Card Title', description: '__TODO: Card description text', tag: '__TODO' }
+        { title: 'One config', description: 'A single config.json drives every color, font, and component in the guide.', tag: 'Tokens' },
+        { title: 'Zero dependencies', description: 'Vanilla JS and CSS variables — nothing to install, nothing to maintain.', tag: 'Lightweight' },
+        { title: 'Bolts onto anything', description: 'Drop it into React, Vite, Astro, Next.js, or plain HTML in minutes.', tag: 'Portable' }
       ],
       stats: [
-        { value: '__TODO', label: '__TODO: Stat description' }
+        { value: '1', label: 'Config file to rule them all' },
+        { value: '0', label: 'Runtime dependencies' },
+        { value: '12', label: 'Sections, rendered from tokens' }
       ]
     }
   };

package/lib/extract-css.js

@@ -94,7 +94,7 @@ function mapToTheme(cssVars) {
   var mapping = {
     '--background': '--cloud',
     '--foreground': '--ink',
-    '--primary': '--purple',
+    '--primary': '--accent',
     '--secondary': '--mist',
     '--muted': '--mist',
     '--muted-foreground': '--slate',

package/lib/generate-helpers.js

@@ -226,7 +226,7 @@ function buildHierarchyFromTheme(theme) {
   var fg = resolve('--ink', ['--foreground'], '#111827');
   var secondary = resolve('--graphite', ['--slate', '--muted-foreground'], '#374151');
   var tertiary = resolve('--slate', ['--haze', '--muted-foreground'], '#6B7280');
-  var accent = resolve('--purple', ['--coral', '--primary'], '#6366F1');
+  var accent = resolve('--accent-text', ['--accent', '--purple', '--coral', '--primary'], '#6366F1');
 
   function keyToName(key) {
     return key.replace(/^--/, '').replace(/-/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });

package/lib/template.js

@@ -46,10 +46,12 @@ function generateFontsLink(config) {
  * Writes index.html and styles.css into the target directory.
  */
 function build(distDir, targetDir, config) {
-  // Build styles.css: prepend :root block
+  // Build styles.css: append the config :root AFTER the stylesheet's default
+  // tokens so brand overrides win the cascade (styles.css ships a baseline
+  // :root; an earlier block would be overridden by it).
   var cssTemplate = fs.readFileSync(path.join(distDir, 'styles.css'), 'utf8');
   var rootCSS = generateRootCSS(config);
-  var builtCSS = '/* Generated by brandkit build */\n' + rootCSS + '\n\n' + cssTemplate;
+  var builtCSS = cssTemplate + '\n\n/* Generated by brandkit build — brand overrides */\n' + rootCSS + '\n';
   fs.writeFileSync(path.join(targetDir, 'styles.css'), builtCSS);
 
   // Build index.html: inject fonts link + title

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stacklist-app/brandkit",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Config-driven brand guide that bolts onto any website. Zero dependencies.",
   "main": "lib/resolve.js",
   "bin": {