Depth

Shadows provide a sense of depth and help establish visual hierarchy among elements

Overview

Shadows are a powerful tool in UI design, providing a sense of depth and helping establish a visual hierarchy among elements. They mimic real-world lighting and perspective, offering cues about the spatial relationships between elements on the screen.

 

Shadow types

Ref to 29997:266321
shadows
0 0 1px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.06), 0 1px 1px 0 rgba(0,0,0,0.06)
shadows / subtleShadow
0 0 1px 0 rgba(0,0,0,0.12), 0 0 2px 0 rgba(0,0,0,0.06), 0 4px 8px 0 rgba(0,0,0,0.04)
shadows / smallShadow
0 0 1px 0 rgba(0,0,0,0.16), 0 2px 6px 0 rgba(0,0,0,0.04), 0 10px 20px 0 rgba(0,0,0,0.04)
shadows / mediumShadow
0 0 1px 0 rgba(0,0,0,0.2), 0 2px 6px 0 rgba(0,0,0,0.04), 0 16px 24px 0 rgba(0,0,0,0.06)
shadows / largeShadow
0 0 1px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.04), 0 16px 24px 0 rgba(0,0,0,0.04), 0 24px 32px 0 rgba(0,0,0,0.04)
shadows / extraLargeShadow
inset 0 1px 0 0 rgba(255,255,255,0.35), inset 0 -1px 0 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.25)
shadows / buttonShadow
inset 0 1px 2px 0 rgba(0,0,0,0.12)
shadows / buttonPressShadow
When a button is pressed
inset 0 3px 8px 0 rgba(0,0,0,0.06)
shadows / insetShadow
0 2px 8px 0 rgba(0,0,0,0.08), 0 8px 24px 0 rgba(0,0,0,0.2), inset 0 0 0 2px rgba(255,255,255,0.14), inset 0 0 0 1px rgba(0,0,0,0.4)
shadows / darkShadow
a dark overlay shadow for tips and toasts
shadows / component
0 0 1px 0 rgba(0,0,0,0.16), 0 0 6px 0 rgba(0,0,0,0.08), 0 0 24px 0 rgba(0,0,0,0.08)
shadows / component / toolbar

Inset

Inset shadows are applied when an input is clicked. This provides affordance to the marketer (along with the focus state) that the input is active.

Ref to 29997:259910

Ref to 29997:259910

 

 

Subtle

Items that are close to the background of the container they are placed in. Inputs (text fields, text areas, and selects) fall into this category.

 

Ref to 29997:260986

Ref to 29997:260986

 

Small

Elements that sit above the core surface or background of the product. This is commonly applied on cards.

 

Ref to 29997:259875

Ref to 29997:259875

 

 

Medium

Medium is the least used shadow type of all, it sits below Large, because it is common for elements like the toolbar (which uses a medium shadow) to trigger ActionMenus which have a Large shadow. This layering promotes depth within the product and helps focus the marketer’s attention on the triggered menu.

 

Ref to 29997:259882

Ref to 29997:259882

 

 

Large

Large shadows are used for components like the menu, where the panel sits above most of the interface, but if a modal is triggered, doesn’t sit above the scrim.

 

Ref to 29997:259896

Ref to 29997:259896

 

 

Extra Large

Extra large shadows are reserved for Modals, Take Overs, and Slide Overs, where the UI is completely covered by the active component. This is a heavy shadow, and should probably not be used outside of these components unless under special circumstances.

 

Ref to 29997:259903

Ref to 29997:259903

 

Button

Buttons have a unique shadow effect and style that is exclusively reserved for the button component. Please refrain from using this effect in other circumstances.

 

Ref to 29997:259917

Ref to 29997:259917

Applying depth

Shadows, when used correctly, can significantly enhance the user experience by providing visual cues about the hierarchy and interactivity of elements. Always consider the overall design and usability when applying shadows, ensuring a clean, intuitive, and accessible user interface.

Creating depth

  • Elevation and Proximity: Utilize shadow intensity and spread to signify the elevation of an element. A larger, softer shadow implies that the element is raised higher, creating a sense of depth. Conversely, a smaller, sharper shadow suggests that the element is closer to the background.
  • Consistency in Shadow Application: Maintain a consistent light source direction across all UI elements. This consistency aids in creating a cohesive and intuitive user interface.

Establishing heirarchy

  • Strategic Use of Shadows: Apply shadows to prioritize elements visually. Elements with more prominent shadows should draw the user’s attention first, indicating their importance or interactivity.
  • Balancing Shadows: Avoid overuse of shadows as it can lead to a cluttered interface. Use them purposefully to highlight interactive elements like buttons or cards.

Z-index considerations

  • Understanding Z-Index: Z-index is a CSS property that determines the stack order of elements. An element with a higher Z-index is rendered closer to the user.
  • Shadow and Z-Index Correlation: When applying shadows to elevate a UI element, ensure that its Z-index reflects its perceived elevation. This ensures that interactive elements function as expected and maintain their visual integrity.

Example of depth in product

This is an example of the campaigns screen with the scheduling modal open. If we take the screen to the right and place it in an isometric view, you can see how shadows are applied to UI elements to correspond with the order they are layered on the screen and within the z-index layering of the product.

 

In some cases, this structure may not always work, but this example helps illustrate the concepts above and how to be objective when considering whether an element should include shadows or if it’s simply a stylistic decision.

 

While shadows can add visual flare, each designer approaches them differently, and a more objective approach to applying shadows helps keep our design patterns and product cohesive.

 

Ref to 29997:266645