Opacity

Opacity controls the transparency level of elements. Our design system provides standardized opacity values to ensure consistency across interfaces.

Opacity Scale

Usage

Opacity values can be used via CSS variables:

.element {
    opacity: var(--opacity-60);
}
        

Utility Classes

Utility classes are available for quick implementation:

<div class="opacity-100">Fully opaque element</div>
<div class="opacity-60">Semi-transparent element</div>
<div class="opacity-0">Invisible element (still in DOM)</div>
        

Design Considerations

• Use opacity consistently to maintain visual hierarchy
• Consider accessibility implications when applying opacity to text
• Remember that opacity affects an element and all its children
• For background-only transparency, use RGBA color values instead

CSS Implementation

:root {
    --opacity-0: 0;
    --opacity-20: 0.2;
    --opacity-40: 0.4;
    --opacity-60: 0.6;
    --opacity-80: 0.8;
    --opacity-100: 1;
}

/* Utility classes */
.opacity-0 { opacity: var(--opacity-0); }
.opacity-20 { opacity: var(--opacity-20); }
.opacity-40 { opacity: var(--opacity-40); }
.opacity-60 { opacity: var(--opacity-60); }
.opacity-80 { opacity: var(--opacity-80); }
.opacity-100 { opacity: var(--opacity-100); }