Scrims

Scrims, aka overlays or masks, are darkened backgrounds that help users focus on an important modal or bottom sheet. When implementing, always apply to the entire page, including left navigation and product header.

Behavior

Blocks the entire experience. The user can not close the modal, sheet, or side panel by clicking or tapping the scrim.

When to use

Always show a scrim behind:

A modal

A right side panel

A bottom sheet

Specs

Color: Mono900 / Ink, #252525

Pass through: 60% (DO NOT ALTER)

Layout: cover the entire screen, including navigation