Sign in or register CTA

Please read the Licensing terms before you download this content.

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.

Different states

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 Audience Platform UX&D 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.

Terminology

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.

Colour

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.

These assets are available for download on the following licence terms:

You can:

• Download the assets and use them free of charge;
• Use the assets without attribution; and
• Modify or alter the assets and edit them as you like.

You can't:

• Use the assets in a way that would bring the BBC into disrepute;
• Make available the assets so that they can be downloaded by others;
• Sell the assets to other people or package the assets with others that are for sale;
• Take payment from others to access the assets (including putting them behind a paywall);
• Use the assets as part of a service that you are charging money for; or
• Imply association with or endorsement from the BBC by using the assets.

Disclaimer: The assets are offered as is and the BBC is not responsible for anything that happens if you use them.