# Surface colour: what it is and how it works · Zorraquino
> Surface colour is, in a design system, the colour of components that hold content, such as cards, sheets or menus.
URL: https://www.zorraquino.com/en/dictionary/ux/surface-color.html

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

[The whole glossary](https://www.zorraquino.com/en/dictionary)

## 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

Topics

[Experience and service design](https://www.zorraquino.com/en/dictionary/category/experiencia-y-diseno-de-servicios)

## Related concepts

- [Background colour](https://www.zorraquino.com/en/dictionary/ux/background-color.html)
- [On colours](https://www.zorraquino.com/en/dictionary/ux/on-colors.html)
- [Design system](https://www.zorraquino.com/en/dictionary/digital-marketing/design-system.html)