playbooks

home / skills / dylantarre / animation-principles / brand-consistency

brand-consistency skill

/skills/12-by-problem-type/brand-consistency

This skill helps align animation with brand identity using Disney principles to ensure cohesive, distinctive motion across products.

npx playbooks add skill dylantarre/animation-principles --skill brand-consistency

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.4 KB
---
name: brand-consistency
description: Use when animation doesn't match brand personality, feels generic, or clashes with design language
---

# Brand Consistency

Align animation style with brand identity using Disney's principles.

## Problem Indicators
- Animation feels "off-brand"
- Generic motion that could be any product
- Inconsistent animation styles across features
- Motion conflicts with brand voice
- Users don't recognize the product's personality

## Diagnosis by Principle

### Appeal
**Issue**: Animation lacks distinctive character
**Fix**: Define brand motion attributes. Is your brand playful (bouncy easing), professional (smooth, minimal), energetic (quick, snappy)?

### Exaggeration
**Issue**: Wrong level of drama for brand
**Fix**: Match exaggeration to brand personality. Luxury = subtle. Playful = bouncy. Corporate = restrained.

### Timing
**Issue**: Speed doesn't match brand energy
**Fix**: Fast brands: 100-200ms. Calm brands: 300-500ms. Define a timing scale and use consistently.

### Squash and Stretch
**Issue**: Elastic effects conflict with serious brand
**Fix**: Reserve squash/stretch for playful brands. Use scale transforms for professional brands.

### Secondary Action
**Issue**: Details don't reinforce brand
**Fix**: Secondary actions should amplify brand personality. A fun brand might have playful ripples; a serious brand uses subtle fades.

## Quick Fixes

1. **Create a motion style guide** - Document easing, duration, principles used
2. **Define 3-5 brand motion words** - "Swift, precise, confident"
3. **Build reusable animation tokens** - Consistent timing/easing variables
4. **Audit existing animations** - Find outliers
5. **Create animation components** - Enforce consistency through code

## Troubleshooting Checklist

- [ ] Can you describe animation in 3 brand words?
- [ ] Does motion match brand voice guidelines?
- [ ] Are easing curves consistent across features?
- [ ] Is timing scale documented and followed?
- [ ] Would a competitor use identical animation?
- [ ] Do animations feel like the same product?
- [ ] Test: Show animation without UI—recognizable as your brand?
- [ ] Review with brand/design team

## Code Pattern

```css
:root {
  /* Brand motion tokens */
  --brand-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --brand-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --brand-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --brand-duration-fast: 150ms;
  --brand-duration-normal: 250ms;
  --brand-duration-slow: 400ms;
}
```

Overview

This skill helps align animation with a brand’s identity by applying Disney’s animation principles to brand motion. It detects when motion feels generic, inconsistent, or at odds with voice, and provides concrete fixes to make animation recognizably on-brand. The goal is consistent, reusable motion that reinforces product personality.

How this skill works

The skill inspects animations against brand personality markers such as timing, easing, exaggeration, and secondary actions. It highlights mismatches (e.g., playful squash-and-stretch on a luxury brand) and prescribes specific adjustments like timing ranges, easing curves, and degree of exaggeration. It also recommends artifacts to enforce consistency: motion style guides, tokens, and reusable components.

When to use it

  • Animations feel generic or could belong to another product
  • Different features use inconsistent motion or easing
  • Motion conflicts with written brand voice or visual language
  • You need to formalize motion rules for engineering and design
  • Preparing a design system or auditing existing animations

Best practices

  • Define 3–5 brand motion words (e.g., Swift, precise, confident) and map them to motion attributes
  • Create a motion style guide that documents easing, durations, and allowed exaggeration
  • Build reusable animation tokens (duration/easing variables) and components for engineers
  • Use a timing scale (fast, normal, slow) and stick to ranges per brand energy
  • Reserve elastic squash-and-stretch for playful brands; prefer subtle transforms for serious brands

Example use cases

  • Audit a mobile app where onboarding feels lively but core flows feel stiff and inconsistent
  • Convert a visual brand guide into a motion style guide with tokens and CSS variables
  • Tune micro-interactions so they match a luxury brand by reducing exaggeration and slowing timing
  • Standardize easing curves and durations across a multi-team design system
  • Create reusable animation components to prevent outlier animations in feature launches

FAQ

How do I choose timing values for my brand?

Match energy: fast brands 100–200ms, calm brands 300–500ms. Pick a small set of ranges and apply them consistently.

When is squash-and-stretch appropriate?

Use squash-and-stretch sparingly and only for playful, informal brands. For professional or luxury brands, prefer subtle scale transforms and thin easing.