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 | 

CTA Buttons and links


Call to action (CTA) buttons and links are used to help users carry out an action or navigate around our experiences.


Purchase CTAs

We reserve BT Pink for links and CTAs that lead through to purchase and upgrade journeys only. Try not to use this colour elsewhere on the page. This creates a simple, clear visual language for users that make it easier to see how to purchase or upgrade.

 

Examples of purchase and upgrade CTAs

 


States and interactions
 



Use on coloured backgrounds

 


Primary & secondary combinations

 


 


Learn CTAs

BT Purple is used for CTAs and in-page interactions that help our users to navigate and explore BT’s content. It is also our standard hyperlink colour.

If a hyperlink is inserted into body or paragraph text, is should always be underlined to make the link obvious and to adhere to accessibility guidelines.


Examples of learn and explore CTAs

 


States and interactions

 


Use on coloured backgrounds

 


Primary & secondary combinations

 


Links within text


Links within text are embedded into the copy as follows:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Button specifications



Buttons have a set height of 40px, with padding left and right of the text set to 20px. Corners have a radius of 5px. The minimum width of the whole button is 80px.

Secondary buttons have a 1px keyline. The link style has chevrons the same size as the ‘x’ height of the font, and are placed 10px to the right.

 


Changelog


1.0.1



1.0.0