Color systems

A color system defines which colors a product uses and what each one means. The example shows a palette inspired by a photo, plus colors for success, warning and error.

Beyond brand colors, a color system assigns colors to roles, such as primary actions, backgrounds, text and feedback messages.

Good color systems are accessible: text and controls have enough contrast, and meaning never relies on color alone.