Foundations

Shadows

Badho DS uses a layered elevation system with seven shadow tokens, from subtle input borders to full-screen modal overlays.

Shadow Tokens

Different shadow (elevation) tokens available in the system for usage.

Preview
Token Name
Value
Usage
Shadow/XS
0px 1px 2px rgba(0,0,0,0.06)
Subtle borders, input fields
Shadow/SM
0px 1px 2px rgba(0,0,0,0.06), 0px 1px 3px rgba(0,0,0,0.08)
Product cards, category tiles, banners
Shadow/MD
2px 4px 4px rgba(0,0,0,0.04), 0px 2px 4px rgba(0,0,0,0.02)
Sticky header on scroll, FAB, dropdown menus, tooltips
Shadow/LG
0px -4px 6px rgba(0,0,0,0.03), 0px 10px 15px -3px rgba(0,0,0,0.05)
Bottom sheet, side drawer, filter panel
Shadow/XL
0px 8px 10px rgba(0,0,0,0.04), 0px 20px 25px -5px rgba(0,0,0,0.1)
Confirmation dialogs, alert modals, image preview overlays
Shadow/Nav
0px 1px 2px rgba(0,0,0,0.04), 0px 2px 8px rgba(0,0,0,0.08)
Navigation bars
Shadow/2XL
0px 20px 25px -5px rgba(0,0,0,0.1)
—