Skip to main content
---stars---dl/mo
NEW--dtcg

Extract Design Systems
& Tokens in Seconds

Open-source tool that extracts design tokens from any website with one command. Colors, typography, spacing, shadows and more as W3C-compliant output.

npm i -g dembrandt
v0.9.0-AI Agent Integration via MCP is now live
~ terminal10s
$dembrandt stripe.com
✓Extracted design system from stripe.com
✓ Colors: 24 found
#635BFF
#0A2540
#FFFFFF
#00D4FF
#7A73FF
#F6F9FC
✓ Typography: 8 styles
• Heading: 48px / 36px / 24px
• Body: 16px / 14px / 12px
✓ Spacing: 12 tokens
4px • 8px • 12px • 16px • 24px • 32px • 48px...
✓ Shadows: 5 found
• 0 4px 8px rgba(0,0,0,0.1)
• 0 12px 24px rgba(0,0,0,0.15)
✓ Border radius: 4 values
4px • 8px • 12px • 16px
✓ Button states: 3 variants
• default: #635BFF → hover: #7A73FF → active: #4B44D6
✓ Framework detected
React · Next.js · Tailwind CSS
✓ Breakpoints: 4 found
sm 640px • md 768px • lg 1024px • xl 1280px
Saved to ./design-system.json
Get StartedView on GitHub
Then explore your results

Local UINew

Browse extracted tokens in a visual interface. Colors, typography, logos, all in one view.

Dembrandt Local UI - Browse extracted design tokens in a visual interface

Powerful Features

CSS to design system converter with W3C design tokens export

CLI Options

Powerful command-line flags for customization

$dembrandt <url>
--brand-guideExport brand guide as PDFNEW
--dtcgW3C design tokens export
--save-outputSave JSON to output folder
--dark-modeExtract dark mode palette
See all flags

Button States

Hover, active and focus states with colors and transforms

DefaultHoverActive

Framework Detection

Identifies the tech stack behind any site

ReactNext.jsTailwind

Breakpoints

All responsive breakpoints extracted automatically

sm: 640px
md: 768px
lg: 1024px
xl: 1280px

Multi-page

New

Extract design systems across multiple pages

MCP Integration

New

Use Dembrandt as a tool in Claude Code, Cursor, Windsurf, or any MCP-compatible client

Brand Guide PDF

New

Export a complete brand guide as PDF from any URL in 10 seconds

Gradients

Coming soon

Complex gradient pattern detection

Tone of Voice

Coming soon

Analyze brand voice and messaging

Participate in development on GitHub

Use cases

Audit, benchmark, replicate, or document any brand from a live website.

Brand Audit & Design Extraction

Audit existing or legacy apps for design system consistency and extract visual specs fast, without manual DevTools work.

Developer Token Reference

Instant token references for colors, typography, spacing, shadows, and radii when Figma or docs are missing or outdated.

Competitor & Market Research

Benchmark design systems across competitor sites. Track trends in color palettes, typography, and spacing scales.

Cross-site Consistency Checks

Extract tokens from multiple pages and compare them side by side. Spot drift between implementations.

Documentation Kickstart

Generate initial design token documentation and JSON for existing products. Especially useful with W3C DTCG export.

Inspiration & Fast Prototyping

Quickly gather visual references for moodboards, style guides, or new feature ideation from any live site.

Dembrandt GitHub stars growth chart - 1.5k stars

How it all started?

How it all started

Over my 15 year design career, I've spent countless hours manually inspecting websites with DevTools: 1-3 hours per brand.

Dembrandt helps the designer-dev-business workflow. Just dissect the brand with 1 command.

Read the Blackpaper

Getting started

In under 2 minutes you will turn any website into a complete set of design tokens: colors, typography, spacing, borders, and more.

All you need is Node.js and a terminal. No account required.

Read the guide

Why this is necessary

Designers think in components and visual intent. Developers think in exact values and code. The gap between them is where most quality gets lost.

No common language, no documented system, no time. This is how most teams actually work.

Read the article

What people are saying

“An elegant solution to a real problem.”

Senior Architect

“I've seen a lot of products, and I know when something has that special something.”

Product Owner, Ex-Colleague

“Surprisingly thorough analysis. Goes deeper than you'd expect.”

Design Lead

Stay in the loop

Join 1,500+ developers and designers. Tactical insights on automating brand systems, modern Design-Dev workflows, and the future of design-engineering.