Design Tokens
The foundation of AdorableCSS's design system. Consistent, scalable, and beautiful tokens for building cohesive interfaces.
Shadows & Elevation
A refined shadow system that creates depth and hierarchy. From subtle elevation to dramatic effects for memorable interfaces.
Shadow Scale
Progressive elevation system - hover to feel the depth
shadow(none)shadow(xs)shadow(sm)shadow(md)shadow(lg)shadow(xl)shadow(2xl)shadow(inner)shadow(card)shadow(hover)Elevation Profile
Interactive Shadow Demo
Hover Effect
Smooth elevation on hover
Scale & Shadow
Combined transformations
Press Effect
Depth reduction on hover
Elevation System
Material-inspired elevation using shadow tokens
shadow(xs) Subtle elevation for UI elements
shadow(sm) Small elevation for cards and buttons
shadow(md) Medium elevation for raised components
shadow(lg) Large elevation for dropdowns and tooltips
shadow(xl) Extra large elevation for modals
shadow(2xl) Maximum elevation for overlays
Shadow & Elevation Combinations
shadow(sm) shadow(gray-300.5)shadow(md) shadow(indigo-200.3)shadow(lg)shadow(2xl) shadow(purple-200.4)Shadow Design Guidelines
Material Design Elevation
Surface
Card
Button
App Bar
Menu
Dialog
🎨 Color Shadows
Add color to shadows for more vibrant, modern designs
shadow(xl) shadow(purple-200.4)🚀 Interactive States
Use shadow transitions for hover and active states
shadow(sm) hover:shadow(xl)✨ Best Practices
- • Use consistent elevation across similar components
- • Higher elevation = more importance or temporary state
- • Combine shadows with transforms for realistic depth
- • Consider using colored shadows for brand expression