Opacity
Opacity tokens are used for creating visual hierarchy, guiding user focus, and establishing clear communication within our UI through transparency values of elements or parts of an element and its color alpha.
Usage Guidance
Opacity serves multiple purposes in our design system:
- Hierarchy: Different opacity levels help distinguish foreground elements from background elements, ensuring content is easily readable and important actions stand out.
- Focus: We can draw the user's attention to specific areas by applying more opacity to interactive elements or those requiring immediate attention.
- State: Changes in opacity can indicate the interaction state of the element - it's active (100% opacity) or disabled (40% opacity) state, providing valuable feedback to the user.
- Atmosphere: Subtle opacity variations can add depth and visual interest to our interfaces, creating a more engaging user experience.
Recommended Usage
Opacity tokens can be used in a few different ways, such as overlays, translucent background, disabled elements, and shadow transparency.
Opacity Tokens
| Token Name | Description | Value |
|---|---|---|
opacity.zero | Complete transparency (Dev only) | 0 |
opacity.disabled | Disabled | 0.4 |
opacity.overlay | Overlay | 0.4 |
opacity.contrast | Tooltips, Status Indicator | 0.8 |
opacity.shadow.first | First shadow level | 0.12 |
opacity.shadow.second | Second shadow level | 0.08 |
opacity.full | Fully opaque | 1 |
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section