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).
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.
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.
How to use overlays
Here’s how and when to use overlays:
Don’t obscure important UI elements
Overlays shouldn’t obscure the legibility of important UI elements, like text and icons.
When using overlays, ensure important UI elements like text and icons are legible without compromising the aesthetic.