Compound uses the term "surfaces," which refers to backgrounds. Use surfaces in specific scenarios. Surfaces are at the bottom of the user interface (UI). They have no functionality; content and components sit on top of them.
Base
Each theme has its own base surface, and every style and component is thoroughly tested to ensure it works with these theme colours.
Inverted Surfaces
An inverted surface is used to draw the user’s attention to a particular area of content. Functions as a banner or top section with more intricate content.
The inverted surfaces have a large number of styles, but not all components are compatible with this palette.
Alternate Surfaces
Use alternate surfaces to draw attention to a specific section of content or grouping.
Use alternate surfaces sparingly, as they can alter the user's focus depending on the size of the content inside.
Consider using spacing to group and section content, leaving alternate surfaces for key content areas.
Specific Alternate Surfaces
Child Themes
Standard Life has two alternate surfaces that can be used to section content if spacing does not work.
Standard Life has an alternate colour for each of its sub-brands:
- Customer - Surface / Alt 1
- Advisor - Surface / Alt 2
- Employer - Surface / Alt 3
Cards Surfaces
The second alternate surface colour is Surface/Alt 1, which serves a dual purpose.
When multiple cards appear on a screen, such as a dashboard or homepage, this surface colour should be used for the main surface, replacing the base/surface.
This allows for the cards to have a higher elevation and be distinguished with a transparent shadow.
Dashboards and homepages
Pages that use cards solely to build up their interface, such as a dashboard or homepage, should use the alternate surface colour.
The first row of cards should overlap the inverted surface.
