📘

Design Tokens

Single source of truth for visual decisions.

v1 design curated

🤖

Install 安装

curl -sSL https://updating.cc/skills/design/design-tokens/SKILL.md -o ~/.agents/skills/design__design-tokens/SKILL.md

📄

Raw Source

https://updating.cc/skills/design/design-tokens/SKILL.md

← Back to profession page

SKILL.md Preview 技能内容预览

---
name: Design Tokens
description: Single source of truth for visual decisions.
---
# Design Tokens

A token is a named decision ("spacing.md" = 16px) consumed everywhere instead of the raw value. Change the value in one place and every consumer updates.

## Structure
- **Alias tokens → reference tokens.** `color.button.primary.bg` → `color.brand.500` → `#2563eb`. The alias carries the *intent* (a primary button's background); the reference carries the *value*. Re-theming changes references; redesign changes aliases.
- **Cover the axes.** color, spacing, typography, radius, shadow, z-index, motion duration/easing. Missing axes get ad-hoc values and drift.
- **Don't over-tokenize.** A token per pixel is noise. Tokenize the decisions you actually want to keep consistent.

## Consumption
Emit tokens to each platform's format (CSS variables, TS constants, JSON for native). One source, many consumers.