The primary color should cover about 60% of the space and create the overall unifying theme of the design.
The 30% should contrast with the 60% to create a visually striking effect.
The 10% is an ‘accent color’, which should complement either your primary or secondary color.
Primary color: This is where the user’s attention goes. Calls-to-action, buttons, and any other important information should utilize the primary color.
Secondary color: The secondary colors are used to highlight less important elements. Secondary action buttons, less important text, and anything else that doesn’t need immediate attention should be presented in a secondary color.
Neutral/Additional colors: Neutrals are typically used for text, backgrounds, or anything else that does not need to compete for attention.