Elevation

Elevation in UI design adds depth and dimension to the interface, making it more engaging and intuitive for users to interact with.

Introduction

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.

Levels of elevation

Ligh and dark mode elevation

In MDS we distinguish 4 levels of elevation:


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.

 

Elevation in light and dark mode

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.

 

List of tokens used for elevation

Shadows

0 0 0 0 rgb(0,0,0)
0 0 0 0 rgb(0,0,0)
shadow / 0
Used with background.static.flat. Resting elevation for the majority of the UI components. Used when the component is distinguished from the background thanks to use of color, border or when that distinguishing is not desired (e.g. ghost buttons)
0 2px 6px -1px rgba(18,18,25,0.08), 0 -1px 4px -2px rgba(18,18,25,0.08)
0 -1px 4px -2px rgba(18,18,26,0.08)
shadow / 100
Used with background.static.raised. Used as resting elevation for nested cards to distinguish them from their parent container
0 8px 24px -4px rgba(18,18,25,0.08), 0 6px 12px -6px rgba(18,18,25,0.08)
0 6px 12px -6px rgba(18,18,26,0.08)
shadow / 200
Used as resting elevation of 'floating' UI components appearing above other content (e.g. dropdown menus, tooltips, notifications, popovers). Also used as elevation on 'drag' interaction for elements using elevation.100
0 18px 88px -4px rgba(18,18,25,0.12), 0 12px 28px -6px rgba(18,18,25,0.12)
0 12px 28px -6px rgba(18,18,26,0.12)
shadow / 300
Used with background.static.floating. Used as a raising the elevation of Modal components appearing with an overlay background layer

Background colors

#ffffff
#12121a
flat
Used for default page background
#ffffff
#16161f
raised
Used for raised background, cards backgrounds
#ffffff
#1a1a24
floating
Used for floating backgrounds and modals