Depth and Elevation — Principles
Overview
The two elevation models (shadow-based vs. tonal surface layering), when to use each, the hybrid approach for products with both light and dark modes, layering rules, and a z-index scale pattern.
Sources
| Source | URL | License tier |
|---|---|---|
| Material Design 3 — Color Roles (surface family) | kb/reference/design-systems/material/guidance/foundations/color-roles | Tier 2 (official public docs) |
| Atlassian Design System — Design Tokens (elevation) | kb/reference/design-systems/atlassian/guidance/foundations/design-tokens | Tier 2 (official public docs) |
| Carbon Design System — Color System (layering) | kb/reference/design-systems/carbon/guidance/foundations/color-system | Tier 2 (official public docs) |