# Dembrandt

> Dembrandt is an open-source CLI tool that automatically extracts design systems and design tokens from any website.

## What is Dembrandt?

Dembrandt analyzes websites and extracts their visual design properties -- colors, typography, spacing, shadows, gradients, and more -- converting them into structured W3C design tokens format. It saves designers and developers 1-3 hours per brand that would otherwise be spent manually inspecting websites with browser DevTools.

## Installation

Current version: **0.15.0**

```bash
npm install -g dembrandt
```

## Usage

```bash
dembrandt dembrandt.com
```

### Key Flags

- `--wcag` - Real WCAG 2.1 contrast ratios from DOM, including hover/focus/disabled states
- `--crawl` - Multi-page extraction (replaces `--pages`)
- `--brand-guide` - Export a complete brand guide as PDF in 10 seconds
- `--dtcg` - Export in W3C Design Tokens format
- `--save-output` - Save results to file
- `--dark-mode` - Extract dark mode styles
- `--mobile` - Extract mobile-responsive styles
- `--browser=firefox` - Use Firefox (helps with Cloudflare-protected sites)
- `--slow` - Longer timeouts for JavaScript-heavy SPAs

### AI Agent Integration (MCP + DESIGN.md)

Use Dembrandt as a tool in Claude Code, Cursor, Windsurf, or any MCP-compatible client. Since v0.10.0, Dembrandt also outputs a `DESIGN.md` file that AI agents can read directly as design system instructions, making it a natural fit for agentic, MCP-first workflows.

```bash
claude mcp add --transport stdio dembrandt -- npx -y dembrandt-mcp
```

Or add to `.mcp.json`:

```json
{
  "mcpServers": {
    "dembrandt": {
      "command": "npx",
      "args": ["-y", "dembrandt-mcp"]
    }
  }
}
```

7 tools available: `get_design_tokens`, `get_color_palette`, `get_typography`, `get_component_styles`, `get_surfaces`, `get_spacing`, `get_brand_identity`.

## What Gets Extracted

- **Colors** - Hex, RGB, HSL, OKLCH values with role, onColor, and hover variants
- **Typography** - Font families, sizes, weights, line heights, OpenType font feature settings; categorized as display/heading/body/ui/caption
- **Spacing** - Spacing scale patterns across elements
- **Border Radii** - All border radius values used
- **Box Shadows** - Shadow definitions at all elevation levels
- **Gradients** - Linear, radial, and conic gradient definitions
- **Motion tokens** - Transition durations/easings per context, hover interaction deltas, keyframe animation inventory
- **Logo** - Semantic logo detection with scoring, multi-instance and PWA manifest support
- **Button Styles** - Default, hover, active, focus, disabled states with colors and transforms
- **WCAG contrast** - Real AA/AAA grades from DOM for all color pairs including interactive states
- **Brand Guide PDF** - Complete brand guide exported as a ready-to-share PDF in 10 seconds
- **DESIGN.md** - Google DESIGN.md format with OpenType font feature tokens

## Output Format

Extracted tokens are structured as W3C Design Tokens Community Group (DTCG) compatible JSON, making them portable across design tools and development frameworks.

## Dembrandt App (Cloud)

A web application for managing extractions, tracking token drift, and comparing snapshots over time.

- Upload and store JSON extractions in the browser (localStorage)
- Pin any snapshot as a baseline — all subsequent extractions are automatically compared against it
- Drift report per extraction: category breakdown (colors, typography, spacing, radius, shadows) with visual color swatches and before/after values
- Brand asset diff: logo and favicon changes detected and shown visually
- Snapshot timeline (GitHub-style calendar) per domain
- Copy individual tokens directly into Copilot, Claude, Cursor, or your codebase
- Resizable drift panel with download/copy report
- Available at `/app` (requires login via GitHub OAuth)

## Who Uses Dembrandt?

- **Designers** auditing and documenting design systems
- **Developers** needing quick design token references
- **Product teams** doing competitor research
- **QA professionals** conducting design audits
- **Brand teams** creating documentation

## Website Pages

