Extract Any Site's Design Tokens in One Command
Ever land on a beautifully designed website and immediately wonder, "What's their color palette? What font is that? How are their borders styled?" Figuring that out usually involves digging through dev tools, inspecting elements, and manually noting values. It's a tedious process.
What if you could capture a site's core visual DNA—its design tokens—with a single terminal command? That's exactly what Dembrandt does. It's a CLI tool that automates the extraction of a website's design system, turning it into a structured set of tokens you can use, reference, or learn from.
What It Does
Dembrandt is a Node.js command-line tool that analyzes a live website's CSS and HTML. It systematically scans for and extracts key design tokens, then outputs them in a clean, readable JSON format. It looks for:
- Colors: Primary, secondary, and accent colors from backgrounds, text, and borders.
- Typography: Font families, sizes, weights, and line heights.
- Spacing: Common margin and padding values.
- Borders: Radius values and widths.
- Assets: Logos and favicons.
- Other Tokens: Shadows, breakpoints, and more.
Instead of manual inspection, you get a consolidated snapshot of the site's foundational styles in seconds.
Why It's Cool
The clever part is how it works under the hood. Dembrandt uses Puppeteer to load the page in a headless browser, ensuring it captures fully rendered, dynamic styles. It then parses the computed CSS, intelligently groups similar values, and deduplicates them to find the most representative tokens. This approach means it works on modern, complex sites just as well as simple ones.
For developers, this is a Swiss Army knife for several real-world scenarios:
- Auditing or Recreating Designs: Quickly get the style guide for a site you need to refactor or build a companion for.
- Competitive Analysis: Understand the design choices of competitors or inspirational sites.
- Learning & Inspiration: Grab a color palette or typography scale from a site you admire for your own projects.
- Kicking Off a Design System: Generate a first draft of tokens to formalize and build upon.
How to Try It
Getting started is straightforward. You'll need Node.js installed. Then, it's just a few commands:
# Install it globally
npm install -g dembrandt
# Run it against a URL
dembrandt https://example.com
That's it. The tool will run and print a neatly formatted JSON object to your terminal containing all the extracted tokens. You can pipe this output to a file for later use:
dembrandt https://example.com > example-tokens.json
Head over to the Dembrandt GitHub repository for more details, options, and the source code.
Final Thoughts
Dembrandt is one of those simple, focused tools that solves a specific annoyance really well. It won't build your product for you, but it will save you a solid 15-30 minutes of tedious work when you need to understand a site's styles. As design tokens become the standard for building consistent UIs, having a quick way to extract them feels less like a neat trick and more like an essential utility. Give it a shot next time you're doing design reconnaissance—it's surprisingly satisfying to watch it pull everything together.
—
@githubprojects