Foundations · Opacity5 tokens · 0 → 1
Opacity for emphasis and state.
Tokens for disabled states, overlays, and subtle hierarchy.
PrinciplesHow to use opacity
Opacity is for state, not decoration.
Reach for opacity to show disabled, hover scrims, and overlay backgrounds — not to create new colors. For color hierarchy, pick another token from the palette.
Do this
Signal state
Disabled buttons, dimmed modals, backdrop scrims — opacity communicates interaction state at a glance.
Don't
Fake new colors
Lowering opacity to get a pastel is how contrast breaks. Use a lighter shade of the token instead.
Scale5 tokens · click to copy
The opacity scale.
In componentsWhere each value lands
Applied.
Disabled · --opacity-half (0.5)
Buttons and inputs at 50% opacity read as non-interactive.
Subtle · --opacity-quarter (0.25)
Decorative dividers, whisper-level borders, backdrop tints.
Dialog
Overlay · --opacity-minimal (0.15)
Scrims behind modals and dialogs — dim without dominating.