Timing curves that feel calm, not clever

Start with the exit, not the entrance

Easing is a tone of voice. A sharp ease-out says the interface is eager. A long, soft ease-in-out says it is considered. We default to the second, with durations between 250 and 450 milliseconds for anything that moves a whole surface, and under 150 for hover and press feedback.

The mistake we see most is tuning entrances and ignoring exits. When a panel arrives smoothly and vanishes instantly, the product reads as abrupt. We match the two, with the exit about 20 percent shorter.

Three curves, no more

Our starter kit ships with exactly three: a standard curve for movement, a decelerate curve for things entering, and a gentle fade for opacity. Designers pick from the list instead of dragging handles, which keeps motion consistent across screens and across the people who build them. The values live as tokens, the same way colour does.

If you want to see them in context, browse the projects on our work page, where every transition uses one of the three.