How it works
The 'sign in or register' Call To Action (CTA) is a gateway into sign-in-only content across the BBC. It’s placed in BBC products and must stand out. To help do this, the button should be blue where possible, with a darker blue hover state.
The are three states for the 'sign in or register'
State 1: When you’re not signed in.
State 2: When you’re signed in, but details are still needed to use that site e.g. display name for commenting.
State 3: When you’re signed in, and have all the details needed to use that site. You shouldn't see any further BBC account CTAs on that page, unless otherwise designed together with the myBBC team.
- The CTA always leads with 'sign in'.
- The 'sign in' button must always sit to the left of the 'register' button and appear with a signed out BBC 'account' icon.
- The height of the 'sign in' icon is always the same as the font’s cap height and aligned to the baseline.
- Don’t change the colour of the 'sign in' icon.
- The CTA should use the blue button where possible. There is a secondary white option. But this is only for situations where blue is not possible for accessibility reasons.
- The blue CTA should use these colours:
- Active state: #006DEF
- Rollover state: #005BC8
- The CTA must not be scaled, there are three sizes to choose from (small, medium and large). More information can be found below.
- Don’t remove the 'sign in' icon from the button.
- The icon and text elements are all centered vertically in the button.
- Don’t use different icons with 'sign in'.
Type and sizing
There are three CTA sizes to choose from, small, medium and large. The use of these sizes are based upon the design or product requirements.
The CTA type sizes and line heights are:
- Small - 15/18
- Medium - 18/22
- Large - 20/24
For more information around type sizes, please read the typography guidelines.
Take a look at our downloadable assets for the different padding and button heights required at various group sizes. These assets can be found at the top of the page.
Don’t use different words for ‘sign in’ and ‘register’. For example, ‘log in’ or ‘sign up’. Don't capitalise the first letter of account. It's 'account' not 'Account'.
When referring to your BBC account please be consistent and use the right terms.
|Correct terms||Incorrect terms|
|Sign in, Sign out||Login, Log in, Log out|
|Register, Registration||Sign up|
|Account, BBC account||BBC membership|
When using CTAs with images or coloured backgrounds, make sure that colours are accessible. They must pass the colour contrast check with a ratio greater than 3.1. You can check your colours using the Snook colour contrast check.
If the primary CTA doesn’t work for accessibility reasons, there is a secondary colour for dark backgrounds. You can find more information around accessibility when using text and colour in our how to design for accessibility guideline.