A CLI tool for extracting design tokens and brand assets from any website. Powered by Playwright with advanced bot detection avoidance.

npx dembrandt stripe.com

No installation required! Extract design tokens from any website in seconds. Or install globally with npm install -g dembrandt.

Dembrandt analyzes live websites and extracts their complete design system:

• Logo — Logo detection (img/svg) with dimensions and source URL
• Favicons — All favicon variants with sizes and types
• Colors — Semantic colors, color palette with confidence scoring, CSS variables (both hex and RGB formats)
• Typography — Font families, sizes, weights, line heights, font sources (Google Fonts, Adobe Fonts, custom)
• Spacing — Margin and padding scales with grid system detection (4px/8px/custom)
• Border Radius — Corner radius patterns with usage frequency
• Borders — Border widths, styles (solid, dashed, dotted), and colors with confidence scoring
• Shadows — Box shadow values for elevation systems
• Buttons — Component styles with variants and states
• Inputs — Form field styles (input, textarea, select)
• Links — Link styles with hover states and decorations
• Breakpoints — Responsive design breakpoints from media queries
• Icons — Icon system detection (Font Awesome, Material Icons, SVG)
• Frameworks — CSS framework detection (Tailwind, Bootstrap, Material-UI, Chakra)

Perfect for competitive analysis, brand audits, or rebuilding a brand when you don't have design guidelines.

Designers — Analyze competitor systems, document production tokens, audit brand consistency

Developers — Migrate design tokens, reverse engineer components, validate implementations

Product Managers — Track competitor evolution, quantify design debt, evaluate vendors

Marketing — Audit competitor brands, plan rebrands, monitor brand compliance

Engineering Leaders — Measure technical debt, plan migrations, assess acquisition targets

Uses Playwright to render the page, extracts computed styles from the DOM, analyzes color usage and confidence, groups similar typography, detects spacing patterns, and returns actionable design tokens.

1. Browser Launch - Launches Chromium with stealth configuration
2. Anti-Detection - Injects scripts to bypass bot detection
3. Navigation - Navigates to target URL with retry logic
4. Hydration - Waits for SPAs to fully load (8s initial + 4s stabilization)
5. Content Validation - Verifies page content is substantial (>500 chars)
6. Parallel Extraction - Runs all extractors concurrently for speed
7. Analysis - Analyzes computed styles, DOM structure, and CSS variables
8. Scoring - Assigns confidence scores based on context and usage

• High — Logo, brand elements, primary buttons
• Medium — Interactive elements, icons, navigation
• Low — Generic UI components (filtered from display)

Only shows high and medium confidence colors in terminal. Full palette in JSON.

Samples all heading levels (h1-h6), body text, buttons, links. Groups by font family, size, and weight. Detects Google Fonts, Adobe Fonts, custom @font-face.

Recognizes Tailwind CSS, Bootstrap, Material-UI, and others by class patterns and CDN links.

No installation needed! Run directly with npx:

npx dembrandt stripe.com

The first run will automatically install Chromium (~170MB).

Install globally for repeated use:

npm install -g dembrandt
dembrandt stripe.com

• Node.js 18 or higher

For contributors who want to work on dembrandt:

git clone https://github.com/thevangelist/dembrandt.git
cd dembrandt
npm install
npm link

# Using npx (no installation)
npx dembrandt <url>

# Or if installed globally
dembrandt <url>

# Examples
dembrandt stripe.com
dembrandt https://github.com
dembrandt tailwindcss.com

--json-only - Output raw JSON to stdout instead of formatted terminal display

dembrandt stripe.com --json-only > tokens.json

Note: JSON is automatically saved to output/domain.com/ regardless of this flag.

-d, --debug - Run with visible browser and detailed logs

dembrandt stripe.com --debug

Useful for troubleshooting bot detection, timeouts, or extraction issues.

--verbose-colors - Show medium and low confidence colors in terminal output

dembrandt stripe.com --verbose-colors

By default, only high-confidence colors are shown. Use this flag to see all detected colors.

--dark-mode - Extract colors from dark mode

dembrandt stripe.com --dark-mode

Enables dark mode preference detection for sites that support it.

--mobile - Extract from mobile viewport

dembrandt stripe.com --mobile

Simulates a mobile device viewport for responsive design token extraction.

--slow - Use 3x longer timeouts for slow-loading sites

dembrandt linkedin.com --slow

Helpful for sites with heavy JavaScript, complex SPAs, or aggressive bot detection that need extra time to fully load.

Every extraction is automatically saved to output/domain.com/YYYY-MM-DDTHH-MM-SS.json with:

• Complete design token data
• Timestamped for version tracking
• Organized by domain

Example: output/stripe.com/2025-11-22T14-30-45.json

Clean, formatted tables showing:

• Color palette with confidence ratings (with visual swatches)
• CSS variables with color previews
• Typography hierarchy with context
• Spacing scale (4px/8px grid detection)
• Shadow system
• Button variants
• Component style breakdowns
• Framework and icon system detection

Complete extraction data for programmatic use:

