Surface colors

Five layers of background, deepest to highest. Use the lowest layer for the page; step up one level for cards / panels, two levels for nested controls, three for popovers and overlays.

--bg-0Page

--bg-1Card

--bg-2Nested

--bg-3Input

--bg-4Pressed

Stacked example

Card on page · --bg-1 inside --bg-0

Nested panel · --bg-2 inside --bg-1

Borders

subtle

default

strong