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