Composing a screen

Composition has a dependency order — you cannot encode a hierarchy you have not ranked, or space a group you have not drawn. Run the nine steps before writing markup and write each step's answer down; that list, not the markup, is this skill's output. Each step gives a default and what changes it, and where the answer is judgement it says so rather than fake a number.

When NOT to use

• Not this skill: judging existing work → reviewing-design-work · contrast and accessibility thresholds → frontend-a11y, apca-contrast, wcag-contrast · empty, loading and error states, and whether the chosen steps read → visual-polish.
• Pick values from, never invent: spacing-system, type-scale, component-sizing-principles, line-height-grid, oklch-color-space.
• REQUIRED BACKGROUND: designing-elite-ui, the bar this must survive.

The sequence

1. Rank before you place. (Judgement, no threshold.) What one task is this screen for; what must be read to decide to do it; what to do it; what only a minority asks for. Rank 1 is one thing and one primary action. Rank 4 and below is a disclosure candidate — collect them; step 9 adjudicates each. A list that won't write means too much content: cut, don't add a level.

2. Group before you space. Draw the boundaries as sets, in prose. Name each group in three words or fewer; a group you cannot name is not a group. Separate with space alone, escalating only on a condition: a background shift when step 4's 2× won't fit the container, a shadow only for a floating plane, a border only when two adjacent groups need one.

3. Encode the hierarchy. Give every level one attribute that separates it on its own — size, weight, colour, position, enclosure, whitespace. A second is free and helps; the failure is a level findable only by intersecting two that neighbouring levels each own — a conjunction, and conjunction search is far slower (~60 vs ~3 ms/item). Default: three levels — size, then weight, then colour; for a fourth spend position, enclosure or whitespace before you spend a conjunction. De-emphasise before you emphasise: if rank 1 doesn't stand out, lower 2 and 3.

4. Space by ratio, not by pixel — proximity is relative. Per group compute between ÷ within. Default ≥ 2 — two distinct steps off the ladder, never one step twice. Below 1 the grouping is inverted: items read with the wrong neighbours. Anchor the absolutes too — 16 within / 32–48 between for content, 8 / 16–24 for dense data. Across breakpoints multiply the ramp, never add to it: +8px on desktop drags every ratio toward 1.