Layout and spacing

Layout problems are often the root cause of interfaces feeling "off" even when colours and fonts are fine. Space is a design material — use it with intention.

This is one of a pair: layout answers where things sit, motion and polish answers how they behave. A decision that needs one usually needs both.

Assess the current layout

Spacing

• Is spacing consistent, or arbitrary? (Random padding and margin values.)
• Is all spacing the same? Equal padding everywhere means no rhythm.
• Are related elements grouped tightly, with generous space between groups?

Visual hierarchy

• The squint test: blur your eyes — can you still identify the most important element, the second, and the clear groupings?
• Is hierarchy achieved effectively? Space and weight alone can be enough — but is the current approach working?
• Does whitespace guide the eye to what matters?

Grid and structure

• Is there a clear underlying structure, or does the layout feel random?
• Are identical card grids used everywhere — icon, heading, text, repeated endlessly?
• Is everything centred? Left-aligned with asymmetry feels more designed, though it is not a hard rule.

Rhythm and variety

• Does the layout have visual rhythm — alternating tight and generous spacing?
• Is every section structured the same way?
• Are there intentional moments of surprise or emphasis?

Density

• Too cramped — not enough breathing room?
• Too sparse — whitespace without purpose?
• Does density match the content type? Data-dense UIs need tighter spacing; marketing pages need more air.

Improve it systematically

Establish a spacing system

• Use a consistent scale — a framework scale (Tailwind), rem-based tokens, or a custom set. The specific values matter less than the consistency.
• Name tokens semantically if using custom properties: --space-xs through --space-xl, not --spacing-8.
• Use gap for sibling spacing instead of margins — it eliminates margin-collapse hacks.
• Apply clamp() for fluid spacing that breathes on larger screens.

Create visual rhythm

• Tight grouping for related elements — 8–12px between siblings.
• Generous separation between distinct sections — 48–96px.
• Varied spacing within sections. Not every row needs the same gap.
• Asymmetric compositions — break the predictable centred-content pattern when it makes sense.

Choose the right layout tool

• Flexbox for 1D layouts: rows of items, nav bars, button groups, card contents, most component internals. Simpler and more appropriate for the majority of layout tasks.
• Grid for 2D layouts: page-level structure, dashboards, data-dense interfaces — anything where rows and columns need coordinated control.
• Do not default to Grid when Flexbox with flex-wrap would be simpler.
• repeat(auto-fit, minmax(280px, 1fr)) gives responsive grids without breakpoints.
• Named grid areas (grid-template-areas) for complex page layouts — redefine at breakpoints.

Break card-grid monotony

• Do not default to card grids for everything — spacing and alignment create visual grouping naturally.
• Use cards only when content is truly distinct and actionable. Never nest cards inside cards.
• Vary card sizes, span columns, or mix cards with non-card content to break repetition.

Strengthen visual hierarchy

• Use the fewest dimensions needed. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add colour or size contrast only when simpler means are not sufficient.
• Be aware of reading flow — in LTR languages the eye scans top-left to bottom-right, but primary action placement depends on context (bottom-right in dialogs, top in navigation).
• Create clear content groupings through proximity and separation.

Manage depth and elevation

• Create a semantic z-index scale: dropdown → sticky → modal-backdrop → modal → toast → tooltip.
• Build a consistent shadow scale (sm → md → lg → xl). Shadows should be subtle.
• Use elevation to reinforce hierarchy, not as decoration.

Optical adjustments

If an icon looks visually off-centre despite being geometrically centred, nudge it — but only if you are confident it actually looks wrong. Do not adjust speculatively.

One page shell, one measure

An application's pages must open the same way, so changing screen does not mean changing bearings. One shell owns the reading measure, the responsive gutters and the vertical rhythm; pages never set their own.

<PageShell
  title="Accounts and roles"
  lead="The accounts, their roles, and the invitations they are born from."
  action={<Button size="sm">Invite</Button>}
>
  {children}
</PageShell>

The primary action sits on the title line — not in a toolbar, not in a section further down. One page, one primary action, and it is where the eye already is.

Align it to the title, not to the bottom of the header. items-start, never items-end. Aligned to the bottom, the same command sits at a different height on every page depending on how long the neighbouring sentence happens to be, and a control that moves between screens is a control you have to find again each time.

No eyebrow above the title. A small label repeating what the navigation already said pushes the title down and adds a line nobody reads. Weight and space carry the hierarchy.

The lead is one sentence at ~70 characters of measure. Where a navigation list exists it serves both the page and the card linking to it, so it must survive being read in two places. Three lines of it turns a scannable screen into a paragraph.

Two named measures, and that is the budget.

--content-readable: 1088px;  /* working pages: forms, registers, detail screens */
--content-max:      1280px;  /* dashboards and anything chart-shaped */

A third measure means somebody wanted one page to be special, and specialness does not survive the next screen. Never override the measure inline: a page that widens itself stops matching its neighbours, and the mismatch is visible the instant you navigate between them.

Never

• Use arbitrary spacing values outside your scale.
• Make all spacing equal — variety creates hierarchy.
• Wrap everything in cards. Not everything needs a container.
• Nest cards inside cards — use spacing and dividers for hierarchy within.
• Use identical card grids everywhere.
• Centre everything.
• Default to the hero-metric layout (big number, small label, stats, gradient) as a template. A prominent metric can work when it shows actual data, not decorative numbers.
• Default to CSS Grid when Flexbox would be simpler.
• Use arbitrary z-index values (999, 9999) — build a semantic scale.

Verify

Space is the most underused design tool. A layout with the right rhythm and hierarchy makes even simple content feel polished and intentional.