Know what your design system release breaks

Open-source tools for design systems. No account and no server: they run in your browser, your CI or your terminal.

Reads your tokens as they are

Whatever wrote them, tokens become one graph, so the comparison and the checks work the same for every source. No conversion step and no config for the usual layouts.

Themes and modes found on their own
Every theme is compared separately: dark can break while light stays the same
```
"$extensions": { "mode": {
  "light": "{color.white}",
  "dark": "{color.black}"
} }
```
Resolver sets · theme files · $extensions.mode
Math and color modifiers calculated
Change the base value and every token built on it shows up
```
"lg": {
  "value": "{space.base} * 2",
  "type": "spacing"
}
```
Token JSON with expressions
References followed to the end
A change deep in an alias chain is reported with its cause
```
"primary": {
  "value": "{color.base.ink.value}"
}
```
Token JSON with value and type
Colors compared by how they look
ΔE in OKLab, any color space; changes no one can see are a patch
```
"$value": {
  "colorSpace": "oklch",
  "components": [0.62, 0.19, 259]
}
```
DTCG 2025.10
CSS read as tokens
Custom properties become tokens; selectors become themes
```
:root { --bg: #ffffff; }
[data-theme="dark"] { --bg: #0c0c0e; }
.dark { --bg: #0c0c0e; }
```
CSS custom properties
Any version, nothing uploaded
Published packages and branches are fetched by your browser
```
npm:@scope/tokens@2.1.0
github:owner/repo/tokens@main
./tokens
```
npm · GitHub · files

Reads DTCG 2025.10, older token JSON with value and type, Figma variables exported to JSON and CSS custom properties.

A release, compared right here

Not a screenshot: two versions of a small token file, compared by dsgraph in your browser as this page loaded.

Open it in Token Diff →

Your code stays on the design system

For designers who build in code, on their own or with an agent. dsgraph reads CSS, JSX and TSX, Tailwind classes, Vue and Svelte: how much of it comes from tokens, which values are written by hand and what to write instead, and what the next version of the design system will break.

Try it on your project in Token Diff →

Your code

4 files of code

On tokens67%12 from tokens · 6 written by hand

Breaks after the update2

components/Button.tsx

line 6bg-dangertoken removed

components/Card.tsx

line 3p-(--space-sm)renamed, use space‑small

Looks different after the update9

components/Badge.tsx

line 3text-bgcolor‑gray‑900 changed, through color‑bg

components/Button.tsx

line 5rounded-mdradius‑md changed
line 6text-bgcolor‑gray‑900 changed, through color‑bg
line 6text-bgcolor‑gray‑900 changed, through color‑bg
line 6bg-accentcolor‑accent changed; color‑blue‑500 changed, through color‑accent

components/Card.tsx

line 3bg-bgcolor‑gray‑900 changed, through color‑bg
line 3rounded-mdradius‑md changed
line 3shadow-cardshadow‑card changed
line 4text-textcolor‑gray‑900 changed, through color‑text

Written by hand6

Values written by hand do not follow the design system when it changes. Replace them with tokens.

components/Badge.tsx

line 3bg-[#2563eb]bg-accent
line 3px-[15px]px-(--space-md)closest, 1px off
line 3rounded-[6px]rounded-md

components/Banner.tsx

line 3color: #111827var(--color-text)
line 3background: #f9fafbvar(--color-bg)
line 3padding: 24pxvar(--space-lg)

Four components of a small app on the example’s tokens, checked by dsgraph when this site was built. The same report comes from dsgraph check --code, the MCP server and the GitHub Action.