Elevation
Elevation is a crucial aspect of our design system, enhancing the visual hierarchy, usability, and overall aesthetic of our digital products. This documentation will guide you through the principles of elevation, its proper usage, and its importance in creating a cohesive and intuitive user experience.
Introduction
This document introduces the concept of spacing in our design system and outlines its importance for creating consistent, visually appealing, and user-friendly interfaces.
What is Elevation?
Elevation refers to the use of shadows and layering to create a sense of depth and dimensionality in a user interface. It helps distinguish between different elements, making it easier for users to understand the structure and importance of various components on the screen.
Importance of Elevation
Improved Visual Hierarchy: Elevation establishes a clear order, highlighting which elements are above others. This helps users navigate the UI intuitively and focus on the most important information.
Enhanced User Experience: By replicating real-world depth perception, elevation creates a sense of realism and reinforces user interaction patterns. Users naturally gravitate towards elements that appear closer (higher elevation).
Emphasis & Focus: Elevation can be used to emphasize specific actions or components. For instance, a floating action button with a higher elevation stands out, encouraging user interaction.
Using Our Elevation
We've established a set of predefined spacing values that act as the building blocks for consistent layout across our design system. These values ensure a harmonious rhythm and visual hierarchy within our user interfaces
| Visual | Value | Description | Token |
|---|---|---|---|
box-shadow: 0px 0px 0px 0px #00000000; | Use for background | var(--enmedd-elevation-00) | |
box-shadow: 0px 1px 3px 0px #00000033, 0px 2px 1px -1px #0000001F, 0px 1px 1px 0px #00000024; | Use for panels, cards, and minimalist designs. | var(--enmedd-elevation-01) | |
box-shadow: 0px 1px 5px 0px #00000033, 0px 3px 1px -2px #0000001F, 0px 2px 2px 0px #00000024; | Use for: Panels, Cards Subtle | var(--enmedd-elevation-02) | |
box-shadow: 0px 2px 4px -1px #00000033, 0px 1px 10px 0px #0000001F, 0px 4px 5px 0px #00000024; | Use for: Panels, Cards Subtle | var(--enmedd-elevation-03) | |
box-shadow: 0px 3px 5px -1px #00000033, 0px 1px 18px 0px #0000001F, 0px 6px 10px 0px #00000024; | Use for: Panels, Navigation Bars, Cards Bold | var(--enmedd-elevation-04) | |
box-shadow: 0px 5px 5px -3px #00000033, 0px 3px 14px 2px #0000001F, 0px 8px 10px 1px #00000024; | Use for: Panels, Cards Subtle | var(--enmedd-elevation-05) | |
box-shadow: 0px 7px 8px -4px #00000033, 0px 5px 22px 4px #0000001F, 0px 12px 17px 2px #00000024; | Use for: Panels, Cards Subtle | var(--enmedd-elevation-06) | |
box-shadow: 0px 8px 10px -5px #00000033, 0px 6px 30px 5px #0000001F, 0px 16px 24px 2px #00000024; | Use for: Panels, Cards Subtle | var(--enmedd-elevation-07) | |
box-shadow: 0px 11px 15px -7px #00000033, 0px 9px 46px 8px #0000001F, 0px 24px 38px 3px #00000024; | Use for: Panels, Cards Subtle | var(--enmedd-elevation-08) |
Elevation is a powerful tool in our design system that, when used correctly, enhances the visual hierarchy, usability, and aesthetic appeal of our digital products. By following the principles and guidelines outlined in this documentation, you can ensure that elevation is applied consistently and effectively across all our interfaces.