Skip to main content

Spacing and guidelines

All AEMO components follow a 4 px spacing system. 4 pixels is small enough to allow for fine-grained control over spacing, yet it’s still large enough that the spacing is clearly visible and easy to work with. By following a set spatial convention, we decrease design complexity while increasing consistency across the application.

Padding and margin

Geometric progression

Building on the 4px base unit, the main foundation of your spacing system is the spacing scale. This scale is a limited set of spacing values that is used to lay out UI elements in a consistent way.

Each spacing value is a multiple of the base unit and ranges from 0px to 64px allowing flexibility whilst still maintaining consistency.

DemoValueSCSS VariablesVisual

Standard spacing guidelines

The templates come with the navbar, header and footer by default for any UI design. The following guidelines can help create a consistent UI across AEMO’s applications.


The spacer-2 calculated as 8px or 0.5rem is for atomic level elements or siblings. These are the basic block that creates a component. Example would be spacing between checkboxes/radios.


The Spacer-3 calculated as 16px or 1rem is for component level contents between atoms and molecules in a related group. Example would be spacing between a content level header and its table or table and pagination.


The Spacer-4 calculated as 24px or 1.5rem is for organism level contents. This spacing is used between two blocks of data that provide different value to a UI ideally grouped under separate heading to provide context to each block.


The Spacer-5 calculated as 32px or 2rem is for landmarks. Since the template comes with these landmarks, the 2rem spacing can be used to separate the content from these landmarks.


Spacing demo

Spacing principles

A layout is constructed using UI elements and components as well as the space between them. The relationships between elements can be easily understood by customers which make it simpler for them to scan and comprehend the content on the page by utilizing the following spacing principles.

Group by similarity

Users expects elements to be grouped semantically ,our grouped in such a way that it provides greater context around the information provided.

Similarity grouping

Group by proximity

The distance between elements creates semantic meaning. Elements that are placed close to one another are assumed to be related than those which are not. For example placing elements of an empty state illustration gives the indication that the elements included are related.

Proximity grouping

Order and hierarchy

While scanning through the UI, user tend to look for order in the visual information provided. Difference in size and space reduces the mental effort required by the use to scan the layout. The sizing of different elements lends more importance to larger elements by drawing focus in comparison to smaller-sized elements. Similarly, varying the amount of whitespace around an element can be used to group elements together or separate them to impart greater importance.

Order and hierarchy

See also