Please read the Licensing terms before you download this content.
Overview
How it works
The 'sign in or register' Call To Action (CTA) is a gateway into sign-in-only content across the Ö÷²¥´óÐã. It's placed in Ö÷²¥´óÐã 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 Ö÷²¥´óÐã account CTAs on that page, unless otherwise designed together with the Audience Platform UX&D team.
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 Ö÷²¥´óÐã '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 Ö÷²¥´óÐã 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 |
Settings | Preferences |
Account, Ö÷²¥´óÐã account | Ö÷²¥´óÐã 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 .
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.
Licensing
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 Ö÷²¥´óÐã 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 Ö÷²¥´óÐã by using the assets.
Disclaimer: The assets are offered as is and the Ö÷²¥´óÐã is not responsible for anything that happens if you use them.