Global Design System

Motion rules

Subtle hover transforms, reduced-motion respect, and animation budget.

Complete

Subtle, purposeful, reduced-motion-aware. The editorial discipline applies to animation too — if a motion does not earn its budget, it gets cut.

Approved motion patterns

Card hover: translateY(-1px) + border tint: 150ms ease transition. Purple border tint at 40% opacity. Optional soft 6-12px purple shadow.
CTA arrow advance: gap shifts on hover: The arrow icon scoots forward by ~0.25rem on hover. 150ms ease. Subtle directional signal.
Live signal dot: pulse animation: `.deadline-pulse` and `.live-tick` use a 1.5-2s pulse. Reserved for actively-running deadlines and live signals.
Ticker marquee: linear scroll: Signal-board ticker scrolls horizontally at a constant rate. GPU-cheap (`background-position` only).
Animated background scan: `.cal-signal-board__scan` runs a 6s subtle scan line across the Signal Board hero. Pauses on user inactivity.

Every animation MUST respect `prefers-reduced-motion: reduce`. Hover transforms disable, pulses freeze.
No motion budget over 6s for any single loop (longest live loop = `.cal-signal-board__scan` at 6s).
No motion on touch devices for hover transforms (auto-disabled via `@media (hover: none)`).
GPU-only properties: `transform`, `opacity`, `background-position`. Avoid animating `width`, `height`, `top`, `left`.