Dembrandt vs Style Dictionary
Style Dictionary transforms token JSON into platform outputs. Dembrandt extracts that JSON from production.
They solve consecutive problems. Style Dictionary, by Amazon, is a build tool. Hand it a W3C DTCG token file and it emits CSS variables, Swift constants, Kotlin values, SASS maps, or whatever format you configure. Dembrandt is an extraction tool. It reads a live production URL and writes the W3C DTCG token file. Our output is their 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, defined by your team | Any production URL. Nothing has to be defined first. |
| Output | CSS variables, Swift, Kotlin, SASS, JSON, and more | W3C DTCG JSON, CSS variables, DESIGN.md, a Tailwind v4 theme, an HTML report, a brand guide PDF |
| Drift detection | None. It transforms tokens, it does not compare them. | A numeric drift score on every deploy, against a pinned baseline |
| CI integration | Yes, as a build step that generates token files | Yes, as a CI step. --compare exits 1 and fails the build. |
| Requires predefined tokens | Yes. You define them, Style Dictionary transforms them. | No. It reads them straight off the live DOM. |
| Use case | Distribute tokens across web, iOS, Android from one source | Capture what tokens are actually rendering in production |
| MCP server | None | Fifteen tools serving live tokens, drift and reports to an agent |
| Agent skills | None | 43 design and UX skills an agent installs alongside the tokens |
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 writes W3C DTCG JSON. Style Dictionary reads W3C DTCG JSON. Have a production site and no token source file? Extract the tokens, then hand the file to Style Dictionary and generate CSS, Swift, and Kotlin from it. The extraction step used to mean a designer in DevTools copying hex codes for a week. It is now one command.
Dembrandt also runs after deploy, checking that what the browser renders still matches the file Style Dictionary built from. Tokens defined, tokens distributed, tokens verified.
Extract W3C DTCG tokens from any production URL:
To enforce drift in CI, get an API key, then run --compare <baseline> --key $DEMBRANDT_KEY in your deploy step. It exits 1 when the tokens move. Full setup: cloud drift CI recipe.
Other comparisons
Every tool here solves a different part of the problem. The full list says which does what.