Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/Introduction to Design Systems/Elevation, Z-Index & Spatial Depth/
Exercise #3

The 5 Systemic Elevation Tiers

To keep interfaces calm and uncluttered, a design system defines five distinct elevation tiers:

  • Elevation 0 (Flat / Base Canvas): The resting background surface (#090D16). Table rows, flat list items, and resting containers live here.
  • Elevation 1 (Raised / Cards): Low elevation (0 1px 3px ...). Interactive cards, panels, and widgets. Provides subtle separation from the canvas.
  • Elevation 2 (Floating / Overlays): Medium elevation (0 4px 12px ...). Dropdown menus, tooltips, and floating action buttons.
  • Elevation 3 (Overlay / Modals): High elevation (0 12px 32px ...). Modal dialogs, side sheets, and full-screen drawers that interrupt user workflows.
  • Elevation 4 (System Sticky / Toasts): Topmost tier. Notification snackbars, system alerts, and persistent sticky headers.

Topics

The Physical Model of Digital Elevation
Multi-Layer Shadows: Ambient + Directional Light
The 5 Systemic Elevation Tiers
Elevation in Dark Mode: Surface Tints Over Shadows
Tokenizing Z-Index: Ending the `z-index: 999999` Nightmare
Stacking Context Traps in CSS
Motion & Elevation: Hover Lifts and Transitions
Glassmorphism & Frosted Backdrops (`backdrop-filter`)
Challenge: Resolving a Complex Z-Index & Overlay Collision
design

From lesson

3

Elevation, Z-Index & Spatial Depth

Level 4 · Component Architecture & Visual Language

Top contributors

Community contribution details will appear here once real learner activity is available.

Share