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.
Default
All components are designed to work on our default surface, below is an example of the key styles and components.
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.
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 2 - Cards Background
The second alternate background colour is #F1F3F7 (LM N20) which has a dual purpose.
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.
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.
