Overview
These guidelines extend Standard Life but focus on the information required for digital platforms.
How to Use
We aim to keep our documentation DRY, therefor use this page as a signpost to key information points. Depending on your project's technical approach you can drill down through the documents hierarchy as required.
We update our documentation and component library inline with any changes so please check back regularly for updates.
Typography
Although the Standard Life brand stipulates to use the Ubuntu font, across the digital platform we use it for headings and fieldsets, as you will see in our type scale alias for each platform. These alias are all derived from our type scale.
For all other copy we use the system font for performance and readability.
- Web - Arial
- iOS - San Francisco
- Android - Roboto
It is important to note that on the web we adjust the font and line-height sizes based on breakpoints.
Styling Links
We always underline our text links to make sure they stand out from body copy. Each link style has detailed colour tokens for each state and theme. These colours have been checked to meet AA contrast ratios.
Colour Palettes
Using the brand colours as a source we expanded each key colour into it's own palette, you can see this in our colour tokens. The widened palette provides a choice of colours to use when illustrating states or ranges of colour.
To make it easier for designers and developers to use the correct colours consistently we alias these tokens into the following groups
- Interface - The general colours required to create an interface
- Typography - Headings, body copy and link styles are all covered here
- Behavioural - These colours are used in components to
- Supporting - These colours are used for call out cards and banners, see below
- Gradients - These styles are mainly for our overflow fades plus a couple of brand gradients.
Inverted Colours
We have two parent themes, light and dark mode. Within these are child themes which are inverted colours.
The purpose of these is to provide a contrasting surface that content and components can be laid upon to draw the users attention. There should only be one of these per page.
For other colours and usage information please review the surfaces information for Standard Life.
Cards & Surfaces
Cards are heavily used in Standard Life layouts and the guidance on their usage is extensively documented
Make sure to read through
- Surfaces - particularly the usage of alternate colours and cards on backgrounds
- Elevation
- Cards - Our overview of structure and cards vs tiles covers a lot of details
Written Content
Our UX Writing section outlines a glossary of terms plus a more detailed guide on how content should be written.