Design Token Authority

The deterministic backbone for design token workflows, built for humans and agents.

DTA reads your design tokens as plain DTCG JSON files (pulled from Figma or written by hand), checks their structure, builds them into CSS, JavaScript and Tailwind, and shows what a change does to your UI before it ships: base and head rendered, compared and explained by the token that caused each difference. Same input, same result, on your machine, in CI or when an agent runs it.

Quick start

Node.js 24.22.1 or newer. In your project:

npm create dta                        # installs design-token-authority, then dta init
npx design-token-authority pull       # Figma variables → tokens/ (Enterprise; otherwise: pull --from-file <export.json>)
npx design-token-authority build      # tokens/ → output/css, output/js, output/tailwind
npx design-token-authority lint       # structure checks; exits 2 on errors
npx design-token-authority diff       # token changes against the merge base with main, and screenshots explained by token

Once installed, dta is the short name in package scripts and npx dta finds it. Never run npx dta in a project without DTA installed: the npm name dta belongs to an unrelated package.

Commands

Command	What it does
dta init	Wizard that writes dta.config.ts and sets up dta diff; with a config, sets up or updates dta diff
dta pull	Figma → token files (REST API on Enterprise, --from-file with a plugin export)
dta push	Token files → Figma; dry run, typed confirmation, never deletes
dta prune	Figma variables without a token → deleted, after a dry run or a typed confirmation
dta build	CSS custom properties, JavaScript, Tailwind v3 and v4, one theme per brand; Swift, Android XML and Compose when chosen
dta lint	Dangling and circular aliases, default mode names, configurable rules
dta graph	Alias graph: console, Markdown, DOT or interactive HTML
dta diff	Token changes against a base; stories rendered at base and head, explained by token
dta analyze	Which role each Figma collection plays
dta clean	Removes token files and build output

Documentation

The docs are on the website, dta.martinprinz.dev; its source is in site/ (pnpm site:dev):

• What DTA is, Quick start, Core concepts
• Guides: Figma, Brands and themes, Tailwind, CI, dta diff in pull requests, dta diff with Storybook
• Reference: Token files, Outputs, Lint rules, Exit codes
• Contribute: architecture, package boundaries, tests, specs and tickets

License

MIT