Restraint: Budget Your Colors and Type
One primary, two weights, one radius set. Dump colors onto a UI until it looks like a year-end party flyer, then one-click subtract and feel the premium feel snap back
THE QUESTION THIS PAGE ANSWERS
ANSWER FIRSTWhat is the key idea behind “Restraint: Budget Your Colors and Type”?
One primary, two weights, one radius set. Dump colors onto a UI until it looks like a year-end party flyer, then one-click subtract and feel the premium feel snap back
Turn taste into a behavior the product can repeat. The useful outcome is not a nice opinion. It is a visible rule, a small example, and a way to tell when the experience falls below the bar.
Capture one before-and-after example that shows the quality bar without extra explanation.
Polish that improves the surface while leaving the user's uncertainty untouched.
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.).
Turn the feeling in “Set a budget for color and type first” into a judgment
“The budget rules are short: one primary , everything else goes to black / white / gray neutrals;” points out that AI has lowered the bar for making something usable. The skill readers need is noticing what is wrong and turning that feeling into an actionable requirement.
Watch the user's next action, not just the surface
Turn “Below is a restrained promo page.” into observable questions: does the user know what happened, what to do next, and how to recover from an empty or failed state? Does the hierarchy make the important information visible first?
Pretty is not the same as usable
Apply “Sources: Original to Xiaoshan Academy's Taste Engineering series;” to a second screen or flow. Record one moment of hesitation and the user action after the change; observable behavior is stronger evidence than polish alone.
From “Set a budget for color and type first” to “Make a page ugly with your own hands”
“Set a budget for color and type first” grounds the problem in “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. Bef…”. “Make a page ugly with your own hands” then moves it toward “Below is a restrained promo page. Tap "Add another color" five times and watch it degrade step by step; after five, one-click subtract”. Together, they show that the lesson is not just a conclusion to remember, but a claim with conditions.
Carry the judgment into the next situation
For experience work, turn abstract impressions into user actions: did the person understand the state, find the next step, recover from an error, and want to continue?
- “Set a budget for color and type first”: 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. Bef…
- “Make a page ugly with your own hands”: 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 closing point”: Every extra color devalues the ones you have. Subtracting works more often than adding — cutting color is the highest-ROI move
The final “The closing point” brings the discussion to “Every extra color devalues the ones you have. Subtracting works more often than adding — cutting color is the highest-ROI move”. The useful thing to carry forward is knowing which judgments must be revisited when input, scale, or risk changes.
I turned one judgment from this article into a small experiment I could run today. Knowing what to observe next is more useful than simply remembering the conclusion.
After reading this, I first looked for the conditions behind the idea instead of copying the method into a project. That order made the later trade-offs much clearer.
When this judgment reaches real work, which constraint should be added first? I am curious which step matters most between reading and the first practical attempt.
No discussion on this article yet.