Extract Design Systems In Seconds. One command extracts any site's full design system instantly. Perfect for audits, competitor research, and documentation.
Dembrandt is an open-source Command Line Interface (CLI) tool designed to function as a CSS to design system converter. It allows users to instantly extract design tokens from any website with a single command, significantly reducing the manual effort typically required for brand auditing and benchmarking.
The main features of this tool include:
Comprehensive Token Extraction: The tool automatically identifies and extracts colors, typography styles, spacing tokens, shadows, and border radii. It also detects more complex elements like buttons, inputs, and gradients.
W3C Standard Export: It supports the new W3C design tokens format (--dtcg flag), allowing for easy integration into modern design system workflows.
Context-Specific Extraction: Users can use specific flags to extract palettes for dark mode or use a mobile viewport to see how styles change on different devices.
Multi-Page and Brand Analysis: Beyond single-page scans, it can extract design systems across multiple pages and even analyze a brand's tone of voice and messaging.
Accessibility and QA Audits: The tool includes WCAG compliance scoring and automated UI auditing capabilities to help teams identify implementation differences and accessibility issues between pages.
Developer and Designer Workflow Tools: It generates design token documentation in JSON format, providing quick references for developers when proper specifications are missing and helping designers audit existing apps for consistency.
Open-Source and Extensible: Distributed under the MIT license, it is an open-source project available via npm, allowing for community participation and the development of further integrations and extensions.