Restraint: Budget Your Colors and Type
Most good-looking interfaces aren't built by adding — they're saved by cutting. This lesson gives you a budget sheet: one primary plus neutrals, two font weights, one radius set. Anything over budget gets cut, no matter how pretty it looks.
The budget rules are short: one primary, everything else goes to black / white / gray neutrals; two font weights, one for body and one for emphasis; one radius set, pick a number and reuse it everywhere. Before you add a second accent color, ask once — "is this worth spending budget on?" Most of the time, save it.
Below is a restrained promo page. Tap "Add another color" five times and watch it degrade step by step; after five, one-click subtract.
The color adder shows how things get ugly; the subtract game shows how to save them. About Face 4 gives a method you can actually run: cut things until deleting one more breaks the design, then put that last piece back. The promo card below stacks six ornaments — tap them off one by one; you'll know which one breaks the page.
Restraint has a finer rule for things that are "almost the same." About Face 4 puts it hard: unnecessary differences are the enemy of consistent design. Two spacings that are almost equal — make them the same number. Two colors that are almost the same — use one. Every difference needs a reason; if you can't find one, kill it. The card below hides three "almosts" — toggle to see before and after you fold them in.
Color budget asks "how many"; saturation asks "how loud." About Face 4 warns: highly saturated colors all shout, and together you get the carnival effect — users get overwhelmed. Same three tags — push saturation like a volume knob.
This time the three budgets are switches — mix them any way you like; the badge at bottom-right tells you live whether you're over.
Three budget rules: one primary plus neutrals, two font weights, one radius set. Before you break budget, ask if it's worth it.
Every extra color devalues the ones you have. Subtracting works more often than adding — cutting color is the highest-ROI move.
If a page feels cheap, check in order: count the accent colors, then the weight steps, then whether radii are unified.
Two executable rules: almost the same → make them identical; unsure whether to keep it → delete until it breaks, then put the last piece back.
Sources: Original to Xiaoshan Academy's Taste Engineering series; principles such as "unnecessary differences are the enemy" and "subtract until it breaks" adapted from About Face 4: The Essentials of Interaction Design, Chapter 17 (Alan Cooper et al.).