dembrandt 0.12.10 → 0.14.0

package/README.md

@@ -43,6 +43,23 @@ Or add to your project's `.mcp.json`:
 
 7 tools available: `get_design_tokens`, `get_color_palette`, `get_typography`, `get_component_styles`, `get_surfaces`, `get_spacing`, `get_brand_identity`.
 
+Pair with **[dembrandt-skills](https://github.com/dembrandt/dembrandt-skills)** to give your agent UX intelligence on top of extracted tokens — hierarchy, accessibility, interaction states, and a full 6-stage design pipeline orchestrator.
+
+```bash
+npx skills add dembrandt/dembrandt-skills
+```
+
+## Dembrandt App (Beta)
+
+Load extractions, track token drift, and compare snapshots. **[dembrandt.com/app](https://www.dembrandt.com/app)**
+
+* **Drift tracking.** Pin a snapshot as your baseline. Run another extraction later. Get a visual report of what changed.
+* **Visual diff.** Color swatches, before/after values, delta scores per category.
+* **Snapshot history.** GitHub-style calendar per domain.
+* **Copy tokens.** Paste values straight into Copilot, Claude, or Cursor.
+* **No login.** Your data stays in the browser, nothing is sent to any server.
+
+
 ## What to expect from extraction?
 
 - Colors (semantic, palette, CSS variables, gradients)
@@ -73,6 +90,11 @@ dembrandt example.com --crawl 10 --sitemap # Combine: up to 10 pages discovered
 dembrandt example.com --no-sandbox     # Disable Chromium sandbox (required for Docker/CI)
 dembrandt example.com --browser=firefox # Use Firefox instead of Chromium (better for Cloudflare bypass)
 dembrandt example.com --wcag           # WCAG 2.1 contrast analysis — real DOM pairs, AA/AAA grades
+dembrandt example.com --stealth        # Opt-in anti-detection: navigator spoofing + human mouse simulation (use only when authorized)
+dembrandt example.com --locale fi-FI --timezone Europe/Helsinki  # Browser fingerprint: locale and timezone
+dembrandt example.com --user-agent "Mozilla/5.0 ..."            # Custom user agent string
+dembrandt example.com --accept-language "fi,en;q=0.9"           # Custom Accept-Language header
+dembrandt example.com --screen-size 2560x1440                   # Physical screen resolution to report
 ```
 
 Default: formatted terminal display only. Use `--save-output` to persist results as JSON files. Browser automatically retries in visible mode if headless extraction fails.

package/index.js

@@ -4,7 +4,7 @@
  * Dembrandt - Design Token Extraction CLI
  *
  * Extracts design tokens, brand colors, typography, spacing, and component styles
- * from any website using Playwright with advanced bot detection avoidance.
+ * from any website using Playwright.
  */
 
 import { program } from "commander";
@@ -58,6 +58,12 @@ program
     return n;
   })
   .option("--sitemap", "Discover pages from sitemap.xml instead of DOM links")
+  .option("--stealth", "Enable anti-detection scripts to bypass bot protection (use only when authorized)")
+  .option("--user-agent <string>", "Custom user agent string")
+  .option("--locale <string>", "Browser locale, e.g. en-GB, fi-FI (default: en-US)")
+  .option("--timezone <string>", "Browser timezone, e.g. Europe/Helsinki (default: America/New_York)")
+  .option("--accept-language <string>", "Custom Accept-Language header value")
+  .option("--screen-size <WxH>", "Physical screen resolution to report, e.g. 1920x1080 (default: 1920x1080)")
   .action(async (input, paths, opts) => {
     let url = input;
     if (!url.startsWith("http://") && !url.startsWith("https://")) {
@@ -133,6 +139,13 @@ program
             discoverLinks: isAutoCrawl ? crawlN - 1 : null,
             wcag: opts.wcag,
             includeRawColors: opts.rawColors,
+            stealth: opts.stealth,
+            userAgent: opts.userAgent,
+            locale: opts.locale,
+            timezoneId: opts.timezone,
+            acceptLanguage: opts.acceptLanguage,
+            screenSize: opts.screenSize,
+            _version: version,
           });
 
           // Build list of additional URLs to extract
@@ -181,6 +194,11 @@ program
                   darkMode: opts.darkMode,
                   mobile: opts.mobile,
                   slow: opts.slow,
+                  stealth: opts.stealth,
+                  userAgent: opts.userAgent,
+                  locale: opts.locale,
+                  timezoneId: opts.timezone,
+                  acceptLanguage: opts.acceptLanguage,
                 });
                 delete pageResult._discoveredLinks;
                 allResults.push(pageResult);
@@ -209,7 +227,7 @@ program
             err.message.includes("net::ERR_")
           ) {
             spinner.warn(
-              "Bot detection detected → retrying with visible browser"
+              "Navigation failed → retrying with visible browser"
             );
             console.error(chalk.dim(`  ↳ Error: ${err.message}`));
             console.error(chalk.dim(`  ↳ URL: ${url}`));

package/lib/extractors/colors.js

@@ -316,6 +316,29 @@ export async function extractColors(page) {
     const filteredCssVariables = {};
     cssVarsByColor.forEach(({ value, vars }) => { filteredCssVariables[vars[0]] = value; });
 
+    // Fallback: pick most chromatic non-gray palette color as primary
+    if (!semanticColors.primary && perceptuallyDeduped.length > 0) {
+      function chroma(hex) {
+        if (!hex || !hex.startsWith('#')) return 0;
+        const r = parseInt(hex.slice(1, 3), 16) / 255;
+        const g = parseInt(hex.slice(3, 5), 16) / 255;
+        const b = parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        const l = (max + min) / 2;
+        if (max === min) return 0;
+        const s = l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min);
+        // Penalize near-black and near-white
+        if (l < 0.08 || l > 0.92) return 0;
+        return s;
+      }
+      const best = perceptuallyDeduped
+        .filter(c => c.confidence !== 'low')
+        .map(c => ({ c, chroma: chroma(c.normalized) }))
+        .filter(({ chroma }) => chroma > 0.15)
+        .sort((a, b) => b.chroma - a.chroma)[0];
+      if (best) semanticColors.primary = best.c.color;
+    }
+
     return { semantic: semanticColors, palette: perceptuallyDeduped, cssVariables: filteredCssVariables, _raw: rawColors };
   });
 

package/lib/extractors/index.js

@@ -11,22 +11,255 @@ import { extractWcagPairs } from './colors.js';
 
 /** @typedef {import('../types.js').BrandingResult} BrandingResult */
 
+// Gaussian noise via Box-Muller
+function gaussian(mean = 0, std = 1) {
+  let u, v;
+  do { u = Math.random(); } while (u === 0);
+  do { v = Math.random(); } while (v === 0);
+  return mean + std * Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
+}
+
+// Cubic Bézier interpolation
+function bezier(t, p0, p1, p2, p3) {
+  const mt = 1 - t;
+  return mt * mt * mt * p0 + 3 * mt * mt * t * p1 + 3 * mt * t * t * p2 + t * t * t * p3;
+}
+
+// Physiological tremor: ~8-12Hz oscillation, amplitude varies with fatigue
+function tremor(t, freq, amp) {
+  return amp * Math.sin(2 * Math.PI * freq * t) + gaussian(0, amp * 0.3);
+}
+
+// Velocity profile: ballistic phase + corrective phase (two-phase Fitts model)
+// Humans move fast toward target then make fine corrections — not smooth decel
+function velocityProfile(t, overshootProb = 0.3) {
+  const hasOvershoot = Math.random() < overshootProb;
+  if (t < 0.05) return t / 0.05 * 0.2; // startup latency
+  if (t < 0.55) return 0.2 + (t - 0.05) / 0.5; // ballistic acceleration
+  if (t < 0.72) return 1.0 - (t - 0.55) / 0.17 * 0.5; // deceleration
+  if (hasOvershoot && t < 0.88) return 0.5 + Math.sin((t - 0.72) / 0.16 * Math.PI) * 0.3; // overshoot
+  return 0.15 + Math.random() * 0.1; // corrective micro-movements
+}
+
+// Sleep helper
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+async function simulateHumanMouse(page) {
+  const vw = 1920, vh = 1080;
+
+  // Per-session behavioral fingerprint — each "user" has consistent quirks
+  const profile = {
+    handedness: Math.random() < 0.88 ? 'right' : 'left', // right-handed bias
+    tremFreq: 8 + Math.random() * 4,        // physiological tremor 8-12Hz
+    tremAmp: 0.2 + Math.random() * 0.6,     // tremor amplitude (fatigue)
+    driftBias: { x: gaussian(0, 0.15), y: gaussian(0, 0.08) }, // consistent directional drift
+    speedMult: 0.7 + Math.random() * 0.8,   // this person moves fast or slow
+    overshootTendency: Math.random(),        // how often they overshoot targets
+    attentionSpan: 0.4 + Math.random() * 0.6, // affects dwell times
+    fatigueRate: Math.random() * 0.3,        // movements degrade over session
+  };
+
+  // Plausible entry: cursor was somewhere from before page load, not 0,0
+  // Right-handed users tend to park right-center; left-handed left-center
+  const entryX = profile.handedness === 'right'
+    ? vw * 0.5 + Math.random() * vw * 0.4
+    : vw * 0.1 + Math.random() * vw * 0.4;
+  const entryY = vh * 0.15 + Math.random() * vh * 0.5;
+
+  let cx = entryX, cy = entryY;
+  await page.mouse.move(cx, cy);
+
+  // Weighted zones: humans spend time in predictable areas of a webpage
+  const targetZones = [
+    { x: [60, 500], y: [15, 75], weight: 3 },    // navigation — high attention
+    { x: [150, 1200], y: [80, 380], weight: 4 },  // hero/above-fold — high attention
+    { x: [100, 900], y: [350, 720], weight: 3 },  // body content
+    { x: [600, 1800], y: [15, 75], weight: 1 },   // right nav / utility links
+    { x: [20, 200], y: [200, 900], weight: 1 },   // left sidebar / margin
+    { x: [800, 1400], y: [300, 700], weight: 2 }, // mid-right content
+  ];
+  const totalWeight = targetZones.reduce((s, z) => s + z.weight, 0);
+
+  function pickZone() {
+    let r = Math.random() * totalWeight;
+    for (const z of targetZones) { r -= z.weight; if (r <= 0) return z; }
+    return targetZones[0];
+  }
+
+  const sequences = 3 + Math.floor(Math.random() * 5); // 3-7 movements
+  let sessionTime = 0;
+
+  for (let s = 0; s < sequences; s++) {
+    const fatigue = 1 + profile.fatigueRate * (s / sequences); // movements get sloppier
+
+    // Occasionally abandon a movement mid-way and redirect (changed mind)
+    const willAbort = Math.random() < 0.12;
+
+    const zone = pickZone();
+    let tx = zone.x[0] + Math.random() * (zone.x[1] - zone.x[0]);
+    let ty = zone.y[0] + Math.random() * (zone.y[1] - zone.y[0]);
+
+    // Aborted movement: pick intermediate abort point
+    const abortT = willAbort ? 0.25 + Math.random() * 0.45 : 1.0;
+    if (willAbort) {
+      const abortZone = pickZone();
+      const finalTx = abortZone.x[0] + Math.random() * (abortZone.x[1] - abortZone.x[0]);
+      const finalTy = abortZone.y[0] + Math.random() * (abortZone.y[1] - abortZone.y[0]);
+      // Abort destination is partway toward original target, then we'll redirect
+      tx = cx + (tx - cx) * abortT;
+      ty = cy + (ty - cy) * abortT;
+    }
+
+    const dist = Math.hypot(tx - cx, ty - cy);
+    if (dist < 5) continue; // skip negligible movements
+
+    // Two-segment path for longer distances (humans curve around obstacles mentally)
+    const useWaypoint = dist > 300 && Math.random() < 0.4;
+    const movements = useWaypoint ? [
+      // Waypoint slightly off the direct line
+      {
+        tx: cx + (tx - cx) * (0.3 + Math.random() * 0.25) + gaussian(0, 60),
+        ty: cy + (ty - cy) * (0.3 + Math.random() * 0.25) + gaussian(0, 80),
+      },
+      { tx, ty },
+    ] : [{ tx, ty }];
+
+    for (const { tx: etx, ty: ety } of movements) {
+      const segDist = Math.hypot(etx - cx, ety - cy);
+
+      // Bézier control points — asymmetric, biased by hand dominance
+      const lateralBias = profile.handedness === 'right' ? 1 : -1;
+      const cp1x = cx + (etx - cx) * (0.15 + Math.random() * 0.25) + gaussian(0, 35) * fatigue;
+      const cp1y = cy + (ety - cy) * (0.05 + Math.random() * 0.2) + gaussian(0, 50) * fatigue + lateralBias * gaussian(0, 15);
+      const cp2x = cx + (etx - cx) * (0.65 + Math.random() * 0.25) + gaussian(0, 25) * fatigue;
+      const cp2y = cy + (ety - cy) * (0.75 + Math.random() * 0.2) + gaussian(0, 35) * fatigue + lateralBias * gaussian(0, 10);
+
+      // Fitts's law: duration ~ a + b*log2(2D/W), simplified to distance-based
+      const targetWidth = 20 + Math.random() * 80; // perceived click target size
+      const fittsDuration = (300 + 200 * Math.log2(2 * segDist / targetWidth)) * profile.speedMult * fatigue;
+      const steps = Math.max(30, Math.floor(segDist * 0.18 * profile.speedMult));
+
+      let stepTime = 0;
+      for (let i = 1; i <= steps; i++) {
+        const t = i / steps;
+        const speed = velocityProfile(t, profile.overshootTendency);
+        const stepMs = (fittsDuration / steps) / Math.max(speed, 0.05);
+
+        const mx = bezier(t, cx, cp1x, cp2x, etx);
+        const my = bezier(t, cy, cp1y, cp2y, ety);
+
+        // Layered noise: micro-tremor + physiological oscillation + drift bias
+        const tSec = (sessionTime + stepTime) / 1000;
+        const tx_noise = tremor(tSec, profile.tremFreq, profile.tremAmp * fatigue)
+          + profile.driftBias.x * (1 - speed); // drift more when slow
+        const ty_noise = tremor(tSec + 0.37, profile.tremFreq * 0.93, profile.tremAmp * 0.7 * fatigue)
+          + profile.driftBias.y * (1 - speed);
+
+        await page.mouse.move(mx + tx_noise, my + ty_noise);
+        stepTime += stepMs;
+
+        // Attention catch: sudden freeze when "something interesting" is spotted
+        if (Math.random() < 0.03) {
+          const freezeMs = 80 + Math.random() * 300;
+          // During freeze: very slow drift, not absolute stillness
+          const freezeSteps = Math.ceil(freezeMs / 16);
+          for (let f = 0; f < freezeSteps; f++) {
+            await page.mouse.move(
+              mx + tx_noise + gaussian(0, 0.2),
+              my + ty_noise + gaussian(0, 0.15)
+            );
+            await sleep(16);
+          }
+          stepTime += freezeMs;
+        } else {
+          await sleep(Math.max(1, stepMs));
+        }
+      }
+
+      cx = etx + gaussian(0, 1.5 * fatigue); // landing imprecision
+      cy = ety + gaussian(0, 1.5 * fatigue);
+      sessionTime += fittsDuration;
+    }
+
+    // Aborted: redirect to new target after brief confusion pause
+    if (willAbort) {
+      await sleep(80 + Math.random() * 250);
+      // Brief backward micro-movement (second-guessing)
+      if (Math.random() < 0.5) {
+        await page.mouse.move(cx - gaussian(0, 15), cy - gaussian(0, 10));
+        await sleep(40 + Math.random() * 80);
+      }
+    }
+
+    // Dwell: two-phase — initial landing jitter, then resting drift
+    const dwellMs = (150 + Math.random() * 1800) * profile.attentionSpan * fatigue;
+    const phase1 = dwellMs * 0.3; // landing stabilization
+    const phase2 = dwellMs * 0.7; // at-rest
+
+    // Phase 1: damped oscillation as hand settles (like underdamped spring)
+    const landingSteps = Math.ceil(phase1 / 16);
+    for (let d = 0; d < landingSteps; d++) {
+      const decay = Math.exp(-d / landingSteps * 4);
+      await page.mouse.move(
+        cx + gaussian(0, 1.5 * decay),
+        cy + gaussian(0, 1.2 * decay)
+      );
+      await sleep(16);
+    }
+
+    // Phase 2: resting — very slow Brownian drift
+    const restSteps = Math.ceil(phase2 / 50);
+    let rx = cx, ry = cy;
+    for (let d = 0; d < restSteps; d++) {
+      rx += gaussian(0, 0.3);
+      ry += gaussian(0, 0.2);
+      // Slow mean-reversion: hand drifts but not far
+      rx += (cx - rx) * 0.05;
+      ry += (cy - ry) * 0.05;
+      await page.mouse.move(rx, ry);
+      await sleep(50);
+    }
+    cx = rx; cy = ry;
+
+    // Inter-movement gap: bimodal — short gap (quick scan) or long gap (reading)
+    const isReading = Math.random() < 0.35;
+    const gapMs = isReading
+      ? 800 + Math.random() * 2500   // reading pause
+      : 80 + Math.random() * 350;    // quick scan gap
+    await sleep(gapMs);
+    sessionTime += dwellMs + gapMs;
+  }
+}
+
 /**
  * @param {string} url
  * @param {import('ora').Ora} spinner
  * @param {import('playwright-core').Browser} browser
- * @param {{ slow?: boolean, darkMode?: boolean, mobile?: boolean, wcag?: boolean, screenshotPath?: string, discoverLinks?: number|null, navigationTimeout?: number }} [options]
+ * @param {{ slow?: boolean, darkMode?: boolean, mobile?: boolean, wcag?: boolean, screenshotPath?: string, discoverLinks?: number|null, navigationTimeout?: number, stealth?: boolean, userAgent?: string, locale?: string, timezoneId?: string, acceptLanguage?: string, screenSize?: string }} [options]
  * @returns {Promise<BrandingResult>}
  */
 export async function extractBranding(url, spinner, browser, options = {}) {
   const timeoutMultiplier = options.slow ? 3 : 1;
   const timeouts = [];
 
-  spinner.text = "Creating browser context with stealth mode...";
+  spinner.text = "Creating browser context...";
+
+  const locale = options.locale || "en-US";
+  const timezoneId = options.timezoneId || "America/New_York";
+  const acceptLanguage = options.acceptLanguage || `${locale},${locale.split('-')[0]};q=0.9,en;q=0.8`;
+
+  const [screenW, screenH] = options.screenSize
+    ? options.screenSize.split('x').map(Number)
+    : [1920, 1080];
+
   const contextOptions = {
-    viewport: { width: 1920, height: 1080 },
-    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
-    locale: "en-US",
+    viewport: { width: screenW, height: screenH },
+    screen: { width: screenW, height: screenH },
+    userAgent: options.userAgent || "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
+    locale,
+    timezoneId,
+    extraHTTPHeaders: { "Accept-Language": acceptLanguage },
+    colorScheme: "light",
   };
 
   if (browser.browserType().name() === 'chromium') {
@@ -35,21 +268,88 @@ export async function extractBranding(url, spinner, browser, options = {}) {
 
   const context = await browser.newContext(contextOptions);
 
-  spinner.text = "Injecting anti-detection scripts...";
-  await context.addInitScript(() => {
-    Object.defineProperty(navigator, "hardwareConcurrency", { get: () => 8 });
-    Object.defineProperty(navigator, "deviceMemory", { get: () => 8 });
-    Object.defineProperty(navigator, "platform", { get: () => "MacIntel" });
-    Object.defineProperty(navigator, "maxTouchPoints", { get: () => 0 });
-    window.chrome = { runtime: {}, loadTimes: () => {}, csi: () => {}, app: {} };
-    delete navigator.__proto__.webdriver;
-    delete window.cdc_adoQpoasnfa76pfcZLmcfl_Array;
-    delete window.cdc_adoQpoasnfa76pfcZLmcfl_Promise;
-    delete window.cdc_adoQpoasnfa76pfcZLmcfl_Symbol;
-  });
+  if (options.stealth) {
+    const stealthLocale = locale;
+    await context.addInitScript(({ loc, sw, sh }) => {
+      Object.defineProperty(navigator, 'hardwareConcurrency', { get: () => 8 });
+      Object.defineProperty(navigator, 'deviceMemory', { get: () => 8 });
+      Object.defineProperty(navigator, 'platform', { get: () => 'Win32' });
+      Object.defineProperty(navigator, 'maxTouchPoints', { get: () => 0 });
+      Object.defineProperty(navigator, 'language', { get: () => loc });
+      Object.defineProperty(navigator, 'languages', { get: () => [loc, loc.split('-')[0]] });
+      Object.defineProperty(screen, 'width', { get: () => sw });
+      Object.defineProperty(screen, 'height', { get: () => sh });
+      Object.defineProperty(screen, 'availWidth', { get: () => sw });
+      Object.defineProperty(screen, 'availHeight', { get: () => sh - 40 }); // taskbar
+      Object.defineProperty(screen, 'colorDepth', { get: () => 24 });
+      Object.defineProperty(screen, 'pixelDepth', { get: () => 24 });
+      Object.defineProperty(window, 'devicePixelRatio', { get: () => 1 });
+      Object.defineProperty(window, 'outerWidth', { get: () => sw });
+      Object.defineProperty(window, 'outerHeight', { get: () => sh });
+
+      // plugins/mimeTypes: headless has none, real Chrome has several
+      const pluginData = [
+        { name: 'Chrome PDF Plugin', filename: 'internal-pdf-viewer', description: 'Portable Document Format' },
+        { name: 'Chrome PDF Viewer', filename: 'mhjfbmdgcfjbbpaeojofohoefgiehjai', description: '' },
+        { name: 'Native Client', filename: 'internal-nacl-plugin', description: '' },
+      ];
+      const pluginArray = pluginData.map(p => {
+        const plugin = Object.create(Plugin.prototype);
+        Object.defineProperty(plugin, 'name', { get: () => p.name });
+        Object.defineProperty(plugin, 'filename', { get: () => p.filename });
+        Object.defineProperty(plugin, 'description', { get: () => p.description });
+        Object.defineProperty(plugin, 'length', { get: () => 0 });
+        return plugin;
+      });
+      Object.defineProperty(navigator, 'plugins', {
+        get: () => Object.assign(Object.create(PluginArray.prototype), pluginArray, { length: pluginArray.length }),
+      });
+      Object.defineProperty(navigator, 'mimeTypes', {
+        get: () => Object.assign(Object.create(MimeTypeArray.prototype), { length: 0 }),
+      });
+
+      // hasFocus: headless often returns false, real browser returns true
+      document.hasFocus = () => true;
+
+      // connection: expose a plausible NetworkInformation object
+      if (!navigator.connection) {
+        Object.defineProperty(navigator, 'connection', {
+          get: () => ({ effectiveType: '4g', rtt: 50, downlink: 10, saveData: false }),
+        });
+      }
+
+      // history.length: fresh context always 1 — nudge to plausible value
+      try {
+        Object.defineProperty(history, 'length', { get: () => 2 + Math.floor(Math.random() * 4) });
+      } catch {}
+
+      window.chrome = { runtime: {}, loadTimes: () => {}, csi: () => {}, app: {} };
+      delete navigator.__proto__.webdriver;
+      delete window.cdc_adoQpoasnfa76pfcZLmcfl_Array;
+      delete window.cdc_adoQpoasnfa76pfcZLmcfl_Promise;
+      delete window.cdc_adoQpoasnfa76pfcZLmcfl_Symbol;
+    }, { loc: stealthLocale, sw: screenW, sh: screenH });
+  }
 
   const page = await context.newPage();
 
+  // Track font requests to identify self-hosted custom fonts
+  const fontRequests = new Set();
+  const thirdPartyFontHosts = ['fonts.googleapis.com', 'fonts.gstatic.com', 'typekit.net',
+    'adobe.com', 'fonts.com', 'cloud.typography.com', 'fast.fonts.net', 'use.fontawesome.com',
+    'kit.fontawesome.com', 'pro.fontawesome.com'];
+  page.on('response', (response) => {
+    const resUrl = response.url();
+    const ct = response.headers()['content-type'] || '';
+    if (ct.includes('font') || resUrl.match(/\.(woff2?|ttf|otf|eot)(\?|$)/i)) {
+      try {
+        const host = new URL(resUrl).hostname;
+        const isThirdParty = thirdPartyFontHosts.some(h => host.includes(h));
+        if (!isThirdParty) fontRequests.add(resUrl);
+      } catch {}
+    }
+  });
+
   try {
     let attempts = 0;
     const maxAttempts = 2;
@@ -117,23 +417,66 @@ export async function extractBranding(url, spinner, browser, options = {}) {
           timeouts.push('Main content selector');
         }
 
-        spinner.start("Simulating human interaction...");
-        await page.mouse.move(300 + Math.random() * 400, 200 + Math.random() * 300);
+        if (options.stealth) {
+          await simulateHumanMouse(page);
+        }
+
+        spinner.start("Scrolling page to trigger lazy content...");
         await page.evaluate(async () => {
-          const delay = (ms) => new Promise(r => setTimeout(r, ms));
           const scrollStep = 600;
           const maxHeight = Math.min(document.body.scrollHeight, 30000);
           let y = 0;
           while (y < maxHeight) {
             y = Math.min(y + scrollStep, maxHeight);
             window.scrollTo(0, y);
-            await delay(150 + Math.random() * 100);
+            await new Promise(r => setTimeout(r, 100));
           }
           window.scrollTo(0, 0);
         });
         spinner.stop();
         console.log(color.success(`  ✓ Full page scrolled (lazy content triggered)`));
 
+        spinner.start("Dismissing cookie consent banners...");
+        const dismissed = await page.evaluate(async () => {
+          const selectors = [
+            // Generic accept patterns
+            'button[id*="accept"]', 'button[class*="accept"]',
+            'button[id*="agree"]', 'button[class*="agree"]',
+            'button[id*="consent"]', 'button[class*="consent"]',
+            '[data-testid*="accept"]', '[data-testid*="agree"]',
+            // Common consent libraries
+            '#onetrust-accept-btn-handler',
+            '.cc-btn.cc-allow', '.cc-accept',
+            '[aria-label*="Accept"]', '[aria-label*="agree"]',
+            // EU/GDPR common patterns
+            'button[data-cookiebanner]',
+            '.cookiebanner button', '#cookiebanner button',
+            '[class*="cookie"] button[class*="primary"]',
+            '[id*="cookie"] button[class*="primary"]',
+            '[class*="gdpr"] button', '[id*="gdpr"] button',
+            // CMP patterns
+            '.sp-message-open .message-button',
+            '#sp-cc-accept', '.optanon-allow-all',
+          ];
+          for (const sel of selectors) {
+            try {
+              const el = document.querySelector(sel);
+              if (el && el.offsetParent !== null) {
+                el.click();
+                return sel;
+              }
+            } catch {}
+          }
+          return null;
+        });
+        spinner.stop();
+        if (dismissed) {
+          console.log(color.success(`  ✓ Cookie banner dismissed (${dismissed})`));
+          await page.waitForTimeout(600);
+        } else {
+          console.log(color.info(`  i No cookie banner detected`));
+        }
+
         spinner.start("Final content stabilization...");
         const stabilizationTime = 4000 * timeoutMultiplier;
         await page.waitForTimeout(stabilizationTime);
@@ -170,7 +513,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
 
     spinner.start("Analyzing design system (17 parallel tasks)...");
     const [
-      { logo, instances: logoInstances, favicons },
+      logoResult,
       colors,
       typography,
       spacing,
@@ -184,30 +527,94 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       breakpoints,
       iconSystem,
       frameworks,
-      siteName,
+      siteNameRaw,
       gradients,
       motion,
     ] = await Promise.all([
-      extractLogo(page, url),
-      extractColors(page),
-      extractTypography(page),
-      extractSpacing(page),
-      extractBorderRadius(page),
-      extractBorders(page),
-      extractShadows(page),
-      extractButtonStyles(page),
-      extractInputStyles(page),
-      extractLinkStyles(page),
-      extractBadgeStyles(page),
-      extractBreakpoints(page),
-      detectIconSystem(page),
-      detectFrameworks(page),
-      extractSiteName(page),
-      extractGradients(page),
-      extractMotion(page),
+      extractLogo(page, url).catch(() => ({ logo: null, instances: [], favicons: [], manifest: null })),
+      extractColors(page).catch(() => ({ semantic: {}, palette: [], cssVariables: [], _raw: [] })),
+      extractTypography(page).catch(() => ({ styles: [], sources: {} })),
+      extractSpacing(page).catch(() => ({ scaleType: 'unknown', commonValues: [] })),
+      extractBorderRadius(page).catch(() => ({ values: [] })),
+      extractBorders(page).catch(() => ({ combinations: [] })),
+      extractShadows(page).catch(() => []),
+      extractButtonStyles(page).catch(() => []),
+      extractInputStyles(page).catch(() => []),
+      extractLinkStyles(page).catch(() => []),
+      extractBadgeStyles(page).catch(() => ({ all: [], byVariant: {} })),
+      extractBreakpoints(page).catch(() => []),
+      detectIconSystem(page).catch(() => []),
+      detectFrameworks(page).catch(() => []),
+      extractSiteName(page).catch(() => null),
+      extractGradients(page).catch(() => []),
+      extractMotion(page).catch(() => ({ durations: [], easings: [], byContext: {} })),
     ]);
 
+    const { logo, instances: logoInstances, favicons, manifest } = logoResult;
+    let siteName = siteNameRaw;
+
     spinner.stop();
+
+    // Inject manifest theme_color / background_color as high-confidence palette entries
+    if (manifest) {
+      const manifestColorEntries = [
+        manifest.themeColor && { color: manifest.themeColor, label: 'manifest:theme_color' },
+        manifest.backgroundColor && { color: manifest.backgroundColor, label: 'manifest:background_color' },
+      ].filter(Boolean);
+
+      const rawManifestColors = manifestColorEntries.map(e => e.color);
+      const manifestNormMap = rawManifestColors.length ? await page.evaluate((cols) => {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+        const ctx = canvas.getContext('2d');
+        const out = {};
+        for (const c of cols) {
+          if (/^#[0-9a-f]{6}$/i.test(c)) { out[c] = c.toLowerCase(); continue; }
+          if (/^#[0-9a-f]{3}$/i.test(c)) { out[c] = `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`.toLowerCase(); continue; }
+          if (/^#[0-9a-f]{8}$/i.test(c)) { out[c] = c.toLowerCase().slice(0, 7); continue; }
+          const m = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+          if (m) { out[c] = `#${parseInt(m[1]).toString(16).padStart(2,'0')}${parseInt(m[2]).toString(16).padStart(2,'0')}${parseInt(m[3]).toString(16).padStart(2,'0')}`; continue; }
+          if (ctx) {
+            try {
+              ctx.clearRect(0, 0, 1, 1);
+              ctx.fillStyle = 'rgba(0,0,0,0)';
+              ctx.fillStyle = c;
+              ctx.fillRect(0, 0, 1, 1);
+              const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+              if (a > 0) { out[c] = `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`; continue; }
+            } catch {}
+          }
+          out[c] = c.toLowerCase();
+        }
+        return out;
+      }, rawManifestColors) : {};
+
+      for (const { color: raw, label } of manifestColorEntries) {
+        const normalized = manifestNormMap[raw] ?? raw.toLowerCase();
+        if (!colors.palette.some(c => c.normalized === normalized)) {
+          colors.palette.push({ color: raw, normalized, count: 10, confidence: 'high', sources: [label] });
+        } else {
+          const existing = colors.palette.find(c => c.normalized === normalized);
+          if (existing) {
+            existing.confidence = 'high';
+            if (!existing.sources.includes(label)) existing.sources.push(label);
+          }
+        }
+      }
+
+      if (!siteName && (manifest.name || manifest.shortName)) {
+        siteName = manifest.name || manifest.shortName;
+      }
+    }
+
+    if (manifest) {
+      const parts = [
+        manifest.themeColor && `theme: ${manifest.themeColor}`,
+        manifest.backgroundColor && `bg: ${manifest.backgroundColor}`,
+        manifest.name && `name: "${manifest.name}"`,
+      ].filter(Boolean);
+      console.log(color.success(`  ✓ Manifest: ${parts.join(', ')}`));
+    }
     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`));
@@ -542,12 +949,36 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     const result = {
       url: page.url(),
       extractedAt: new Date().toISOString(),
+      meta: {
+        dembrandtVersion: options._version || null,
+        flags: {
+          ...(options.stealth && { stealth: true }),
+          ...(options.darkMode && { darkMode: true }),
+          ...(options.mobile && { mobile: true }),
+          ...(options.slow && { slow: true }),
+          ...(options.userAgent && { userAgent: options.userAgent }),
+          ...(options.locale && { locale: options.locale }),
+          ...(options.timezoneId && { timezone: options.timezoneId }),
+          ...(options.acceptLanguage && { acceptLanguage: options.acceptLanguage }),
+          ...(options.screenSize && { screenSize: options.screenSize }),
+        },
+      },
       siteName,
       logo,
       logoInstances,
       favicons,
+      ...(manifest ? { manifest } : {}),
       colors,
-      typography,
+      typography: {
+        ...typography,
+        sources: {
+          ...typography.sources,
+          selfHostedFonts: [...fontRequests].map(u => u.split('/').pop().split('?')[0]),
+          customFonts: typography.sources?.customFonts?.length
+            ? typography.sources.customFonts
+            : fontRequests.size > 0 ? [...fontRequests].map(u => u.split('/').pop().split('?')[0]) : [],
+        }
+      },
       spacing,
       borderRadius,
       borders,

package/lib/extractors/logo.js

@@ -44,6 +44,7 @@ export async function extractLogo(page, url) {
   }, url);
 
   let pwaIcons = [];
+  let manifestMeta = {};
   if (manifestIcons.length > 0) {
     try {
       const manifestUrl = manifestIcons[0].manifestUrl;
@@ -63,6 +64,13 @@ export async function extractLogo(page, url) {
           purpose: icon.purpose || 'any',
         }));
       }
+
+      if (response) {
+        if (response.theme_color) manifestMeta.themeColor = response.theme_color;
+        if (response.background_color) manifestMeta.backgroundColor = response.background_color;
+        if (response.name) manifestMeta.name = response.name;
+        if (response.short_name) manifestMeta.shortName = response.short_name;
+      }
     } catch {}
   }
 
@@ -558,6 +566,7 @@ export async function extractLogo(page, url) {
 
   // Merge PWA icons into favicons
   result.favicons = [...result.favicons, ...pwaIcons];
+  result.manifest = Object.keys(manifestMeta).length > 0 ? manifestMeta : null;
 
   return result;
 }

package/lib/extractors/typography.js

@@ -32,6 +32,38 @@ export async function extractTypography(page) {
       sources.adobeFonts = true;
     }
 
+    // Detect truly custom fonts: @font-face rules loading from own domain
+    const thirdPartyHosts = ['googleapis.com', 'gstatic.com', 'typekit.net', 'adobe.com',
+      'fonts.com', 'cloud.typography.com', 'fast.fonts.net', 'use.fontawesome.com'];
+    const pageHost = window.location.hostname;
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          for (const rule of sheet.cssRules || []) {
+            if (rule instanceof CSSFontFaceRule) {
+              const src = rule.style.getPropertyValue('src') || '';
+              const family = (rule.style.getPropertyValue('font-family') || '').replace(/['"]/g, '').trim();
+              if (!family) continue;
+              const isThirdParty = thirdPartyHosts.some(h => src.includes(h));
+              const isSameOrigin = src.includes(pageHost) || src.startsWith('/') || src.startsWith('./') || (!src.includes('http') && src.includes('url('));
+              if (!isThirdParty && (isSameOrigin || src.includes('url(')) && !sources.customFonts.includes(family)) {
+                sources.customFonts.push(family);
+              }
+              const familyLower = family.toLowerCase();
+              if (
+                familyLower.includes('variable') ||
+                familyLower.includes(' vf') ||
+                familyLower.endsWith('-var') ||
+                (src.includes('woff2') && rule.style.getPropertyValue('font-variation-settings'))
+              ) {
+                sources.variableFonts.add(family);
+              }
+            }
+          }
+        } catch {}
+      }
+    } catch {}
+
     let fontDisplay = null;
     try {
       for (const sheet of document.styleSheets) {

package/lib/formatters/terminal.js

@@ -292,17 +292,18 @@ function displayTypography(typography) {
     const fontFamilies = new Map();
 
     typography.styles.forEach(style => {
-      // Skip styles without a family name
       if (!style.family) return;
 
       if (!fontFamilies.has(style.family)) {
-        fontFamilies.set(style.family, { sizes: new Set(), weights: new Set() });
+        fontFamilies.set(style.family, { sizeContexts: new Map(), weights: new Set() });
       }
 
       const familyData = fontFamilies.get(style.family);
       if (style.size) {
         const px = Math.round(parseFloat(style.size) || 0);
-        if (px) familyData.sizes.add(px);
+        if (px && !familyData.sizeContexts.has(px)) {
+          familyData.sizeContexts.set(px, style.context || null);
+        }
       }
       if (style.weight && style.weight !== 400) {
         familyData.weights.add(style.weight);
@@ -317,11 +318,11 @@ function displayTypography(typography) {
       const isFontLast = fontIndex === totalFonts;
       const fontBranch = isFontLast ? '└─' : '├─';
 
-      const sizes = [...data.sizes]
-        .sort((a, b) => b - a)
-        .map(px => `${px}px`);
-      const sizeList = sizes.length
-        ? ' ' + chalk.dim('[ ') + sizes.join(', ') + chalk.dim(' ]')
+      const sizeTokens = [...data.sizeContexts.entries()]
+        .sort((a, b) => b[0] - a[0])
+        .map(([px, ctx]) => ctx ? `${px}px ${chalk.dim(`(${ctx})`)}` : `${px}px`);
+      const sizeList = sizeTokens.length
+        ? ' ' + chalk.dim('[ ') + sizeTokens.join(', ') + chalk.dim(' ]')
         : '';
 
       console.log(chalk.dim(`│  ${fontBranch}`) + ' ' + chalk.bold(family) + sizeList);

package/lib/merger.js

@@ -339,6 +339,7 @@ export function mergeResults(results) {
   return {
     url: home.url,
     extractedAt: home.extractedAt,
+    ...(home.meta ? { meta: home.meta } : {}),
     siteName: home.siteName,
     logo: home.logo,
     favicons: home.favicons,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.12.10",
+  "version": "0.14.0",
   "description": "Extract design tokens and publicly visible CSS information from any website",
   "mcpName": "io.github.dembrandt/dembrandt",
   "main": "index.js",