- `/` - Landing page with product overview, features, and interactive demo
- `/getting-started` - Quickstart guide: install, run, and view your first extraction in under 2 minutes
- `/validator` - Real-time validator for the W3C Design Tokens Community Group (DTCG) specification 2025.10. Paste token JSON and get instant feedback against the Format module (13 token types), Color module (14 color spaces), and Resolver module structure. Validates token references, JSON Pointer $ref, alias resolution with circular detection, $extends inheritance, and naming. Runs fully client-side, free, no signup.
- `/explorer` - Gallery of design tokens observed from 9 popular brands as curated demonstration (Stripe, Linear, Notion, OpenAI, Tesla, Airbnb, Figma, Slack, Uber). CSS values only, no brand assets.
- `/explorer/[brand]` - Individual brand detail pages showing observed design tokens
- `/blackpaper` - Technical deep-dive on the motivation, architecture, and methodology behind Dembrandt
- `/why-it-matters` - Article on why designers, developers, and stakeholders need shared design foundations
- `/design-dev-workflows` - Article on modern agentic, MCP-powered design-dev workflows and where Dembrandt's DESIGN.md output fits
- `/brand-to-design-system` - Article on brand, design system, and component library hierarchy from two perspectives: brand-first and system-first
- `/design-md` - Article on DESIGN.md format: where it works, where it fails at scale, and how structured DTCG tokens sit above it
- `/building-your-first-design-system` - Article on the rare skill of turning a brand into a working design system: perception, abstraction, and systems thinking, and why automated token extraction unblocks rather than replaces it
- `/recipes` - CLI commands, AI agent prompts, and full pipelines for extracting design tokens, auditing brand compliance, benchmarking competitors, and integrating Dembrandt into Claude Code, Cursor, Figma, Storybook, shadcn/ui, Next.js, and GitHub Actions. Organized by category, filterable by role (Designer, Developer, QA, PM, Marketing, Agency, Enterprise).
- `/recipes/[slug]` - Individual recipe page with full description, commands, AI prompts, and output. Each has unique SEO metadata. Examples: /recipes/brand-guide-pdf, /recipes/wcag-audit, /recipes/clone-brand, /recipes/figma-mcp-design-system.
- `/skills` - Landing page for dembrandt-skills: 32 UX and design system skills for AI agents including pipeline orchestration skills (dembrandt 6-stage orchestrator, extract-design, generate-ui-from-brand). Install with `npx skills add dembrandt/dembrandt-skills`.

## Page-Specific LLMs.txt

Each page has its own llms.txt with detailed context:

- /getting-started/llms.txt
- /validator/llms.txt
- /explorer/llms.txt
- /blackpaper/llms.txt
- /why-it-matters/llms.txt
- /design-dev-workflows/llms.txt
- /brand-to-design-system/llms.txt
- /design-md/llms.txt
- /building-your-first-design-system/llms.txt

## Explorer: Featured Brands

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

- **Stripe** (stripe.com) - Payment processing. Observed colors: #635bff, #0a2540, #00d4ff.
- **Linear** (linear.app) - Issue tracking. Colors: #133174, #1d1d1f, #8b8b8b. Font: Inter.
- **Notion** (notion.so) - Workspace platform.
- **OpenAI** (openai.com) - AI research.
- **Tesla** (tesla.com) - Electric vehicles.
- **Airbnb** (airbnb.com) - Travel marketplace.
- **Figma** (figma.com) - Design tool.
- **Slack** (slack.com) - Team communication.
- **Uber** (uber.com) - Ride-hailing platform.

## Technical Background

Dembrandt uses headless browser automation (Playwright) to load websites and extract computed styles. It analyzes CSS :root custom properties, heading hierarchy, and element styles to build a complete token set. The approach handles dynamic rendering, SPAs, and CSS-in-JS solutions since it reads computed styles rather than source CSS.

## Links

- npm: https://www.npmjs.com/package/dembrandt
- GitHub: https://github.com/dembrandt/dembrandt
- X: @dembrandtcom (official account)
- X bot: @dembranded (automated daily brand extractions)
- LinkedIn: https://www.linkedin.com/company/10303168/

## Tech Stack (Website)

- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Framer Motion