Layout And Spacing
Group By Relationship
Communicate relationships through proximity, alignment, visual similarity, and shared containers. Begin with spacing. Add borders, surfaces, or cards only when the grouping still needs stronger definition.
Closely related elements need less space, groups need more separation, and major sections need the strongest separation. Avoid nested cards when headings and spacing communicate the same structure more clearly.
Use The Existing Layout System
Use repository spacing tokens, grids, container widths, and breakpoints. Do not select values one component at a time or introduce a conventional grid merely because it is conventional.
Prefer a small number of strong alignment lines. Left alignment is the safest default for normal reading content. Mix alignments only when the content or interaction benefits.
Make Whitespace Functional
Whitespace creates grouping, hierarchy, and readability. Do not fill it reflexively with secondary content.
Too much space can disconnect related information, force unnecessary scrolling, or obscure cause and effect. Judge spacing by the relationships it communicates rather than by how airy the screenshot appears.
Keep Actions Near Their Subject
Place contextual actions near the content they affect. This reduces eye travel, interpretation, and accidental use of the wrong control.
Keep persistent page-level actions predictable and consistent with established product and platform patterns.
Compose Responsive Behaviour Intentionally
Define what should reflow, wrap, stack, scroll, remain fixed, collapse, or move to secondary disclosure. Preserve the primary goal and information needed to make decisions at every supported viewport.
Do not hide required context on mobile or merely stretch a constrained composition across desktop. Use larger space for useful comparison, scanning, or parallel context without filling it gratuitously.
Keep touch targets and separation practical. Check zoom, keyboard focus visibility, and layouts at intermediate widths rather than only named breakpoints.
Design For Real Content
Test components with long names, translated strings, wrapping labels, large and small numbers, missing values, errors, loading states, empty states, narrow viewports, and realistic dataset sizes.
Prefer flexible layout constraints over fixture-specific widths. Do not clip essential information merely to preserve a preferred composition. If truncation is justified, keep the full value available through an accessible, discoverable mechanism.