Shadow

Elevation system for depth and hierarchy

Shadows create depth and visual hierarchy by simulating the elevation of UI elements above the page surface. They help users understand which elements are interactive and which elements are in focus.

Our shadow system uses a progressive scale from subtle (XS) to dramatic (2XL), allowing you to create clear visual hierarchies and guide user attention effectively.

Shadow Scale

Our responsive design system utilizes the following shadow variables.

NameValueVisualUsage

XS

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

XS

Subtle elevation for small elements

SM

0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)

SM

Light elevation for cards and buttons

MD

0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)

MD

Standard elevation for elevated cards

LG

0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)

LG

High elevation for modals and dropdowns

XL

0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)

XL

Very high elevation for overlays

2XL

0 25px 50px -12px rgba(0, 0, 0, 0.25)

2XL

Maximum elevation for prominent overlays

Inner

inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)

Inner

Inset effect for pressed states

Usage in Code

Accessing Shadow Tokens

// In styled-components
const Card = styled.div`
  box-shadow: ${props => props.theme.shadow.md};
  border-radius: ${props => props.theme.radius.m};
  padding: ${props => props.theme.spacing.l};
`

// Hover state with elevated shadow
const Button = styled.button`
  box-shadow: ${props => props.theme.shadow.sm};
  transition: box-shadow 0.2s ease;

  &:hover {
    box-shadow: ${props => props.theme.shadow.lg};
  }
`

// Inner shadow for pressed state
const PressedButton = styled.button`
  &:active {
    box-shadow: ${props => props.theme.shadow.inner};
  }
`

Best Practices

• Use shadow tokens instead of hardcoded box-shadow values

• Choose XS-SM shadows for subtle elements like inputs and small cards

• Use MD-LG shadows for prominent cards and elevated content

• Use XL-2XL shadows for modals, popovers, and high-priority overlays

• Use inner shadow for pressed or active states

• Combine shadows with transitions for smooth hover and focus effects

• Avoid excessive shadows - use them to establish clear hierarchy