Spatial markup

Overview

Spacing is the negative area between components and between elements within components.

Designers can apply layout spacing tokens using Figma variables. We also offer layout spacing options directly inside some of our Figma components such as tile, tile select, and card.

Developers can implement spacing options using the spacing properties embedded within container components such as Box. Alternatively, they can apply layout spacing tokens directly using CSS.

Spacing scale

When laying out a page, use spacing values based on multiples of 8 pixels. This creates a consistent rhythm and visual harmony across the interface, making layouts feel balanced and easier to scan.

Layout tokens

The following set of layout tokens is based on the multiples of 8px scale. Applying these tokens instead of raw values has several key benefits:

• Selecting from predefined values speeds up design work
• Consistent application makes designs scalable and maintainable
• Developers use the same tokens as designers, leading to smoother handovers
• Layouts adjust automatically when token values are updated by the Design System Team

| --- | --- | | global.space.layout.3xs | 8px | | global.space.layout.2xs | 16px | | global.space.layout.xs | 24px | | global.space.layout.s | 32px | | global.space.layout.m | 40px | | global.space.layout.l | 48px | | global.space.layout.xl | 56px | | global.space.layout.2xl | 64px | | global.space.layout.3xl | 72px | | global.space.layout.4xl | 80px |

Spacing in practice

Common patterns

To help you maintain consistency across layouts, we use predefined spacing rules for our common patterns.

For example, any components above a data list (such as bulk actions) should be 24px away, while those below the data list (such as pagination) should be 8px away.

Predefined rules for spacing between bulk actions, a data list, and pagination

Low-density spacing

Low-density spacing works well for pages where the user needs to scan the content without being overwhelmed.

The following example shows how this can be applied to lay out a complex home page.

Example of low-density spacing.

High-density spacing

To increase the usable space in data-heavy pages, the layout can be condensed by reducing the spacing scale values by 1 step. High-density spacing should apply consistently across breakpoints, and should adhere to predefined layout rules.

The following example shows how the spacing in a data-heavy page can be intentionally kept very tight in order to fit as much content on the screen as possible.

Example of high-density spacing.

Vertical flow

Consistent vertical spacing creates a clear visual hierarchy and provides predictable patterns for designers and developers. It relies on a systematic approach to vertical spacing.

Core principles

• Use the multiples of 8px scale for vertical spacing between components.
• Apply larger gaps to separate sections (24px and above).
• Apply smaller gaps to separate closely related elements (8px or 16px).

Recommended vertical flow spacing

Example of vertical flow on a page.

Margins

Left and right margins are used to define a page's readable canvas. They follow responsive breakpoint rules, ensuring content remains legible across different screen sizes.

Top and bottom margins are used to maximise available screen space without compromising user experience. For this reason, they do not need to be the same as the left and right margins.

Important: All margins should be a minimum of 16px.

Margins at different breakpoints

Margins in practice

Example of margins on a 1600px page.