dembrandt 0.12.6 → 0.12.8

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

@@ -13,6 +13,7 @@ import ora from "ora";
 import { chromium, firefox } from "playwright-core";
 import { extractBranding } from "./lib/extractors/index.js";
 import { displayResults } from "./lib/formatters/terminal.js";
+import { color } from "./lib/formatters/theme.js";
 import { toW3CFormat } from "./lib/formatters/w3c.js";
 import { generatePDF } from "./lib/formatters/pdf.js";
 import { generateDesignMd } from "./lib/formatters/markdown.js";
@@ -213,6 +214,9 @@ program
       // Convert to W3C format if requested
       const outputData = opts.dtcg ? toW3CFormat(result) : result;
 
+      // Collect "saved to" notices and print them after the results below
+      const savedNotices = [];
+
       // Save JSON output if --save-output or --dtcg is specified
       if (opts.saveOutput || opts.dtcg) {
         try {
@@ -230,16 +234,19 @@ program
           const filepath = join(outputDir, filename);
           writeFileSync(filepath, JSON.stringify(outputData, null, 2));
 
-          console.log(
+          const jsonLabel = opts.dtcg
+            ? 'DTCG tokens saved (--dtcg)'
+            : 'JSON saved (--save-output)';
+          savedNotices.push(
             chalk.dim(
-              `💾 JSON saved to: ${chalk.hex('#8BE9FD')(
+              `💾 ${jsonLabel}: ${color.info(
                 `output/${domain}/${filename}`
               )}`
             )
           );
         } catch (err) {
           console.log(
-            chalk.hex('#FFB86C')(`⚠ Could not save JSON file: ${err.message}`)
+            color.warning(`! Could not save JSON file: ${err.message}`)
           );
         }
       }
@@ -258,9 +265,9 @@ program
           spinner.start("Generating PDF brand guide...");
           await generatePDF(result, pdfPath, browser);
           spinner.stop();
-          console.log(
+          savedNotices.push(
             chalk.dim(
-              `PDF saved to: ${chalk.hex('#8BE9FD')(
+              `💾 Brand guide PDF saved (--brand-guide): ${color.info(
                 `output/${pdfDomain}/${pdfFilename}`
               )}`
             )
@@ -268,7 +275,7 @@ program
         } catch (err) {
           spinner.stop();
           console.log(
-            chalk.hex('#FFB86C')(`Could not generate PDF: ${err.message}`)
+            color.warning(`Could not generate PDF: ${err.message}`)
           );
         }
       }
@@ -281,27 +288,40 @@ program
           mkdirSync(mdDir, { recursive: true });
           const mdPath = join(mdDir, "DESIGN.md");
           writeFileSync(mdPath, generateDesignMd(result));
-          console.log(
+          savedNotices.push(
             chalk.dim(
-              `DESIGN.md saved to: ${chalk.hex('#8BE9FD')(
+              `💾 DESIGN.md saved (--design-md): ${color.info(
                 `output/${mdDomain}/DESIGN.md`
               )}`
             )
           );
         } catch (err) {
           console.log(
-            chalk.hex('#FFB86C')(`Could not generate DESIGN.md: ${err.message}`)
+            color.warning(`Could not generate DESIGN.md: ${err.message}`)
           );
         }
       }
 
       // Output to terminal
+      const summaryLine =
+        color.accent('✨ Analysis summary: ') +
+        chalk.dim(
+          `${result.colors?.palette?.length ?? 0} colors, ` +
+          `${result.typography?.styles?.length ?? 0} text styles, ` +
+          `${result.breakpoints?.length ?? 0} breakpoints.`
+        );
       if (opts.jsonOnly) {
         console.log = originalConsoleLog;
         console.log(JSON.stringify(outputData, null, 2));
+        // Keep stdout pure JSON: summary and notices go to stderr
+        console.error(summaryLine);
+        for (const notice of savedNotices) console.error(notice);
       } else {
         console.log();
         displayResults(result);
+        console.log();
+        console.log(summaryLine);
+        for (const notice of savedNotices) console.log(notice);
       }
     } catch (err) {
       spinner.fail("Failed");

package/lib/extractors/index.js

@@ -1,4 +1,5 @@
 import chalk from 'chalk';
+import { color } from '../formatters/theme.js';
 import { discoverLinks } from '../discovery.js';
 import { extractLogo, extractSiteName } from './logo.js';
 import { extractColors } from './colors.js';
@@ -69,11 +70,11 @@ export async function extractBranding(url, spinner, browser, options = {}) {
           const initialDomain = new URL(initialUrl).hostname;
           const finalDomain = new URL(finalUrl).hostname;
           if (initialDomain !== finalDomain) {
-            console.log(chalk.hex('#FFB86C')(`  ⚠ Page redirected to different domain:`));
+            console.log(color.warning(`  ! Page redirected to different domain:`));
             console.log(chalk.dim(`    From: ${initialUrl}`));
             console.log(chalk.dim(`    To:   ${finalUrl}`));
           } else {
-            console.log(chalk.hex('#8BE9FD')(`  ℹ Page redirected within same domain:`));
+            console.log(color.info(`  i Page redirected within same domain:`));
             console.log(chalk.dim(`    From: ${initialUrl}`));
             console.log(chalk.dim(`    To:   ${finalUrl}`));
           }
@@ -81,7 +82,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
         }
 
         spinner.stop();
-        console.log(chalk.hex('#50FA7B')(`  ✓ Page loaded`));
+        console.log(color.success(`  ✓ Page loaded`));
 
         spinner.start("Waiting for body content to render...");
         try {
@@ -90,10 +91,10 @@ export async function extractBranding(url, spinner, browser, options = {}) {
             { timeout: (options.navigationTimeout || 20000) * timeoutMultiplier }
           );
           spinner.stop();
-          console.log(chalk.hex('#50FA7B')(`  ✓ Body content rendered`));
+          console.log(color.success(`  ✓ Body content rendered`));
         } catch {
           spinner.stop();
-          console.log(chalk.hex('#FFB86C')(`  ⚠ Body content timeout (continuing)`));
+          console.log(color.warning(`  ! Body content timeout (continuing)`));
           timeouts.push('Body content rendering');
         }
 
@@ -101,7 +102,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
         const hydrationTime = 8000 * timeoutMultiplier;
         await page.waitForTimeout(hydrationTime);
         spinner.stop();
-        console.log(chalk.hex('#50FA7B')(`  ✓ Hydration complete (${hydrationTime / 1000}s)`));
+        console.log(color.success(`  ✓ Hydration complete (${hydrationTime / 1000}s)`));
 
         spinner.start("Waiting for main content...");
         try {
@@ -109,10 +110,10 @@ export async function extractBranding(url, spinner, browser, options = {}) {
             timeout: 10000 * timeoutMultiplier,
           });
           spinner.stop();
-          console.log(chalk.hex('#50FA7B')(`  ✓ Main content detected`));
+          console.log(color.success(`  ✓ Main content detected`));
         } catch {
           spinner.stop();
-          console.log(chalk.hex('#FFB86C')(`  ⚠ Main content selector timeout (continuing)`));
+          console.log(color.warning(`  ! Main content selector timeout (continuing)`));
           timeouts.push('Main content selector');
         }
 
@@ -131,25 +132,25 @@ export async function extractBranding(url, spinner, browser, options = {}) {
           window.scrollTo(0, 0);
         });
         spinner.stop();
-        console.log(chalk.hex('#50FA7B')(`  ✓ Full page scrolled (lazy content triggered)`));
+        console.log(color.success(`  ✓ Full page scrolled (lazy content triggered)`));
 
         spinner.start("Final content stabilization...");
         const stabilizationTime = 4000 * timeoutMultiplier;
         await page.waitForTimeout(stabilizationTime);
         spinner.stop();
-        console.log(chalk.hex('#50FA7B')(`  ✓ Page fully loaded and stable`));
+        console.log(color.success(`  ✓ Page fully loaded and stable`));
 
         spinner.start("Validating page content...");
         const contentLength = await page.evaluate(() => document.body.textContent.length);
         spinner.stop();
 
         if (contentLength > 100) {
-          console.log(chalk.hex('#50FA7B')(`  ✓ Content validated: ${contentLength} chars`));
+          console.log(color.success(`  ✓ Content validated: ${contentLength} chars`));
           break;
         }
 
         spinner.warn(`Page seems empty (attempt ${attempts}/${maxAttempts}), retrying...`);
-        console.log(chalk.hex('#FFB86C')(`  ⚠ Content length: ${contentLength} chars (expected >100)`));
+        console.log(color.warning(`  ! Content length: ${contentLength} chars (expected >100)`));
         await page.waitForTimeout(3000 * timeoutMultiplier);
       } catch (err) {
         if (attempts >= maxAttempts) {
@@ -165,7 +166,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     }
 
     spinner.stop();
-    console.log(chalk.hex('#8BE9FD')("\n  Extracting design tokens...\n"));
+    console.log(color.info("\n  Extracting design tokens...\n"));
 
     spinner.start("Analyzing design system (16 parallel tasks)...");
     const [
@@ -207,22 +208,22 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     ]);
 
     spinner.stop();
-    console.log(colors.palette.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Colors: ${colors.palette.length} found`) : chalk.hex('#FFB86C')(`  ⚠ Colors: 0 found`));
-    console.log(typography.styles.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Typography: ${typography.styles.length} styles`) : chalk.hex('#FFB86C')(`  ⚠ Typography: 0 styles`));
-    console.log(spacing.commonValues.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Spacing: ${spacing.commonValues.length} values`) : chalk.hex('#FFB86C')(`  ⚠ Spacing: 0 values`));
-    console.log(borderRadius.values.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Border radius: ${borderRadius.values.length} values`) : chalk.hex('#FFB86C')(`  ⚠ Border radius: 0 values`));
+    console.log(colors.palette.length > 0 ? color.success(`  ✓ Colors: ${colors.palette.length} found`) : color.warning(`  ! Colors: 0 found`));
+    console.log(typography.styles.length > 0 ? color.success(`  ✓ Typography: ${typography.styles.length} styles`) : color.warning(`  ! Typography: 0 styles`));
+    console.log(spacing.commonValues.length > 0 ? color.success(`  ✓ Spacing: ${spacing.commonValues.length} values`) : color.warning(`  ! Spacing: 0 values`));
+    console.log(borderRadius.values.length > 0 ? color.success(`  ✓ Border radius: ${borderRadius.values.length} values`) : color.warning(`  ! Border radius: 0 values`));
 
     const bordersTotal = (borders?.combinations?.length || 0);
-    console.log(bordersTotal > 0 ? chalk.hex('#50FA7B')(`  ✓ Borders: ${bordersTotal} combinations`) : chalk.hex('#FFB86C')(`  ⚠ Borders: 0 found`));
-    console.log(shadows.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Shadows: ${shadows.length} found`) : chalk.hex('#FFB86C')(`  ⚠ Shadows: 0 found`));
-    console.log(buttons.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Buttons: ${buttons.length} variants`) : chalk.hex('#FFB86C')(`  ⚠ Buttons: 0 variants`));
-    console.log(inputs.text?.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Inputs: found`) : chalk.hex('#FFB86C')(`  ⚠ Inputs: 0 styles`));
-    console.log(links.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Links: ${links.length} styles`) : chalk.hex('#FFB86C')(`  ⚠ Links: 0 styles`));
-    console.log(breakpoints.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Breakpoints: ${breakpoints.length} detected`) : chalk.hex('#FFB86C')(`  ⚠ Breakpoints: 0 detected`));
-    console.log(iconSystem.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Icon systems: ${iconSystem.length} detected`) : chalk.hex('#FFB86C')(`  ⚠ Icon systems: 0 detected`));
-    console.log(frameworks.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Frameworks: ${frameworks.length} detected`) : chalk.hex('#FFB86C')(`  ⚠ Frameworks: 0 detected`));
-    console.log(gradients.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Gradients: ${gradients.length} found`) : chalk.hex('#8BE9FD')(`  · Gradients: 0 found`));
-    console.log(motion.durations.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Motion: ${motion.durations.length} durations, ${motion.easings.length} easings`) : chalk.hex('#8BE9FD')(`  · Motion: none detected`));
+    console.log(bordersTotal > 0 ? color.success(`  ✓ Borders: ${bordersTotal} combinations`) : color.warning(`  ! Borders: 0 found`));
+    console.log(shadows.length > 0 ? color.success(`  ✓ Shadows: ${shadows.length} found`) : color.warning(`  ! Shadows: 0 found`));
+    console.log(buttons.length > 0 ? color.success(`  ✓ Buttons: ${buttons.length} variants`) : color.warning(`  ! Buttons: 0 variants`));
+    console.log(inputs.text?.length > 0 ? color.success(`  ✓ Inputs: found`) : color.warning(`  ! Inputs: 0 styles`));
+    console.log(links.length > 0 ? color.success(`  ✓ Links: ${links.length} styles`) : color.warning(`  ! Links: 0 styles`));
+    console.log(breakpoints.length > 0 ? color.success(`  ✓ Breakpoints: ${breakpoints.length} detected`) : color.warning(`  ! Breakpoints: 0 detected`));
+    console.log(iconSystem.length > 0 ? color.success(`  ✓ Icon systems: ${iconSystem.length} detected`) : color.warning(`  ! Icon systems: 0 detected`));
+    console.log(frameworks.length > 0 ? color.success(`  ✓ Frameworks: ${frameworks.length} detected`) : color.warning(`  ! Frameworks: 0 detected`));
+    console.log(gradients.length > 0 ? color.success(`  ✓ Gradients: ${gradients.length} found`) : color.info(`  · Gradients: 0 found`));
+    console.log(motion.durations.length > 0 ? color.success(`  ✓ Motion: ${motion.durations.length} durations, ${motion.easings.length} easings`) : color.info(`  · Motion: none detected`));
     console.log();
 
     // Hover/focus state extraction
