Text and Button Colours
Text and button colours should change when placed on various backgrounds to ensure the best legibility.
When creating layouts, we recommend using alternating white and light gray backgrounds where necessary to differentiate sections or elements and only use the yellow and blue backgrounds to highlight important information or for promotions/CTAs.
The background may be applied to the whole width of the section or limited to the width of the container. When using a background colour on the container please ensure there is a padding of 20px around the content and a border radius of 16px.
> On White
Headers (Blue-700 | Black)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
high emphasis Text (black)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
helper text (gray-700)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
error text (medicover red)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
> On Light Gray
Headers (Blue-700 | Black)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
high emphasis Text (black)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
helper text (gray-700)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
error text (medicover red)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
> On Primary
Headers (White)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
high emphasis Text (white)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
helper text (gray-300)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
error text (error light)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
> On Secondary
Headers (White)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
high emphasis Text (white)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
helper text (black)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
error text (error dark)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
> On Acccent Colour
Headers (blue-900)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
high emphasis Text (black)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
helper text (black - opacity 60%)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.
error text (error dark)
Tortor sed maecenas elementum consectetur tincidunt adipiscing aliquam commodo.