Spacing

All spacing inside and between the components on a page use multiples of 8 pixels.

Our spacing

We use a scale of 8 pixels in our designs and base grid. This defines the heights and widths of our components and patterns.

Our spacing scale is responsive and adapts based on screen size.

Why we use this scale

The scale keeps the proportions of our page components and white space consistent. It also helps to define the structure and hierarchy of typography and components on all pages.

The scale is flexible and the base value of 8 pixels can be further divided. Our designers can also use spacing of 2 or 4 pixels for smaller designs that will still look consistent. This can be applied to the padding, dimension, or alignment of typography and each component.

Spacing examples

Form inputs placed on a baseline grid of 8 pixels to show their size and spacing
Input boxes on forms measure 48 pixels (6 times our base value of 8 pixels) high for consistency
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

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