Motion
Five questions every design system answers about motion. These are Accessible first’s answers, and each one points back to the reasons that chose it.
View all 2 motion tokens ↓The reasons this scheme answers from
- R1People and work contextEveryone, including people with disabilities, AAA
Question 1
What is motion for?
- Feedback only (chosen)
- Feedback and guidance
- Feedback and expression
Why Accessible first picks it: Motion only confirms an action.
becauseR1
Question 2
How many speeds exist?
- One (chosen)
- Two
- Three
Why Accessible first picks it: One speed.
becauseQ1
Question 3
How is easing defined?
- Standard ease-out (chosen)
- A spring
Why Accessible first picks it: A standard ease-out is easy to follow.
becauseR1
- Standard ease-out
- from duration
- from easing
Decisions point at primitives, so the rule lives in one place.
Question 4
How fast does feedback feel?
- Fast
- Moderate (chosen)
- Relaxed
Why Accessible first picks it: Moderate speed is easy to follow.
becauseR1
- duration
- feedback
- → duration.moderate
- easing
- standard
- → easing.standard
Question 5
Where does motion show?
- State changes only (chosen)
- State changes and panels
- Hero and launch moments
Why Accessible first picks it: Only state changes move.
becauseQ1
- transition · 2 keys
When to use
- Hover and press feedbackUse: motion.duration.feedback (moderate). Not: Fast flicker. Moderate speed is easy to follow.
- Someone asked for less motionUse: No motion. Not: Reduced motion. When people ask for less motion, nothing moves.
All motion tokens
2 tokens · each decision and the primitive it points to
- duration · 1
duration.moderate200ms - easing · 1
easing.standardcubic-bezier(0.2, 0, 0, 1) - Decisions · 2
motion.duration.feedback{duration.moderate}motion.easing.standard{easing.standard}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Motion in Accessible first: moderate. Moderate speed is easy to follow. Only state changes move.