mui

The Expensive Look · Lesson 1 of 11

Why systems look expensive

9 minute read

The look you can't quite name is just constraint, applied everywhere at once.

The rule

Premium is not more; it is fewer decisions, repeated with discipline: one small palette, one or two typefaces, one accent, one spacing scale, enforced on every screen without exception.

Why it works

The eye reads consistency as intention, and intention as quality. When every corner radius, gap and grey is drawn from the same tiny set, the brain stops noticing individual elements and starts perceiving a whole. That seamlessness is what "expensive" actually feels like. Amateur work looks cheap not because any single choice is wrong, but because too many unrelated choices fight for attention.

Watch scattered one-off values collapse into a token set, then flow into every component. This is the whole trick, animated.

The same button, built two ways

Amateur: every value improvised

bg #3B82F6, radius 6px, padding 11px 18px

font Roboto, shadow 0 2px 8px rgba(0,0,0,.25)

hover #2563EB, a different blue than anywhere else

next button: radius 10px, padding 14px 20px, another blue

System: every value from the set

bg #2F6FED, the one accent

radius 12px, from the radii family

padding 16px 24px, on the 8-pt scale

hover #4C82FF, a defined variant, not a new color

next button: identical tokens. And the one after that.

Nothing in the system column is fancier. It is simply the same, and sameness held across a whole site is the entire trick.

Do this

  • Cap your palette before you design: one warm canvas, one near-black ink, two greys, one accent with two variants. Write the hex values down and treat the list as closed.
  • Choose at most two typefaces, one display and one body, and delete every other font from the file.
  • Pick one accent and one accent only. Every link, focus ring and primary button uses it; nothing else may.
  • Define one spacing scale and one radii family, then forbid yourself any value that isn't on them.
  • Audit an existing screen: count the distinct blues, radii and font sizes. Every number above one per role is a decision to eliminate.

Avoid

Adding a "just this once" exception. The first off-system value is permission for the next fifty, and cohesion collapses the moment the pattern breaks.

Knowledge check

A screen has four slightly different blues and three corner radii. What is the highest-impact fix?