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.
Usage
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.
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
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.