Design Tokens
The foundation of AdorableCSS's design system. Consistent, scalable, and beautiful tokens for building cohesive interfaces.
Effects & Animation
Carefully crafted timing and easing that brings interfaces to life with purposeful motion
6
Duration Steps
6
Easing Curves
∞
Combinations
Animation Duration
Precise timing that feels natural and responsive to user interactions
timing
duration(instant)0ms
General animation timing
instant
timing
duration(fast)150ms
Quick micro-interactions, hover states
fast
timing
duration(normal)300ms
Standard UI transitions, modals
normal
timing
duration(slow)500ms
Page transitions, complex animations
slow
timing
duration(slower)750ms
Dramatic reveals, storytelling
slower
timing
duration(slowest)1000ms
General animation timing
slowest
Easing Functions
Animation curves that create natural, life-like motion
curve
ease(linear)Curve 1
linear
Best for
Progress bars, loading states
curve
ease(in)Curve 2
cubic-bezier(0.4, 0, 1, 1)
Best for
Element entrances, fade-ins
curve
ease(out)Curve 3
cubic-bezier(0, 0, 0.2, 1)
Best for
Element exits, fade-outs
curve
ease(in-out)Curve 4
cubic-bezier(0.4, 0, 0.2, 1)
Best for
Smooth bidirectional animations
curve
ease(back)Curve 5
cubic-bezier(0.175, 0.885, 0.32, 1.275)
Best for
Animation curve
curve
ease(bounce)Curve 6
cubic-bezier(0.68, -0.55, 0.265, 1.55)
Best for
Animation curve