---
name: design-tokens
description: Convert an approved theme and generated palette into validated typography, spacing, radius, elevation, motion, and density tokens.
---

# Design tokens

Use after a visual theme and color palette are chosen. Do not use to select a theme or invent a palette; route those needs to `theme-select` or `color`.

## Procedure

1. Read the selected theme and color-engine JSON. Preserve their decisions; report missing or conflicting inputs rather than silently guessing.
2. Run `scripts/build_tokens.py` to create `tokens.json` and `tokens.css`. Existing files are protected unless `--force` names the intended replacement.
3. Check the token schema, 4px spacing grid, nested-radius rule, local font stacks, tinted shadow colors, density map, and reduced-motion output.
4. Record the input paths, generated paths, and observed validation result in the project handoff.

## Inputs and outputs

- Inputs: complete `theme.json` and `palette.json` from `color/scripts/color_engine.py`.
- Outputs: schema-checked token JSON and CSS custom properties with the palette's hex fallbacks and supported OKLCH declarations.
- Runtime: Python standard library only; no font download or network access.

## Reference routing

Load only the relevant reference when making a token decision.

| Need | Load |
|---|---|
| Type, measure, spacing, radius, elevation, motion, and density rules | [token rules](references/token-rules.md) |

## CLI

```bash
python skills/color/scripts/color_engine.py generate "#416C78" --neutral-tint 0.015 --output-dir .narmaforge/color
python skills/design-tokens/scripts/build_tokens.py --theme .narmaforge/project/theme.json --palette .narmaforge/color/palette.json --output-dir .narmaforge/project
```