All in motion: designing brand systems that move from first glance to lasting memory

All in motion: why movement is the part of branding most teams forget

A static logo on a white page is no longer the whole picture. A potential customer meets your brand on a feed, a hover state, a loading spinner, a checkout transition, an onboarding animation, and a return visit six months later. Every one of those moments is a chance to confirm what your brand feels like, or to quietly contradict it. When designers say a brand is all in motion, they mean that motion is not a decoration layered on top of an identity. It is part of the identity, with the same responsibility as colour, type, and voice.

For a small studio, the practical question is not whether to add motion. It is which motion decisions are worth deciding now, which can be deferred, and which will quietly leak money if ignored. This guide walks through those decisions in the order they tend to surface in real projects: a working definition, the principles behind good motion, the design tokens that keep it consistent, the micro-interactions that shape perception, accessibility checks, governance inside a team, and finally a short checklist for handing motion off to developers and clients.

What “all in motion” actually means in brand work

The phrase all in motion is shorthand for a brand whose static and moving expressions are designed as one system rather than two. The same eye that picks the wordmark and the accent colour also picks the easing curve, the duration ranges, and the way a button reacts when it is pressed. The brand behaves the same way whether the user is looking at a business card, a product page, or a 15-second explainer video.

In practice, an all-in-motion brand answers four questions consistently across every touchpoint:

• How does this brand move when it is at rest, loading, or waiting?
• How does this brand respond when the user does something, such as hovering, tapping, or submitting?
• How does this brand draw attention to what matters, without shouting?
• How does this brand enter and leave a screen without feeling abrupt or theatrical?

Most brand guidelines stop at the first screen of a static style guide. An all-in-motion brand extends the guide with a motion section, a code-friendly token set, and a few reference videos that show principles in action. The goal is not to ship more animation. The goal is to remove guesswork, so the same careful choice that protected the typography also protects the timing.

The cost of leaving motion to chance

When motion is left to chance, each touchpoint ends up with its own micro-style, copied from whatever the designer happened to see that week. Hover effects that feel snappy in one place feel jumpy in another. Page transitions that feel smooth on a fast laptop feel like a missed frame on a mid-range phone. Loading spinners that look calm look lazy next to a button that snaps in 80 milliseconds. Users rarely name the problem. They just feel that the brand is uneven.

The cost shows up in three places:

1. Perceived quality drops, which compresses the time a visitor gives a page before deciding whether to trust it.
2. Engineering rework increases, because every new feature reinvents transitions instead of reusing them.
3. Accessibility risk rises, because motion decisions made one at a time rarely account for vestibular sensitivity, focus order, or reduced-motion preferences.

None of these costs appear in a static brand presentation. They appear in analytics, in support tickets, and in the slow erosion of the impression a brand is trying to make. Treating motion as a system is the simplest way to reduce them.

Core motion principles for a brand system

Motion principles sit between brand strategy and interface details. They are short, opinionated rules a team can use to make consistent choices without a meeting. Below is a working set. Adapt the language, keep the structure.

Principle	What it governs	Example rule
Purposeful	Why something moves	No element animates unless it communicates state, hierarchy, or continuity.
Calm	Energy level and exaggeration	Ease into and out of positions; avoid overshoot that looks playful when the context is serious.
Honest	Relationship between motion and physics	Elements appear to come from where the user expects; nothing teleports without reason.
Quick	Default durations	Small interface changes resolve in 120 to 200 ms; page-level transitions stay under 400 ms.
Respectful	User control and accessibility	All non-essential motion is suppressed when the user prefers reduced motion.

Five principles is enough to start. More than seven tends to lose the team. The point is not a complete philosophy. The point is a short, shared vocabulary that an intern, a freelancer, and a senior designer can apply without asking.

Mapping motion to the moments that matter

Once the principles exist, the next step is to map them to the moments where motion actually carries meaning in your product. A useful exercise is to walk a journey and mark every transition, feedback signal, and loading state. The list below is a starting point, not a checklist to tick mechanically.

