Design essentials
Colour
Blue is used throughout medicine to counteract the red hues often seen in hospitals. It calms the eyes and now has strong associations with the medical field. Our hues of blue bring calm to something that can feel daunting.
The palette
Electric and deep blue give the brand trustability and are easily spotted out of home. The pastels keep it warm.
Core
Navy
#082948
RGB 8, 41, 72
CMYK 100 84 43 45
Text, headlines, dark panels
Mid navy
#043564
RGB 4, 53, 100
CMYK 100 82 35 23
Second navy for stacking and hover
Call to action
Purple
#5061F0
RGB 80, 97, 240
CMYK 80 66 0 0
Buttons, links, one accent ribbon on navy
Brand blue
Blue
#6DAAF4
RGB 109, 170, 244
CMYK 58 26 0 0
The brandmark, panels, ribbons, large labels
Pale blue
#C1DAFF
RGB 193, 218, 255
CMYK 27 10 0 0
Soft panels, photo backgrounds
Light
Page
#F9FBFD
RGB 249, 251, 253
CMYK 2 1 0 0
Page background
Cloud
#F5F8FA
RGB 245, 248, 250
CMYK 4 2 2 0
Light panels on page
Off white
#ECF1F4
RGB 236, 241, 244
CMYK 9 4 4 0
Dividers, quiet panels
Steel
Steel dark
#304B60
RGB 48, 75, 96
CMYK 83 60 41 33
Secondary text, dark panels
Steel
#266079
RGB 38, 96, 121
CMYK 84 49 35 22
Labels, teal panels
Pastels
Yellow
#FFF5D1
RGB 255, 245, 209
CMYK 0 4 24 0
Warm panels, photo backgrounds
Coral
#FFDACF
RGB 255, 218, 207
CMYK 0 21 17 0
Warm panels, photo backgrounds
Lilac
#D5CBF3
RGB 213, 203, 243
CMYK 18 23 0 0
Soft panels, highlight circles
CMYK values are converted from the RGB values through the Coated FOGRA39 profile (ISO 12647-2), the standard for coated stock in the UK. For uncoated stock, convert from RGB with your printer’s profile and proof the navy and purple.
How each colour is used
| Colour | Use it for | Not for |
|---|---|---|
| Navy | All body copy and headlines on light backgrounds. Dark panels and the reversed logo. | Large areas next to purple panels; keep one dark colour per piece. |
| Mid navy | The second half of a navy stack. Hover states. | Text on navy. The two are too close. |
| Purple | The call to action, and only the call to action. Links. One accent ribbon on a navy panel. | Headlines, backgrounds, body copy. If everything is purple, nothing is a button. |
| Blue | The brandmark. Flat panels behind cut out photos. Ribbons. Short labels at large sizes. | Body copy or small text on white. It fails contrast. See below. |
| Pale blue | Soft panels, photo backgrounds, quote cards. | Text of any kind. |
| Page, cloud, off white | Backgrounds, dividers, quiet cards. Most of a layout should be these. | Text. |
| Steel | Secondary text, labels, teal panels for variety in long pieces. | The headline colour. Navy owns that. |
| Yellow, coral, lilac | Warm panels, backgrounds behind people, highlight circles, one colour per panel. | Text, and more than two pastels in one view. |
Text on colour
Measured against WCAG. Body copy needs 4.5:1. Large text, which means 24 px or 19 px bold and up, needs 3:1.
| Combination | Ratio |
|---|---|
| White on navy | 14.8:1any size |
| White on mid navy | 12.4:1any size |
| White on steel dark | 9.1:1any size |
| White on steel | 6.9:1any size |
| White on purple | 4.9:1any size |
| Navy on blue | 6.1:1any size |
| Blue on navy | 6.1:1any size |
| Navy on pale blue | 10.4:1any size |
| Navy on yellow | 13.5:1any size |
| Navy on coral | 11.4:1any size |
| Navy on lilac | 9.6:1any size |
| Purple on white | 4.9:1any size |
| Purple on cloud | 4.6:1any size |
| Purple on pale blue | 3.4:1large text only |
| White on blue | 2.4:1avoid |
| Blue on white | 2.4:1avoid |
| Purple on navy | 3.0:1large text only |
The rule of thumb: navy text on anything light, white text on anything dark, and blue is a shape, not a text colour. If a label must be blue, put it on navy.
Colour stacking
Recommendations for stacking colours in a layout, from the visual identity document.
Navy stack
Navy over mid navy. Ribbons in the other navy, and purple for the one accent. The most contrast, for hero panels and covers.
Blue stack
Pale blue over blue. Ribbons are tints of the panel they sit on. Good behind product shots and quote cards.
Pastel stack
Coral, lilac and yellow. Overlays are subtle so they never clutter a foreground photo. The warmest stack, for people.