Design system, step 3: spacing

One scale of space, and a job for each step. Every gap printed here is measured from where the browser put the elements at the width you are looking at.

  1. 1. Colour
  2. 2. Type
  3. 3. Spacing
  4. 4. Shape
  5. 5. Buttons, links, forms
  6. 6. The written system

One scale, made by a base and a ratio

Space works the way type does. A base and a ratio are entered once for a phone and once for a wide screen, and the framework works out every step between. Sections use the same steps, multiplied. The scale is the framework's own and it is kept, because nothing on the specimens asked for another. A step with a job is named. The rest exist in the build and are not used.

Inside a section

Above and below a section

Three sections, as the framework spaces them

Below are real sections with no spacing written on them. Each takes its padding and its gutter from the framework. An ordinary section gets the middle step. The closing invitation gets the step above, so the last thing on a page has the most room.

An ordinary section

No class. --section-padding-block

What your conveyancer does, whether you are buying or selling

Conveyancing is the legal work of moving a property out of one owner's name and into another's. Either way you deal with a conveyancer, and the firm's property lawyers stand behind them.

The section after it, on Sand

No class. --section-padding-block

Guides to read before you sign

Written by the property team. Free to download, and yours to keep whether or not you call us.

The closing invitation

.section--l, which is --section-space-l

Send us the contract before you sign it.

Tell us what you are buying or selling. A conveyancer will call you back.

Running copy, spaced by what each element is

Most of the site's copy arrives from the content library as bare headings, paragraphs and lists. The framework spaces them by what they are. A heading sits closer to the text it introduces than to the text before it, and the gap grows with the size of the heading.

At this width

On a phone, 360 wide

Three gaps do the work inside a section

The framework names three gaps by what they separate, so a component asks for a relationship and never for a number. Change the step behind a name and every component follows.

Guides to read before you sign

Written by the property team. Free to download, and yours to keep whether or not you call us.

Guide, PDF. Updated by the property team.

What happens when I buy a property

If you are buying

What happens when I sell a property

If you are selling

Buying property through your super fund

If you are buying through your super fund

Before you sign a contract of sale

If you are buying

What goes into the dashboard

Each line is a real setting in Automatic CSS 4.0.1 and the value to enter. The scale, the section multipliers and the three gaps are the framework's stock. The phone gutter and the gaps in running copy are changed.

Components, 01/10/2026

The style guide as built. Every value printed is what the browser computed.

Pages

Design system