ELIXIR-UK’s colour palette inherits from the parent ELIXIR brand: navy and orange are the two signature colours, supported by a small set of blues, neutrals and utility colours. The palette is deliberately small – fewer colours, used consistently, beats a wider system used loosely.
Core palette
The two colours that say “ELIXIR-UK” on their own.
Supporting blues
For overlays, secondary surfaces and decorative blocks. Not for body text.
Neutrals
Grey-scale anchors that the rest of the palette sits against.
Status colours
For alerts, notifications, system messages. Editorial copy should not use these as accents.
Composition: 60–30–10
A simple rhythm for any ELIXIR-UK layout – slide, poster, page or social card. The proportions hold in both modes: light (the everyday default) and dark (social banners, report covers, hero sections, formal documents). The canvas and the structural colour swap places; orange stays the accent.
Light mode
The everyday default – web pages, slide bodies, newsletters, most posters.
- 60% – white or wash. Canvas, margins, breathing room.
- 30% – navy. Body text, headings, panels, footers.
- 10% – orange. Helix motif, hover states, single call-out per composition.
Dark mode
For social banners, report and slide covers, hero sections, formal documents and event invites where you want gravity and contrast.
- 60% – navy. Canvas. The hero background.
- 30% – white. Body text, headings, panels. Use the dark-bg logo variants here.
- 10% – orange. Same role as light mode – accent, helix, single emphasis point.
The rule is descriptive, not surgical – don’t reach for a ruler. The point is most of a piece should be quiet (whether that quiet is white or navy), the contrasting structural colour carries the work, and orange punctuates rather than floods. If a draft feels noisy in either mode, it’s usually because orange has crept above 10%.
Usage rules
- Navy is the default for body text and structure. Headings, paragraph text, buttons, footer.
- Orange is the accent, not the body. Logomark, helix motif, hover states, banner overlays. Don’t set body text in orange – the contrast is too low (see below).
- Mid blue is for links and secondary interactive elements. Underlined in body content (see Accessibility).
- Light blue is decorative only – panels, soft fills. Never text.
- Slate is for secondary text – captions, photo credits, sub-titles, “On this page” sidebar.
- Wash and rule are structural – page furniture, not content.
Accessible pairings
Contrast ratios against common backgrounds. AA normal text needs 4.5:1, AA large text (18pt+ or 14pt+ bold) needs 3:1.
| Foreground | Background | Contrast | Use for |
|---|---|---|---|
Navy #023452 |
White #FFFFFF |
12.98:1 | Body text, headings ✓ AAA |
Navy #023452 |
Wash #EEEEEE |
11.5:1 | Body text on grey surfaces ✓ AAA |
Slate #4A6577 |
White #FFFFFF |
6.18:1 | Secondary text, captions ✓ AA |
Mid blue #037EAB |
White #FFFFFF |
4.64:1 | Links, secondary buttons ✓ AA |
Orange #F47D20 |
White #FFFFFF |
2.71:1 | ✗ Fails AA. Accent and graphics only, no text. |
Orange #F47D20 |
Navy #023452 |
4.78:1 | Large text and graphic accents on navy ✓ AA |
White #FFFFFF |
Navy #023452 |
12.98:1 | Text on navy backgrounds ✓ AAA |
Light blue #9BCBDD |
White #FFFFFF |
1.77:1 | ✗ Decorative only. |
For any custom colour combination, check with the WebAIM Contrast Checker.
Don’t
- Don’t set body text in orange or light blue. Both fail accessible contrast on white. Use navy or slate.
- Don’t tint or shade the brand colours. Use the listed hex codes; don’t generate your own lighter or darker variants in slide decks or documents.
- Don’t introduce new colours for editorial or brand work. For research plots, data visualisations and scientific figures where you genuinely need more distinct hues than the palette covers, use a purpose-built palette – ColorBrewer, viridis or similar – that is colourblind-safe and prints well in greyscale. Data viz is the recognised exception. Everything else (slides, posters, web pages, social) sticks to the palette above.
- Don’t combine orange with red or yellow at large scale. Status colours (warning yellow, danger red) sit in a different zone from the brand orange; mixing them in editorial layouts is visually confusing.
- Don’t communicate with colour alone. Pair colour with a label, icon or shape so the meaning lands for readers who can’t distinguish it. See Accessibility.