Foundations
Overlays
Overlays are used for styling UI elements. They can be decorative, but often have a functional use like communicating state on images or increasing the background contrast when a component is layered above the interface, e.g. a Modal.
Overview
Overlay foundations consist of tints in both ‘base’ styles (these are dark when used in a light theme) and ‘inverse’ styles (these are light when used in a dark theme).
Tint
Tints make colors in a UI more or less intense by aiding legibility contrast between the foreground and background elements.
'Base' tint tokens are used to darken a background or element.
'Inverse' tint tokens are used to lighten a background or element.
| Tint | Token | Value | Common usage |
|---|
Usage
The following guidance describes how and when to appropriately use overlays.
Do
Overlay contrasts should be distinct and clear. They can be used to obscure page content and emphasise an element for greater legibility, I.e. the Modal.
Don’t
Ensure overlays used do not obscure the legibility of important UI elements like text and icons, and contrasts are distinct and clear.
Accessibility considerations
When using overlays, ensure important UI elements like text and icons are legible without compromising the aesthetic.