Foundations
Opacity
Opacity creates translucent interface elements. You can combine them into different visual effects using the block component.
Overview
Opacity foundations consist of a scale of styles that make interface elements more translucent. In some cases, a component will have an opacity applied to a background.
How to use opacity
Opacity makes UI interface elements more or less translucent. You can apply these elements to a block.
| Opacity | Token | Value | Common usage |
|---|
Accessibility considerations
When using opacity, ensure important UI elements like text and icons are legible without compromising the aesthetic.
Overlays
Overlays can be decorative or have a functional use like increasing the colour contrast of backgrounds.
Overlays
Overlays can be decorative or have a functional use like increasing the colour contrast of backgrounds.