🎯 The Goal: Using too many bright tones creates instant visual noise — the design equivalent of six people talking at once. The 60-30-10 rule is the interior-design classic that fixes it everywhere, from slides to apps to living rooms: 60% of the canvas goes to a quiet neutral, 30% to a supporting structural color, and only 10% to an intense accent — reserved exclusively for the things you want clicked, read, or remembered. One loud voice, by design.
🎨 Step 1: Cast the three roles. THE 60% — the stage: a calm neutral (off-white, warm gray, soft cream, deep charcoal for dark themes) covering backgrounds and big surfaces. Its job is to be unnoticed; pure white and pure black are harsher than they look — nudge one step softer. THE 30% — the structure: a restrained second color for panels, cards, sidebars, illustrations — visible, organized, still polite (often a muted cousin of your accent, or a deeper shade of your neutral). THE 10% — the spotlight: ONE saturated color for the buttons, links, key stats, and highlights. The math is the message: the accent only works BECAUSE it's rare — spread that red across 40% of the page and it stops being a signal and becomes shouting (the same scarcity logic as the CTA lesson: one ask, one accent).
🔍 Step 2: Apply it to what you actually make. SLIDES: neutral background, one structural color for bars/dividers/section blocks, accent ONLY on the number or takeaway you want remembered per slide. DOCS & RESUMES: black-ish text on off-white (60), gray headers and rule lines (30), one accent color on your name and section heads (10) — instantly 'designed' with zero design skill. SOCIAL GRAPHICS & FLYERS: this rule is 80% of why pro posts look pro — the amateur tell is four saturated colors fighting at equal volume. APPS/SITES: neutral canvas, structural cards and nav, accent strictly on primary actions — when EVERY button is colorful, no button is primary. Stealing palettes legally: color-pick from a brand or photo you love, then ASSIGN the 60-30-10 roles — most ugly designs have fine colors in wrong proportions, not wrong colors.
⚖️ Step 3: The fixes and the flexes. QUICK DIAGNOSTIC — squint at your design (or screenshot it tiny): you should see one calm mass, one supporting shape, and a few hot points your eye jumps to. Multiple competing hot spots = your 10% has metastasized; demote everything but the true priority back to the 30% color. FLEXES that stay legal: the ratios are a compass, not a police report — 65-25-10 is fine; adding a fourth color is possible ONCE the base three are disciplined (usually a second accent used even more rarely, for warnings or wins). Photography counts as color mass too — a busy full-bleed photo IS loudness; balance it with quieter everything-else. And the rule's cousin does words: 60% body text, 30% secondary info, 10% emphasis (see the typographic-hierarchy lesson — same pyramid, different material).
📋 The 60-30-10 Cheat Sheet: 1. 60% quiet neutral stage, 30% structural support, 10% saturated spotlight. 2. Accent ONLY on what must be clicked or remembered — rarity is its power. 3. Steal any palette; fix the PROPORTIONS. 4. Squint test: one calm mass, one support, few hot points. 5. Every button colorful = no button primary. 6. Ratios flex; discipline doesn't. Loud everywhere is silence. Loud once is a command.