dembrandt 0.12.5 → 0.12.7

package/README.md

@@ -45,11 +45,12 @@ Or add to your project's `.mcp.json`:
 
 ## What to expect from extraction?
 
-- Colors (semantic, palette, CSS variables)
+- Colors (semantic, palette, CSS variables, gradients)
 - Typography (fonts, sizes, weights, sources)
 - Spacing (margin/padding scales)
 - Borders (radius, widths, styles, colors)
 - Shadows
+- Motion (duration scale, easing curves, hover patterns per component type)
 - Components (buttons, badges, inputs, links)
 - Breakpoints
 - Icons & frameworks
@@ -134,13 +135,15 @@ The DTCG format is an industry-standard JSON schema that can be consumed by desi
 
 ### DESIGN.md
 
-Use `--design-md` to generate a [DESIGN.md](https://stitch.withgoogle.com/docs/design-md) file, a plain-text design system document readable by AI agents.
+Use `--design-md` to generate a [DESIGN.md](https://stitch.withgoogle.com/docs/design-md) file, a plain-text design system document readable by AI agents. The export follows Google's DESIGN.md draft format: YAML design tokens in front matter plus ordered Markdown guidance sections.
 
 ```bash
 dembrandt example.com --design-md
 # Saves to: output/example.com/DESIGN.md
 ```
 
+DESIGN.md reports only what Dembrandt observed on the source site. Exact values (colors, typography, spacing, radii, shadows) live in the YAML front matter when available, and the Markdown body adds human-readable context. Sections with no extracted evidence are omitted rather than filled with invented defaults. For example, the elevation section is dropped when the site uses no box-shadow tokens.
+
 ### WCAG Contrast Analysis
 
 Use `--wcag` to check accessibility contrast ratios across the page. Unlike palette-based checkers, dembrandt walks the actual DOM and finds what color is rendered on top of what background — per element.
@@ -151,6 +154,24 @@ dembrandt stripe.com --wcag
 
 Returns every text/background pair with contrast ratio and WCAG 2.1 grade (AA, AA-Large, AAA, or fail), sorted by how often each pair appears. Results are shown in terminal and included in JSON output as `wcag`.
 
+Also captures **interactive state contrast**: dembrandt simulates hover, focus, and disabled states on buttons, links, and inputs and checks contrast on each state. State pairs are tagged `[hover]`, `[focus]`, or `[disabled]` in output so you can catch contrast failures that only appear on interaction.
+
+### Motion Tokens
+
+Motion tokens are extracted automatically on every run — no flag needed. Dembrandt analyzes CSS transitions and animations across the page and returns a structured motion profile.
+
+```bash
+dembrandt stripe.com
+```
+
+Returns:
+- **Duration scale**: all unique animation durations found on the page
+- **Easing curves**: named easing types (ease-out, spring, custom cubic-bezier) with usage counts
+- **Per-context profiles**: motion behavior by component type (button, nav, card, modal, hero)
+- **Hover interaction deltas**: which properties animate on hover (transform, opacity, background, color) and the pattern (scale-up, fade-in, color-shift, slide-y)
+
+Motion data is included in JSON output as `motion` and printed in terminal under a dedicated Motion section.
+
 ### Brand Guide PDF
 
 Use `--brand-guide` to generate a printable PDF summarizing the extracted design system: colors, typography, components, and logo on a single document.

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();
       }