Elevation System
Apple's elevation system uses layered surfaces with increasing background lightness in Dark Mode. Higher elevation means lighter surfaces, creating clear visual hierarchy.
6 levelsSurface Layers
Elevation Preview
0
0dp1
1dp2
3dp3
6dpUnderstanding Apple Elevation
Apple platforms use a layered surface system for visual hierarchy:
- Base Surface: The lowest layer, typically the window or screen background
- Elevated Surfaces: Cards, sheets, and popovers sit above the base with subtle background shifts
- Dark Mode: Elevated surfaces become progressively lighter — the higher the elevation, the lighter the background color
- Materials: Vibrancy and blur effects complement elevation to communicate depth
Unlike shadow-based systems, Apple relies primarily on background color differentiation and materials to convey depth.
Light vs Dark Mode Comparison
Light Mode
Uses shadow for elevation perception
0
1
2
3
Dark Mode
Uses tonal tint + subtle shadow
0
1
2
3
Elevation Levels
Level 0
0dp
Tint: 0%
Elevated Surface
Base layer — root backgrounds, full-screen content. Pure white in light mode, true black (#000000) in dark mode on OLED.
Level 1
1dp
Tint: 0.05%
Elevated Surface
First elevated surface — grouped table backgrounds, cards, secondary system background (#F2F2F7 light, #1C1C1E dark).
Level 2
3dp
Tint: 0.08%
Elevated Surface
Popovers, sheets, tertiary system background (#FFFFFF light, #2C2C2E dark). Modals and floating panels.
Level 3
6dp
Tint: 0.11%
Elevated Surface
Alerts, action sheets, highest-priority surfaces (#FFFFFF light, #3A3A3C dark). Requires immediate user attention.
Level 4
8dp
Tint: 0.13%
Elevated Surface
Nested elevated content — menus on sheets, secondary modals (#FFFFFF light, #48484A dark).
Level 5
12dp
Tint: 0.15%
Elevated Surface
Highest elevation — tooltips, contextual popovers, dragged items (#FFFFFF light, #545456 dark).
| Level | Elevation | Usage |
|---|---|---|
| Level 0 | 0dp | Base layer — root backgrounds, full-screen content. Pure white in light mode, true black (#000000) in dark mode on OLED. |
| Level 1 | 1dp | First elevated surface — grouped table backgrounds, cards, secondary system background (#F2F2F7 light, #1C1C1E dark). |
| Level 2 | 3dp | Popovers, sheets, tertiary system background (#FFFFFF light, #2C2C2E dark). Modals and floating panels. |
| Level 3 | 6dp | Alerts, action sheets, highest-priority surfaces (#FFFFFF light, #3A3A3C dark). Requires immediate user attention. |
| Level 4 | 8dp | Nested elevated content — menus on sheets, secondary modals (#FFFFFF light, #48484A dark). |
| Level 5 | 12dp | Highest elevation — tooltips, contextual popovers, dragged items (#FFFFFF light, #545456 dark). |