Space, shape and motion
A 4px base with a deliberate jump at the section scale. Corners stay small enough to read as printed rather than as software, and nothing moves faster than the eye can follow it.
Everything up to 48 is component spacing and steps in 4s. Above that the scale jumps — 64, 96, 128, 192 — because section rhythm should be obviously different from component rhythm, not one more notch on the same ruler.
Breakpoints: 640 · 768 · 1024 · 1280. Below 768 the layout is one column and the gutter drops from 96 to 16.
menus, sticky bar
media, popovers
modals only
Content never carries a shadow. Cards separate by ground color or by a hairline — elevation is reserved for things that genuinely sit above the page.
Hovers, focus rings, button fills, menu opens. Short enough to feel like a response rather than an animation.
The signature curve: a fast start that settles slowly. Used once per section for a fade-and-rise of 16px as content enters the viewport. Never on more than one element at a time.
Everything respects prefers-reduced-motion: entrances become an instant opacity change and parallax is switched off entirely.