Opacity

Opacity tokens are used to affect the transparency of elements.

---

Opacity tokens

---

How to use opacity

• 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.