Motion
Five questions every design system answers about motion. These are Multi-brand’s answers, and each one points back to the reasons that chose it.
View all 2 motion tokens ↓The reasons this scheme answers from
- R1Tasks and flowsComplete a form, sometimes
- R2Business and productSells and converts, many
- R3BrandNeutral and adaptable, present
Question 1
What is motion for?
- Feedback only
- Feedback and guidance (chosen)
- Feedback and expression
Why Multi-brand picks it: Feedback and guidance through sign-up.
becauseR1
Question 2
How many speeds exist?
- One
- Two (chosen)
- Three
Why Multi-brand picks it: One speed for feedback, one for panels.
becauseQ1
Question 3
How is easing defined?
- Standard ease-out (chosen)
- A spring
Why Multi-brand picks it: A standard ease-out across brands.
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 Multi-brand picks it: Moderate speed across brands.
becauseR3
- 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 Multi-brand picks it: State changes and panels move.
becauseQ1
- transition · 2 keys
When to use
- Hover and press feedbackUse: motion.duration.feedback (moderate). Not: Brand-specific motion. Motion is shared across brands.
- Someone asked for less motionUse: Reduced motion. Not: Full motion. Motion is reduced, not removed.
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 Multi-brand: moderate. Moderate speed across brands. State changes and panels move.