Shadows & Effects
Elevation system and visual effects for depth and emphasis.
Shadow Scale
Progressive elevation levels for visual hierarchy and depth perception.
None$shadow-none
Small$shadow-sm
Medium$shadow-md
Large$shadow-lg
Extra Large$shadow-xl
2X Large$shadow-2xl
Inner$shadow-inner
Usage in SCSS
@use '@/styles/variables' as *;
.card {
box-shadow: $shadow-sm;
&:hover {
box-shadow: $shadow-md;
}
}
.modal {
box-shadow: $shadow-xl;
}
.dropdown {
box-shadow: $shadow-lg;
}Transitions
Animation timing functions for smooth interactions.
Fast150ms cubic-bezier(0.4, 0, 0.2, 1)
Base200ms cubic-bezier(0.4, 0, 0.2, 1)
Slow300ms cubic-bezier(0.4, 0, 0.2, 1)
Slower500ms cubic-bezier(0.4, 0, 0.2, 1)
Usage in SCSS
@use '@/styles/variables' as *;
.button {
transition: all $transition-normal ease-out;
}
.menu {
transition: opacity $transition-fast ease-in-out;
}
.modal {
transition: transform $transition-slow ease-out;
}Elevation System
Visual guide for consistent shadow usage across UI layers.
Base LayerNo shadow - page background
SubtleCards, inputs, subtle containers
MediumDropdowns, hover states
RaisedPopovers, toasts
HighModals, dialogs