A color distribution formula. 60% dominant (background), 30% secondary (cards), 10% accent (CTAs only).
The 60-30-10 rule is a simple color distribution formula borrowed from interior design. 60% of the visual area uses the dominant color (usually a neutral). 30% uses the secondary color (slightly different tone for cards, sections). 10% uses the accent color (your brand color — for CTAs, highlights, icons).
The dominant 60% sets the overall mood. The secondary 30% creates depth and section differentiation. The accent 10% draws the eye to what matters — your CTA button, important stats, or links. If your accent appears more than 10% of the time, it loses its ability to draw attention.
Scroll inside. The sticky legend at the top names the three colors. Notice how rarely the accent blue appears.
Batch 12 is shipping now. 240 numbered jackets, in waxed Lancashire cotton.
10oz waxed cotton from one mill in England.
Solid brass, lacquered, lifetime guarantee.
Cut, sewn, finished by five hands in Brooklyn.
Essays on slow craft, every other Friday.
Design a website using the 60-30-10 color rule. Dominant color (60%): #FAFAF7 (warm off-white) for page backgrounds. Secondary color (30%): #F0EDE8 (slightly warmer gray) for cards, alternate sections, and footer. Accent color (10%): #2563EB (electric blue) ONLY for primary CTA buttons, active navigation links, highlighted text, and icons. Text: #111111 for headings, #555555 for body text, #888888 for captions. Never use the electric blue for anything decorative — only for actionable and important elements.