👁

Opacity Tokens

DTCG Type: opacity

Opacity tokens control transparency levels for overlays, disabled states, and visual layering. They ensure consistent transparency across the UI.

Token Examples

Token Name	Value
`opacity.disabled`	`0.5`
`opacity.overlay`	`0.6`
`opacity.hover`	`0.8`
`opacity.full`	`1`

CSS Properties

These CSS properties typically consume opacity tokens:

opacitybackground-color (alpha)rgba()

Use Cases

✓

Disabled element states

✓

Modal backdrop overlays

✓

Hover transparency effects

✓

Loading skeleton shimmer

✓

Watermarks and decorations

Usage Example

:root {
  --opacity-disabled: 0.5;
  --opacity-overlay: 0.6;
  --opacity-hover: 0.8;
  --opacity-full: 1;
}

.btn:disabled { opacity: var(--opacity-disabled); }
.modal-backdrop {
  background: rgba(0,0,0, var(--opacity-overlay));
}

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Product / SaaS

Interactive product UI with semantic modes

Dashboard / Admin

Data-dense panels with chart colors

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// opacity.disabled → 0.5
// opacity.overlay → 0.6
// opacity.hover → 0.8
// opacity.full → 1

// CSS custom property:
// --opacity-disabled: 0.5;
// --opacity-overlay: 0.6;

// Token set hierarchy:
// global/         → Raw primitive values
// semantic/light/ → Light mode semantic mapping
// semantic/dark/  → Dark mode semantic mapping
// component/      → Component-specific overrides