Foundations

Motion

Motion is restrained — short .2–.25s ease transitions on state changes, and a single subtle fade-in for entering content. Nothing bounces, nothing lingers.

Transitions

--ds-transition · .2s ease

transition: background-color var(--ds-transition), color var(--ds-transition);

Fade-in

.ds-fade-in · ds-fadein keyframe

Fades in (ds-fadein keyframe)

<div class="ds-fade-in">Fades in</div>

All motion honours prefers-reduced-motion: when reduced, transitions and the fade-in collapse to a near-instant duration.