Free & Open Source tool that extracts design tokens from any website into a standard W3C DTCG JSON. It captures colors, typography, spacing, button states, and breakpoints in seconds. 100% local, no login required.
Dembrandt was born from necessity: 15+ years of manually inspecting sites in DevTools. I got tired of guessing HEX codes and reverse-engineering spacing systems one by one.
npm i -g dembrandt
dembrandt netflix.com
What you'll get from extraction:
Favicons
Colors: HEX, RGB, LCH, OKLCH values.
Typography: Fonts, usage in elements, font sizes, leading, weights, and fallbacks.
Spacings: Automated grid/scale detection.
Border radius: Specific usage in elements.
Borders: Width, style, color, and shadows.
Buttons: Default, hover, and focus states.
Inputs & Links
Breakpoints: Media query cascade.
Frameworks: Detected tech stack.
More to come.
This is a work in progress. What is missing? What do you need?
I love this tool! It makes it so easy to get fetch and use design tokens from any site. Just copy good design system and tell agent to modify the colors to get other brand.
thevangelist
Dembrandt was born from necessity: 15+ years of manually inspecting sites in DevTools. I got tired of guessing HEX codes and reverse-engineering spacing systems one by one.
What you'll get from extraction:
Favicons
Colors: HEX, RGB, LCH, OKLCH values.
Typography: Fonts, usage in elements, font sizes, leading, weights, and fallbacks.
Spacings: Automated grid/scale detection.
Border radius: Specific usage in elements.
Borders: Width, style, color, and shadows.
Buttons: Default, hover, and focus states.
Inputs & Links
Breakpoints: Media query cascade.
Frameworks: Detected tech stack.
More to come.
This is a work in progress. What is missing? What do you need?