design-token-sync git:20260414.a4061e0A

Immutable. This exact content never changes and is served at /api/v1/blob/705ba3175a5be44a.

---
name: design-token-sync
description: Push brand-memory values (palette, typography) out to CSS custom properties, Tailwind config, TypeScript declarations, and a Figma variables JSON. One-way push from the single source of truth. Use when generating design tokens, syncing to Figma, or regenerating a Tailwind config.
---

# design-token-sync

Reads the project's `brand.json` (written by **brand-memory**) and emits four token artifacts in one shot. Single source of truth → all consumers stay in sync.

## What it emits

| File | Location | Purpose |
|------|----------|---------|
| `tokens.css` | `dist/tokens/tokens.css` | CSS custom properties (`:root { --color-bg: … }`) |
| `tailwind.config.js` | `dist/tokens/tailwind.config.js` | Tailwind `theme.extend` with colors + fontFamily |
| `tokens.d.ts` | `dist/tokens/tokens.d.ts` | TypeScript union types + `export const` per color |
| `figma-variables.json` | `dist/tokens/figma-variables.json` | Figma Variables REST API payload |

All files start with a `/* Generated by atelier design-token-sync. Do not edit by hand. */` header. Never edit them manually — re-run the sync instead.

## Usage

### CLI

```bash
# Sync tokens for the current directory
node plugins/atelier/skills/design-token-sync/index.mjs

# Sync tokens for a specific project root
node plugins/atelier/skills/design-token-sync/index.mjs /path/to/project
```

### API

```js
import { syncTokens } from './plugins/atelier/skills/design-token-sync/index.mjs';

const written = await syncTokens({
  projectRoot: '/path/to/project',
  outDir: 'dist/tokens',   // default
});
// written → array of absolute file paths
```

### Individual emitters (pure functions)

```js
import { emitCss } from './emitters/css.mjs';
import { emitTailwind } from './emitters/tailwind.mjs';
import { emitDts } from './emitters/dts.mjs';
import { emitFigmaVariables } from './emitters/figma.mjs';

const css = emitCss(cfg);           // → tokens.css string
const tw  = emitTailwind(cfg);      // → tailwind.config.js string
const dts = emitDts(cfg);           // → tokens.d.ts string
const fig = emitFigmaVariables(cfg); // → figma-variables.json string
```

## Figma bridge notes

`figma-variables.json` matches the Figma Variables REST API shape:

- **palette** collection — each color as `type: "COLOR"`
- **typography** collection — each font as `type: "STRING"`

To import into Figma: use the Figma REST API `POST /v1/files/:key/variables` with the JSON payload, or paste it into a Figma plugin that accepts the variables bulk-import format.

Typography entries with an empty/falsy value are omitted from all outputs.