Field note7 min read
Motion is codified like color
Tokens capture duration, easing, and physics so teams don’t reinvent motion each sprint. Accessibility guidelines gate where motion is allowed.
:root {
--motion-snappy: 160ms cubic-bezier(0.32, 0.72, 0, 1);
--motion-soft: 320ms cubic-bezier(0.16, 0.8, 0.32, 1);
}
.card-enter {
animation: rise var(--motion-soft);
}
@keyframes rise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}Governance
Each new pattern ships with a reduced-motion variant and automated axe checks in CI.
Designers document allowed entrances/exits and when to prefer opacity over translation—keeps motion delightful but polite.
Motion red lines
- No parallax on scroll for body text
- Respect prefers-reduced-motion with zero animations
- Avoid oscillation; keep easing curves monotonic
Key takeaways
- Motion tokens
- Accessible defaults
- CI checks
Design SystemsAccessibilityMotion
