Foundations
Overlays
Overlays style UI elements. They can be decorative, but often have a functional use like communicating state on images or increasing background contrast when a component is layered above the interface (e.g. modal).
Overview
Overlay foundations consist of tints in ‘base’ (these are dark when used in a light theme) and ‘inverse’ (light when used in a dark theme) styles.
Tint
Tints make colours in a UI more or less intense. You can make text easier to read by increasing the contrast between foreground and background elements.
'Base' tint tokens darken a background or element.
'Inverse' tint tokens lighten a background or element.
| Tint | Token | Value | Common usage |
|---|
How to use overlays
Here’s how and when to use overlays:
Do make overlay contrast clear
Overlay contrasts should be distinct and clear. You can use them to obscure page content and emphasise an element for greater legibility (e.g. modal).
Don’t obscure important UI elements
Overlays shouldn’t obscure the legibility of important UI elements, like text and icons.
Accessibility considerations
When using overlays, ensure important UI elements like text and icons are legible without compromising the aesthetic.