Foundations / Motion
Motion
One set of movements for every module. Motion shows where something came from; it never decorates.
| Moment | Movement | Time | |
|---|---|---|---|
| Sheet opens | Slides up | 260 ms | |
| Sheet closes | Slides down | 200 ms | |
| Screen opens | Pushes in from the right | 260 ms | |
| Press | Darker layer and 0.97 scale | 100 ms | |
| Tab or segment change | Underline or fill slides across | 180 ms | |
| Switch, check box, radio | State changes | 180 ms | |
| Toast | Rises from the bottom, leaves after 2.4 s (5 s with Undo) | 200 ms | |
| New item | Glows pale green, then fades | 2.4 s | |
| Loading | Grey blocks pulse softly; no spinners | 1.2 s loop |
Easing
| Use | Curve |
|---|---|
| Things arriving | Ease out: quick start, gentle stop |
| Things leaving | Ease in: gentle start, quick exit |
| Things moving across | Ease in-out |
Reduce motion
When the device asks for less motion, every movement becomes a 150 ms fade and nothing slides, scales or pulses.
Source
Timings follow GRC (screens, presses) and Family tree (sheets), the two prototypes with the most complete motion. One set for every module, settled 26 Oct 2026; temporary until checked in Figma prototypes.