Motion
Five questions every design system answers about motion. These are Content 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 contextOccasional visitors, AA
- R2BrandWarm, present
Question 1
What is motion for?
- Feedback only
- Feedback and guidance (chosen)
- Feedback and expression
Why Content first picks it: Motion confirms actions and guides between pages.
becauseR1
Question 2
How many speeds exist?
- One
- Two (chosen)
- Three
Why Content first picks it: One speed for feedback, one for panels.
becauseQ1
Question 3
How is easing defined?
- Standard ease-out (chosen)
- A spring
Why Content first picks it: A standard ease-out is calm.
becauseR2
- 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 Content first picks it: Moderate speed feels calm.
becauseR2
- duration
- feedback
- → duration.moderate
- easing
- standard
- → easing.standard
Question 5
Where does motion show?
- State changes only
- State changes and panels (chosen)
- Hero and launch moments
Why Content first picks it: State changes and opening panels move.
becauseQ1
- transition · 2 keys
When to use
- Hover and press feedbackUse: motion.duration.feedback (moderate). Not: A fast flash. Moderate speed feels calm.
- 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 Content first: moderate. Moderate speed feels calm. State changes and opening panels move.