Layout carries the meaning

---
name: layout-composition
description: "Applies “Layout carries the meaning” as a repeatable product-quality gate. Use during design work when hierarchy, grid, and whitespace do the talking before color does."
---

# Layout carries the meaning

Apply this skill during **Design** work. It supports Any stack.

Hierarchy, grid, and whitespace do the talking before color does.

## Instructions

Compose layouts so structure alone communicates: decide the single focal point of each screen and the order the eye should travel, then enforce it with size, weight, and position — before touching color. Snap every margin, padding, and gap to the spacing grid; a 13px one-off is a bug. Cap the type scale at five sizes per surface and let weight do hierarchy work. Use whitespace as grouping: tighten within a concept, widen between concepts — a border you can delete by spacing better is a border too many. Test by squinting (or blurring the mock): if the hierarchy disappears without legible text, the layout isn't carrying meaning. Generic symmetric layouts are a smell; start from the content's own shape.

## Detect the problem

- Three things competing to be the focal point
- A 13px margin next to a 16px one
- Borders doing the job whitespace should

## Hold the gate

Do not declare this phase complete until every item passes:

- [ ] One clear focal point per screen; the eye path is deliberate, not accidental
- [ ] Everything sits on the spacing grid — no 13px oddballs
- [ ] Type scale ≤ 5 sizes per surface; weight and size carry hierarchy, not color alone
- [ ] Whitespace groups meaning: related things close, unrelated things apart
- [ ] The squint test passes: blur the text and the structure still reads correctly

## Verify the result

Blur the screen (or squint): the hierarchy must still read; the focal point must still win.