mcpField
B
brand-consistency

brand-consistency

github.com/dylantarreDesign & UI132524 installsUpdated 43w ago
Repository

About brand-consistency

A design skill for aligning interface animation with brand identity through Disney’s principles. It covers motion attributes, shared timing and easing, reusable tokens, and audits for inconsistent animation.

Key features

  1. 01Maps motion choices to brand character
  2. 02Recommends a motion style guide
  3. 03Defines reusable animation tokens
  4. 04Provides an animation consistency checklist

Use cases

  1. 01Creating a brand motion guide
  2. 02Finding inconsistent animations across features
  3. 03Aligning motion timing and easing with brand voice

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill brand-consistency

After installing, type/brand-consistencyin Claude Code to confirm it loaded.

Details

From the project README

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

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

Comments

Markdown supported