Token

Elevation

Elevation tokens create depth through layered shadows, helping establish visual hierarchy and the illusion of physical space.

Overview

Our elevation system uses layered box shadows to create realistic depth effects. Each level uses multiple shadow layers with carefully tuned opacity, blur, and offset values to mimic natural lighting.

Surface
Level 1
Level 2
Level 3
Level 4

Elevation Scale

Four elevation levels from subtle to prominent, each designed for specific use cases.

100
--elevation-100

Subtle lift for interactive elements

Uses: Buttons on hover, input focus

200
--elevation-200

Low elevation for cards and containers

Uses: Cards, dropdowns, popovers

300
--elevation-300

Medium elevation for prominent elements

Uses: Floating action buttons, raised cards

400
--elevation-400

High elevation for overlays

Uses: Modals, dialogs, navigation drawers

Shadow Composition

Each elevation level uses two layered shadows for a more natural appearance:

--elevation-100 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.04)
--elevation-200 0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)
--elevation-300 0 4px 8px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.04)
--elevation-400 0 8px 16px rgba(0,0,0,0.24), 0 16px 32px rgba(0,0,0,0.04)

Usage

Apply elevation tokens using the box-shadow CSS property.

Basic Usage

.card {
  box-shadow: var(--elevation-200);
}

.modal {
  box-shadow: var(--elevation-400);
}

Interactive Elevation

Increase elevation on interaction to give feedback and create a sense of lift.

Hover me 
.card {
  box-shadow: var(--elevation-100);
  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-ease-out),
              transform var(--motion-duration-fast) var(--motion-easing-ease-out);
}

.card:hover {
  box-shadow: var(--elevation-300);
  transform: translateY(-2px);
}

Combining with Border

For subtle elevation, combine a light shadow with a border for definition. 

.subtle-card {
  border: 1px solid var(--border-default);
  box-shadow: var(--elevation-100);
}

Guidelines

Elevation Hierarchy

Level 4 Modals, dialogs, full-screen overlays
Level 3 Floating buttons, raised panels
Level 2 Cards, dropdowns, popovers
Level 1 Subtle lift, hover states
Surface Base level, no shadow

Best Practices

  • Use elevation sparingly — too many elevated elements create visual noise
  • Higher elevation should indicate higher importance or focus
  • Increase elevation on hover for interactive elements to suggest clickability
  • Modals and overlays should always use the highest elevation level
  • Combine elevation transitions with subtle transform for more engaging interactions

Common Patterns

Card on Page

elevation-200

Dropdown Menu

elevation-200

Modal Dialog

elevation-400