• Page enter and exit, including the first paint after navigation and the way the previous content leaves.
• Component state changes, such as a button pressed, a checkbox checked, a card expanded.
• Feedback signals, such as a form field confirming a successful entry or flagging an error.
• Loading and waiting, including skeletons, spinners, and optimistic updates.
• Attention guidance, such as a cursor trail, a pulse on a new message, or a subtle bounce on a call to action.
• Onboarding sequences, which mix education with motion to teach the interface rather than describe it.

Most brands that feel all in motion are simply thorough about this list. They have not invented new physics. They have remembered every place where a small decision is waiting to be made.

Designing motion tokens, not just motion files

Tokens are the bridge between brand principles and code. A motion token is a named value that encodes a design decision so a developer can reuse it without re-deciding it. The most useful motion tokens fall into four families.

Token family	What it describes	Example values
Duration	How long a change takes	duration.fast 120 ms, duration.base 200 ms, duration.slow 320 ms
Easing	The shape of the change over time	ease.standard, ease.decelerate, ease.accelerate, ease.emphasis
Distance	How far something travels	distance.short 4 px, distance.medium 12 px, distance.long 24 px
Scale	Size change for emphasis	scale.subtle 1.02, scale.emphasis 1.06

The benefit of tokens is not that they are clever. It is that they let a brand stay consistent across a website, a native app, a marketing email with limited animation, and a future product the team has not hired for yet. When someone needs a new transition, they pick from the token list instead of inventing a number. A brand that is all in motion is one where almost every animated value in the codebase is a named token, with very few raw numbers in component code.

Easing curves, explained without jargon

Easing decides whether a movement feels mechanical, physical, or theatrical. The two practical curves most interfaces need are an ease-out (decelerate) and an ease-in (accelerate), with a third standard curve for in-between changes. Below is a quick reference for designers who do not write code every day.

• Ease-out (decelerate): the element moves quickly at first, then settles. Use for elements entering the screen, opening a menu, or revealing content. Feels responsive and natural.
• Ease-in (accelerate): the element starts slowly, then speeds up. Use for elements leaving the screen or closing. Feels decisive without being abrupt.
• Standard ease-in-out: the element accelerates and decelerates symmetrically. Use for state changes that are neither arrivals nor departures, such as a colour change on hover.
• Custom emphasis: a curve with a controlled overshoot or settle. Use sparingly, only for moments that deserve a small moment of personality.

Pick a small set of curves and use them. The fastest way to make a brand feel inconsistent is to allow a different custom curve on every component. A brand that is all in motion usually has three or four named curves, documented once and reused everywhere.

Duration ranges that feel right

Durations set the tempo of the interface. Too fast feels nervous, too slow feels unresponsive. The ranges below work for most web and mobile work, and they are easy to defend in a design review because they match published research on perceived responsiveness.

• Micro-feedback, such as a toggle, a checkbox, a small icon change: 80 to 150 ms.
• Component transitions, such as a card expanding or a menu opening: 160 to 240 ms.
• Page-level transitions, such as navigation or a modal: 240 to 400 ms.
• Onboarding or storytelling sequences: 600 to 1200 ms, broken into smaller steps rather than one long motion.

These ranges are not rules. They are guardrails. If a motion is communicating something the user did not expect, longer can be correct. If a motion is confirming something the user already knows, shorter is usually better. The point is to decide in advance and reuse, not to time every animation by instinct.

Micro-interactions as brand moments

A micro-interaction is the smallest meaningful unit of motion: a button press, a like, a tab change, a notification arrival. Individually, they are tiny. Collectively, they are the texture of a brand. A product that is all in motion treats each one as a chance to confirm a feeling.

Four elements tend to decide whether a micro-interaction reads as on-brand:

1. Trigger, meaning what the user does to start the motion.
2. Rules, meaning what can and cannot change during the motion.
3. Feedback, meaning how the user knows the action worked.
4. Loop and mode, meaning what happens after, including any reset or exit.

For example, a subscription button might use a short press scale to 0.97, a colour shift to the brand accent, a 220 ms ease-out, and a checkmark draw-in on success. None of those decisions are hard on their own. They are hard together, which is why a system helps.

