Skip to main content
Opacity tokens give you a named, reusable set of transparency values instead of scattering arbitrary percentages across your components. Coreframe generates a three-layer opacity system — primitive, semantic, and component — as Figma Variables so every overlay, disabled state, and muted element draws from the same consistent scale.

​
How to configure and generate opacity tokens

Open Coreframe and click the Opacity tab. The generator has three sections: Primitive, Semantic, and Component. On the Primitive tab you’ll find 15 default opacity steps: Each row displays a checkered-background preview swatch so you can see the transparency level at a glance. You can edit a step’s name, label, or percentage value inline. Click Add Custom Opacity to insert a new step, or the trash icon to remove one. Click Map Semantic Opacity to advance to the next tab. On the Semantic tab you’ll find pre-built mappings that give meaningful names to opacity values:
  • opacity-disabled → opacity-40 — elements that are inactive but still visible
  • opacity-overlay → opacity-50 — modal backdrops and sheet scrims
  • opacity-placeholder → opacity-60 — placeholder text and ghost content
  • opacity-ghost → opacity-20 — watermarks and decorative backgrounds
  • opacity-muted → opacity-70 — secondary text and de-emphasized content
  • opacity-hover → opacity-80 — hover-state image overlays
Pro users can rename, repoint, or add new semantic mappings via the dropdowns. On the Component tab you’ll see four default component-level tokens — button-disabled, input-disabled, modal-backdrop, and placeholder-text — each pointing at a semantic opacity token. This final layer makes it trivial to adjust the disabled opacity for all form elements by changing a single semantic token. Pro users can customize these mappings. Click Generate Opacity Token to push all three layers into Figma as Variables.

​
Use cases

Opacity tokens handle three primary scenarios in a design system:
  • Overlays — use opacity-overlay (50%) on the backdrop behind modals, drawers, and sheets to dim the content underneath without hiding it entirely.
  • Disabled states — apply opacity-disabled (40%) to buttons and inputs to visually communicate that an element is non-interactive. Binding this to a variable means you can tune the exact value system-wide without hunting down individual layers.
  • Hover states — image cards and interactive tiles commonly darken or lighten on hover. Using opacity-hover (80%) as a named token keeps these micro-interactions consistent across your component library.