Foundations
Elevation refers to how components visually stack and appear to rise from the surface. The usage of shadows creates a sense of three-dimensionality, clearly establishing a hierarchy and indicating which elements are interactive or "floating." This effect guides the user's focus and helps differentiate between the main interface and temporary or secondary elements (like dialogs, menus, or tooltips).
Levels of elevation
0
1
2
3
4
The system defines five levels of elevation, from 0 (no depth) to 4 (the highest elevation above the surface). The specific shadow styles for each level are calibrated to suit the brand's aesthetic and ensure components feel grounded and consistent.
Elevation 0
The base level for the main interface background. It is flat and uses no shadows. It is best to leave Elevation 0 with no effect and only apply shadows, borders, and other elevation changes to higher levels.
Elevation 1-4
Used for components that need to appear stacked or floating above the surface. Each level has a corresponding, progressively stronger shadow to indicate its height.
Pairing elevation and layers
To achieve the correct visual effect and maintain a consistent hierarchy, you must pair the elevation value with its corresponding layer:
Layer 0 must use Elevation 0 (the flat background).
Layer 1 should use Elevation 1.
Layer 2 should use Elevation 2.
Layer 3 should use Elevation 3.
Layer 4 should use Elevation 4.
Remember!
For a clean, unified look, use either elevation or a border, but not both. If you choose to use a border, ensure it adheres to the border property established within its pairing layer.
Highest floating elements
Components that require the highest visual hierarchy must always use elevation 4.
These components may be assigned an alternative layer number in the codebase for technical stacking purposes. However, they must visually adopt Elevation 4 regardless of their programmatic layer number.