When to use

Scrims are semi-transparent layers used behind UI elements like modals, drawers, and bottom sheets to focus user attention and indicate a layered interaction. Scrims should be used sparingly, as they inhibit functionality by intentionally limiting user interaction. Their purpose is to focus attention on a single action or message, often interrupting the normal flow of interaction. Overuse can lead to frustration, disorientation, or decreased usability.

Common applications include:‍

• ‍Modal Dialogs: time-sensitive alerts requiring action‍
• Media Viewers: viewing images or video in full-screen mode
• ‍Menu Systems: temporary navigation, sign-in or settings

Do

• Use a consistent and accessibility compliant opacity and colour
• Support interaction blocking, keyboard focus should be trapped within the modal or overlay component
• Provide multiple ways to dismiss the overlay

Don't

• Layer scrims on top of other scrims
• Allow background scrolling

Colour and opacity

Scrims should be applied consistently across design to maintain a cohesive visual experience. Using the appropriate colour token ensures that the scrim aligns with our brand’s style and the overall design language. Opacity creates a visual hierarchy, subtly reinforcing the foreground element’s priority while allowing users to keep a sense of the overall context.

scrim: rgba(21, 45, 50, 0.72);

‍

Using scrims with text

Using scrims can help make text more readable on images while also ensuring accessibility for all users.

• Ensure text is tested for colour contrast using white text with an all white image
• Avoid small text, it becomes difficult to read
• When placed next to other similar items, for example in cards and carousels, ensure the treatment is consistent across elements.

‍