Skip to content
Design guidelines

Motion has a job, and a budget

The best animation is the one you notice only when it is missing.

2 min read

Spend motion where it clarifies: a button that answers your press, a panel that arrives from where you tapped, a number that counts to its value, one hero that makes the page feel alive. Everywhere else, be still.

Budget it: one signature effect per screen, everything else under 300ms. Animate transform and opacity. Always offer a calm version for prefers-reduced-motion; it should be a complete page, not a broken one.

↑ ↓ to move↵ to openesc to close