Shadow Tokens

Shadow token system based on Zeus Design System to create visual hierarchy and consistent depth in components.

elevation-01z-index: 1
Preview

Subtle elevation for cards and buttons

CardsButtonsForm elements
--shadow-elevation-01: 0px 1px 2px rgba(16, 24, 40, 0.05);
elevation-02z-index: 2
Preview

Light shadow for hover states

Hover statesInteractive elementsTooltips
--shadow-elevation-02: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
elevation-03z-index: 10
Preview

Medium shadow for dropdowns

DropdownsSelect menusPopovers
--shadow-elevation-03: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
elevation-04z-index: 50
Preview

Strong shadow for modals and overlays

ModalsDrawersMajor overlays
--shadow-elevation-04: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
elevation-05z-index: 100
Preview

Maximum elevation for critical overlays

Toast notificationsCritical alertsTooltips over modals
--shadow-elevation-05: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);

Elevation Principles

Progressive Elevation

  • • Use elevation hierarchy consistently
  • • Don't skip elevation levels
  • • Coordinate with z-index values

Visual Impact

  • • Subtle shadows for content
  • • Strong shadows for overlays
  • • Consistent shadow color base