Elevation and Shadows
Approved to add Design planned IMPLEMENTATION PENDING
Elevation and shadows organization and priority of information, interactions, and components by “lifting” them off of the page. This documentation should also guide users how to layer side-panel menus, blocking overlays (modals), and application-generated overlays.
Contributors
@Gabriel Weinberg
Related Jira Tickets
https://openedx.atlassian.net/browse/PAR-166
Basic Levels of Elevation
Level 0 (None)
Elements with no elevation are static (page sections, images, lines), or elements that are not interactive (plain text), or elements that do not already have elevation included in their design (button, link, tabs, form fields).
Level 1
Level 1 elevation assists with organization and priority of groups of information or interactions. Examples include course cards and alerts.
Level 2
Level 2 elevation applies to interactive elements including multi-select menus, dropdown menus, popovers, and tooltips. The subtle affordance of level 2 pushes these elements “higher” off of the page compared to level 1.
Level 3
Level 3 elevation is reserved for in-context menus, edge-to-edge menus, and bottom sheets. Level 3 includes a “light source” option, depending on the direction of the container. Level 3 components appear above the main application, and below blocking overlays and application-generated overlays
Level 4
Blocking overlays
Level 4 Elevation is reserved for blocking overlays that require the user to take an action. Examples are modals, full page modals, system dialogs, and marketing dialogs. Some blocking overlays also include a scrim (a semi-transparent layer between the content of the page and the overlay). This additional affordance helps the user focus on the required actions contained within the blocking overlay.
Level 5
Application-generated overlays
Level 5 Elevation is reserved for application-generated, in-context overlays such as a Toast. Application-generated overlays must appear as the top most layer, even if there is a blocking overlay, and even if a blocking overlay is generated while a Toast is still on screen.
Combined elevation
Combined elevation with a blocking overlay
Toasts (Level 5) and then Blocking Overlays (Level 4) are always the top most layers of an application.
Resources
Design assets and box shadow properties: https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2733%3A910
Best Practices
Do |
Use level 3 shadow as a hover state for clickable cards.
|
Don't |
Don’t use a shadow hover state on a card if there are multiple actions a user can take within the card.
|
Don't |
Don’t use level 4 and 5 shadows for component examples from levels 1-3.
|
Related Components
Specification
Each level of elevation includes a combination of two box shadows, a directional shadow, and an ambient shadow. And each level of elevation has unique properties for directional and ambient shadows.
Level 3 shadows can be included in menu and bottom sheet animation and casts a directional shadow (top, right, bottom, left, or centered) depending on whether it’s a bottom sheet, edge-to-edge menu, or in-context menu.
Behaviors
Level 3 directional animation | For example, the LMS has a side-drawer menu that appears on the left side of the page. It should inherit the level 3 shadow. Additionally, ideally, a side-drawer menu would animate when opened. During the animation the shadow would also animate. The shadow would subtly animate from the “centered” shadow, to the “right” shadow. |
|---|
Accessibility
Focus Management Expectations | Focus management is not influenced by shadow styling alone. Guidelines for focus management are documented for specific components. |