Why Motion Belongs in Your Brand Guidelines

Most brand guidelines stop at the logo, the colours and the type. Then the website launches, someone adds an animation library, and the brand suddenly moves in ways nobody decided on. Motion is part of how a brand feels, so it deserves the same care as everything else in the book.

Define a personality, then a speed

Start with words, not curves. Is the brand calm, precise, playful, bold? A calm brand eases in slowly and never overshoots. A playful one can bounce. Once the personality is clear, picking durations and easing becomes a technical step rather than a matter of taste.

Keep the vocabulary small

Three or four movements cover almost everything a website needs.

• Enter. How content arrives on load or on scroll. Usually a short rise and fade.

• Respond. Hover and press states. Fast, small and consistent.

• Transition. Moving between pages or states. Slower, and used sparingly.

If every element moves differently, nothing feels intentional. Repetition is what makes motion read as brand.

Write it down like a colour

I document motion the same way as a palette: a name, a duration, an easing curve and where it’s used. In Framer those become shared effects and component variants, so the next person building a page reuses them instead of inventing new ones.

Respect reduced motion

Good guidelines also say what happens when a visitor has asked for less movement. The brand should still feel like itself with every animation switched off.