Responsive spacing

Grid

The Design System uses an 8 pixel grid. This defines the width, height and spacing of all components and patterns we use.

Sizes are multiples of 8 pixels. This is to make sure the components we create in the Design System fit on the grid and align on the page.

Responsive spacing scale

The Design System uses a responsive spacing scale. This is for consistent use of spacing which adapts to different screen sizes.

The scale is made up of of 10 spacing units. Each unit has a specific size for use on large and small screens.

Spacing unit Large screens Small screens
0 0px 0px
1 8px 8px
2 16px 16px
3 24px 24px
4 32px 24px
5 40px 32px
6 48px 40px
7 56px 40px
8 64px 48px
8 72px 56px

Example of spacing applied to Design System components

A text input with overlaid measurements showing padding inside the text input and space between the text input and an adjacent button
The space between text in an input box and between the input box and a button both measure 16 pixels

Why we use this scale

Using the scale ensures the spacing of components and patterns is consistent on digital sites or services.

The scale’s range is enough to balance interactive elements with white space. This helps to define the structure and visual hierarchy in all compositions.

The scale adapts to different screen sizes. This helps to maximise the use of space on smaller screens.

The scale is flexible. You can select units for spacing based on any particular layout. This is for both vertical and horizontal spacing.

Spacing rules

We’re working on guidance to standardise spacing for components often used together, such as form fields. We’ll add this to the Design System when it’s available.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top