Page transitions that respect the user’s attention

Page transitions are the most expensive part of an all-in-motion brand, both in design time and in performance budget. They are also where teams most often overshoot. A useful frame is to ask what the transition is for: orientation, continuity, or delight.

• Orientation: the user is moving between unfamiliar sections and needs a clear sense of place. A short cross-fade with stable navigation is usually enough.
• Continuity: the user is moving within a flow, such as a checkout, and the previous content is still relevant. A shared element transition, where one piece of the previous screen moves to its new position, keeps the user’s eye anchored.
• Delight: the transition is part of the brand story, such as a seasonal landing page or a campaign moment. Worth the extra design time, but should be limited to a small number of routes.

Most products need orientation and continuity everywhere, and delight on a few carefully chosen pages. A brand that is all in motion does not try to delight the user on every navigation. It tries to never surprise them with a hard cut.

Loading, empty states, and the moments users remember

Loading states are the most under-designed part of most brands. They are also the part users see at exactly the wrong moment: when they are trying to do something and the system is working on it. A skeleton screen, a calm spinner, and a clear copy line together are often the difference between a brand that feels reliable and one that feels brittle.

Three rules hold up well in practice:

1. Show the structure as early as possible, so the user can predict where the content will appear.
2. Animate slowly enough to feel calm, but not so slowly that the user assumes the page is broken.
3. Provide a clear way out, such as a cancel button or a text alternative, when the wait is genuinely long.

Empty states are the second under-designed moment. They are the first thing a new user sees when there is no content yet, and they are the first thing a returning user sees after clearing a list. A small illustration, a short sentence, and a single primary action are usually enough. Motion here should be a single, calm entrance, not a loop.

Accessibility is part of motion, not an add-on

Motion that ignores accessibility excludes a real share of users and exposes the brand to legal risk in several jurisdictions. The good news is that accessible motion is mostly a small set of decisions applied consistently.

Concern	What to do	What to avoid
Vestibular sensitivity	Suppress large parallax, zoom, and rotation when the user prefers reduced motion.	Background motion that the user cannot pause or disable.
Focus management	Move focus deliberately after a transition, so keyboard users land where they expect.	Animations that hide where focus has gone.
Timing	Give users enough time to read content that animates in, or provide a pause control.	Auto-playing carousels with no pause control.
Meaning	Do not rely on motion alone to communicate state, error, or success.	Status changes that only an animation can reveal.

For a deeper, practical treatment of inclusive design patterns, the Web Content Accessibility Guidelines on Wikipedia give a useful orientation. For implementation specifics, the W3C working group notes on motion in the WCAG 2.2 success criteria are a current authoritative reference, and they are summarised in plain language on the W3C Web Accessibility Initiative pages.

Performance: motion that respects the device

Motion that looks smooth on a developer laptop can judder on a mid-range phone, and that judder is the first thing a budget-conscious user notices about a premium brand. Three habits help.

• Animate transform and opacity, which the browser can run on the compositor thread, instead of layout properties like width, top, or margin.
• Use will-change sparingly, and only for elements that are about to animate, to avoid exhausting GPU memory.
• Test on the lowest-spec device the product targets, not the highest, and budget frame time as carefully as you budget file size.

A brand that is all in motion is also a brand that is honest about performance. If a transition is essential, design for it to be smooth. If it is not essential, be ready to drop it on weaker devices.

Governance: how a team keeps motion consistent over time

Most motion systems decay not because the original design was wrong, but because no one is responsible for the new edges. A small governance layer prevents that.

1. Name a motion owner, who reviews new requests and signs off on tokens before they enter the system.
2. Keep the motion section of the style guide as short as the rest of the guide. If it grows past two pages, the principles are not doing their job.
3. Treat motion tokens like any other token, with the same review process, naming conventions, and deprecation rules.
4. Audit one product area a quarter, looking for animations that bypass the token system or use raw values.

For studios that build identity systems for clients, the same governance logic applies to the deliverable. A motion deck is not a strategy. It is a tool the client’s team has to be able to use after the engagement ends.

