Overview
Motion guidelines often sit unread in a PDF. Here is how we write rules teams actually follow.
Most brand guidelines treat motion as an afterthought. Somewhere near the end of a long PDF there is a page of easing curves and a few timing values in milliseconds. Designers skim it once, then animate however feels right on the day. A year later, the brand moves in a dozen different ways.
Motion deserves better, because it is often the first thing people notice. On a website, in an app or on social media, movement sets the mood before anyone reads a word. Here is how we write motion principles that teams actually use.
Start with behaviour, not numbers
Timing values are useful, but they are not memorable. Nobody remembers that the standard transition is 420 milliseconds. People do remember a short description of behaviour. So we start every motion system with three to five plain sentences that describe how the brand moves.
For an energy brand we wrote: light rises, it never flashes. For a fintech company: money flows, it never jumps. For a fashion label: things arrive, they do not bounce. Each sentence gives a clear yes or no answer when someone is deciding how to animate a button or a headline.
Connect motion to the brand idea
Good motion rules are not decoration. They grow from the same idea as the rest of the brand. If a brand is calm and reassuring, its motion should be slow and steady. If it is playful, it can afford a little overshoot and surprise. When the rules connect to the bigger idea, teams understand why they matter and are far more likely to follow them.
Make the rules easy to copy
A rule on paper is only half a rule. Every principle we write comes with a working example that designers can copy straight into their own projects.
A small library of ready-made animations in Framer.
Matching After Effects templates for video and social.
Preset easing curves named after the behaviour they create.
A short screen recording of each rule in action.
Naming matters more than you might think. A curve called soft rise gets used. A curve called cubic-bezier 0.22, 1, 0.36, 1 gets ignored.
Test the rules on boring screens
It is easy to make motion look good in a launch film. The real test is an error message, a loading state or a settings page. We always test our principles on the least glamorous parts of a product. If the rules still feel right there, they will work anywhere.
Review motion like you review type
Finally, motion needs the same care as typography or colour. We encourage teams to include a short motion check in every design review: does this move the way our brand moves? Over time that question becomes second nature, and the brand starts to feel consistent in a way people can sense but rarely describe.

