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

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.

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.

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

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.

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.

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.

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.

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.
