Motion
Five questions every design system answers about motion. These are Brand expressive’s answers, and each one points back to the reasons that chose it.
View all 2 motion tokens ↓The reasons this scheme answers from
- R1BrandBold, loud
- R2Human factorsDelight, they see it fresh each time
- R3OutcomesEngagement, looking off-brand
Question 1
What is motion for?
- Feedback only
- Feedback and guidance
- Feedback and expression (chosen)
Why Brand expressive picks it: Motion carries personality.
becauseR1
Question 2
How many speeds exist?
- One
- Two
- Three (chosen)
Why Brand expressive picks it: Fast feedback, moderate panels, relaxed hero.
becauseQ1
Question 3
How is easing defined?
- Standard ease-out
- A spring (chosen)
Why Brand expressive picks it: A spring that overshoots feels alive.
becauseR1
- A spring
- from duration
- from easing
Decisions point at primitives, so the rule lives in one place.
Question 4
How fast does feedback feel?
- Fast
- Moderate
- Relaxed (chosen)
Why Brand expressive picks it: Relaxed, springy motion.
becauseR2
- duration
- feedback
- → duration.relaxed
- easing
- standard
- → easing.standard
Question 5
Where does motion show?
- State changes only
- State changes and panels
- Hero and launch moments (chosen)
Why Brand expressive picks it: Motion shows in hero and launch moments.
becauseR3
- transition · 2 keys
When to use
- Hover and press feedbackUse: motion.duration.feedback (relaxed). Not: An instant change. Springy motion is part of the brand.
- Someone asked for less motionUse: Reduced motion. Not: Full motion. Motion is reduced when asked.
All motion tokens
2 tokens · each decision and the primitive it points to
- duration · 1
duration.relaxed320ms - easing · 1
easing.standardcubic-bezier(0.34, 1.56, 0.64, 1) - Decisions · 2
motion.duration.feedback{duration.relaxed}motion.easing.standard{easing.standard}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Motion in Brand expressive: relaxed. Relaxed, springy motion. Motion shows in hero and launch moments.