A design system is a set of rules and building blocks that keeps a product visually consistent. Colors in the system aren’t random, they each have a role.
Step 1: Pick your primary color
This is the main color that defines the brand or overall vibe. Good primary colors are bold but not harsh, versatile across backgrounds and components, and usually slightly muted rather than neon-bright. Examples: deep blue, navy, teal, forest green, burnt orange.
Step 2: Pick your secondary color
The secondary color supports the primary and is used for layout, sections, or less prominent UI elements. A common approach is analogous colors - colors next to the primary on the color wheel. This keeps the design harmonious and cohesive. Example: if your primary is blue, secondary could be blue-green or indigo.
Step 3: Pick a tertiary color (accent)
The tertiary color draws attention to important elements like buttons, links, or alerts. It usually contrasts with the primary and secondary, often using complementary or split-complementary colors. Example: if your primary is blue and secondary is blue-green, tertiary could be orange or amber.
Using the 60-30-10 principle
Instead of using each color equally, the 60-30-10 ratio guides how much of each to apply. About 60% of your design should use the primary color to establish identity, 30% the secondary for structure and harmony, and 10% the tertiary for emphasis and highlights. This balance ensures the design feels cohesive, guides the eye naturally, and prevents the interface from feeling chaotic or random.