Design System
Motion
Motion tokens define timing and easing functions for animations and transitions throughout the platform.
Duration Tokens
Motion durations are standardized to ensure consistent animation timing across the platform.
| Token | Value | Preview |
|---|---|---|
--motion-duration-fast | 150ms | |
--motion-duration-normal | 200ms | |
--motion-duration-slow | 300ms | |
--motion-duration-slower | 500ms |
Easing Functions
Easing functions control the acceleration and deceleration of animations.
| Token | Value | Preview |
|---|---|---|
--motion-ease-in | cubic-bezier(0.4, 0, 1, 1) | |
--motion-ease-out | cubic-bezier(0, 0, 0.2, 1) | |
--motion-ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) |
Usage Guidelines
Fast (150ms)
Used for micro-interactions like hover states and focus changes.
Normal (200ms)
Default duration for most transitions like color changes and transforms.
Slow (300ms)
Used for larger animations like modal enter/exit and page transitions.
Ease In-Out
The default easing function, providing smooth acceleration and deceleration.