02 / Foundations
Effects
Shadows, transitions, and the entrance pattern. Restraint is the default.
Elevation
State transitions
For hover, focus, and active state changes only — never entrances. Hover any box to see the timing.
120ms
180ms
280ms
--transition-fast(120ms): colour swaps, focus rings--transition-base(180ms): background fills, borders--transition-slow(280ms): elevation, scale
Entrance
The single allowed entrance pattern: opacity 0 → 1, translateY(16px) → 0, 500ms ease-out, with 60ms stagger between siblings. Animates once on mount; refresh to replay.
Not used
- Bounce — jarring on dense documentation layouts.
- Spring — physics is unpredictable across viewports.
- Shimmer — visual noise; conveys nothing real.
- Parallax — provokes motion sickness for some readers.
- Animated backgrounds — wastes battery and pulls focus from content.