Opacity
Defines transparency levels to control visual emphasis, layering, and state representation across components.
Opacity
Opacity helps control visual hierarchy, layering, and clarity by adjusting the transparency of elements. It plays a key role in communicating states (like disabled or hover), creating depth, and guiding user focus.
Tendoo’s design system uses consistent opacity tokens to ensure predictable and harmonious visual treatments across all components.
Core Principles
- Clarity — Use opacity to signal intent without introducing confusion.
- Consistency — Apply predefined opacity tokens to maintain design uniformity.
- Accessibility — Ensure contrast remains sufficient even when opacity is applied.
- Contextual Use — Opacity should reinforce interaction states or content layering.
Opacity Tokens
| Token Name | Value | Description |
|---|---|---|
--opacity-none | 0 | Fully transparent — used to hide elements visually but retain them semantically. |
--opacity-quiet | 0.04 | Ultra-subtle accents like inactive indicators or dividers. |
--opacity-disabled | 0.32 | Disabled elements such as buttons, icons, or inputs. |
--opacity-subtle | 0.4 | Subdued backgrounds or muted interface elements. |
--opacity-overlay-light | 0.5 | Light overlays behind drawers or panels on bright backgrounds. |
--opacity-overlay | 0.6 | Standard modal or backdrop overlay; maintains context while focusing attention. |
--opacity-overlay-dark | 0.72 | Strong overlays used behind alerts or dark mode content. |
--opacity-hover | 0.8 | Hover states for images, cards, or interactive elements. |
--opacity-focus | 0.9 | Focus rings, input highlights, or spotlight effects. |
--opacity-full | 1 | Fully opaque content; default visual state. |
Key Opacity Practices
| Area | Best Practices |
|---|---|
| Disabled States | Use --opacity-disabled to indicate non-interactive elements clearly. |
| Layering | Apply lower opacities for backgrounds or overlays to improve focus. |
| Hover Effects | Use --opacity-hover to add responsive interactivity to visual components. |
| Overlays | Choose between --opacity-overlay-light, --opacity-overlay, or --opacity-overlay-dark depending on context and theme. |
| Accessibility | Always verify contrast ratios remain compliant with WCAG standards when applying opacity. |
Example: Disabled Button
<button className="opacity-[var(--opacity-disabled)] cursor-not-allowed" disabled>
Submit
</button>Tools We Recommend
Related
Opacity provides subtlety and strength. By using it with care and consistency, Tendoo ensures clarity, focus, and accessibility in every layer of the interface.