60-30-10 rule
A proportion recipe: 60% dominant color, 30% secondary, 10% accent. Stolen from interior design, works fine on screens.
See it
What it is
A proportion recipe borrowed from interior decorating: about 60% of the surface goes to a dominant color, 30% to a secondary, 10% to an accent. In a room that is walls, upholstery, cushions. On a screen it is usually background and whitespace (60), cards, sidebars, body text and borders (30), and buttons, links and highlights (10).
It is a sanity check, not a law. Its real value is telling you the answer to 'my three brand colors all look equally important and the page feels like a carnival': the fix is almost never a different palette, it is a different distribution. Assign ranks, then honor the ranks.
Gotcha: the 60 is almost always a neutral, not your saturated brand hue. Teams read the rule as 'three brand colors' and paint 60% of the page in the loudest one, which is how you get a website that hurts. Count whitespace toward the 60 as well, and measure by area on screen, not by number of elements.
Ask AI for it
Apply the 60-30-10 rule to this layout. Assign roughly 60% of the visible area to a light neutral background (whitespace counts), 30% to a secondary surface and text color, and no more than 10% to a single saturated accent used only on buttons, links and highlights. Do not give the brand hue the 60% slot. Tell me the resulting area split and which elements got which role.