Elements Guide

Colours

Brand Colours

Primary Colours

Medicover Diagnostics primary color is #00539f (Blue 700) and always appears in full tone. It may not be displayed transparently.
The rest of the blue tones might be used as complimentary colours.

Blue 300 is used as a secondary colour for digital applications, in order to better align with the Web Content Accessibility Guidelines regarding colour contrast. For applications not including text (e.g. line under headers) Blue-200 may be used as a secondary colour for better contrast with the primary colour (Blue-700).

Blue-700

#00539F

Blue-500

#1268B2

Blue-300

#4886C6

Blue-200

#65ADDF

Blue-900

#003566

Accent Colours

Medicover Yellow is used to provide accent to layouts, word emphasis and give a dynamic.

Accent Colour (Medicover Yellow)

#EDB220

Colour Balance

Balance Proportion

Please follow the proportions illustrated below to best reflect the Medicover Diagnostics brand through colours. Keep in mind any sticky elements within the page when choosing colour. For example, if you have a sticky accent-coloured button, avoiding using yellow in that page.

Combo 1 and Combo 2 are used throughout the site, while Combo 3 is used in the article page and store pages.

Combo 1

Primary: 85%

Secondary: 10%

Accent: 5%

Combo 2

White: 65%

Primary: 30%

Secondary: 5%

Combo 3

White: 90%

Primary: 10%

When designing for a brand that is part of Medicover Diagnostic Services division, you may make the following alterations to the colour combinations:

  • Combo 1: Your own Brand Colour (85%) + Medicover Blue (10%) + Accent Colour from Medicover palette (5%)
  • Combo 2: White (65%) + your own Brand Colour (30%) + Medicover Blue(5%)

Complementary Colours

Neutral Colours

For functional applications, the primary colour palette can be extended to include gray tones ranging from white to black.

Black

#181716

Gray-900

#666666

Gray-700

#868786

Gray-500

#BEC2C5

Gray-300

#EDF0F5

White

#FFFFFF

Secondary Colours

The secondary colours can be used for functional reasons (errors/susccess messages etc.) or to display graphs/infographics.

Success

#87BC4F

Success Dark

#598828

Medicover Intense Blue

#27A9E1

Medicover Turquise

#3FADAD

Error Light

#FF7473

Medicover Red

#DB403F

Error Dark

#690807

Medicover Orange

#F48120

Medicover Pale Red Violet Red

#C97D99

Gradients

Gradients may be used as a background colour instead of the primary colour or gray tones to make the layout more dynamic.

Blue Gradient

#0053FZ -> #1268B2

0 or 45deg

Black Gradient

#181716 -> #414042

0 or 45deg

Gray Gradient

#868786 -> #939598

0 or 45deg