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

Open Source CLI to Extract
Design Systems & Tokens

Extract design tokens from any website with one command. CSS to design system converter with W3C design tokens export.

npm i -g dembrandt
~ terminal0.8s
$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
...buttons, inputs, gradients, and more
Saved to ./design-system.json
Get StartedView on GitHub

See It In Action

Powerful Features

CSS to design system converter with W3C design tokens export

CLI Options

Powerful command-line flags for customization

$dembrandt <url>
--dtcgW3C design tokens exportNEW
--save-outputSave JSON to output folder
--dark-modeExtract dark mode palette
--mobileUse mobile viewport

Multi-page

Extract design systems across multiple pages

Accessibility

WCAG compliance scoring and audits

Ecosystem

Integrations and extensions

Gradients

Complex gradient pattern detection

Tone of Voice

Analyze brand voice and messaging

Participate in development on GitHub

Who is it for?

Dembrandt helps designers, developers, and teams work faster

Designers

Auditing existing apps for consistent design systems and extracting visual specs

Developers

Quick token references when designs lack proper specs or documentation

Competitor Research

Benchmarking and analyzing design systems of competitors

QA & Audits

Automated UI audit tool for identifying differences between pages and implementations

Brand Replication

Ethically imitating a brand style for authorized projects

Documentation

Generating design token documentation for existing products

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 plus additional benchmarking sites.

Designers struggle to dissect brands from websites, and it's not just about extracting colors. The real challenge is understanding what truly matters in a brand system.

Dembrandt helps the designer-dev-business workflow. It saves me hours every week. Just dissect the brand with 1 command and use the design tokens in your preferred design systems.

We use cookies

We use Google Analytics to understand how visitors interact with our website. This helps us improve your experience. You can choose to accept or decline.