@@ -427,8 +428,8 @@ export async function extractBranding(url, spinner, browser, options = {}) {
 
     spinner.stop();
     console.log(hoverFocusColors.length > 0 ?
-      chalk.hex('#50FA7B')(`  ✓ Hover/focus: ${hoverFocusColors.length} state colors found`) :
-      chalk.hex('#FFB86C')(`  ⚠ Hover/focus: 0 state colors found`));
+      color.success(`  ✓ Hover/focus: ${hoverFocusColors.length} state colors found`) :
+      color.warning(`  ! Hover/focus: 0 state colors found`));
 
     // Dark mode
     if (options.darkMode) {
@@ -458,7 +459,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       links.push(...darkModeLinks.map((link) => ({ ...link, source: "dark-mode" })));
 
       spinner.stop();
-      console.log(chalk.hex('#50FA7B')(`  ✓ Dark mode: +${darkModeColors.palette.length} colors`));
+      console.log(color.success(`  ✓ Dark mode: +${darkModeColors.palette.length} colors`));
     }
 
     // Mobile viewport
@@ -476,19 +477,19 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       colors.palette = mergedPalette;
 
       spinner.stop();
-      console.log(chalk.hex('#50FA7B')(`  ✓ Mobile: +${mobileColors.palette.length} colors`));
+      console.log(color.success(`  ✓ Mobile: +${mobileColors.palette.length} colors`));
     }
 
     spinner.stop();
     console.log();
