We use elevation to create the perception of 3 layers in our visual language. Page elements appear either directly on the page surface (base), floating above it (elevated), or beneath the page surface (cut out). We never use drop shadows to create the impression of depth.

Surface colour tokens

Our base surface is a neutral off white colour. Use this colour token to form the primary background colour in all OVO experiences.

 

We can create elevation by using an elevated (raised) or cutout (lowered) surface. This gives an impression of depth on the screen without using shadows.

How to use it

• Use a semantic-surface-elevated background to indicate that an object is interactive or has a high level of importance. Objects using this elevated background colour feel as though they are placed on top of the offwhite base surface colour and draw focus.
• Use a semantic-surface-cutout background colour in small quantites to define a piece of content or group several elements without making them feel interactive.