Surfaces

Guidelines around using surfaces and surface styles consistently for this brand.

Surfaces follow the same global guidelines and rules around elevation for Standard Life. The biggest difference for this brand are related to the inverted and alternate colours.

The examples below are updated from a dynamic file and likely to update regularly

Default

All components are designed to work on our default surface, below is an example of the key styles and components.

Default

Inverted

Our inverted colours are used to draw attention to a key area. We have identified key styles of components to be used on this background. Not all components will work on the inverted colour unless requested through the contribution process.

Invert Light

Alternates

Alternate 1 - Child Themes

Standard Life has two alternate colours that can use to section content, as per the surface guidelines please use these sparingly and consider whitespace and vertical rhythm first.

Standard life has an alternate colour for each it's sub brand:

Customer - #E3EFF6 (BS00)

Advisor - #EDFBFA (AQ00)

Employer - #F5F1F8 (PU00)

Alternate - Advisor

Alternate 2 - Cards Background

The second alternate background colour is #F1F3F7 (LM N20) which has a dual purpose.

Example of a card on a alternate 2 background

When there are multiple cards on a screen, such as a dashboard or homepage, this surface colour should be used for the main background, replacing the default colour.

This allows for the cards to have a higher elevation and be distinguised with a clear shadow.

Dashboard Example

Example of the alternate surface being used at the lowest elevation on a UI heavily using cards.

Cards

Pages that are use cards solely to build up their interface, such as a dashboard or homepage, should use the alternate background colour.

The first row should overlap the inverted surface, as outlined in the Standard Life Card guidelines.

Cards and Invert Example

Example of the cards overlapping the inverted surfaces