How to Write Brand Motion Guidelines (Logo, Mascot and UI)

What belongs in brand motion guidelines?

Anything a designer, developer or agency would otherwise have to guess. A practical outline, short enough that people actually read it:

Principles are the easiest part to write and the least useful on their own. Atlassian's motion foundations show the right size: four principles (Human, Clarity, Accessible, Performant), each one sentence, such as "Motion is a clarifying layer, not decoration." Apple's Human Interface Guidelines put the core idea in one line: "Add motion purposefully, supporting the experience without overshadowing it." Write yours at that length, then spend the rest of the document on rules someone can check.

How do you define duration and easing tokens for motion?

Pick a small, named scale and attach a use to every step. The public systems are good starting points because they are documented and tested at scale:

Material's theme attributes for Android define 16 durations from motionDurationShort1 (50 ms) to motionDurationExtraLong4 (1000 ms), with the rule that "duration should increase as the area/traversal of an animation increases." Atlassian gives ranges rather than tokens: about 50 to 150 ms for interactions and 150 to 400 ms for transitions.

Easing gets the same treatment. Carbon splits curves into productive ("efficiency and responsiveness, while remaining subtle") and expressive ("enthusiastic, vibrant, and highly visible") sets, each with standard, entrance and exit curves; productive standard is cubic-bezier(0.2, 0, 0.38, 0.9). Material's standard easing is cubic-bezier(0.2, 0, 0, 1), with decelerate curves for elements entering and accelerate curves for elements leaving. Material also defines spring tokens in fast, default and slow speeds, split into "spatial" springs for movement and "effects" springs for color and opacity, which should not overshoot.

That productive and expressive split maps neatly onto a brand: productive tokens for interface feedback, expressive ones reserved for the logo, the mascot and launch moments. Ship the tokens as code so nobody retypes them:

:root {
  --motion-duration-fast: 120ms;     /* hover, press, toggle */
  --motion-duration-moderate: 240ms; /* panels, toasts */
  --motion-duration-slow: 400ms;     /* page transitions */
  --motion-duration-brand: 1200ms;   /* logo intro, mascot reactions */

  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-moderate: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-brand: 0ms;
  }
}

The values above are an example scale, not a standard: choose yours, but keep the list short. Four to six durations and three easing curves cover almost every product.

What may an animated logo do, and what is off limits?

A logo animation is still the logo, so the static brand rules carry over, and motion adds a few of its own. A do and don't list is the clearest format:

Four rules that static guidelines usually miss:

1. Clear space includes the motion envelope. If the mark bounces 10% above its resting height, the clear space is measured from the top of the bounce. Otherwise the animated logo collides with the navigation or the video edge.
2. Minimum size for animated versions. Detail that reads at 200 px turns to flicker at 32 px. Set a size below which only the static logo is used (favicons, small avatars, dense headers).
3. The last frame is the logo. Every one-shot ends on the approved artwork at rest, because a paused video or a slow device shows whatever frame it stops on.
4. A static fallback always exists, identical to the final frame, for email, print, reduced motion and failed loads.

For the vocabulary of reveals, stings and loops, see logo reveal vs sting vs loop.

How should a brand mascot or character behave?

Write the mascot down like a character in a show bible: who it is, what it does in each situation, and what it never does. A one-page version:

• Personality in three words, each with one behavior. For a mascot like Kiko: curious (leans in when the user types), calm (slow breathing idle), encouraging (small nod on success, never a celebration for routine actions).
• A fixed list of states. Idle, loading, success, error, empty, attention, and any assistant states such as listening and talking. New states go through review, like new logo animations. See mascot animation states for a full list.
• Error behavior. The mascot can look concerned, never mocking. It does not laugh at the user, block the error message, or make the user wait for its reaction before retrying.
• Frequency. Apple's guidance applies directly: "generally avoid adding motion to UI interactions that occur frequently," and "let people cancel motion," because nobody should wait for a reaction they have seen twenty times. A good rule is that a mascot reacts to milestones, not to every click.
• Proportions and model sheet. Squash and stretch limits, the poses that are on model, and the angles the character is never drawn from.
• Placement. Where the mascot may appear (onboarding, empty states, loading, celebrations) and where it may not (checkout errors, legal screens, anything urgent).

Apple also asks for "brevity and precision in feedback animations," which for a mascot means short reactions tied to a real event, then back to idle.

When should brand motion loop, and when should it make sound?

Decide per animation and write it in the spec, because it changes both accessibility and file choice.

