Foundations

Motion

Motion must support meaning — never decoration. Press the replay button to see each duration in action. All animations degrade gracefully under prefers-reduced-motion.

Durations

--duration-instant
0ms
--duration-fast
100ms
--duration-base
200ms
--duration-collapse
200ms
--duration-interactionButton presses, hover states, focus transitions
200ms
--duration-reveal-delay
300ms
--duration-slow
400ms
--duration-skeletonSkeleton loading pulse
400ms
--duration-transitionPanel swaps, content transitions
400ms
--duration-revealScroll-triggered reveals
400ms
--duration-entrancePage entrance, large element reveals
600ms
--duration-expand
650ms
--duration-spinContinuous spinner rotation
700ms

Easing

--easing-defaultStandard — accelerates then decelerates; fits most transitionscubic-bezier(0.4, 0, 0.2, 1)
--easing-inEase in — starts slow, ends fast; use for elements leaving the screencubic-bezier(0.4, 0, 1, 1)
--easing-outEase out — starts fast, ends slow; use for elements entering the screencubic-bezier(0, 0, 0.2, 1)

Contact

Say hello