Opacity

Opacity tokens are used to affect the transparency of elements.

GenericToken / Opacity
100%
100%
ovo-core-opacity-solid
Collection
-
Token set
Core
75%
75%
ovo-core-opacity-translucent
Collection
-
Token set
Core
25%
25%
ovo-core-opacity-transparent
Collection
-
Token set
Core

How to use it

  • Use opacity tokens to create a fade effect when needed. For example, to indicate that a page element is interactive, that item may adopt the 'ovo-core-opacity-transparent' token to achieve a fade effect when hovered with a cursor.
  • Use opacity tokens to acheive a fade-in or out effect when animating page elements into or out of view.
  • Avoid using opacity tokens to 'mix' one colour with another to achieve new colours. For example, mixing 50% OVO Green with 50% Energised Green to achieve a new shade of green.
  • Don't use opacity tokens for decorative purposes. Transparency should serve a function rather than be used than as an aesthetic choice.