GFX-201c · Module 3

Motion Style Guides

3 min read

Static brand systems define colors, fonts, and layouts. Motion brand systems add timing, easing, and choreography. When your brand uses animation — on the website, in social content, in presentations, in product interfaces — those animations need to feel as consistent as your color palette. A motion style guide defines the rules: how fast things move, how they enter and exit, what eases in and what snaps, what transitions are on-brand and what transitions are not.

The three pillars of a motion style guide are duration, easing, and choreography. Duration defines how long animations take — your brand might favor quick, snappy transitions (150ms) or deliberate, elegant ones (400ms). Easing defines the acceleration curve — does your brand feel mechanical (linear) or organic (ease-in-out)? Choreography defines how multiple elements relate in time — do they enter simultaneously, in a staggered sequence, or in a cascade? These three decisions, documented and applied consistently, create a recognizable motion identity.

Do This

  • Define standard durations for your brand: micro (150ms), standard (300ms), emphasis (500ms)
  • Choose one primary easing function and use it for 80% of animations
  • Document entrance, exit, and transition patterns as reusable motion tokens

Avoid This

  • Use random durations for each animation based on what "feels right" in the moment
  • Mix multiple easing functions in the same view without a deliberate reason
  • Treat motion as decoration — every animation should communicate something

Document your motion style guide alongside your visual style guide. Include video examples of each defined pattern — a 2-second clip showing the standard entrance animation, the standard exit, the standard transition between states. When new team members or AI tools need to understand your motion language, these clips communicate what text descriptions cannot.