-    console.log(chalk.hex('#50FA7B').bold("✔ Brand extraction complete!"));
+    console.log(color.success.bold("✓ Brand extraction complete!"));
 
     if (timeouts.length > 0 && !options.slow) {
       console.log();
-      console.log(chalk.hex('#FFB86C')(`⚠ ${timeouts.length} timeout(s) occurred during extraction:`));
+      console.log(color.warning(`! ${timeouts.length} timeout(s) occurred during extraction:`));
       timeouts.forEach(t => console.log(chalk.dim(`  • ${t}`)));
       console.log();
-      console.log(chalk.hex('#8BE9FD')(`💡 Tip: Try running with ${chalk.bold('--slow')} flag for more reliable results on slow-loading sites`));
+      console.log(color.info(`💡 Tip: Try running with ${chalk.bold('--slow')} flag for more reliable results on slow-loading sites`));
     }
 
     let wcag = [];
@@ -531,8 +532,8 @@ export async function extractBranding(url, spinner, browser, options = {}) {
         const staticPassing = wcag.filter(p => !p.source && p.aa).length;
         const staticTotal = wcag.filter(p => !p.source).length;
         const statesFailing = wcag.filter(p => p.source === 'state' && !p.aa).length;
-        console.log(chalk.hex('#50FA7B')(`  ✓ WCAG: ${staticPassing}/${staticTotal} pairs pass AA`) +
-          (statesFailing ? chalk.hex('#FFB86C')(` · ${statesFailing} state pair(s) fail`) : ''));
+        console.log(color.success(`  ✓ WCAG: ${staticPassing}/${staticTotal} pairs pass AA`) +
+          (statesFailing ? color.warning(` · ${statesFailing} state pair(s) fail`) : ''));
       } catch {
         spinner.stop();
       }

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

