Sign in or register CTA

The ‘Sign in or Register' call to action is the only way a user can log in to access BBC websites & apps. This guideline applies to all versions of BBC account.

Contributors

    Platform:Web

    Overview

    The 'sign in and register' call to action

    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 'sign in and register' CTA and its hover state

    Different states

    The are three states for the 'sign in or register'

    State 1: When you’re not signed in.

    Example of a comments module in a 'signed out' state

    State 2: When you’re signed in, but details are still needed to use that site e.g. display name for commenting.

    Example of a comments module that requires more information

    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.

    Example of a comments module in a 'signed in' state.

    Rules

    • 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.

    Correct termsIncorrect terms
    Sign in, Sign outLogin, Log in, Log out
    Register, RegistrationSign up
    SettingsPreferences
    Account, BBC accountBBC membership

    Accessibility

    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.

    How the secondary colour is used on dark backgrounds