Build Assets
Brand Guideline
Motion Principles
How elements animate — timing, easing, and purpose — as an expression of brand character.
Platform: bothTags: motion, animation, transitions, brand, interaction
The Rule
All motion must have purpose: guide attention, communicate state change, or confirm an action. Decorative animation is prohibited. Use standard durations: 100ms (micro), 200ms (standard), 300ms (complex), 500ms (page transitions).
Rationale
Motion communicates brand personality as powerfully as color. Fast, precise motion = competent and efficient. Slow, springy motion = playful and expressive. Motion without purpose adds cognitive load and can trigger vestibular discomfort.
Specifications
micro Interactions100–150ms — button press, checkbox, toggle
standard Transitions200ms — dropdown open, tooltip, tooltip fade
complex Motion300ms — modal enter, panel slide, accordion
page Transitions400–500ms — route change, full-page state change
easing Enterease-out (decelerates into resting position)
easing Exitease-in (accelerates away)
easing Interactiveease-in-out for bidirectional motion