Pipeline Output

primitree build variables.json writes design-tokens/ unless you pass --out.

Directory layout

design-tokens/
├── tokens/
│   ├── *.tokens.json          # one file per collection (+ mode files)
│   └── tokens.resolver.json   # DTCG Resolver: modes → contexts
├── css/
│   ├── tokens.css             # custom properties + theme selectors
│   └── tokens.tailwind.css    # Tailwind v4 @theme
├── ts/tokens.ts               # TokenPath union + values
├── style-dictionary.config.mjs
├── design-tokens.workflow.yml
└── README.md

With --terrazzo, you get terrazzo.config.mjs instead of Style Dictionary.

tokens/*.tokens.json

DTCG 2025.10 token documents, plus the documented Primitree boolean extension. The build writes one base file per Figma collection and one override file for each non-default mode.

Aliases remain {dot.path} references. Figma metadata lives under $extensions['com.primitree'].

tokens.resolver.json

The Resolver lists the base token files, mode contexts, default context for each axis, and merge order. A Theme collection with Light and Dark modes maps to a theme axis with light as its default and dark as an override.

{
  "theme": "dark"
}

Consumers pass that selection to applyResolver, useTheme, or the MCP resolve_context tool. See Resolver.

css/tokens.css

CSS custom properties with context blocks such as [data-theme='dark']. Import the file in your app entry:

@import './design-tokens/css/tokens.css';

css/tokens.tailwind.css

Tailwind v4 @theme mappings use the default resolved context. Add the file to the CSS entry that loads the generated token styles.

ts/tokens.ts

TypeScript helpers:

• TokenPath union of generated token paths
• tokenVars map of theme-aware CSS var() accessors
• tokenValues map of resolved default-context values

import {
  tokenValues,
  tokenVars,
  type TokenPath,
} from './design-tokens/ts/tokens'

const path: TokenPath = 'semantic.color.bg.brand'
console.log(tokenValues[path])
console.log(tokenVars[path])

Transformer config

The Style Dictionary config reads base token files. Generated CSS contains the mode overrides.

The Terrazzo config reads tokens.resolver.json and passes mode choices through as Resolver contexts.

design-tokens.workflow.yml

A GitHub Actions template checks out the repository, installs pinned tools, rebuilds when variables.json changes, and commits the generated paths. Review the workflow and repository permissions before placing it in .github/workflows/.

Skip outputs

See CLI build for flags and defaults.