Surface Color
A background color applied to UI containers — cards, modals, sheets, and page regions — that establishes visual layering and depth.
What it means
Surface colors are the backgrounds of UI containers. A design system typically defines multiple surface levels: base (page background), elevated (cards and sheets), and overlay (modals and popovers). Each level is slightly different — usually a step lighter or darker — to create a visual sense of depth.
In dark mode, surfaces layer upward: the page background is the darkest, and each elevation adds a touch of lightness. In light mode, the relationship may reverse or use subtle shadow differences instead.
Why it matters in palette design
Surface hierarchy tells users what's in front of what. Without clearly differentiated surfaces, cards blend into backgrounds, modals don't feel separate from the page, and the interface loses spatial clarity. Surface colors are also where neutral undertone consistency matters most — a blue-gray card on a warm-gray page creates subtle discord.
Example
A dashboard uses three surface levels: base (#FAFAFA), elevated (#FFFFFF for cards), and overlay (white with a layered shadow for modals). The 2-step lightness difference between base and elevated is enough to distinguish cards without strong borders.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.