Govern token change.Know what it reaches before it merges.

Primitree checks each change to a token source against the layer and ownership rules in your config, shows the components the change reaches, and builds files when the graph passes.

Run the quickstart Open the playground

npmpnpmyarnbun

$ npm install -D primitree@nextcopy

$ primitree check

graph resolved 15 tokens 3 layers

policy passed 0 findings

$ primitree build

wrote dtcg css tailwind typescript

$ primitree check --source brand # proposal: currentProposal

Current graphCompliant aliasLayer violationsRename

ROOTS PRIMITIVESTRUNK SEMANTICCANOPY COMPONENTblue.500#3366ffgreen.500#34d399gray.900#111827gray.50#f9fafbradius.md6pxspace.416pxcolor.bg.brand {blue.500}color.fg.default {gray.900}radius.control {radius.md}space.inset {space.4}button.bg {bg.brand}focus.ring {bg.brand}nav.active.bg {bg.brand}button.radius {radius.control}card.inset {space.inset}

PASS 0 findings

semantic points at primitives, component points at semantic. Nothing for policy to flag.

15 tokens 3 layers

Each verdict, consumer list, and count comes from @primitree/core at this site's build time, through the same functions the CLI calls.

Before

Review by eyeball

A rename lands in tokens.json. Someone scans the PR, approves, and finds out in production which components it reached.

what it reaches: unknown

tokens.json pull request

- "bg.brand": { "$value": "{blue.500}" }

+ "bg.primary": { "$value": "{blue.500}" }

Approved merged consumers unknown

After

Review by graph

The same rename arrives as five changes with three named consumers. A reference left pointing at the old name blocks the build before merge.

what it reaches: 3 components, named

primitree diff same change

removed semantic.color.bg.brand

added semantic.color.bg.primary

button.bg focus.ring nav.active.bg

merge waits until the 3 refs update

Change review

See what a rename touches.

primitree diff reads two revisions of a source through the graph and pairs each change with the components that reference it. One rename shows up as five changes.

Read the diff command

Diff report brand source

$ primitree diff tokens.before.json tokens.json --config primitree.config.ts

Diff found 5 token changes.

changed component.button.bg

Affected tokens: none

changed component.focus.ring

Affected tokens: none

changed component.nav.active.bg

Affected tokens: none

removed semantic.color.bg.brand

Affected tokens: component.button.bg, component.focus.ring, component.nav.active.bg

added semantic.color.bg.primary

Affected tokens: component.button.bg, component.focus.ring, component.nav.active.bg

New findings: 0 Resolved findings: 0

Quickstart

First report in two minutes.

No service and no account. A config file next to your tokens, one command locally or in CI.

Step 01 Install

$ npm install -D primitree@next
+ primitree@1.0.0-next.1

Step 02 Describe your layers

// primitree.config.ts
layers: [
  { id: 'primitives', roots: ['primitives'], values: 'literal' },
  { id: 'semantic', roots: ['semantic'], values: 'reference', references: ['primitives'] },
  { id: 'component', roots: ['component'], values: 'reference', references: ['semantic'] }
]

Step 03 Check and build

$ primitree check --source brand
 policy passed  0 findings
$ primitree build --source brand
 wrote dtcg  css  tailwind  ts

StandardDTCG Format Module 2025.10 output. Resolver contexts in tokens.resolver.json. Extensions under $extensions["com.primitree"].

OutputsDTCG CSS Tailwind TypeScript, from one resolved graph.

SourcesLocal DTCG files Figma variables export Variables REST API.

Your next token change, reviewed.

Point primitree at a tokens.json, write three layer rules, and read the first report.

Start with the docs Open the playground

Govern token change.Know what it reaches before it merges.

Try a change against the policy.

Review by eyeball

Review by graph

See what a rename touches.

First report in two minutes.

Your next token change, reviewed.