Elevation in UI design adds depth and dimension to the interface, making it more engaging and intuitive for users to interact with.
Our surfaces use combination of color and shadows in order to create a visual sense of layering of the elements on the screen. By strategically applying elevation we guide users' attention, improve the overall visual hierarchy, and enhance the user experience. It helps users understand the relationships between different elements, such as which elements are interactive or clickable, and which elements are grouped together.
1. Flat: default for the majority of the components, "elevation zero". It appears flat on the screen without any shadow. Used when the component is distinguished from the background thanks to use of color, border or when that distinguishing is not needed or desired (e.g. ghost buttons).
2. Raised: used for elements that as default use resting elevation, but in some use cases, can be raised above, to indicate or reinforce interaction. Used mostly for sticky headers and footers while scrolling, to indicate content overflow behind them.
3. Floating: used for elements that are always floating on top of the other elements. It is used for dropdown menus, dialogs, popovers, and tooltips.
4. Modal: used for elements that are shown in as modals, with additional layer using color.background.overlay token, blocking the page below it.
While in light mode shadows are commonly used to convey depth and indicate that an element is elevated above the surface behind it, in dark mode, when they are barely visible, this solution is not enough. By simulating the real life, where objects that are closer to us receive more light, and those that are further away less, we can create a feeling of objects appearing closer, by lighten their background color.