Dembrandt.

Extract any website's design system in one command. Enforce it in CI.

Logo, colors, typography, spacing, borders, shadows, motion, components. W3C design tokens in seconds.

Install

npm install -g dembrandt
dembrandt install-browser        # one-time: fetches the matching Chromium
dembrandt dembrandt.com

The browser step is required. dembrandt drives Chromium through playwright-core, which ships no browser binaries, so a fresh install has nothing to launch until you run it. Skipping it fails with browser engine not available.

Or use npx without installing: npx dembrandt dembrandt.com. The browser step applies here too: run npx dembrandt install-browser first. Browsers land in a shared Playwright cache, so either route only needs it once.

Requires Node.js 18+

Or install the MCP server straight into your editor and let the agent run it:

What you get

• Colors (semantic roles with the evidence behind each pick, curated palette, every detected colour, CSS variables, gradients)
• Typography (fonts, sizes, weights, sources, font file URLs)
• Spacing (margin/padding scales)
• Borders (radius, widths, styles, colors)
• Shadows
• Motion (duration scale, easing curves, hover patterns per component type)
• Components (buttons, badges, inputs, links)
• Breakpoints
• Icons & frameworks

Playwright renders the page, dembrandt reads computed styles from the DOM, analyzes color usage and confidence, groups similar typography, detects spacing patterns, and returns design tokens.

Flags

dembrandt dembrandt.com --shadcn        # shadcn/ui theme, observed slots only
dembrandt dembrandt.com --dtcg          # W3C design tokens, for Style Dictionary or Tokens Studio
dembrandt dembrandt.com --wcag          # WCAG 2.1 contrast on real DOM pairs

Default is formatted terminal output only. Every flag below; the detailed reference is docs/usage.md.

Export

Flag	What you get
--dtcg	W3C design tokens (DTCG)
--design-md	DESIGN.md for AI agents
--tailwind [path]	Tailwind v4 @theme CSS
--shadcn [path]	shadcn/ui theme, observed slots only
--html [path]	Self-contained HTML report
--brand-guide	Brand guide PDF
--json-only	Raw JSON to stdout
--save-output	JSON to output/<domain>/
--screenshot	Viewport screenshot
--color-format <f>	Colour notation: hex, rgb, oklch, lch, source
--raw-colors	Pre-filter colours too

Analysis

Flag	What you get
--wcag	Contrast grades on real DOM pairs
--compare <baseline>	Drift gate; exits 1 when tokens moved
--tokens <file>	Check rendered colours, radii and font sizes against a W3C Design Tokens file; repeat for several
--max-off-token <n>	With --tokens: exit 1 when more than N rendered values match no token
--tokens-report	With --tokens: Markdown summary with the nearest token per off-token value, wiki-ready
--annotations <github|azure>	CI annotations for drift and off-token values; detected from the runner by default
--approve	Accept the current run as the new baseline
--ai	ML brand-primary prediction (experimental)

Coverage