Hierarchy, Alignment and Spacing

Here is the first draft of Steady’s Today screen, the kind almost everyone makes on day one. The title “Today” is 18 px, the habit names are 17 px, the progress text is 16 px, and the streak counts are 16 px in the same grey. Everything is technically there. Nothing tells you where to look.

That is the problem visual hierarchy solves: deciding what people see first, second and third, and making the screen say so without a single word of instruction.

Hierarchy: rank before you style

Before you touch a font size, write the ranking down. For the Today screen it is:

1. The habits still to do, with their check buttons (the job).
2. Progress for the day (“3 of 5 done”).
3. The screen title and date.
4. Streak counts and the tab bar.

You might expect the title to rank first. It doesn’t: people know they opened Steady. The title orients; the habits are the work. Now you have a reason for every size decision that follows.

You have five tools for expressing rank, and they stack:

• Size: bigger reads first. Steps need to be big enough to look intentional, roughly 1.25× or more.
• Weight: bold pulls the eye even at the same size.
• Color and contrast: dark text on a light background beats grey text; one accent color beats several.
• Position: in left-to-right languages people start top-left; the bottom of a phone screen is easiest to reach with a thumb.
• Space: an element surrounded by space reads as more important than one crammed between neighbours.

Use two or three of these together, not all five on every element. If the title is bigger, bolder, colored and boxed, it starts shouting over the habits that actually matter.

Alignment: fewer edges, calmer screens

Every distinct left edge on a screen is something the eye has to register. Draft one of Steady had five: the title at 20 px, progress text centered, habit icons at 16 px, names at 56 px and a button centered at the bottom. It looked busy without being busy.

The fix is to choose a small number of shared edges and commit to them. On Steady, everything left-aligns to a 20 px margin, text inside rows starts on one line after the icon, and right-side controls (check buttons, chevrons) share a right edge 20 px from the screen side. Two edges plus one text column. The screen goes quiet.

Centered text has a place: short, single-line moments like an empty state (“No habits yet”) or a modal title. It works badly for lists and paragraphs, because each line starts somewhere new and the eye has to search for it.

Spacing: proximity is grouping

People read things that are close together as related. This is the Gestalt principle of proximity, and it is the most powerful grouping tool you have, more powerful than boxes and divider lines.

The rule that follows from it is simple to state and easy to break: space inside a group must be smaller than the space between groups.

Applied to Steady: inside a habit row, the name and streak sit 4 px apart; each row is its own card, and cards sit 8 px apart; between the progress summary and the list there are 24 px; between the header and everything else, 32 px. Each step out gets more space, so the structure is visible before you read a word.

Draft two

With a ranking, two edges and stepped spacing, the Today screen changes shape. The title becomes a clear 34 px bold, set apart by space rather than color. The progress line sits in its own block with 24 px around it. Habit names are 17 px semibold in near-black, streaks are 13 px in a muted grey directly beneath, and the check buttons on the right are 32 px circles with a 44 px tap area, the only accent color on the screen. Squint and you see a list with a column of targets on the right. That is the job.

In the exercise below you critique a draft like the first one. Then the next lesson gives you the type scale and color rules that make these sizes and greys consistent instead of guessed.