Composition, Grid, and Type Rules

Composition rules are useful when they reveal a problem, not when they make every website look obedient. The following defaults help a designer test hierarchy, relationships, rhythm, and readability. They are heuristics. Accessibility requirements, semantic structure, and browser behavior are firmer constraints.

The red editorial grid on Refframe is deliberately visible. Images and text occupy different cells, outlines expose the structure, and empty cells become part of the rhythm. The layout is expressive because the relationships remain understandable.

Rule 1: one area should win the first glance

Every viewport needs a clear starting point. It may be a headline, product image, task, or current status. If the logo, title, illustration, badges, and primary action all demand equal attention, the reader must construct the hierarchy before understanding the offer.

A useful default is one dominant element, one supporting group, and quieter navigation or metadata. Test it by blurring the screen or viewing it at thumbnail size. Can you still identify the entry point and the next useful action?

The exception is an intentionally exploratory composition such as an art archive or dense index. Even then, provide orientation through navigation, labels, or repeated structure. Confusion is not automatically experimentation.

Rule 2: spacing should describe relationships

Elements that belong together should sit closer than elements that begin a new group. This sounds simple, yet many layouts distribute space according to available room rather than meaning. A label may float halfway between two fields; a button may sit closer to the next section than to the form it submits.

Use a spacing scale and assign roles: space inside a control, space inside a component, space between related components, and space between sections. The values may change by breakpoint while the relationship remains.

Self-check: if borders and background colors disappear, do spacing and alignment still reveal the groups?

Rule 3: align decisions, not every object

A grid creates shared lines that help the eye compare and scan. Choose a small number of meaningful anchors: page container, text column, media edge, card grid, and action alignment. Repeated near-alignments look accidental because the viewer can see the intended line and the miss at once.

Not every expressive object must sit on a column. An image may bleed beyond the container or a heading may span tracks. The exception works when the underlying alignment remains visible elsewhere.

Self-check: draw vertical lines through the main edges. Which lines repeat, and which offsets have a reason?

Rule 4: define grid behavior between frames

A desktop grid and a mobile grid do not explain the transition between them. Document container maximums, gutters, column count, minimum card width, wrapping, ordering, and the point where a composition changes mode.

Figma auto layout supports direction, spacing, padding, alignment, wrapping, and minimum and maximum dimensions. Use those properties to model relationships rather than manually positioning every state. Then inspect the browser implementation between the named frames.

WCAG 2.2 reflow requires content to remain available without two-dimensional scrolling at the equivalent of a 320 CSS-pixel viewport, except where a two-dimensional layout is essential. A composition is not responsive merely because a narrow screenshot exists.

Rule 5: typography roles should remain distinguishable

Define roles before perfecting sizes: display, page title, section title, card title, body, label, and caption. Each role needs a purpose and a consistent relationship between family, weight, size, and line height.

Avoid creating hierarchy only through size. Weight, spacing, placement, width, and color can support the distinction. Conversely, do not make every role visually unique; too many styles remove the rhythm they were meant to create.

Set a readable measure for long text. The exact line length depends on typeface, language, size, and context, so test the actual content rather than applying one universal number. USWDS treats measure as a tokenized design choice, which is useful: body copy, compact cards, and display text can each have an intentional width role.

Self-check: can you label every text style by function without referring to its numeric size?

Rule 6: contrast and scale must survive real use

A pale caption may look refined on a calibrated design canvas and disappear on a laptop in daylight. WCAG 2.2 requires at least 4.5:1 contrast for normal text and 3:1 for large-scale text, with defined exceptions. It also requires text to resize up to 200 percent without losing content or functionality.

Check contrast in states, not only at rest: placeholder, disabled, error, hover, focus, and text placed over imagery. Do not use color alone to communicate status. Increase text spacing and zoom during review; components should grow or reflow rather than clip.

Use references to test a decision

Collect references by the question they answer. A board for editorial grids is more useful when notes explain which example demonstrates alignment, controlled asymmetry, type scale, or mobile transformation.

When reviewing your composition, compare one decision at a time:

• Is the first glance intentional?
• Can grouping survive without boxes?
• Do repeated edges actually align?
• Does the grid define intermediate behavior?
• Are text roles few, distinct, and content-tested?
• Do contrast, zoom, and narrow widths preserve meaning?

A golden rule earns its place only when it helps you notice a failure before the reader does.