# design-tokens

> Claude/Codex skill by [@icons8](https://omgskills.com/library/icons8/index.md) · 11 stars · Updated 2026-10-22

Set up design tokens in a project that has none, and catch drift in one that does - color palette with a neutral ramp, spacing scale, radii, type scale, shadows, dark mode. Use when starting a project, when styles are full of hardcoded hex values, or when grays and spacing values multiply. For applying tokens to components use ui-polish; for motion tokens (curves, durations) use motion; for state coverage use ux-check; for words use ux-writing.

Tags: agent, agent-skills, codex, icon-set, icons, mcp, skills

## Install

```sh
git clone https://github.com/icons8/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/design-tokens ~/.claude/skills/design-tokens
```

## From README

Design Tokens A project without tokens accumulates twelve grays and five blues nobody chose. This skill bootstraps a minimal token system in one pass for projects that have no design system, then keeps the system from drifting. Icons8 assets are built to drop into it. Scope This skill owns creating the token system, its vocabulary, and drift detection. Neighbors own how tokens are applied to surfaces is ui-polish; motion tokens (curves, durations) are defined in motion and only referenced here; state coverage is ux-check. Two contested lines, settled here: the motion token file is not a parallel palette, it is motion territory and is excluded from the counts below. Radii derived by the concentric rule in ui-polish are arithmetic on tokens (calc(var(--radius-lg) - var(--space-2))) and are not new scale values; the same number typed as a literal is drift. Skills outside this line can own the same ground. If one is loaded, follow it and add only what it does not cover.

## Links

- HTML page: https://omgskills.com/library/icons8/agent-skills/skills/design-tokens/
- GitHub: https://github.com/icons8/agent-skills
- Author: [@icons8](https://omgskills.com/library/icons8/index.md)

## More from this repo

- [asset-check](https://omgskills.com/library/icons8/agent-skills/skills/asset-check/index.md) — Four mechanical asset checks on an interface that was just built or changed - emoji standing in for icons, sections...
   - [@icons8](https://omgskills.com/library/icons8/index.md) · 11 stars
- [icons8](https://omgskills.com/library/icons8/agent-skills/skills/icons8/index.md) — Pick and fetch icons through the Icons8 MCP so a project ends up with one consistent set instead of a pile of...
   - [@icons8](https://omgskills.com/library/icons8/index.md) · 11 stars
- [icons8-design](https://omgskills.com/library/icons8/agent-skills/skills/icons8-design/index.md) — The front door to Icons8 design help.
   - [@icons8](https://omgskills.com/library/icons8/index.md) · 11 stars