04 / 08
Role-Based Palette Structure
Every modern design system organizes colors by what they DO, not what they look like. Each color has a job. This is how Apple, Google, Stripe, Linear, and Figma all think about color.
The main brand color. Used for buttons, links, key actions. The color people associate with the product.
Backgrounds, borders, body text, subtle UI elements. Usually a warm or cool gray scale with 9–12 shades.
A second color used for highlights, badges, callouts. Should contrast with the primary. Optional but powerful.
Success (green), error (red), warning (yellow), info (blue). Used for status, alerts, validation. Almost universal.