@@ -6,6 +6,7 @@
  */
 
 import chalk from 'chalk';
+import { color } from './theme.js';
 import { convertColor } from '../colors.js';
 
 /**
@@ -59,7 +60,7 @@ export function displayResults(data) {
   displayWcag(data.wcag);
 
   console.log(chalk.dim('│'));
-  console.log(chalk.dim('└─') + ' ' + chalk.hex('#50FA7B')('✓ Complete'));
+  console.log(chalk.dim('└─') + ' ' + color.success('✓ Complete'));
   console.log('');
 }
 
@@ -95,7 +96,7 @@ function displayFavicons(favicons) {
     const isLast = index === favicons.length - 1;
     const branch = isLast ? '└─' : '├─';
     const sizeInfo = favicon.sizes ? chalk.dim(` · ${favicon.sizes}`) : '';
-    console.log(chalk.dim(`│  ${branch}`) + ' ' + `${chalk.hex('#8BE9FD')(favicon.type.padEnd(18))} ${terminalLink(favicon.url)}${sizeInfo}`);
+    console.log(chalk.dim(`│  ${branch}`) + ' ' + `${color.info(favicon.type.padEnd(18))} ${terminalLink(favicon.url)}${sizeInfo}`);
   });
 
   console.log(chalk.dim('│'));
@@ -217,33 +218,36 @@ function displayColors(colors) {
 
   const uniqueColors = Array.from(colorMap.values());
 
-  // Display all colors with hex, RGB, LCH, and OKLCH formats
-  uniqueColors.forEach(({ hex, rgb, lch, oklch, label, confidence }, index) => {
+  // 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) => {
     const isLast = index === uniqueColors.length - 1;
     const branch = isLast ? '└─' : '├─';
-    const indent = isLast ? '   ' : '│  ';
 
+    let conf;
+    if (confidence === 'high') conf = color.success('●');
+    else if (confidence === 'medium') conf = color.warning('●');
+    else conf = chalk.gray('●'); // low confidence
+
+    let swatch;
     try {
-      const colorBlock = chalk.bgHex(hex)('  ');
-      let conf;
-      if (confidence === 'high') conf = chalk.hex('#50FA7B')('●');
-      else if (confidence === 'medium') conf = chalk.hex('#FFB86C')('●');
-      else conf = chalk.gray('●'); // low confidence
-
-      const labelText = label ? chalk.dim(` ${label}`) : '';
-
-      // First line: color swatch, hex, and label
-      console.log(chalk.dim(`│  ${branch}`) + ' ' + `${conf} ${colorBlock} ${hex}${labelText}`);
-      // Second line: RGB and LCH
-      console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim('rgb:   ') + rgb);
-      console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim('lch:   ') + lch);
-      console.log(chalk.dim(`│  ${indent}└─`) + ' ' + chalk.dim('oklch: ') + oklch);
+      swatch = chalk.bgHex(hex)('  ');
     } catch {
-      console.log(chalk.dim(`│  ${branch}`) + ' ' + `${hex} ${label ? chalk.dim(label) : ''}`);
-      console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim('rgb:   ') + rgb);
-      console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim('lch:   ') + lch);
-      console.log(chalk.dim(`│  ${indent}└─`) + ' ' + chalk.dim('oklch: ') + oklch);
+      swatch = '  ';
     }
+
+    const rawLabel = label || '';
+    const truncated = rawLabel.length > 22 ? rawLabel.slice(0, 21) + '…' : rawLabel;
+    const labelText = chalk.dim(truncated.padEnd(23));
+    const rgbText = chalk.dim((rgb || '').padEnd(20));
+
+    console.log(
+      chalk.dim(`│  ${branch}`) + ' ' +
+      `${conf} ${swatch} ${hex}  ` +
+      labelText + ' ' +
+      rgbText + ' ' +
+      chalk.dim(oklch || '')
+    );
   });
 
   const cssVarLimit = 15;
@@ -272,7 +276,7 @@ function displayTypography(typography) {
     }
   }
 
-  // Group styles by font family, then by context
+  // Group styles by font family: collect unique sizes (largest first) and weights
   if (typography.styles?.length > 0) {
     const fontFamilies = new Map();
 
@@ -281,18 +285,17 @@ function displayTypography(typography) {
       if (!style.family) return;
 
       if (!fontFamilies.has(style.family)) {
-        fontFamilies.set(style.family, {
-          fallbacks: style.fallbacks,
-          contexts: new Map()
-        });
+        fontFamilies.set(style.family, { sizes: new Set(), weights: new Set() });
       }
 
       const familyData = fontFamilies.get(style.family);
-      const contextKey = style.context || 'unknown';
-      if (!familyData.contexts.has(contextKey)) {
-        familyData.contexts.set(contextKey, []);
+      if (style.size) {
+        const px = Math.round(parseFloat(style.size) || 0);
+        if (px) familyData.sizes.add(px);
+      }
+      if (style.weight && style.weight !== 400) {
+        familyData.weights.add(style.weight);
       }
-      familyData.contexts.get(contextKey).push(style);
     });
 
     let fontIndex = 0;
@@ -303,69 +306,19 @@ function displayTypography(typography) {
       const isFontLast = fontIndex === totalFonts;
       const fontBranch = isFontLast ? '└─' : '├─';
 
-      console.log(chalk.dim(`│  ${fontBranch}`) + ' ' + chalk.bold(family));
-
-      if (data.fallbacks) {
-        const indent = isFontLast ? '   ' : '│  ';
-        console.log(chalk.dim(`│  ${indent}├─`) + ' ' + chalk.dim(`fallbacks: ${data.fallbacks}`));
-      }
+      const sizes = [...data.sizes]
+        .sort((a, b) => b - a)
+        .map(px => `${px}px`);
+      const sizeList = sizes.length
+        ? ' ' + chalk.dim('[ ') + sizes.join(', ') + chalk.dim(' ]')
+        : '';
 
-      let contextIndex = 0;
-      const totalContexts = data.contexts.size;
+      console.log(chalk.dim(`│  ${fontBranch}`) + ' ' + chalk.bold(family) + sizeList);
 
-      for (const [context, styles] of data.contexts) {
-        contextIndex++;
-        const isContextLast = contextIndex === totalContexts;
+      const weights = [...data.weights].sort((a, b) => a - b);
+      if (weights.length) {
         const indent = isFontLast ? '   ' : '│  ';
-        const contextBranch = isContextLast ? '└─' : '├─';
-
-        console.log(chalk.dim(`│  ${indent}${contextBranch}`) + ' ' + chalk.hex('#8BE9FD')(context));
-
-        styles.forEach((style, styleIndex) => {
-          const isStyleLast = styleIndex === styles.length - 1;
-          const styleIndent = isFontLast ? '   ' : '│  ';
-          const contextIndent = isContextLast ? '   ' : '│  ';
-          const styleBranch = isStyleLast ? '└─' : '├─';
-          const propIndent = isStyleLast ? '   ' : '│  ';
-
-          // Main size line
-          console.log(chalk.dim(`│  ${styleIndent}${contextIndent}${styleBranch}`) + ' ' + `${style.size}`);
-
-          // Collect properties
-          const props = [];
-          if (style.weight && style.weight !== 400) {
-            props.push({ key: 'weight', value: style.weight });
-          }
-          if (style.lineHeight) {
-            const lh = parseFloat(style.lineHeight);
-            let lhLabel = '';
-            if (lh <= 1.3) lhLabel = ' (tight)';
-            else if (lh >= 1.6) lhLabel = ' (relaxed)';
-            props.push({ key: 'line-height', value: `${style.lineHeight}${lhLabel}` });
-          }
-          if (style.transform) {
-            props.push({ key: 'transform', value: style.transform });
-          }
-          if (style.spacing) {
-            props.push({ key: 'letter-spacing', value: style.spacing });
-          }
-          if (style.isFluid) {
-            props.push({ key: 'fluid', value: 'yes' });
-          }
-          if (style.fontFeatures) {
-            props.push({ key: 'features', value: style.fontFeatures });
-          }
-
-          // Display properties
-          props.forEach((prop, propIndex) => {
-            const isLastProp = propIndex === props.length - 1;
-            const propBranch = isLastProp ? '└─' : '├─';
-            console.log(
-              chalk.dim(`│  ${styleIndent}${contextIndent}${propIndent}${propBranch}`) + ' ' +
-              chalk.dim(`${prop.key}: `) + `${prop.value}`
-            );
-          });
-        });
+        console.log(chalk.dim(`│  ${indent}└─`) + ' ' + chalk.dim('Weights: ') + weights.join(', '));
       }
     }
   }
@@ -417,7 +370,7 @@ function displayBorders(borders) {
   highConfCombos.slice(0, 10).forEach((combo, index) => {
     const isLast = index === Math.min(highConfCombos.length, 10) - 1;
     const branch = isLast ? '└─' : '├─';
-    const conf = combo.confidence === 'high' ? chalk.hex('#50FA7B')('●') : chalk.hex('#FFB86C')('●');
+    const conf = combo.confidence === 'high' ? color.success('●') : color.warning('●');
 
     try {
       const formats = normalizeColorFormat(combo.color);
@@ -470,7 +423,7 @@ function displayShadows(shadows) {
   sorted.slice(0, 8).forEach((s, index) => {
     const isLast = index === Math.min(sorted.length, 8) - 1 && sorted.length <= 8;
     const branch = isLast ? '└─' : '├─';
-    const conf = s.confidence === 'high' ? chalk.hex('#50FA7B')('●') : chalk.hex('#FFB86C')('●');
+    const conf = s.confidence === 'high' ? color.success('●') : color.warning('●');
     console.log(chalk.dim(`│  ${branch}`) + ' ' + `${conf} ${s.shadow}`);
   });
   if (highConfShadows.length > 8) {
@@ -543,7 +496,7 @@ function displayButtons(buttons) {
       const stateBranch = isLastState ? '└─' : '├─';
       const stateIndent = isLastState ? '   ' : '│  ';
 
-      console.log(chalk.dim(`│  ${btnIndent}${stateBranch}`) + ' ' + chalk.hex('#8BE9FD')(stateInfo.label));
+      console.log(chalk.dim(`│  ${btnIndent}${stateBranch}`) + ' ' + color.info(stateInfo.label));
 
       const props = [];
 
@@ -662,7 +615,7 @@ function displayBadges(badges) {
 
       // Show badge type
       const typeLabel = badge.isRounded ? 'Pill' : badge.styleType === 'outline' ? 'Outline' : badge.styleType === 'subtle' ? 'Subtle' : 'Filled';
-      console.log(chalk.dim(`│  ${variantIndent}${badgeBranch}`) + ' ' + chalk.hex('#8BE9FD')(typeLabel));
+      console.log(chalk.dim(`│  ${variantIndent}${badgeBranch}`) + ' ' + color.info(typeLabel));
 
       const props = [];
 
@@ -750,11 +703,11 @@ function displayInputs(inputs) {
       const branch = isLast ? '└─' : '├─';
       const indent = isLast ? '   ' : '│  ';
 
-      console.log(chalk.dim(`│  ${groupIndent}${branch}`) + ' ' + chalk.hex('#8BE9FD')(input.specificType));
+      console.log(chalk.dim(`│  ${groupIndent}${branch}`) + ' ' + color.info(input.specificType));
 
       // Display default state
       const defaultState = input.states.default;
-      console.log(chalk.dim(`│  ${groupIndent}${indent}├─`) + ' ' + chalk.hex('#8BE9FD')('Default'));
+      console.log(chalk.dim(`│  ${groupIndent}${indent}├─`) + ' ' + color.info('Default'));
 
       const defaultProps = [];
 
@@ -802,7 +755,7 @@ function displayInputs(inputs) {
       // Display focus state if available
       if (input.states.focus) {
         const focusState = input.states.focus;
-        console.log(chalk.dim(`│  ${groupIndent}${indent}└─`) + ' ' + chalk.hex('#8BE9FD')('Focus'));
+        console.log(chalk.dim(`│  ${groupIndent}${indent}└─`) + ' ' + color.info('Focus'));
 
         const focusProps = [];
 
@@ -925,7 +878,7 @@ function displayLinks(links) {
 
       // Only show default state if there's decoration or hover state
       if (hasDecoration || hasHover) {
-        console.log(chalk.dim(`│  ${linkIndent}├─`) + ' ' + chalk.hex('#8BE9FD')('Default'));
+        console.log(chalk.dim(`│  ${linkIndent}├─`) + ' ' + color.info('Default'));
 
         if (hasDecoration) {
           const decorBranch = hasHover ? '├─' : '└─';
@@ -936,7 +889,7 @@ function displayLinks(links) {
       // Display hover state if available
       if (hasHover) {
         const hoverState = link.states.hover;
-        console.log(chalk.dim(`│  ${linkIndent}└─`) + ' ' + chalk.hex('#8BE9FD')('Hover'));
+        console.log(chalk.dim(`│  ${linkIndent}└─`) + ' ' + color.info('Hover'));
 
         const hoverProps = [];
 
@@ -998,7 +951,7 @@ function displayFrameworks(frameworks) {
   frameworks.forEach((fw, index) => {
     const isLast = index === frameworks.length - 1;
     const branch = isLast ? '└─' : '├─';
-    const conf = fw.confidence === 'high' ? chalk.hex('#50FA7B')('●') : chalk.hex('#FFB86C')('●');
+    const conf = fw.confidence === 'high' ? color.success('●') : color.warning('●');
     console.log(chalk.dim(`│  ${branch}`) + ' ' + `${conf} ${fw.name} ${chalk.dim(fw.evidence)}`);
   });
   console.log(chalk.dim('│'));
@@ -1085,12 +1038,12 @@ function displayWcag(wcag) {
     const fgSwatch = chalk.bgHex(pair.fg)('  ');
     const bgSwatch = chalk.bgHex(pair.bg)('  ');
     const grade = pair.aaa
-      ? chalk.hex('#50FA7B')('AAA')
+      ? color.success('AAA')
       : pair.aa
-        ? chalk.hex('#50FA7B')('AA ')
+        ? color.success('AA ')
         : pair.aaLarge
-          ? chalk.hex('#FFB86C')('AA-Large')
-          : chalk.hex('#FF5555')('fail');
+          ? color.warning('AA-Large')
+          : color.error('fail');
     const ratio = chalk.bold(`${pair.ratio}:1`);
     const stateTag = pair.state ? chalk.dim(` [${pair.state}]`) : '';
     console.log(chalk.dim(`│  ${branch}`) + ' ' + `${fgSwatch} ${bgSwatch}  ${ratio}  ${grade}${stateTag}  ${chalk.dim(pair.fg + ' / ' + pair.bg)}`);

package/lib/formatters/theme.js

@@ -0,0 +1,38 @@
+import chalk from 'chalk';
+
+/**
+ * Terminal theme: semantic colors and canonical status icons.
+ *
+ * Colors use the ANSI 16-color palette (chalk named colors) instead of fixed
+ * truecolor hexes. Named colors are remapped by the user's terminal theme, so
+ * they stay legible on both light and dark backgrounds. Fixed pastels (the old
+ * Dracula hexes) wash out on light terminals.
+ *
+ * Each entry is a chalk function: color.success('done').
+ */
+export const color = {
+  success: chalk.green,    // completed steps, high confidence
+  warning: chalk.yellow,   // recoverable issues, medium confidence
+  error: chalk.red,        // failures
+  info: chalk.cyan,        // links, file paths, context labels
+  accent: chalk.magenta,   // summary line, special highlights
+  heading: chalk.bold,     // section titles
+  muted: chalk.gray,       // low confidence, secondary text
+  faint: chalk.dim,        // tree lines, metadata
+};
+
+/**
+ * Canonical status icons. All single display-column on every terminal: the
+ * light check/x (U+2713/U+2717) and ASCII '!'/'i' avoid the emoji-presentation
+ * width-2 rendering that the heavy variants (✔ ✘) and circled glyphs (ⓘ) get
+ * in many terminals, which would skew left-edge alignment. Status markers in
+ * the output use these exact glyphs.
+ */
+export const icon = {
+  success: '✓',
+  warning: '!',
+  error: '✗',
+  info: 'i',
+  arrow: '→',
+  bullet: '●',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.12.6",
+  "version": "0.12.8",
   "description": "Extract design tokens and publicly visible CSS information from any website",
   "mcpName": "io.github.dembrandt/dembrandt",
   "main": "index.js",
@@ -17,7 +17,6 @@
   "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"