Pulls website design tokens into standard W3C DTCG JSON
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?
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?