Composition

Method

1. Name the job — the one primary action or piece of information.
2. Choose the layer — base / raised / sticky / dropdown / overlay / toast. Default: base.
3. Choose the dominant alignment method — left edge by default; add a second (spine/baseline) only if needed.
4. Establish the primary edge — one left edge for title, sections, rows, fields.
5. Set vertical rhythm — space in multiples of 4px; type roles carry size/leading.
6. Group by proximity — tight spacing = related, loose = separated.
7. Only then add a container — a card is one step of depth, not two.
8. Spine for mixed-bound controls — align icon/control centres to a vertical spine; keep text on the primary edge.
9. Correct optically — trim top padding under a leading title; optically centre icons.
10. Design every state — rest / hover / active / focus-visible / disabled / loading / selected / empty / error.
11. Audit — count alignment rules/methods and depth layers; collapse whichever exceeds what the content needs.

Layer stack