Primitreev1.0.0-next.1
Menu

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 quickstartOpen the playground

$ primitree check

✓ graph resolved · 15 tokens · 3 layers

✓ policy passed · 0 findings

$ primitree build

→ wrote dtcg · css · tailwind · typescript

Try a change against the policy.

$ primitree check --source brand # proposal: currentProposal

semantic.color.bg.brand references primitives.color.blue.500 and feeds component.button.bg, component.focus.ring, component.nav.active.bg. The check passes with zero findings.

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 docsOpen the playground