dembrandt 0.12.7 → 0.12.9

package/README.md

@@ -181,37 +181,6 @@ dembrandt example.com --brand-guide
 # Saves to: output/example.com/TIMESTAMP.brand-guide.pdf
 ```
 
-## Local UI
-
-Browse your extractions in a visual interface.
-
-### Setup
-
-```bash
-cd local-ui
-npm install
-```
-
-### Running
-
-```bash
-npm start
-```
-
-Opens http://localhost:5173 with API on port 3002.
-
-### Features
-
-- Visual grid of all extractions
-- Color palettes with click-to-copy
-- Typography specimens
-- Spacing, shadows, border radius visualization
-- Button and link component previews
-- Dark/light theme toggle
-- Section nav links on extraction pages, jump directly to Colors, Typography, Shadows, etc. via a sticky sidebar
-
-Extractions are performed via CLI (`dembrandt <url> --save-output`) and automatically appear in the UI.
-
 ## Recipes
 
 **Quick brand scan**

package/index.js

@@ -32,6 +32,7 @@ program
   .description("Extract design tokens from any website")
   .version(version)
   .argument("<url>")
+  .argument("[paths...]", "Additional paths to extract and merge, e.g. /pricing /docs")
   .option("--browser <type>", "Browser to use (chromium|firefox); set BROWSER_CDP_ENDPOINT env var to connect to an existing Chromium instance via CDP", "chromium")
   .option("--json-only", "Output raw JSON")
   .option("--save-output", "Save JSON file to output folder")
@@ -45,13 +46,19 @@ program
   .option("--raw-colors", "Include pre-filter raw colors in JSON output")
   .option("--screenshot <path>", "Save a screenshot of the page")
   .option("--wcag", "Analyze WCAG contrast ratios between palette colors")
-  .option("--pages <n>", "Analyze up to N total pages including start URL (default: 5)", (v) => {
+  .option("--crawl [n]", "Auto-discover and extract up to N pages via DOM links (default: 5)", (v) => {
+    if (v === undefined || v === true) return 5;
+    const n = parseInt(v, 10);
+    if (isNaN(n) || n < 1) throw new Error(`--crawl must be a positive integer, got: ${v}`);
+    return n;
+  })
+  .option("--pages <n>", "Alias for --crawl (deprecated)", (v) => {
     const n = parseInt(v, 10);
     if (isNaN(n) || n < 1) throw new Error(`--pages must be a positive integer, got: ${v}`);
     return n;
   })
   .option("--sitemap", "Discover pages from sitemap.xml instead of DOM links")
-  .action(async (input, opts) => {
+  .action(async (input, paths, opts) => {
     let url = input;
     if (!url.startsWith("http://") && !url.startsWith("https://")) {
       url = "https://" + url;
@@ -113,70 +120,79 @@ program
         }
 
         try {
-          const isMultiPage = opts.pages || opts.sitemap;
-          const maxPages = (opts.pages || 5) - 1; // -1 because homepage counts
+          const crawlN = opts.crawl ?? opts.pages ?? null;
+          const isAutoCrawl = crawlN && !opts.sitemap && (!paths || paths.length === 0);
+          const hasExplicitPaths = paths && paths.length > 0;
+
           result = await extractBranding(url, spinner, browser, {
             navigationTimeout: 90000,
             darkMode: opts.darkMode,
             mobile: opts.mobile,
             slow: opts.slow,
             screenshotPath: opts.screenshot,
-            discoverLinks: isMultiPage && !opts.sitemap ? maxPages : null,
+            discoverLinks: isAutoCrawl ? crawlN - 1 : null,
             wcag: opts.wcag,
           });
 
-          // Multi-page crawl
-          if (isMultiPage && maxPages > 0) {
-            if (!opts.jsonOnly) spinner.start("Discovering pages...");
-
-            let additionalUrls;
-            if (opts.sitemap) {
-              // Try post-redirect URL first, fall back to user-provided URL
-              // (some sites redirect to a subdomain while the sitemap stays on www)
-              additionalUrls = await parseSitemap(result.url, maxPages);
-              if (additionalUrls.length === 0 && result.url !== url) {
-                additionalUrls = await parseSitemap(url, maxPages);
-              }
-            } else {
-              additionalUrls = result._discoveredLinks || [];
+          // Build list of additional URLs to extract
+          let additionalUrls = [];
+
+          if (hasExplicitPaths) {
+            // Explicit paths: resolve against base URL
+            const base = new URL(result.url);
+            additionalUrls = paths.map(p => {
+              if (p.startsWith('http')) return p;
+              return `${base.protocol}//${base.host}${p.startsWith('/') ? p : '/' + p}`;
+            });
+          } else if (opts.sitemap) {
+            if (!opts.jsonOnly) spinner.start("Fetching sitemap...");
+            const max = crawlN ? crawlN - 1 : 20;
+            additionalUrls = await parseSitemap(result.url, max);
+            if (additionalUrls.length === 0 && result.url !== url) {
+              additionalUrls = await parseSitemap(url, max);
             }
+          } else if (isAutoCrawl) {
+            additionalUrls = result._discoveredLinks || [];
+          }
 
