Skip to main content

🎞️ Motion

Principles​

  • Purposeful, subtle, supports comprehension and continuity.

Tokens​

  • Durations: motion.duration.fast/medium/slow
  • Easing: motion.easing.standard/enter/exit

Usage​

  • Hover → press → feedback transitions.
  • Page/overlay entrance & exit patterns.
  • Respect reduced-motion preferences where applicable.

Do’s / Don’ts​

  • âś… Use system durations/easing tokens
  • âś… Keep animation distances small and consistent
  • ❌ Overuse of motion that distracts
  • ❌ Inconsistent easing between related elements