Build Assets
Logo Rule

Logo Animation Rules

How and when the logo mark may be animated.

Platform: bothTags: logo, animation, motion, brand, loading

Rule

The logo mark may animate in loading screens and brand intro sequences only. Animation must be subtle: reveal (fade in or draw), not distortion (no morphing, bouncing, or spinning). The orange chevron element may pulse once on first load. Maximum animation duration: 800ms. All animations must respect prefers-reduced-motion.

Specifications

minimum SizeMinimum 48px wide for animated context — smaller sizes use static mark
clear SpaceMaintain full clear space during and after animation
color Variants
Primary colors only during animation — no temporary color changes mid-animation

Common Misuses

Animating the logo on every page load — only on app launch or first visit
Morphing or distorting the mark geometry during animation
Spinning, bouncing, or jiggling the mark
Animating colors (the orange must always be orange)
Animations longer than 800ms
Ignoring prefers-reduced-motion — static fallback is mandatory

Source Topic

designing brand identity

Sound, Motion, and Other Senses

How brands extend identity beyond the visual into sound, motion, touch, and scent