# Design System Tokens

> Use for design tokens, theming, light/dark or multi-brand support, token drift, component-system alignment, Figma variables, or Style Dictionary/DTCG token workflows.

- Skill: `seemseam/design-system-tokens` (Agent Skill)
- Install (CLI): `npx skillmds@latest add seemseam/design-system-tokens`
- Raw SKILL.md: https://api.skillmd.com/api/skills/seemseam/design-system-tokens/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: seemseam (https://skillmd.com/u/seemseam)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/seemseam/design-system-tokens

---


# Design System Tokens

Use this skill when frontend work touches tokens, themes, component-system
alignment, Figma variables, Tailwind config, CSS variables, or design-system
drift.

## Workflow

1. Identify the token sources: local code, Figma variables, Storybook docs,
   CSS variables, Tailwind config, Style Dictionary, or DTCG-format files.
2. Determine token categories: color, typography, spacing, radius, shadow,
   motion, z-index, breakpoints, and component semantic tokens.
3. Check for drift between design source, code source, and rendered UI.
4. Prefer semantic tokens for product meaning and raw tokens for primitives.
5. Keep extracted public-site tokens as runtime evidence, not Role source.
6. Document migration or implementation steps without overwriting source of
   truth silently.

## Output

Return:

- token source-of-truth assessment
- drift or conflict findings
- recommended token structure
- implementation steps
- validation checks

Do not store private Figma data, public-site extracted tokens, or project token
snapshots in Role source.