I Built Dembrandt: Extract Any Website's Design System in Seconds (Open Source)

thevangelist — Mon, 29 Dec 2025 13:21:32 +0000

Sometimes you don't have a customer brand guide.

Or there are no digital design guidelines at all. But you still need to make a frontend with customer brand...

Over my 15 year design career, I've spent countless hours manually inspecting websites with DevTools and benchmarking customer web tools: 1-3 hours per brand plus the additional sites to benchmark.

The Problem:

I would look at the :root CSS variables for colors, inspect H1-H6 for texts, look at box shadows and border radiuses. I guess every developer has their own preferred way of doing this. Finally, I decided to tackle this not-so-glorious workflow that many designers and developers follow.

Designers have been and will still struggle to dissect brands from websites, and it's not just about extracting colors: that's the easy part. The real challenge is understanding what truly matters in a design system. Developers also feel the pain when designs lack proper color values and so on.

The Solution:

Dembrandt is my Open Source attempt to help to perfect the designer-dev-business workflow. Dembrandt dissectss the brand from any website with one command and outputs the design system in terminal.

Install npm i -g dembrandt and then

Run dembrandt bmw.de to extract design system (colors, typography, spacing, borders, logo,..) into design tokens in few seconds. It is perfect for competitor analysis, audits or documentation, saving hours of DevTools digging.

Under the hood: Dembrandt uses Playwright to render a live site, bypasses bot detection, analyzes computed DOM styles and CSS variables, and distills real usage patterns into confidence-scored design tokens.

Who is it for:

Designers auditing existing apps for consistent design systems
Developers needing quick token references when designs lack proper specs
Competitor research and benchmarking
Identifying differences in pages / apps
Imitating a brand (be ethical)

Important flags:
--dtcg - export tokens in the W3C Design Tokens standard (easy to plug into other tools)
--save-output - persist results as JSON for audits and documentation
--browser=firefox - better success on Cloudflare / bot-protected sites
--dark-mode - extract dark mode color tokens
--slow - reliable extraction for JavaScript-heavy SPAs

Dembrandt won't replace a proper brand guide or digital design guidelines - but it removes the manual work when one doesn't exist. If you've ever reverse-engineered a brand from a live website, Dembrandt was built for you.

If you are interested in contributing to dembrandt, participate in GitHub discussions.

https://x.com/dembrandtcom

Peace out.

Forem: thevangelist

I Built Dembrandt: Extract Any Website's Design System in Seconds (Open Source)