Shadows

• Figma
• Storybook
• Edit this page
• Create a new issue

Shadow tokens add depth and elevation to UI elements. Dark theme shadows use higher opacity for visibility on dark backgrounds.

Light

Preview	Token	Value	Description
	sm	0px 0px 8px 0px rgba(0, 0, 0, 0.15)	Subtle elevation; tooltips, popovers
	md	0px 0px 16px 0px rgba(0, 0, 0, 0.15)	Medium elevation; dropdown menus
	lg	0px 0px 24px 0px rgba(0, 0, 0, 0.41)	High elevation; Modal, BottomSheet

Dark

Preview	Token	Value	Description
	sm	0px 0px 8px 0px rgba(0, 0, 0, 0.70)	Subtle elevation; tooltips, popovers
	md	0px 0px 16px 0px rgba(0, 0, 0, 0.70)	Medium elevation; dropdown menus
	lg	0px 0px 24px 0px rgba(0, 0, 0, 0.87)	High elevation; Modal, BottomSheet