Aka backgrounds, are areas of the interface that encapsulate content and components. Each brand has its own surface styles

Surfaces are basically backgrounds, but we use the term to indicate how they layer up in specific scenarios to create an interface.

Surfaces are at the bottom of the elevation level and have no functionality, content and components sit on top of them.

Surfaces - Brand

Surfaces - Brand


Light and Dark

Each theme e.g. light and dark has its own base surface. The most common is white in the light mode across all of our brands.

These are the parent theme levels and every style and component is tested to make sure if works with these theme palettes.

Inverted Surfaces

Both the light and dark them have an inverted colour and this is used to draw the users attention to a particular area of content. It can be thought of as a banner with more intricate content.

There should only ever be one inverted area per screen, otherwise it will not draw the users attention.

The inverted surfaces have a large number of styles but not all of the components are styled to work on an on this palette.

Standard Life Example

Standard Life Example

Example of an inverted surface being used to highlight account information

Alternate Surfaces

Alternate surfaces, Alt 1 and 2 above, are surfaces that can be used to bring attention to a section of content. They should be used sparingly as depending on the size of the nested content, they can change the user's focus.

Consider using whitespace and our vertical rhythm guidelines to group and section content, leaving alternate surfaces for key content areas.

Specific brands may have further rules around the usage of alternate surfaces, please read the appropriate documentation.

Surface Styles

Compound aims to deliver an interface in both a light and dark theme with surface colours as the back bone to this.

We combine surfaces, content, and components to create an interface. If this is not created consistently the interface can quickly become confusing and inconsistent.

Surface Styles aim to demonstrate what components and styles should be used with specific surfaces and situations as a quick reference

Example Standard Life Surface Styles

Example Standard Life Surface Styles

How to use?

There are different styles and each of these has a specific function and level of detail. Each style in the block has been checked to make sure they meet our accessibility guidelines and take the guesswork out for each designer.

The blocks should be used as a reference point when working on your brand and interface, the examples are always evolving so it is worth checking back frequently.