-            delete result._discoveredLinks;
-
-            if (additionalUrls.length === 0) {
-              if (!opts.jsonOnly) spinner.warn("No additional pages discovered");
-            } else {
-              spinner.stop();
-              if (!opts.jsonOnly) console.log(chalk.dim(`  Found ${additionalUrls.length} page(s) to analyze`));
-
-              const allResults = [result];
-              for (let i = 0; i < additionalUrls.length; i++) {
-                const pageUrl = additionalUrls[i];
-                const pageNum = i + 2;
-                const total = additionalUrls.length + 1;
-                if (!opts.jsonOnly) spinner.start(`Extracting page ${pageNum}/${total}: ${new URL(pageUrl).pathname}`);
-
-                // Polite delay between pages
-                await new Promise(r => setTimeout(r, 2000 + Math.random() * 3000));
-
-                try {
-                  const pageResult = await extractBranding(pageUrl, spinner, browser, {
-                    navigationTimeout: 90000,
-                    darkMode: opts.darkMode,
-                    mobile: opts.mobile,
-                    slow: opts.slow,
-                  });
-                  delete pageResult._discoveredLinks;
-                  allResults.push(pageResult);
-                } catch (err) {
-                  if (!opts.jsonOnly) spinner.warn(`Skipping ${pageUrl}: ${String(err?.message || err).slice(0, 80)}`);
-                }
-              }
+          delete result._discoveredLinks;
 
-              spinner.stop();
-              result = mergeResults(allResults);
+          if (additionalUrls.length === 0) {
+            if ((hasExplicitPaths || opts.sitemap || isAutoCrawl) && !opts.jsonOnly) {
+              spinner.warn("No additional pages discovered");
             }
           } else {
+            spinner.stop();
+            if (!opts.jsonOnly) console.log(chalk.dim(`  Found ${additionalUrls.length} page(s) to analyze`));
+
+            const allResults = [result];
+            for (let i = 0; i < additionalUrls.length; i++) {
+              const pageUrl = additionalUrls[i];
+              const pageNum = i + 2;
+              const total = additionalUrls.length + 1;
+              if (!opts.jsonOnly) spinner.start(`Extracting page ${pageNum}/${total}: ${new URL(pageUrl).pathname}`);
+
+              await new Promise(r => setTimeout(r, 1500 + Math.random() * 1500));
+
+              try {
+                const pageResult = await extractBranding(pageUrl, spinner, browser, {
+                  navigationTimeout: 90000,
+                  darkMode: opts.darkMode,
+                  mobile: opts.mobile,
+                  slow: opts.slow,
+                });
+                delete pageResult._discoveredLinks;
+                allResults.push(pageResult);
+              } catch (err) {
+                if (!opts.jsonOnly) spinner.warn(`Skipping ${pageUrl}: ${String(err?.message || err).slice(0, 80)}`);
+              }
+            }
+
+            spinner.stop();
+            result = mergeResults(allResults);
+          }
+
+          if (!hasExplicitPaths && !opts.sitemap && !isAutoCrawl) {
             delete result._discoveredLinks;
           }
 

package/lib/extractors/colors.js

@@ -45,6 +45,12 @@ export async function extractColors(page) {
       return result;
     }
 
+    function colorAlpha(color) {
+      if (!color) return 1;
+      const m = color.match(/rgba?\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)\)/);
+      return m ? parseFloat(m[1]) : 1;
+    }
+
     function isValidColorValue(value) {
       if (!value) return false;
       if (value.includes("calc(") || value.includes("clamp(") || value.includes("var(")) {
@@ -105,6 +111,7 @@ export async function extractColors(page) {
 
     const elements = document.querySelectorAll("*");
     const totalElements = elements.length;
+    const ctaPrimaryMap = new Map(); // normalized hex → original color for CTA backgrounds
 
     const contextScores = {
       logo: 5, brand: 5, primary: 4, cta: 4, hero: 3, button: 3, link: 2, header: 2, nav: 1,
@@ -133,12 +140,20 @@ export async function extractColors(page) {
         if (context.includes(keyword)) score = Math.max(score, weight);
       }
 
-      if (
-        (context.includes('button') || context.includes('btn') || context.includes('cta')) &&
+      const isCta = (context.includes('button') || context.includes('btn') || context.includes('cta')) &&
         bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent' &&
-        bgColor !== 'rgb(255, 255, 255)' && bgColor !== 'rgb(0, 0, 0)' && bgColor !== 'rgb(239, 239, 239)'
-      ) {
+        bgColor !== 'rgb(255, 255, 255)' && bgColor !== 'rgb(0, 0, 0)' && bgColor !== 'rgb(239, 239, 239)' &&
+        colorAlpha(bgColor) >= 0.7;
+
+      if (isCta) {
         score = Math.max(score, 25);
+        // CTA background is a strong primary signal — count occurrences
+        const ctaNorm = normalizeColor(bgColor);
+        if (ctaNorm) {
+          const existing = ctaPrimaryMap.get(ctaNorm) || { original: bgColor, count: 0 };
+          existing.count++;
+          ctaPrimaryMap.set(ctaNorm, existing);
+        }
       }
 
       function extractColorsFromValue(colorValue) {
@@ -159,7 +174,7 @@ export async function extractColors(page) {
       ];
 
       allColors.forEach((color) => {
-        if (color && color !== "rgba(0, 0, 0, 0)" && color !== "transparent") {
+        if (color && color !== "rgba(0, 0, 0, 0)" && color !== "transparent" && colorAlpha(color) >= 0.3) {
           const normalized = normalizeColor(color);
           const existing = colorMap.get(normalized) || { original: color, count: 0, bgCount: 0, score: 0, sources: new Set() };
           existing.count++;
@@ -174,11 +189,26 @@ export async function extractColors(page) {
       });
 
       if (context.includes("primary") || el.matches('[class*="primary"]')) {
-        semanticColors.primary = bgColor !== "rgba(0, 0, 0, 0)" && bgColor !== "transparent" ? bgColor : textColor;
+        const candidate = bgColor !== "rgba(0, 0, 0, 0)" && bgColor !== "transparent" ? bgColor : textColor;
+        if (colorAlpha(candidate) >= 0.7) semanticColors.primary = candidate;
       }
       if (context.includes("secondary")) semanticColors.secondary = bgColor;
     });
 
+    // Use most-common CTA background as primary if class-based detection missed it
+    // Require at least 2 CTA occurrences to avoid single "Sign up" buttons dominating
+    if (!semanticColors.primary && ctaPrimaryMap.size > 0) {
+      let bestScore = -1;
+      for (const [norm, entry] of ctaPrimaryMap) {
+        if (entry.count < 2) continue;
+        const data = colorMap.get(norm);
+        if (data && data.score > bestScore) {
+          bestScore = data.score;
+          semanticColors.primary = entry.original;
+        }
+      }
+    }
+
     const threshold = Math.max(3, Math.floor(totalElements * 0.01));
 
     function isStructuralColor(data, totalElements) {
@@ -295,6 +325,27 @@ export async function extractColors(page) {
       if (converted) return { ...colorItem, lch: converted.lch, oklch: converted.oklch };
       return colorItem;
     });
+
+    // Cluster alpha/lightness variants of the same hue under one token
+    // e.g. rgba(99,91,255,0.1) is a variant of #635bff, not a separate brand color
+    const primaryHex = result.semantic?.primary
+      ? hexToRgb(toOpaque(result.semantic.primary)) : null;
+
+    result.palette = result.palette.map((colorItem) => {
+      const hex = colorItem.normalized || colorItem.color;
+      const role = colorRole(hex, colorItem);
+      const onColor = bestOnColor(hex);
+      const hover = hoverVariant(hex);
+      // Mark alpha/lightness variants of primary
+      let variantOf = null;
+      if (primaryHex && role !== 'surface') {
+        const rgb = hexToRgb(hex);
+        if (rgb && isSameHueFamily(rgb, primaryHex)) {
+          variantOf = 'primary';
+        }
+      }
+      return { ...colorItem, role, onColor, hover, ...(variantOf ? { variantOf } : {}) };
+    });
   }
 
   if (result && result.cssVariables) {
@@ -313,6 +364,96 @@ export async function extractColors(page) {
   return result;
 }
 
+function hexToRgb(hex) {
+  const m = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!m) return null;
+  return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
+}
+
+function relativeLuminance({ r, g, b }) {
+  const lin = c => { c /= 255; return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+function contrastRatio(hex1, hex2) {
+  const rgb1 = hexToRgb(hex1);
+  const rgb2 = hexToRgb(hex2);
+  if (!rgb1 || !rgb2) return 1;
+  const l1 = relativeLuminance(rgb1);
+  const l2 = relativeLuminance(rgb2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function bestOnColor(hex) {
+  const onWhite = contrastRatio(hex, '#ffffff');
+  const onBlack = contrastRatio(hex, '#000000');
+  return onWhite >= onBlack ? '#ffffff' : '#000000';
+}
+
+function colorRole(hex, colorItem) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return 'unknown';
+  const lum = relativeLuminance(rgb);
+  // Surface: near-pure white or black only
+  if (lum > 0.9 || lum < 0.005) return 'surface';
+  // Neutral: low HSL saturation (grays, off-whites, taupes)
+  const max = Math.max(rgb.r, rgb.g, rgb.b) / 255;
+  const min = Math.min(rgb.r, rgb.g, rgb.b) / 255;
+  const saturation = max === 0 ? 0 : (max - min) / max;
+  if (saturation < 0.12) return 'neutral';
+  // Accent: anything chromatic with meaningful confidence
+  if (colorItem.confidence === 'high' || colorItem.confidence === 'medium') return 'accent';
+  return 'supporting';
+}
+
+function hoverVariant(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const lum = relativeLuminance(rgb);
+  // Lighten dark colors, darken light ones — always move toward better contrast
+  const factor = lum < 0.18 ? 1.2 : 0.85;
+  const clamp = v => Math.min(255, Math.max(0, Math.round(v)));
+  const r = clamp(rgb.r * factor);
+  const g = clamp(rgb.g * factor);
+  const b = clamp(rgb.b * factor);
+  return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`;
+}
+
+function toOpaque(color) {
+  if (!color) return null;
+  if (color.startsWith('#')) return color;
+  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+  if (!m) return null;
+  return `#${(+m[1]).toString(16).padStart(2,'0')}${(+m[2]).toString(16).padStart(2,'0')}${(+m[3]).toString(16).padStart(2,'0')}`;
+}
+
+function isSameHueFamily(rgb, primaryRgb, threshold = 30) {
+  // Compare hue in HSL space — same hue ±threshold degrees = variant
+  function toHsl({ r, g, b }) {
+    r /= 255; g /= 255; b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min) return { h: 0, s: 0, l };
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h;
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      default: h = ((r - g) / d + 4) / 6;
+    }
+    return { h: h * 360, s, l };
+  }
+  const h1 = toHsl(rgb);
+  const h2 = toHsl(primaryRgb);
+  // Low saturation colors are not hue-family variants
+  if (h1.s < 0.1 || h2.s < 0.1) return false;
+  const diff = Math.abs(h1.h - h2.h);
+  return Math.min(diff, 360 - diff) < threshold;
+}
+
 export async function extractWcagPairs(page) {
   let rawPairs = [];
   try {

package/lib/extractors/logo.js

@@ -161,7 +161,7 @@ export async function extractLogo(page, url) {
 
       if (rect.top < 200) score += 10;
       if (rect.left < 400) score += 10;
-      if (rect.top > 800) score -= 30;   // deeply buried elements are unlikely primary logos
+      if (rect.top > 500) score -= 50;   // anything below fold is not a primary logo
 
       // Penalize images hosted on a different domain (CDN paths on same domain are fine)
       if (el.tagName === 'IMG') {
@@ -178,8 +178,9 @@ export async function extractLogo(page, url) {
       const width = el.tagName === 'IMG' ? (el.naturalWidth || rect.width) : rect.width;
       const height = el.tagName === 'IMG' ? (el.naturalHeight || rect.height) : rect.height;
       if (width < 20 || height < 20) score -= 30;
-      if (width > 600 || height > 400) score -= 40;
-      if (altText.length > 50) score -= 30;
+      if (width > 800 || height > 500) score -= 80;   // large editorial/hero images are never logos
+      else if (width > 600 || height > 400) score -= 40;
+      if (altText.length > 50) score -= 40;           // long alt text = content image, not logo
       if (width > height && width < 400 && width > 40 && height > 10 && height < 120) score += 15;
 
       return score;
@@ -360,7 +361,24 @@ export async function extractLogo(page, url) {
       return candidates;
     }
 
-    const headerEl = document.querySelector('header, [role="banner"], [class*="header"], [id*="header"]');
+    // SPA/PWA apps often render into a root div — treat it as transparent wrapper
+    const spaRoot = document.querySelector('#app, #root, #__next, #__nuxt, [data-reactroot]');
+
+    const headerEl = document.querySelector(
+      'header, [role="banner"], [class*="header"], [id*="header"]'
+    ) || (() => {
+      // Fallback: find first visually top element in SPA root or body that spans full width
+      const root = spaRoot || document.body;
+      const children = Array.from(root.children);
+      for (const child of children) {
+        const rect = child.getBoundingClientRect();
+        const s = getComputedStyle(child);
+        if (rect.top < 100 && rect.width > window.innerWidth * 0.5 && s.display !== 'none') {
+          return child;
+        }
+      }
+      return null;
+    })();
     const navEl = document.querySelector('nav, [role="navigation"]');
     const footerEl = document.querySelector('footer, [role="contentinfo"], [class*="footer"], [id*="footer"]');
 
@@ -374,15 +392,109 @@ export async function extractLogo(page, url) {
       return null;
     })();
 
+    // Sidebar: fixed/sticky left-edge containers and semantic sidebar elements
+    // Logo is typically in the first 1-3 children of a sidebar
+    const sidebarEl = (() => {
+      // Semantic sidebar selectors
+      const candidates = document.querySelectorAll(
+        'aside, [role="complementary"], [class*="sidebar"], [class*="side-nav"], [class*="sidenav"], [class*="side-bar"], [id*="sidebar"]'
+      );
+      for (const el of candidates) {
+        const rect = el.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 100) return el;
+      }
+      // Fallback: fixed/sticky element pinned to left edge
+      const all = document.querySelectorAll('*');
+      for (const el of all) {
+        try {
+          const s = getComputedStyle(el);
+          if ((s.position === 'fixed' || s.position === 'sticky') && s.display !== 'none') {
+            const rect = el.getBoundingClientRect();
+            if (rect.left < 100 && rect.height > 200 && rect.width < 400) return el;
+          }
+        } catch {}
+      }
+      return null;
+    })();
+
+    // For header: scan first 3 children and their direct children only
+    function firstChildrenZone(container, context) {
+      if (!container) return [];
+      const candidates = [];
+      const children = Array.from(container.children).slice(0, 3);
+      for (const child of children) {
+        const shallow = document.createElement('div');
+        // Scan the child itself + its direct children
+        const els = [child, ...Array.from(child.children)];
+        for (const el of els) {
+          if (el.matches('img, svg')) {
+            const found = findLogosInZone(el.parentElement || container, context);
+            candidates.push(...found.filter(c => c.el === el || c.cssBackground));
+          }
+        }
+        // Also run full zone scan on the first child subtree (logo is often nested 1-2 levels)
+        candidates.push(...findLogosInZone(child, context));
+      }
+      return candidates;
+    }
+
+    // For sidebar: scan first 3 children and their direct children
+    function sidebarZone(container) {
+      if (!container) return [];
+      const children = Array.from(container.children).slice(0, 3);
+      const candidates = [];
+      for (const child of children) {
+        candidates.push(...findLogosInZone(child, 'header'));
+      }
+      return candidates;
+    }
+
+    // Global pre-scan: strong semantic signals that identify a logo anywhere in the document
+    const globalLogoCandidates = (() => {
+      const results = [];
+      const selectors = [
+        'img[class*="logo"]',
+        'img[id*="logo"]',
+        'a[class*="logo"] img',
+        'a[id*="logo"] img',
+        '[class*="logo-link"] img',
+        '[class*="logo-wrap"] img',
+        '[class*="logo-container"] img',
+        'a[href="/"] img',
+        'a[href="./"] img',
+      ];
+      const seen = new Set();
+      for (const sel of selectors) {
+        try {
+          document.querySelectorAll(sel).forEach(el => {
+            if (seen.has(el)) return;
+            seen.add(el);
+            const rect = el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) return;
+            if (rect.top > 500) return; // must be near top
+            if (rect.width > 600 || rect.height > 200) return; // too large
+            const score = scoreLogo(el, 'header') + 20; // bonus for semantic match
+            results.push({ el, score, context: 'header' });
+          });
+        } catch {}
+      }
+      return results;
+    })();
+
     // Deduplicate zones — nav might be inside header, avoid double-scanning
-    const headerCandidates = findLogosInZone(headerEl, 'header');
+    const headerCandidates = firstChildrenZone(headerEl, 'header');
     const navCandidates = (navEl && !headerEl?.contains(navEl))
-      ? findLogosInZone(navEl, 'header')  // same score weight as header
+      ? firstChildrenZone(navEl, 'header')
+      : [];
+    const sidebarCandidates = (sidebarEl && !headerEl?.contains(sidebarEl))
+      ? sidebarZone(sidebarEl)
       : [];
 
     const allCandidates = [
+      ...globalLogoCandidates,
       ...headerCandidates,
       ...navCandidates,
+      ...sidebarCandidates,
       ...findLogosInZone(footerEl, 'footer'),
       ...findLogosInZone(heroEl, 'hero'),
     ];

package/lib/extractors/typography.js

@@ -80,15 +80,20 @@ export async function extractTypography(page) {
         el.getAttribute("role") === "button" ||
         className.includes("btn")
       ) {
-        context = "button";
+        context = "ui";
       } else if (el.tagName === "A" && el.href) {
         context = "link";
       } else if (headingMatch) {
-        context = `heading-${headingMatch[1]}`;
-      } else if (size <= 14) {
+        const level = parseInt(headingMatch[1]);
+        // h1 at very large size = display, otherwise heading
+        context = (level === 1 && size >= 56) ? "display" : `heading-${level}`;
+      } else if (size >= 56) {
+        context = "display";  // non-heading super-sized text (hero, marketing)
+      } else if (size <= 12) {
         context = "caption";
-      } else if (size >= 20) {
-        context = "display";
+      } else if (el.tagName === "LABEL" || el.tagName === "SMALL" ||
+                 className.includes("label") || className.includes("caption") || className.includes("badge")) {
+        context = "ui";
       }
 
       const key = `${family}|${size}|${weight}|${context}|${letterSpacing}|${textTransform}`;

package/lib/formatters/markdown.js

@@ -157,6 +157,7 @@ function buildTypographyTokens(result) {
       fontWeight: normalizeFontWeight(style.fontWeight ?? style.weight),
       lineHeight: normalizeLineHeight(style.lineHeight),
       letterSpacing: normalizeDimension(style.letterSpacing),
+      fontFeature: normalizeFontFeature(style.fontFeatures ?? style.fontFeature),
     });
 
     if (!token || !token.fontFamily && !token.fontSize) continue;
@@ -408,6 +409,12 @@ function normalizeFontFamily(value) {
   return String(value).trim().replace(/\s+/g, ' ');
 }
 
+function normalizeFontFeature(value) {
+  if (!value) return null;
+  const raw = String(value).trim();
+  return raw && raw !== 'normal' ? raw : null;
+}
+
 function normalizeFontWeight(value) {
   if (value == null) return null;
   const parsed = parseInt(value, 10);

package/lib/formatters/terminal.js

@@ -185,7 +185,10 @@ function displayColors(colors) {
         hasAlpha: formats.hasAlpha,
         label: '',
         type: 'palette',
-        confidence: c.confidence
+        confidence: c.confidence,
+        role: c.role,
+        onColor: c.onColor,
+        hover: c.hover,
       });
     });
   }
@@ -220,14 +223,14 @@ function displayColors(colors) {
 
   // Display each color on a single line: swatch, hex, role, rgb, oklch.
   // lch is omitted here for compactness but remains in JSON output.
-  uniqueColors.forEach(({ hex, rgb, oklch, label, confidence }, index) => {
+  uniqueColors.forEach(({ hex, rgb, oklch, label, confidence, role, onColor, hover }, index) => {
     const isLast = index === uniqueColors.length - 1;
     const branch = isLast ? '└─' : '├─';
 
     let conf;
     if (confidence === 'high') conf = color.success('●');
     else if (confidence === 'medium') conf = color.warning('●');
-    else conf = chalk.gray('●'); // low confidence
+    else conf = chalk.gray('●');
 
     let swatch;
     try {
@@ -236,17 +239,25 @@ function displayColors(colors) {
       swatch = '  ';
     }
 
-    const rawLabel = label || '';
-    const truncated = rawLabel.length > 22 ? rawLabel.slice(0, 21) + '…' : rawLabel;
-    const labelText = chalk.dim(truncated.padEnd(23));
+    let onSwatch = '';
+    if (onColor && role === 'accent') {
+      try { onSwatch = ' on:' + chalk.bgHex(hex)(chalk.hex(onColor)(' Aa ')); } catch {}
+    }
+
+    const rawLabel = label || (role && role !== 'palette' ? role : '');
+    const truncated = rawLabel.length > 14 ? rawLabel.slice(0, 13) + '…' : rawLabel;
+    const labelText = chalk.dim(truncated.padEnd(15));
     const rgbText = chalk.dim((rgb || '').padEnd(20));
 
+    const hoverText = (hover && role === 'accent') ? chalk.dim(` hover:${hover}`) : '';
+
     console.log(
       chalk.dim(`│  ${branch}`) + ' ' +
       `${conf} ${swatch} ${hex}  ` +
       labelText + ' ' +
-      rgbText + ' ' +
-      chalk.dim(oklch || '')
+      rgbText +
+      onSwatch +
+      hoverText
     );
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.12.7",
+  "version": "0.12.9",
   "description": "Extract design tokens and publicly visible CSS information from any website",
   "mcpName": "io.github.dembrandt/dembrandt",
   "main": "index.js",
@@ -17,10 +17,15 @@
   "scripts": {
     "start": "node index.js",
     "install-browser": "npx playwright install chromium firefox || echo 'Playwright browser installation failed. You may need to install system dependencies manually.'",
-    "local-ui": "cd local-ui && npm start",
     "qa:baseline": "node test/qa.mjs --baseline",
     "qa:diff": "node test/qa.mjs --diff",
-    "qa:site": "node test/qa.mjs --site"
+    "qa:site": "node test/qa.mjs --site",
+    "gold:label": "node tools/gold-label.mjs",
+    "gold:run": "node tools/gold-run.mjs",
+    "gold:judge": "node tools/gold-ai-judge.mjs",
+    "gold:tune": "node tools/gold-tune.mjs",
+    "gold:cluster": "node tools/gold-cluster.mjs",
+    "gold:analyze": "node tools/gold-analyze.mjs"
   },
   "keywords": [
     "design-tokens",
@@ -42,11 +47,10 @@
   "license": "MIT",
   "dependencies": {
     "@modelcontextprotocol/sdk": "1.29.0",
-    "@playwright/browser-chromium": "^1.57.0",
-    "@playwright/browser-firefox": "^1.57.0",
     "chalk": "^5.3.0",
     "commander": "^11.1.0",
     "ora": "^7.0.1",
+    "playwright": "^1.57.0",
     "playwright-core": "^1.57.0",
     "zod": "4.3.6"
   },