Using the colours

Seven colours. Most of what you make will be white and grey with black or near-black bands, and a good amount of red.

There is no green in this brand.

The seven

Colour	Hex	What it is for
Signal Red	#CF2028	Buttons, full-width red bands, badges, the strip across the top of the site.
Ink	#19191A	Headings on white, and dark sections that are not full black. It is near-black, not pure black.
Black	#000000	The header, the footer, the top bar and full-width dark bands.
Graphite	#494948	Body text on white. Softer than black and easier to read.
Stone	#C0BDBD	A light grey that only ever goes on a dark background.
Mist	#F3F5F8	The very light grey you use to make one band of a page stand apart.
White	#FFFFFF	The page.

Copy these exactly. A colour that is nearly right looks like a photocopy of the brand.

Printing

Ask for Pantone 1795 C. That is Signal Red as an ink. The hex above is a screen value and a printer converting it by eye will not land on the same red.

If the job is full colour rather than a spot colour, tell the printer to match to 1795 C. Signal Red goes dull and brownish in uncoated CMYK if nobody says anything.

How much red

Unlike a lot of brands, red is not rationed here. Red bands, red strips and red badges are the look, and you can use plenty of them.

What is rationed is the red button. One per screen. The exception is a row of product tiles that each carry their own Add To Cart, because that is one pattern repeated rather than several things shouting at once.

The one that catches everyone out

Red text on black does not work. Our Signal Red on black measures 3.89 to 1, and on the near-black Ink it is 3.25 to 1. Text needs 4.5 to 1. It looks fine on a bright monitor in an office and disappears on a phone in daylight.

Use the lighter red #FF625B instead. On black it measures 7.15 to 1 and on Ink 5.98 to 1.

This is not hypothetical. The websites do this today in the top bar and in the footer, and it is on the list to fix.

The other two that fail

Never	Why	Use instead
Stone on white	1.87 to 1. It is a light grey on a light background.	Grey #66696C, which is 5.52 to 1.
Red as body text	It clears on white, but a paragraph of red reads as a warning.	Graphite. Keep red for a short pull-quote at most.

Red as a heading or a short pulled-out line on white is fine. Three lines is the most it should ever run to.

Red text on white is allowed

Signal Red on white measures 5.40 to 1, the same as white on red. So a red headline or a short red pull-quote is fine. A red paragraph is not.

Outlines around buttons

When someone tabs through a page with a keyboard, the thing they are on gets an outline. Ours is not red, because a red outline around a red button is invisible.

• On a white page, the outline is Ink.
• On a red button, or anything dark, the outline is white.

If you are making something interactive and you cannot see where you are when you press Tab, it is wrong.

Green, orange and gold

These are not brand colours. They exist only inside a website or an app to show a status: green for done, gold for a warning, red for an error.

Never put them in an ad, a brochure, a social post or on a machine. If a design has a green tick in it that is not inside a piece of software, it is wrong.

One warning about the gold: never set gold text on a white background. For someone who is red-green colourblind, and that is around one man in twelve, gold and our red look nearly identical. Use gold for a border or an icon and keep the words in Ink.