Motion tokens require three-tier architecture: primitives, semantic layer, component-specific

Source type	Community
Confidence	Low
Last verified	2026-03-22
Topics	design-tokens design-systems

Insight: According to Design Tokens Pills, motion tokens should follow a three-tier architecture: primitives (raw duration and cubic-bezier values), a semantic layer (intent-based naming like "enter," "exit," "feedback"), and component-specific tokens. Primitives should never be used directly inside components; semantic tokens create a shared vocabulary where "fast" means a consistent value across the entire team.

Detail: The system uses W3C-standardized duration and cubicBezier types from the 2025.10 DTCG spec and maps tokens to CSS custom properties via Style Dictionary. Accessibility is addressed at the token level by zeroing durations when prefers-reduced-motion is active. Common mistakes include excessive scale steps, using primitives directly in components, and ignoring the distinction between enter and exit easing curves. The article includes ready-to-use JSON examples and CSS transformation patterns.

Sources

• Design Tokens Pills — "Motion Tokens: Naming Your Movement" (2026-03-12)

Related: existing entry "Keyframes tokens: standardizing animation" in external/design-tokens.md — COMPLEMENTS