dembrandt 0.7.0 → 0.7.2

package/README.md

@@ -6,15 +6,19 @@
 
 Extract any website’s design system into design tokens in a few seconds: logo, colors, typography, borders, and more. One command.
 
-![Dembrandt — Any website to design tokens](docs/screenshots/banner.png)
+![Dembrandt — Any website to design tokens](https://raw.githubusercontent.com/dembrandt/dembrandt/main/docs/images/banner.png)
 
 **CLI output**
 
-![CLI extraction of netflix.com](docs/screenshots/cli-output.png)
+![CLI extraction of netflix.com](https://raw.githubusercontent.com/dembrandt/dembrandt/main/docs/images/cli-output.png)
+
+**Brand Guide PDF**
+
+![Brand guide PDF extracted from any URL](https://raw.githubusercontent.com/dembrandt/dembrandt/main/docs/images/brand-guide.png)
 
 **Local UI**
 
-![Local UI showing extracted brand](docs/screenshots/local-ui.png)
+![Local UI showing extracted brand](https://raw.githubusercontent.com/dembrandt/dembrandt/main/docs/images/local-ui.png)
 
 ## Install
 
@@ -49,6 +53,7 @@ dembrandt bmw.de --dtcg            # Export in W3C Design Tokens (DTCG) format (
 dembrandt bmw.de --dark-mode       # Extract colors from dark mode variant
 dembrandt bmw.de --mobile          # Use mobile viewport (390x844, iPhone 12/13/14/15) for responsive analysis
 dembrandt bmw.de --slow            # 3x longer timeouts (24s hydration) for JavaScript-heavy sites
+dembrandt bmw.de --brand-guide      # Generate a brand guide PDF
 dembrandt bmw.de --no-sandbox      # Disable Chromium sandbox (required for Docker/CI)
 dembrandt bmw.de --browser=firefox # Use Firefox instead of Chromium (better for Cloudflare bypass)
 ```

package/index.js

@@ -21,7 +21,7 @@ import { join } from "path";
 program
   .name("dembrandt")
   .description("Extract design tokens from any website")
-  .version("0.7.0")
+  .version("0.7.2")
   .argument("<url>")
   .option("--browser <type>", "Browser to use (chromium|firefox)", "chromium")
   .option("--json-only", "Output raw JSON")
@@ -32,6 +32,8 @@ program
   .option("--slow", "3x longer timeouts for slow-loading sites")
   .option("--brand-guide", "Export a brand guide PDF")
   .option("--no-sandbox", "Disable browser sandbox (needed for Docker/CI)")
+  .option("--raw-colors", "Include pre-filter raw colors in JSON output")
+  .option("--screenshot <path>", "Save a screenshot of the page")
   .action(async (input, opts) => {
     let url = input;
     if (!url.startsWith("http://") && !url.startsWith("https://")) {
@@ -70,6 +72,7 @@ program
             darkMode: opts.darkMode,
             mobile: opts.mobile,
             slow: opts.slow,
+            screenshotPath: opts.screenshot,
           });
           break;
         } catch (err) {
@@ -97,6 +100,11 @@ program
 
       console.log();
 
+      // Strip raw colors unless --raw-colors flag is set
+      if (!opts.rawColors && result.colors && result.colors.rawColors) {
+        delete result.colors.rawColors;
+      }
+
       // Convert to W3C format if requested
       const outputData = opts.dtcg ? toW3CFormat(result) : result;
 

package/lib/extractors.js

@@ -448,7 +448,7 @@ export async function extractBranding(
     await page.mouse.move(0, 0).catch(() => { });
 
     // Merge hover/focus colors into palette
-    hoverFocusColors.forEach(({ color }) => {
+    hoverFocusColors.forEach(({ color, property }) => {
       const isDuplicate = colors.palette.some((c) => c.color === color);
       if (!isDuplicate && color) {
         // Normalize and add to palette
@@ -461,6 +461,18 @@ export async function extractBranding(
           normalized = `#${r}${g}${b}`;
         }
 
+        // Skip chromatic colors that only appear in border/outline on hover — likely focus rings, not brand colors
+        if (property !== 'background-color') {
+          const hex = normalized.replace('#', '');
+          const r = parseInt(hex.substring(0, 2), 16);
+          const g = parseInt(hex.substring(2, 4), 16);
+          const b = parseInt(hex.substring(4, 6), 16);
+          const max = Math.max(r, g, b);
+          const min = Math.min(r, g, b);
+          const saturation = max === 0 ? 0 : (max - min) / max;
+          if (saturation > 0.3) return;
+        }
+
         colors.palette.push({
           color,
           normalized,
@@ -619,6 +631,16 @@ export async function extractBranding(
       result.isCanvasOnly = true;
     }
 
+    // Take screenshot if requested
+    if (options.screenshotPath) {
+      await page.screenshot({ path: options.screenshotPath, fullPage: false });
+    }
+
+    // Include raw colors before filtering if requested
+    if (options.includeRawColors) {
+      result.colors.rawColors = colors._raw || [];
+    }
+
     return result;
   } catch (error) {
     spinner.fail("Extraction failed");
@@ -975,6 +997,21 @@ async function extractColors(page) {
           continue;
         }
 
+        // Skip UI framework default theme variables
+        if (
+          prop.startsWith("--el-") ||       // Element Plus/UI
+          prop.startsWith("--p-") ||         // PrimeVue/PrimeReact
+          prop.startsWith("--chakra-") ||    // Chakra UI
+          prop.startsWith("--mantine-") ||   // Mantine
+          prop.startsWith("--ant-") ||       // Ant Design
+          prop.startsWith("--bs-") ||        // Bootstrap
+          prop.startsWith("--swiper-") ||    // Swiper
+          prop.startsWith("--rsbs-") ||      // React Spring Bottom Sheet
+          prop.startsWith("--toastify-")     // React Toastify
+        ) {
+          continue;
+        }
+
         // Skip obvious system/default variables
         if (prop.includes("--system-") || prop.includes("--default-")) {
           continue;
@@ -1066,6 +1103,10 @@ async function extractColors(page) {
       ) {
         return;
       }
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) {
+        return;
+      }
 
       const bgColor = computed.backgroundColor;
       const textColor = computed.color;
@@ -1116,12 +1157,11 @@ async function extractColors(page) {
         );
       }
 
-      // Collect all colors from this element
-      const allColors = [
-        ...extractColorsFromValue(bgColor),
-        ...extractColorsFromValue(textColor),
-        ...extractColorsFromValue(borderColor)
-      ];
+      // Collect colors by property type
+      const bgColors = extractColorsFromValue(bgColor);
+      const textColors = extractColorsFromValue(textColor);
+      const borderColors = extractColorsFromValue(borderColor);
+      const allColors = [...bgColors, ...textColors, ...borderColors];
 
       allColors.forEach((color) => {
         if (color && color !== "rgba(0, 0, 0, 0)" && color !== "transparent") {
@@ -1129,10 +1169,12 @@ async function extractColors(page) {
           const existing = colorMap.get(normalized) || {
             original: color, // Keep first seen format
             count: 0,
+            bgCount: 0,
             score: 0,
             sources: new Set(),
           };
           existing.count++;
+          if (bgColors.includes(color)) existing.bgCount++;
           existing.score += score;
           if (score > 1) {
             const source = context.split(" ")[0].substring(0, 30); // Limit source length
@@ -1179,6 +1221,22 @@ async function extractColors(page) {
         return true;
       }
 
+      // Chromatic colors (saturated) that never appear as backgrounds are likely browser defaults
+      // or framework internals, not brand colors. Real brand colors appear on backgrounds somewhere.
+      if (data.bgCount === 0) {
+        const hex = normalized.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const saturation = max === 0 ? 0 : (max - min) / max;
+        // If saturation > 0.3, this is a chromatic color with no background usage
+        if (saturation > 0.3) {
+          return true;
+        }
+      }
+
       return false;
     }
 
@@ -1260,6 +1318,10 @@ async function extractColors(page) {
       return Math.sqrt(deltaL * deltaL + deltaA * deltaA + deltaB * deltaB);
     }
 
+    const rawColors = Array.from(colorMap.entries())
+      .filter(([, data]) => data.count >= threshold)
+      .map(([normalized, data]) => ({ color: data.original, normalized, count: data.count }));
+
     const palette = Array.from(colorMap.entries())
       .filter(([normalizedColor, data]) => {
         // Filter out colors below threshold
@@ -1349,6 +1411,7 @@ async function extractColors(page) {
       semantic: semanticColors,
       palette: perceptuallyDeduped,
       cssVariables: filteredCssVariables,
+      _raw: rawColors,
     };
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Extract design tokens and brand assets from any website",
   "main": "index.js",
   "type": "module",
@@ -16,7 +16,10 @@
     "brand-challenge": "node run-no-login-challenge.mjs",
     "brand-challenge:report": "node run-no-login-challenge.mjs || true",
     "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"
+    "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"
   },
   "keywords": [
     "design-tokens",