Working with developers without losing the motion

The fastest way to lose good motion in production is to hand a designer a developer who is guessing. A small handoff package closes that gap and saves a lot of time during QA.

• Reference videos, with side-by-side comparisons of correct and incorrect motion for the same interaction.
• Annotated prototypes, with durations, easings, and distances written directly on each step.
• Token export, in the format the team already uses for colour and typography tokens.
• Reduced-motion spec, describing exactly what the experience looks like when the user has requested less motion.

For broader context on how motion fits into a site’s overall plan, the website strategy guide on this site is a useful companion. For the visual side, the studio’s piece on visual identity walks through how motion connects to the rest of the brand system.

Common mistakes when adopting a motion system

Most of the failure modes for an all-in-motion brand are predictable. Naming them in advance makes them easier to avoid.

1. Designing motion last, after the static identity is already approved, when the brand voice is harder to renegotiate.
2. Treating motion as a marketing concern rather than a product concern, so the product ends up with a different tempo than the campaign site.
3. Letting a single high-profile page set the bar, so the rest of the product feels slow by comparison.
4. Skipping the reduced-motion pass, then adding it as a late patch that is visibly a patch.
5. Counting the number of animations rather than their quality, which leads to a busy, anxious interface.

None of these are exotic failures. They are the everyday result of skipping the boring parts. A short, careful plan prevents almost all of them.

A short checklist for an all-in-motion handoff

Use this list the first few times the team ships a motion-heavy surface. Once the rhythm is familiar, it becomes muscle memory.

• Every animated value is a named token, with very few raw numbers in the component code.
• Durations fall within the agreed ranges, and easings come from the standard set.
• Each transition answers a clear question, such as what just changed, what is loading, or where the user is now.
• Reduced-motion behaviour is defined for every animation, not just the obvious ones.
• Focus order is correct after every transition, including modals, toasts, and route changes.
• Performance is checked on a low-end device, with no dropped frames during the most-used flows.
• The motion owner has signed off, and the design file links to a live example, not a still frame.

Frequently asked questions

What does “all in motion” mean for a brand?

It means that motion is treated as part of the brand system, with the same care as colour, type, and voice, rather than as decoration added by individual designers on individual screens.

Do small brands really need a motion system?

Yes, although a small brand needs a smaller system. Three to five principles, four motion token families, and a short reduced-motion pass are usually enough to prevent most inconsistency, even with one designer and one developer.

How many motion tokens should a brand define?

Start with a duration scale of three to four steps, two or three easing curves, two distance values, and one or two scale values. More than that, and the token list becomes harder to remember than the raw values it was meant to replace.

What is the single most important motion decision?

The default easing curve. It is the one value that quietly governs the feel of almost every transition, and it is the one that varies most between brands that feel different even when their colour palettes are similar.

How does motion relate to accessibility?

Motion has to respect the user’s reduced-motion preference, must not be the only signal for a state change, and must keep keyboard focus visible and predictable. The WCAG guidance summarised by the W3C is the practical reference.

Should marketing pages and product pages share the same motion system?

Usually yes, at the level of principles and tokens. Campaign pages can add a small set of campaign-specific motions, but the base durations and easings should still come from the shared system to keep the brand recognisably itself.

How long should a page transition take?

For most web products, 240 to 400 ms is a useful ceiling. Anything longer should be reserved for transitions that genuinely need to communicate a change of context, such as entering a new section of a long workflow.

What is the fastest way to start a motion system?

Pick one product surface, define the four token families for it, and ship the change. A working motion system on one surface is more valuable than a perfect motion deck that never reaches the product.

How do you measure whether a motion system is working?

Look at three signals: design review consistency, engineering rework on transitions, and qualitative feedback about how the product feels. A good system produces fewer one-off animations and fewer “this just feels off” comments.

Where should motion live in a brand book?

As its own short section, immediately after the typographic system, with the principles on one page, the token table on the next, and a few reference videos on the last. Anything longer tends to go unread.

Related reading

• Visual identity: what it is, what it includes, and how to build one
• Website strategy: how to plan a site that actually performs