Surface color

A surface colour is not the CSS property background-color, it is the role that property is filled from. Interfaces stack planes: the page, a card on the page, a sheet or a menu on the card, and each level needs a value distinct enough that the edge between two of them is legible without a border doing all the work. Naming those levels as a small, finite set is what turns “what grey is this card” into a decision made once.

Every system that has grown up ships the same idea under its own word. Material 3 has surface plus a run of surface container roles from lowest to highest, along with surface dim and surface bright; Carbon calls the same ladder its layer tokens and counts them 01, 02, 03; Polaris writes bg-surface with modifiers. The shared discipline is that a component asks for the next level up rather than for a specific grey, so the same card is correct on a page and inside a modal. Three or four levels is usually the whole ladder, because a raised sheet raised again has nowhere left to go.

Dark themes are where the ladder earns its keep. A drop shadow works by darkening what is behind it, which does nothing at all against a nearly black page, so elevation in the dark is carried by lightness instead: each level up is a lighter surface, not a heavier shadow. Material 2 did this with an explicit elevation overlay, a white film whose opacity rose with height, and Material 3 folded the same behaviour into the surface container roles. It reverses the intuition people bring from light themes, where surfaces run up toward white and elevation is left to the shadow because white has nowhere further to go.

Surfaces never travel alone. Every level implies the ink allowed to sit on it, which is what on colour names, and the pair is what a contrast ratio is actually calculated between. Pick the ladder out of the neutral palette, keep the steps far enough apart that the separation survives a dimmed screen, and treat a level as a colour role rather than as a shade: the moment a component hardcodes the grey instead of the role, it stops working in the dark theme and inside every container that is not the page.