Brand Consistency

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

: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;
}