Overlays are the translucent covering of content to provide focus on a particular item while still providing context.

Overlays are broken into Scrims, Gradients, and Fades

Scrims

Generally used across an entire viewport to provide focus to a modal or panel. Scrims consist of a layer of dark or light color with blur positioned between the item needing focus and the elements to be de-emphasized.

Light Scrim

Use a light scrim when dealing with transactional situations such as modals, alerts, and panels.

Build = #FAFAFA, Opacity 70%, Background Blur 2px

Dark Scrim

Use a dark scrim when bringing focus to media. Build = Black 125, Opacity 75%, Background Blur 2px

Gradients

Useful over the top of a portion of the media to allow proper contrast for text. This helps with text readability while still displaying media. As a note, in this situation the text should be treated as the primary content and any obstruction to the imagery is a tradeoff.

Gradients should be used when the background is complex and icons need to be legible against the background.

Gradients can be used in a variety of ways. An edge-pinned gradient with sharp color falloff is used to showcase a small amount of info with a maximum amount of media shown.

Fades

Fades are overlayed on content to indicate that more content is available. Fades can be used as an affordance to inform a user to click for more.

Fades should consist of minimal heights and widths with sharp opacity falloff. This will be situational, but works as a general rule when being used to indicate more text content.

Fade Build

Resources

---

Background Blur for Frosted Modals

https://www.learnsketch.com/tutorials/background-blur-for-frosted-modals