Dembrandt vs Style Dictionary
Style Dictionary transforms token JSON into platform outputs. Dembrandt produces that JSON from production.
They solve consecutive problems. Style Dictionary (by Amazon) is a build tool: you hand it a W3C DTCG token file and it transforms it into CSS variables, Swift constants, Kotlin values, SASS maps, or any format you configure. Dembrandt is an extraction tool: it reads any live production URL and outputs a W3C DTCG token file. Dembrandt's output can feed directly into Style Dictionary's input.
Comparison
| Style Dictionary | Dembrandt | |
|---|---|---|
| Role in pipeline | Build tool: transforms token JSON into platform outputs | Extraction tool: reads production and outputs token JSON |
| Input | W3C DTCG JSON (tokens defined by your team) | Any production URL — no prior token definition needed |
| Output | CSS variables, Swift, Kotlin, SASS, JSON, and more | W3C DTCG JSON, CSS variables, DESIGN.md |
| Drift detection | No — transforms tokens, does not compare them | Numeric drift score per deploy against a pinned baseline |
| CI integration | Yes — runs as a build step to generate token files | Yes — runs as a CI step, can fail builds on drift |
| Requires predefined tokens | Yes — you define the tokens, Style Dictionary transforms them | No — extracts tokens directly from the live DOM |
| Use case | Distribute tokens across web, iOS, Android from one source | Capture what tokens are actually rendering in production |
| MCP / AI output | No | Yes — DESIGN.md for Claude Code, Cursor, Windsurf |
Use Style Dictionary when
- You have a defined token file and need to distribute it across web, iOS, and Android
- Your team maintains a single token source and generates platform-specific output from it
- You need custom transforms: composite tokens, aliasing, math operations
Use Dembrandt when
- You need to capture what tokens are actually rendering in production, not what your token file says
- You are auditing a codebase or site you did not build and have no token source file
- You want drift detection: flag when production tokens change between deploys
- You need to bootstrap a token file from an existing production site
Where they connect
Dembrandt outputs W3C DTCG JSON. Style Dictionary reads W3C DTCG JSON. If you have a production site with no token source file, run Dembrandt to extract the tokens, then feed the output into Style Dictionary to generate CSS, Swift, and Kotlin from it. The extraction step that was previously manual — or impossible — becomes a one-command operation.
Dembrandt also runs post-deploy to verify that what the browser renders still matches the token file that Style Dictionary built from. It closes the loop: tokens defined, tokens distributed, tokens verified.
Extract W3C DTCG tokens from any production URL:
npx dembrandt your-site.comTo enforce drift in CI, get an API key and add --key $DEMBRANDT_KEY to your deploy step. Full setup: cloud drift CI recipe.