Elevation is the relative distance between two surfaces along the z-axis. Elevations are the layered surfaces that form the foundation of the user interface in a Design System and component library. They provide a blank canvas for placing other elements like text, icons, backgrounds, and borders.
By using surfaces and shadows, elevations create the illusion of depth and lift, giving a more engaging and intuitive design. They help guide the user's attention through layering and indicate interactive elements. Elevations also communicate the possibility of scroll, slide, or drag interactions. Incorporating elevations in a UI library is crucial for creating cohesive and immersive user experiences.
Elevation
in Design Systems