design-tokenslisted

# Design Tokens <!-- anthril-output-directive --> > **Output path directive (canonical — overrides in-body references).** > All file outputs from this skill MUST be written under `.anthril/data/design-tokens/`. > Run `mkdir -p .anthril/data/design-tokens` before the first `Write` call. > Primary artefact: `.anthril/data/design-tokens/<artefact>`. > Do NOT write to the project root or to bare filenames at cwd. > Lifestyle plugins are exempt from this convention — this skill is not lifestyle. ## Skill Metadata - **Skill ID:** design-tokens - **Category:** Brand Visual System - **Output:** Design token specification + multi-format exports - **Complexity:** Medium - **Estimated Completion:** 10–20 minutes (interactive) --- ## Description Generates a complete design token system covering colour, typography, spacing, radius, shadow, motion, and z-index. Exports the same token set to four formats: 1. **JSON** — W3C Design Tokens spec format (interoperable with Style Dictionary, Tokens Studio) 2. **CSS variables** — drop-in `:root {}` block with both light and dark mode 3. **Tailwind v4 config** — `@theme {}` block ready for `app.css` 4. **Style Dictionary source** — for teams using Style Dictionary build pipelines The bundled `token-converter.py` script converts between any of these formats so the user can ingest existing tokens or transform Beacon-style JSON into Tailwind config (etc.). Use this skill when: - Productionising the output of `color-palette` into a real codebas