Foundations
Motion
DS0 uses a consistent motion system for animations and transitions across all components.
Philosophy
Motion in DS0 follows a purposeful approach — every animation communicates meaning. Transitions guide attention, provide feedback, and create spatial continuity.
Duration Scale
| Token | Value | Use Case |
|---|---|---|
--ds0-motion-instant | 0ms | State changes with no animation |
--ds0-motion-fast | 100ms | Micro-interactions (hover, focus) |
--ds0-motion-normal | 200ms | Component transitions (expand, collapse) |
--ds0-motion-slow | 300ms | Overlays, drawers, page transitions |
--ds0-motion-deliberate | 500ms | Attention-grabbing animations |
Easing Curves
| Token | Value | Use Case |
|---|---|---|
--ds0-ease-default | cubic-bezier(0.4, 0, 0.2, 1) | General-purpose |
--ds0-ease-in | cubic-bezier(0.4, 0, 1, 1) | Elements exiting the viewport |
--ds0-ease-out | cubic-bezier(0, 0, 0.2, 1) | Elements entering the viewport |
--ds0-ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Playful, bouncy transitions |
Usage
// Tailwind classes
<div className="transition-all duration-200 ease-out">Smooth entry</div>
// CSS custom properties
.drawer {
transition: transform var(--ds0-motion-slow) var(--ds0-ease-out);
}Accessibility
DS0 respects the prefers-reduced-motion media query. When users enable reduced motion:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}All component animations gracefully degrade to instant state changes.