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.
All components are designed to work on our default surface, below is an example of the key styles and components.
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.
Standard life has an alternate colour for each it's sub brand:
- Customer - #E3EFF6 (BS00)
- Advisor - #EDFBFA (AQ00)
- Employer - #F5F1F8 (PU00)
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.
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.