The third dimension

Most of components don't have elevation, but some of them do, in order to differentiate themselves from the rest of the interface. Thanks to the third dimension (Z-axis), these elevations are reserved for transient components that appear elevated and are dismissible (datepicker, tooltip,...).

The elevation principle

Surfaces have different elevations in order to :

• Show that a surface can move in front or behind another surface
• Show how the different spatial relations between surfaces. For example when a floating button is seperated from a list of cards in background
• To focus the user's attention on a specific message or task to do (a dialog component)

Diagram of elevation values

Diagram allows to have an overview for all components, and helps to stay consistent.