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)

—