BT.com Design Guidelines

Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 

Colours
 

Brand colours

Brand colours are our key colours. BT Purple is the most prominent overall, used in combination with a white canvas and a clean, sharp feel. We use BT Pink and BT Blue sparingly.

BT Purple

#640AA | rgb 100, 0, 170 | Contrast ratio: 9.9:1 white

General: key brand colour for global elements, backgrounds, buttons and links.

Text: only to be used as text if it’s indicating a link or interaction. Cannot be used for titles or body copy.


BT Pink

#E60050| rgb 230, 0, 800 | Contrast ratio: 4.7:1 white

General: used sparingly so it doesn’t interfere with primary purchase buttons.

Text: can only be used as text if it is indicating a link or interaction. Cannot be used for titles or body copy.

White

#FFFFFF | rgb 255, 255, 255 | Contrast ratio: 12.6:1 dark grey

General: site background, plinths and bounding boxes.

Text: can be used reversed out of all BT colours apart from yellow and light grey. If using reversed out of BT Blue, the smallest type size that can be used is H3/S3 bold.


BT Blue

#00A0D6| rgb 0, 160, 214 | Contrast ratio: 9:1 white, 7:1 black

General: secondary colour for highlighting features, charts etc.

Text: the smallest type size that can be used is H3/S3 bold.

Support colours

This selection of greys can be used for background panels when we need to create distinct sections of content. Dark grey and mid grey can be used for text.

 


Dark Grey

#333333 | rgb 51, 51, 51 | Contrast ratio: 12.6:1 white

General: can be used sparingly as a background colour.

Text: the main colour for all titles and text.


Medium Grey


#666666 | rgb 102, 102, 102 | Contrast ratio: 5.7:1 white

General: can be used sparingly as a background colour.

Text: can be used as a secondary text colour, for instance for T&Cs.


Light Grey


#DDDDDD | rgb 221, 221, 221 | Contrast ratio: 9.3:1 dark grey

General: can be used as a background colour.

Text: cannot be used for text.


Extra Light Grey


#EEEEEE | rgb 238, 238, 238 | Contrast ratio: 10.9:1 dark grey

General: can be used as a background colour.

Text: cannot be used for text.

Functional colours

This set of colours are reserved for online use only, and we use them for patterns like notifications, alerts and progress bars. They should only be used with a function attached to the particular colour, and never for general content.

Red

#E60014 | rgb 230, 0, 20 | Contrast ratio: 4.8:1 white

General: signifies something is wrong or needs urgent attention, such as warning notifications and errors.

Text: preferred use is reversed white out of red.

Green

Green #008A00 | rgb 0, 138, 0 | Contrast ratio: 4.53:1 white

General:
success messages and completed process steps. 

Text: Preferred use is reversed white out of green.

Yellow

#FFDC00 | rgb 255, 220, 0 | Contrast ratio: 9.3:1 dark grey

General: reserved for general alerts and notifications.

Text: Preferred use is dark grey out of yellow.

Hover colours

This set of colours are reserved for online use only, and we use them to indicate a hover or tap status on links and buttons.

BT Purple hover

#540E85 | rgb 84, 14, 133 | Contrast ratio: 11.8:1 white

General: Hover/tap usage for BT Purple buttons and links.

Text: only to be used as text if it’s indicating a link or interaction on hover/tap status.

BT Pink hover

#C30D4C | rgb 195, 13, 76 | Contrast ratio: 6.03:1 white

General: Hover/tap usage for BT Pink buttons and links. cess steps. 

Text: only to be used as text if it’s indicating a link or interaction on hover/tap status.


Text colours and accessibility

To be compliant with AA standards, text should have a contrast ratio of 4:5:1 or higher.

To check that font colours meet this ratio, use the Snook.ca colour contrast check.


Changelog


1.0.1



1.0.0