Shadows & Elevation
Shadows & Elevation
Shadow Tokens
Defined shadow values for consistent elevation across the UI. On dark themes, shadows are subtle — depth comes primarily from surface colour layering. On light themes, shadows play a bigger role.
shadow-xs
0 1px 2px rgba(0, 0, 0, 0.25)
Subtle lift for chips, tags, small interactive elements
shadow-sm
0 2px 4px rgba(0, 0, 0, 0.3)
Cards, buttons on light backgrounds
shadow-md
0 4px 12px rgba(0, 0, 0, 0.35)
Dropdowns, popovers, floating elements
shadow-lg
0 8px 24px rgba(0, 0, 0, 0.4)
Modals, dialogs, overlays
shadow-xl
0 16px 48px rgba(0, 0, 0, 0.5)
Full-screen overlays, hero cards, onboarding panels
shadow-glow
0 0 20px #AF8B0F33
Featured elements, premium highlights, active focus rings
Elevation Hierarchy
Combine surface colour with shadow depth. On dark themes, lean on colour; on light themes, lean on shadow.
Level 0
Base / Page
Level 1
Cards / Sections
Level 2
Raised elements
Level 3
Dropdowns / Popovers
Level 4
Modals / Dialogs
Light Theme Shadows
On light surfaces (Warm White, Bone), shadows carry more visual weight and are the primary elevation cue.
sm
md
lg
xl