/hierarchy

A screen where three things are emphasised has nothing emphasised. Emphasis is relative, and it is a budget: spending it on the fourth item takes it away from the first.

Rank before you style

Write the list before opening the file. What is this screen for — one sentence. Then rank every element against that sentence: primary, supporting, ambient. Most screens have exactly one primary and are wrong about which one it is.

The test: squint until the text is unreadable. Whatever you still see is what the page is actually about. If that is the nav bar, the page is about the nav bar.

Four levers, in order of strength

Size is the loudest and the one people reach for first. It is also the most expensive — it changes the layout, so you can only use it a couple of times per screen.

Weight is quieter and cheaper. Prefer it for the second tier: the difference between 400 and 500 is enough to signal “read this first” without touching the geometry.

Colour is quieter still, and the only lever that costs no space at all. Muting the supporting text does more for a dense screen than enlarging the heading.

Space is the one that actually works. Proximity groups things more strongly than any amount of styling — two elements 8px apart are one object, whatever colour you make them.

Reach for the last two first. Most “cluttered” screens are not overdesigned; they are under-grouped.