• One-shot by default. Logo intros, reveals and mascot reactions play once and rest.
• Loops need a reason and a limit. An idle loop beside content that starts automatically and lasts more than five seconds needs a way to pause, stop or hide it under WCAG 2.2 SC 2.2.2 (Level A). Either give the loop a stop after a few cycles, or provide a visible pause control.
• Loops must be seamless. The last frame of a loop flows into the first with no jump in position or color. Put that in the review checklist.

Sound should be off by default and never carry meaning on its own. Apple's guidance is to "make motion optional" and avoid it being "the only way to communicate important information"; the same logic applies to sound. On the web, browsers decide for you anyway: MDN notes that playback of media with audio is generally blocked until the user has interacted with the page, while muted video can autoplay. A useful rule set:

• Interface motion is silent.
• A sonic logo (the sound version of the logo) exists only in video and broadcast, where the viewer chose to play sound.
• Mascot sounds, if any, play only after an action by the user and respect a mute setting.

What should motion guidelines say about reduced motion and flashing?

Give every animation in the guidelines a written reduced-motion version. "Turn it off" is a valid answer for decoration; for anything that carries meaning, specify the replacement. Atlassian's system states its rule plainly: "when reduced motion is active, motion is off and instant," and asks teams to "verify the interface remains fully usable with all motion disabled." IBM Carbon says: "Always provide alternatives for interface state transitions" and "make sure there is always a way to communicate similar messages statically."

On the web, the setting is the prefers-reduced-motion media feature, which MDN describes as the user's preference for an interface that "removes, reduces, or replaces motion-based animations." Implementation details are in accessible animation and reduced motion.

Two more rules belong in every brand guideline:

• Flashing. WCAG 2.2 SC 2.3.1 (Level A): nothing "flashes more than three times in any one second period" unless it stays below the general and red flash thresholds. Fast light sweeps, glitch effects and strobing launch videos need checking.
• Scroll and parallax. SC 2.3.3 (Level AAA) asks that motion triggered by interaction can be disabled; W3C's explanation names parallax scrolling as an often non-essential animation that "can trigger vestibular disorders."

Which files and formats should motion guidelines hand off?

Specify the deliverables by platform, with names, so the developer receives the same animation the designer approved:

The Rive row deserves extra care: the names in the state machine are an API. If the guidelines say the mascot has a mood number and a success trigger, every new file must keep those names, or the app code breaks. Treat renaming them like a breaking change.

If you need these files from an existing logo, Charmotion animates the parts of your own logo instead of redrawing it, and character sets come as one Rive file with 17 animations, a state machine and data binding, plus MP4, GIF, transparent WebM and MOV, posters and copy-paste code for web, iOS, Android, Flutter and React Native. That gives your guidelines a concrete, named set to document. Plans are on the pricing page.

How to write brand motion guidelines

1. Write the principles. Three or four one-sentence principles that describe how motion should feel and what it is for.
2. Define the tokens. Four to six named durations and three easing curves, each with a use, shipped as code.
3. Set the logo rules. List approved logo animations, what is forbidden, the clear space including the motion envelope, and a minimum size for animated use.
4. Describe the mascot. Personality, the fixed list of states, error behavior, how often it reacts and where it may appear.
5. Decide loops and sound. Mark each animation as loop or one-shot, add stop rules for loops over five seconds, and keep interface motion silent.
6. Write the reduced-motion column. Give every animation a reduced-motion version and check flashing against WCAG 2.3.1.
7. Specify the handoff. List formats per platform, Rive state machine and property names, posters and where the source files live.

Frequently asked questions

How long should a logo animation be in brand guidelines?

Long enough to read, short enough not to delay anything. Most interface motion in Carbon, Material and Atlassian falls between about 50 and 400 ms, with longer values kept for large or full-screen changes. Logo intros run longer because they are brand moments, but keep them to a second or two on the web, end on the static logo, and make them skippable.

Should motion guidelines use easing curves or springs?

Either works if it is named and shared with developers. Carbon and Atlassian publish cubic-bezier curves; Material defines both easing curves and spring tokens, with spatial springs for movement and effects springs for color and opacity. Pick one approach per platform and document the values.

Who should own a brand's motion guidelines?

Usually the design system or brand team, with a developer as co-owner of the tokens and file names. The tokens and Rive property names live in code, so changes need the same review as any API change.

Sources

• Motion, IBM Carbon Design System
• Motion system: easings, durations and springs (Material 3 theme attributes), Material Components for Android on GitHub
• Motion, Apple Human Interface Guidelines
• Motion, Atlassian Design System
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• prefers-reduced-motion, MDN Web Docs
• Autoplay guide for media and Web Audio APIs, MDN Web Docs