Layout

 

Overview

All layouts use an 8px soft grid. This provides flexibility for dynamic content while maintaining a structured approach to spacing.

Space around content creates clear grouping, improves readability, and gives content room to breathe. Consistent spacing establishes a sense of familiarity for the user.

Key Points

• Use spacing in increments of 8p
• User interface components and elements do not sit on a fixed grid, but have spacing in multiples of 8px between them
• Use Compound design tokens for spacing where possible
• Use <Stack> components for consistent spacing in React Native

What is a soft grid?

A soft grid defines the spacing between elements, not a document-wide grid like a rigid grid.

Compound supports multiple platforms and viewports. A soft grid provides more flexibility while maintaining a visual structure.

Space elements in multiples of 8px, depending on the groupings displayed. For platforms that support Compound design tokens, spacing tokens apply to margin, padding, and gap properties.

Typography and dynamic content primarily determine the overall size of elements. Compound components with fixed heights use 8px increments to fit better with the soft grid.

Hard grids

Hard grids resemble old print layouts, where every item on the page aligns with a grid of 8px cells.

On digital products that support dynamic content and various viewport sizes, this isn't easy to achieve, as every element requires specific calculation.

Spacing scales

Layouts vary, and no specific template works for every page. However, as a general guideline, group content based on its content or context. Within that, apply a consistent scale.

This scale should have the smallest space increment to show that elements are grouped and then increase in increments of 8px as the elements change.

Forms example

In a simple form, the space between elements related to an input is 8px – the smallest space increment.

 

The space between input fields then increases to 16px, the next increment up, then 24px between the title and the field.

 

Although this example progresses smoothly in linear steps, some use cases require scaling in larger increments. Three key elements remain consistent:

• Use spacing in increments of 8px for both vertical and horizontal UI elements
• Use narrow and wide spacing to show the relation between groups of elements
• Space elements from the bounding box of one component to the other components

Vertical rhythm

Vertical rhythm refers to the consistent spacing of text and elements along the vertical axis of a page or screen. It ensures that line heights, paragraph spacing, and typographic scales align harmoniously, creating a balanced and readable layout.

While soft grids define the overall spatial structure of a design, vertical rhythm focuses specifically on the alignment and spacing of typography. Using a consistent type scale helps establish a clear hierarchy and improves readability.

The Compound type scale and colour palette meet AA accessibility standards and work together to maintain both clarity and inclusivity.

Just like spacing scales, no single vertical rhythm works for every layout. Adapt vertical rhythm to suit the content and hierarchy. When combined with the soft grid scale, consistent vertical spacing helps group related content and create a cohesive visual flow.

How to check spacing in Figma

1. Select an item within Figma (it can be a frame, component, text block or any element)
2. Press the 'Option' key
3. Move the mouse to another object and the measurement appears on screen

Set the big nudge to 8px so objects move in units of 8. Set this in Preferences > Big Nudge.

Distances

This is a soft grid, so no absolute rules exist, but a good rhythm based on an 8px grid includes:

• 24px, 32px, 48px or 64px between panels, cards and other page elements
• One times the header line height before headers within elements or in runs of text
• 1.5 times line height before body text, bullets and links
• At least 24px above and below buttons

These gaps vary according to the font sizes the design uses. As a general principle, group related information and elements together. For example, a header should always be positioned closer to the content it describes than to the content above it.

This is based on the Gestalt principle of proximity.

When applying these guidelines, watch for excessive gapping or bunching of elements and adjust accordingly.