Component checklist

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 must 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 UI layer to redirect the user's attention.

• 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

The overlay serves to temporarily highlight important content—such as modals, panels, or notifications—by isolating it from the primary interface, thereby directing user attention. Read detail specification

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.

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 hidden content that can be scrolled back into view.

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 if the element is stuck to the bottom of the screen or another element.

• Shadow 100 is the default shadow style used for most 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.