Depth & Elevation

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

elevation-01z-index: 1
Preview

Subtle elevation for cards and buttons

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

Light shadow for hover states

Hover statesInteractive elementsTooltips
box-shadow: 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
box-shadow: 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
box-shadow: 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
box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);

Zeus Design System - Elevation Scale

5-level elevation system extracted from Zeus design system, optimized to create clear and consistent visual hierarchy.

Characteristics:

  • • 5 levels of progressive elevation
  • • Subtle shadows with low opacities
  • • Consistent base color: #101828

Implementation:

  • • Custom CSS variables
  • • Z-index coordination
  • • Responsive shadow scaling