<?xml version="1.0" encoding="utf-8"?>

Creating a structured surface palette

Surface colors come from the neutral tones already used throughout the product. An audit usually reveals a small group of grays used repeatedly in backgrounds, containers, and layout sections. These recurring colors form the base of the surface palette because they already support the interface visually. One-off neutrals or barely used tones can be merged with these stable values to avoid inconsistent backgrounds.

Once the main neutrals are identified, they can be assigned simple roles, such as primary background, secondary background, or container. Even small shifts between these tones help create hierarchy without introducing new colors. Keeping the surface palette structured this way makes layouts more predictable and reduces the number of decisions designers need to make.

Pro Tip: If two neutrals look nearly identical, merge them. Subtle differences rarely serve a meaningful purpose.

Improve your UX & Product skills with interactive courses that actually work