DOCUMENTATION COMPLETE DESIGN COMPLETE 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

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2733%3A998

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.

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2733%3A1012

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.

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=2733%3A1026

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

♊ 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

💕 Accessibility