Layout

A layout is a set of decisions about where things sit and how they behave when the space changes. Start from the content: measure the longest line, count the columns the page actually needs, and let the grid follow from that rather than from a number picked in advance.

Most interfaces need two or three layout modes, not twelve. Pick the widths where the design genuinely breaks, write a breakpoint at each one, and resist adding more. Fewer modes are easier to test and easier for the next person to reason about.

Spacing

Spacing carries more meaning than most people expect. Related items sit close together, unrelated items sit further apart, and a reader groups them before reading a single word. Getting the gaps right removes the need for most boxes and dividing lines.

A short scale keeps things honest. Four or five steps, each a clear jump from the last, is usually enough for an entire product. When a value between two steps feels necessary, the problem is often the structure rather than the scale.

Typography

Body text does the work, so set it first. A comfortable reading size, a line height with room to breathe, and a measure of roughly sixty to seventy characters will carry a page further than any headline treatment.

Headings then need only enough contrast to be found while scanning. Weight and space around the line do that job more quietly than size alone, and they hold up better on a narrow screen where large type wraps awkwardly.

Colour

Work out the neutrals before the accent. A page is mostly background, text and lines, and if those three sit at the right contrast the accent can be used sparingly for the one thing that matters on each screen.

Check contrast against real content rather than swatches. Text over an image, a disabled control, and a label on a coloured surface are the places where a palette usually fails, and they are the places a swatch grid never shows you.

Motion

Motion is useful when it explains a change. A panel that slides from the edge it belongs to, or a list that reorders visibly, tells the reader what happened without any copy. Motion with nothing to explain is decoration, and decoration wears out quickly.

Keep interface durations short. Anything the reader triggers deliberately should settle within a few hundred milliseconds, and every animation needs a reduced-motion path that lands on the same final state instantly.

Testing

Test the interface the way it is used: with a keyboard, at a small width, with the text scaled up, and with a slow connection. Those four passes find more real problems than a long list of visual checks.

Write down what you found and fix the cause rather than the symptom. A component that breaks under long content will break again next quarter with different content unless the underlying assumption is removed.