{
  "url": "https://example.com",
  "extractedAt": "2025-11-22T...",
  "logo": { "source": "img", "url": "...", "width": 120, "height": 40 },
  "colors": {
    "semantic": { "primary": "#3b82f6", ... },
    "palette": [{ "color": "#3b82f6", "confidence": "high", "count": 45, "sources": [...] }],
    "cssVariables": { "--color-primary": "#3b82f6", ... }
  },
  "typography": {
    "styles": [{ "fontFamily": "Inter", "fontSize": "16px", "fontWeight": "400", ... }],
    "sources": { "googleFonts": [...], "adobeFonts": false, "customFonts": [...] }
  },
  "spacing": { "scaleType": "8px", "commonValues": [{ "px": "16px", "rem": "1rem", "count": 42 }, ...] },
  "borderRadius": { "values": [{ "value": "8px", "count": 15, "confidence": "high" }, ...] },
  "shadows": [{ "shadow": "0 2px 4px rgba(0,0,0,0.1)", "count": 8, "confidence": "high" }, ...],
  "components": {
    "buttons": [{ "backgroundColor": "...", "color": "...", "padding": "...", ... }],
    "inputs": [{ "type": "input", "border": "...", "borderRadius": "...", ... }]
  },
  "breakpoints": [{ "px": "768px" }, ...],
  "iconSystem": [{ "name": "Font Awesome", "type": "icon-font" }, ...],
  "frameworks": [{ "name": "Tailwind CSS", "confidence": "high", "evidence": "class patterns" }]
}

# Analyze a single site (auto-saves JSON to output/stripe.com/)
dembrandt stripe.com

# View saved JSON files
ls output/stripe.com/

# Output to stdout for piping
dembrandt stripe.com --json-only | jq '.colors.semantic'

# Debug mode for difficult sites
dembrandt example.com --debug

# Extract tokens from multiple competitors (auto-saved to output/)
for site in stripe.com square.com paypal.com; do
  dembrandt $site
done

# Compare color palettes from most recent extractions
jq '.colors.palette[] | select(.confidence=="high")' output/stripe.com/2025-11-22T*.json output/square.com/2025-11-22T*.json

# Compare semantic colors across competitors
jq '.colors.semantic' output/*/2025-11-22T*.json

# Extract and convert to custom config format
dembrandt mysite.com --json-only | jq '{
  colors: .colors.semantic,
  fontFamily: .typography.sources,
  spacing: .spacing.commonValues
}' > design-tokens.json

# Or use the built-in Tailwind CSS exporter (see lib/exporters.js)
# Converts extracted tokens to Tailwind config format

Extract and document your company's current design system from production websites.

Compare design systems across competitors to identify trends and opportunities.

Document legacy design tokens before migrating to a new system.

Rebuild a brand when original design guidelines are unavailable.

Verify design consistency across different pages and environments.

• Stealth mode with anti-detection scripts
• Automatic fallback to visible browser on detection
• Human-like interaction simulation (mouse movement, scrolling)
• Custom user agent and browser fingerprinting

• Automatic retry on navigation failures (up to 2 attempts)
• SPA hydration detection and waiting
• Content validation to ensure page is fully loaded
• Detailed progress logging at each step

• Real-time spinner with step-by-step progress
• Detailed extraction metrics (colors found, styles detected, etc.)
• Error context with URL, stage, and attempt information
• Debug mode with full stack traces

If you encounter timeouts or network errors:

dembrandt example.com --debug

This will automatically retry with a visible browser.

Some sites require longer load times. The tool waits 8 seconds for SPA hydration, but you can modify this in the source.

If content length is < 500 chars, the tool will automatically retry (up to 2 attempts).

Use --debug to see:

• Browser launch confirmation
• Step-by-step progress logs
• Full error stack traces
• Extraction metrics

• Dark mode requires --dark-mode flag (not automatically detected)
• Hover/focus states extracted from CSS (not fully interactive)
• Canvas/WebGL-rendered sites cannot be analyzed (e.g., Tesla, Apple Vision Pro demos)
• JavaScript-heavy sites require hydration time (8s initial + 4s stabilization)
• Some dynamically-loaded content may be missed
• Default viewport is 1920x1080 (use --mobile for responsive analysis)

dembrandt/
├── index.js                      # CLI entry point, command handling
├── lib/
│   ├── extractors.js             # Core extraction logic with stealth mode
│   ├── display.js                # Terminal output formatting
│   └── exporters.js              # Export to Tailwind CSS config (NEW)
├── output/                       # Auto-saved JSON extractions (gitignored)
│   ├── stripe.com/
│   │   ├── 2025-11-22T14-30-45.json
│   │   └── 2025-11-22T15-12-33.json
│   └── github.com/
│       └── 2025-11-22T14-35-12.json
├── package.json
└── README.md

Dembrandt extracts publicly available design information (colors, fonts, spacing) from website DOMs for analysis purposes. This falls under fair use in most jurisdictions (USA's DMCA § 1201(f), EU Software Directive 2009/24/EC) when used for competitive analysis, documentation, or learning.

Legal: Analyzing public HTML/CSS is generally legal. Does not bypass protections or violate copyright. Check site ToS before mass extraction.

Ethical: Use for inspiration and analysis, not direct copying. Respect servers (no mass crawling), give credit to sources, be transparent about data origin.

Issues and pull requests welcome. Please include:

• Clear description of the issue/feature
• Example URLs that demonstrate the problem
• Expected vs actual behavior

MIT

• Dark mode extraction (via --dark-mode flag)
• Mobile viewport support (via --mobile flag)
• Clickable terminal links for modern terminals
• Figma integration branch: figma-integration
• Animation/transition detection
• Interactive state capture (hover, focus, active)
• Multi-page analysis
• Configuration file support