Skip to content
Copyright © 2024 by Westpac Banking Corporation. All rights reserved.

These spacing tokens allow the Design System to consistently define the widths and heights of the spaces used around and within components.

Design system spacing tokens

Spacing tokens help maintain consistency and visual harmony in design systems. They are used to create consistent margins, padding, and distances between various elements within a user interface. By using spacing tokens, designers can establish a systematic approach to spacing, ensuring a cohesive and organised layout across different components. This not only enhances the overall aesthetic appeal but also streamlines the development process by providing a standardised set of spacing values that can be easily applied and adjusted throughout a project.

Visualisation of margin, padding and gap spacing for components.
This image shows where you will find margin, padding and gap spacing

Margin spacing

The margin properties are used to create space around elements, outside of any defined borders.

Padding spacing

The padding properties are used to generate space around an element's content, inside of any defined borders.

Gap spacing

The gap property defines the size of the gap between the rows and between the columns in flexbox, grid or multi-column layout.

ArticlesCopyright © 2023 by Westpac Banking Corporation. All rights reserved.

The grid

Why you should use it and how it works. Read about the responsive grid.

Responsive design

Responsive design is the right approach, influence your project to do the right thing by our customers and adopt it. Read about responsive design.