Elevations

Elevations use shadows, drop shadows, and blur effects to create depth and hierarchy in the interface. Our elevation system provides consistent elevation levels across all components.

Elevation Visualizations

Visual comparison of all elevation types. Each square demonstrates how shadows and blur effects appear in practice on a gray background.

Box Shadows

Extra Small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra Large (xl)

2X Large (2xl)

Drop Shadows

Extra Small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra Large (xl)

2X Large (2xl)

Inner Shadows (Simulated)

Inner shadows create a recessed effect. These are simulated using CSS inset shadows for demonstration.

Extra Small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra Large (xl)

2X Large (2xl)

Blur Values

Blur values create depth through focus effects. Each square shows a white box with blur applied on a gray background.

Extra Small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra Large (xl)

2X Large (2xl)

3X Large (3xl)

Box Shadow Elevations

Box shadows create depth by casting shadows around elements. Complete elevation scale from design tokens.

Extra Small (xs)boxShadow.xs

Shadow Value:

0px 1px 0.063rem 0rem oklch(0.00% 0.0000 0.00 / 0.05)

Small (sm)boxShadow.sm

Shadow Value:

0px 2px 0.25rem 0rem oklch(0.00% 0.0000 0.00 / 0.05)

Medium (md)boxShadow.md

Shadow Value:

0px 2px 0.25rem -0.125rem oklch(0.00% 0.0000 0.00 / 0.1)

Large (lg)boxShadow.lg

Shadow Value:

0px 4px 0.375rem -0.25rem oklch(0.00% 0.0000 0.00 / 0.1)

Extra Large (xl)boxShadow.xl

Shadow Value:

0px 8px 0.625rem -0.375rem oklch(0.00% 0.0000 0.00 / 0.1)

2X Large (2xl)boxShadow.2xl

Shadow Value:

0px 25px 3.125rem -0.75rem oklch(0.00% 0.0000 0.00 / 0.25)

Drop Shadow Elevations

Drop shadows are used for elements that appear to float above the surface, like tooltips, popovers, and dropdowns.

Extra Small (xs)dropShadow.xs

Drop Shadow Value:

0px 1px 0.063rem 0rem oklch(0.00% 0.0000 0.00 / 0.05)

Small (sm)dropShadow.sm

Drop Shadow Value:

0px 1px 0.125rem 0rem oklch(0.00% 0.0000 0.00 / 0.15)

Medium (md)dropShadow.md

Drop Shadow Value:

0px 3px 0.188rem 0rem oklch(0.00% 0.0000 0.00 / 0.12)

Large (lg)dropShadow.lg

Drop Shadow Value:

0px 4px 0.25rem 0rem oklch(0.00% 0.0000 0.00 / 0.15)

Extra Large (xl)dropShadow.xl

Drop Shadow Value:

0px 9px 0.438rem 0rem oklch(0.00% 0.0000 0.00 / 0.1)

2X Large (2xl)dropShadow.2xl

Drop Shadow Value:

0px 25px 1.563rem 0rem oklch(0.00% 0.0000 0.00 / 0.15)

Blur Values

Blur values are used for backdrop filters, glassmorphism effects, and creating depth through focus.

Extra Small (xs)blur.xs

Blur Value:

4px

Small (sm)blur.sm

Blur Value:

8px

Medium (md)blur.md

Blur Value:

12px

Large (lg)blur.lg

Blur Value:

16px

Extra Large (xl)blur.xl

Blur Value:

24px

2X Large (2xl)blur.2xl

Blur Value:

40px

3X Large (3xl)blur.3xl

Blur Value:

64px

Usage Examples

How to Use Elevation Tokens

React/JSX Example:

// Box Shadow
<div style={{
  boxShadow: '0px 2px 0.25rem -0.125rem oklch(0.00% 0.0000 0.00 / 0.1)',
  padding: '1rem',
  borderRadius: '0.5rem'
}}>
  Elevated content
</div>
 
// Drop Shadow
<div style={{
  filter: 'drop-shadow(0px 3px 0.188rem 0rem oklch(0.00% 0.0000 0.00 / 0.12))',
  padding: '1rem'
}}>
  Floating element
</div>
 
// Blur (Backdrop Filter)
<div style={{
  backdropFilter: 'blur(8px)',
  WebkitBackdropFilter: 'blur(8px)'
}}>
  Glassmorphic content
</div>

CSS Example:

.elevated-card {
  /* Box Shadow */
  box-shadow: 0px 2px 0.25rem -0.125rem oklch(0.00% 0.0000 0.00 / 0.1);
  /* boxShadow.md */
}
 
.floating-element {
  /* Drop Shadow */
  filter: drop-shadow(0px 3px 0.188rem 0rem oklch(0.00% 0.0000 0.00 / 0.12));
  /* dropShadow.md */
}
 
.glassmorphic {
  /* Blur */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* blur.md */
}

Tailwind CSS (with custom config):

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'elevation-sm': '0px 2px 0.25rem 0rem oklch(0.00% 0.0000 0.00 / 0.05)',
        'elevation-md': '0px 2px 0.25rem -0.125rem oklch(0.00% 0.0000 0.00 / 0.1)',
        // ... other elevations
      }
    }
  }
}
 
// Usage
<div className="shadow-elevation-md p-4 rounded-lg">
  Elevated content
</div>

Best Practices

Hierarchy: Use lower elevations (xs, sm) for subtle depth and higher elevations (xl, 2xl) for prominent elements like modals and dropdowns.
Consistency: Use the same elevation level for similar components to maintain visual consistency across the interface.
Layering: Stack elevations logically - cards on backgrounds use sm or md, while floating elements like tooltips use lg or xl.
Performance: Shadows can impact rendering performance. Use elevation tokens consistently and avoid creating custom shadow values.
Accessibility: Ensure sufficient contrast between elevated elements and their backgrounds. Shadows help create visual separation.