Surface colour
Surface colour is, in a design system, the colour applied to components that hold content, such as cards, sheets, menus or dialogs
What it means, how it is used and where it comes up, with its related concepts.
What it is and how it works
It differs from the background colour, which sits behind everything, and helps separate elements visually and suggest levels of elevation. Material Design 3 offers several surface tones (for example, lower and higher surface containers) to create a hierarchy of layers without relying solely on shadows.
Text and icons placed on it use the “on surface” colour, chosen to maintain sufficient contrast under accessibility guidelines.
Also known as
Surface color