Elevation

The elevations are the layered containers that form the foundation of the UI. They create a blank canvas where other UI will be placed, such as text, icons, backgrounds, and borders.

Component checklist

Design

Up to date

React

Up to date

Elevations in the Soul Design System consist of containers and shadows. Soul also uses color as an alternative to shadows to communicate elevation. Both options give the impression of lift or depth. Elevations can guide focus through layering or indicate that the UI can be scrolled, slid, dragged, or clicked.

 

Elevation levels

The elevation system is purposely limited to just a handful of levels. This constraint means you need to make thoughtful decisions about your UI’s elevation story.

We defined six elevation levels. An element’s resting state can be on levels 0 and 1, while levels 2, 3, and 4 are reserved for user-interacted states such as hover or dragged. 5th level creates a new, focused layer of the UI to redirect the user's attention.

Levels
  • Level 0 is the lowest available elevation. The container, in this case, creates a background where other content sits.
  • Level 1 is the default elevation for all containers like widgets, content cards, or tables. In special circumstances, it can be used for cards as a way to provide additional hierarchy or emphasis.
  • Level 2 is used to communicate hover states by changing the shadow or color of an element or container. Soul dedicated shadow 200 for this elevation level. Color depends on the element's default properties.
    • Use a shadow change for interaction with the container in elevation level 1
    • Use color change for interaction in elevation level 0
  • Level 3 is used the most for elements populated by some action, e.g., click to select field, are used elevation level 3. For this level, Soul uses shadow 300.
  • Level 4 is used in Soul for floating containers such as a multi-action bar, dialogs without overlay, or dragged elements. To represent this level, use shadow 400.
  • Level 5 is used once you need to change the user's attention. In this case, Soul usually uses an overlay layer between the original interface and the elevated element. Exceptions are fullscreen dialogs, which create a new layer of UI.

 

Overlay

An overlay can bring focus to specific elements by increasing the visual contrast of a large layered surface.

Overlay

Overlay

Soul uses two styles of overlay, and both can be used over the whole widow or to cover just a part of it.

 

Overflow

Overflow is another type of elevation that helps users to recognize content has scrolled outside a view using the shadow or border. It can be used for both vertical and horizontal scrolls.

An example of overflow shadows is the horizontal scroll in tables.

An example of overflow shadows is the horizontal scroll in tables.

When the content exceeds the available area, a border or shadow can be applied at the point the content is cut off to indicate there is the hidden content that can be scrolled back into view.

Overflow - header

A border is the default approach for scrolled content and can be seen in dialog sticky headers and footers and top and side navigation.

Shadows are reserved for experiences where a border might be easily missed, such as in very small UI or tables that use borders to separate cells. Use shadow 300 with an angle of 0º or 180º to direct it over the content.

 

Shadows

Soul has defined four levels of shadow to help users recognize the distance between elements. Each level has a top-bottom direction by default. This can be changed in case the element is stuck to the bottom of the screen or another element.

Shadows
  • Shadow 100 is the default shadow style used for most of the boxes to differentiate them from the background.
  • Shadow 200 can be used to represent the interactivity of the element. It is used for the hover state of elements with Shadow 100 applied.
  • Shadow 300 represents the 3rd elevation level, and it is applied to elements populated by action, e.g., for the select list, which is shown by clicking on the select field or for the popover.
  • Shadow 400 is the strongest shadow used on "floating" elements of the UI, e.g., a multi-select bar or panel without an overlay.