HomeOverviewFoundationsComponentsGuidelinesPatterns

Shadows & Elevation

Depth and hierarchy through shadow system

Shadow Philosophy

Shadows create depth and visual hierarchy in the interface. MUZISYSTEM uses a consistent shadow system with 5 levels of elevation, from subtle to prominent.

Shadows should be used purposefully to indicate interactive elements, elevated surfaces, and focus states. Overuse can make the interface feel cluttered.

Shadow Scale

5 levels of elevation

None

--shadow-none

Flat elements, no elevation

Preview
none

Small

--shadow-sm

Subtle elevation, hover states

Preview
0 1px 2px rgba(0,0,0,0.05)

Medium

--shadow-md

Cards, dropdowns, tooltips

Preview
0 4px 6px rgba(0,0,0,0.1)

Large

--shadow-lg

Modals, popovers, elevated cards

Preview
0 10px 15px rgba(0,0,0,0.1)

Extra Large

--shadow-xl

Dialogs, major overlays

Preview
0 20px 25px rgba(0,0,0,0.15)

Usage Guidelines

When to use each shadow level

Interactive Elements

  • Hover states - Increase shadow on hover
  • Active states - Reduce shadow when pressed
  • Focus states - Add subtle shadow for focus
  • Disabled states - Remove shadow

Component Types

  • Cards - shadow-sm or shadow-md
  • Dropdowns - shadow-md or shadow-lg
  • Modals - shadow-lg or shadow-xl
  • Tooltips - shadow-sm

Code Examples

How to use shadow tokens

/* CSS */
.card {
  box-shadow: var(--shadow-md);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

/* React/JSX */
<div style={{ 
  boxShadow: 'var(--shadow-md)'
}}>
  Content
</div>

Best Practices

  • Use sparingly - Too many shadows create visual noise
  • Consistent elevation - Similar elements should have similar shadows
  • Interactive feedback - Change shadow on hover/active states
  • Dark mode - Shadows are less visible in dark mode, adjust accordingly
  • Performance - Shadows can impact performance, use wisely