Please note this section is currently under review. We are in the process of auditing our spacing variables and utilities classes to create a more streamlined approach to applying margins, paddings to components.
Overview
The consistent alignment of elements is paramount for good UI design.
All spacing between interface elements should use the following predefined spacing options to help ensure consistency and speed up design and development time.
The following are the general principles that we used to calculate and define spacing across the design system:
- the base-unit of spacing in the design system is derived from 1rem which in most browsers equates to 16px
- spacing options are generally based on increments of 8px in order to align to an 8px grid
- fonts and line heights are always multiples of 4 to align to a baseline grid of 4px
- generally spacing is always applied as a margin top.
Vertical rhythm
Vertical rhythm is about establishing repetitive spacing and patterns that create a familiar and predictable experience across all pages of a site.
To create vertical rhythm, we use our 8px vertical grid system with a defined set of rules for spacing between, text areas, components, content sections and containers.
Base units
Base units are the fundamental measurements or building blocks used for defining dimensions and spacing in our Design System. In this system, the base units set in rems. There are 3 primary base units, the baseline grid, layout grid and default font size.
- Baseline grid: 0.25rem (4px)
- Layout grid: 0.5rem (8px)
- Default font size: 1rem (16px)
Text alignment with baseline grid (4px increments)
- The baseline grid is a horizontal grid that gives text lines something to sit on, making sure that everything lines up properly across the layout
- In this system, text can increment in multiples of 4px to align with the baseline grid. This means that the line-height, font-size, margin or padding of text elements should be set to 4, 8, 12, 16 pixels etc. This ensures consistency and better vertical rhythm
Components alignment with layout grid (8px increments)
- The layout grid is another horizontal grid, usually with larger increments than the baseline grid. It's used for arranging larger elements such as images, buttons, cards, etc
- Components and elements in this system can increment in multiples of 8px to align with the layout grid. This ensures consistency and symmetry in the layout of larger elements. 8px grid system is quite popular in modern web design for its simplicity and scalability
1rem as default font size
- 1rem is equivalent to the font size of the root element of the document. In most browsers, the default is 16px
- Using rem units is a best practice for responsive design. It allows users to resize text without breaking the layout, and it makes it easier to make global changes to font sizes
The benefits
- Makes designs scalable, so you can maintain proportions and alignments as your design grows
- Simplifies the math and decision-making process, reducing cognitive overload for the designer
- Provides visual harmony, as elements are aligned to a common set of intervals
- Is often more user-friendly, as the consistency can make content easier to read and interact with
Spacing guidelines
Effective spacing is fundamental for clean and balanced design. Our Design System employs a modular scale, using increments based on a base unit, ensuring harmonious spacing across elements.
The guidelines are divided into:
- desktop spacing for screens wider than 992px, optimised for more screen real estate
- mobile spacing for screens narrower than 992px, adapted for smaller displays.
Spacing is expressed in rem units with pixel equivalents for clarity. The guidelines address the spacing between text elements, components, and form fields, to achieve coherence and an optimal user experience.
Please see the tables below for specific spacing values and uses.
Desktop spacing (over 992px)
| Category | Rem | Pixels | Description |
|---|---|---|---|
| Labels spacing | 0.5rem | 8px | Spacing between labels/hints and input fields. |
| List items | 0.5rem | 5px | Space between list items. |
| Paragraph spacing | 1rem | 16px | Space between text in medium-sized components like callouts, and cards for the space between typography. Default space between two paragraphs <p>. Default space between paragraphs <p> and bullet points. |
| Space between text elements | 1.5rem | 24px | Used as a top margin for paragraphs that follow a heading. |
| Component spacing and H4 | 2rem | 32px | Used as the gap between components (buttons, cards, objects in divs) and text content. Used as the gap between form fields. Also used as the spacing above Heading level 4 <h4>. |
| H3 | 2.25rem | 36px | Space above Heading level 3 <h3>. |
| H2 and Field-set | 3rem | 48px | Space above Heading level 2 <h2>. Also used in forms as the gap between field sets and input groups. |
| H1 and Sections | 4rem | 64px | Used for the bottom padding in Page Content. Used for top and bottom padding in Section Content. |
Mobile spacing (below 992px)
| Category | Rem | Pixels | Description |
|---|---|---|---|
| Labels spacing | 0.5rem | 8px | Spacing between labels/hints and input fields. |
| List items | 0.5rem | 5px | Space between list items. |
| Paragraph spacing | 1rem | 16px | Space between text in medium-sized components like callouts, and cards for the space between typography. Default space between two paragraphs <p>. Default space between paragraphs <p> and bullet points. |
| Space between text elements | 1.5rem | 24px | Used as a top margin for paragraphs that follow a heading. |
| Component spacing and H4 | 2rem | 32px | Used as the gap between components (buttons, cards, objects in divs) and text content. Used as the gap between form fields. Also used as the spacing above Heading level 4 <h4>. |
| H3 | 2.25rem | 36px | Space above Heading level 3 <h3>. |
| H2 and Field-set | 3rem | 48px | Space above Heading level 2 <h2>. Also used in forms as the gap between field sets and input groups. |
| H1 and Sections | 4rem | 64px | Used for the bottom padding in Page Content. Used for top and bottom padding in Section Content. |
Padding guidelines
Padding is essential for creating visual separation and improving the readability of components. It prevents elements from feeling cramped and ensures a balanced composition. Similar to spacing, our padding values are based on a modular scale. Below are the padding values used in various components within the design system.
For small components (e.g. buttons, tags)
Small components usually contain short content and require less padding to maintain a compact appearance.
Rem | Pixels | Typical use case |
|---|---|---|
0.25rem | 4px | Minimal padding for very compact components such as icon buttons. |
0.5rem | 8px | Standard padding for general purpose small components like buttons. |
0.75rem | 12px | Increased padding for small components that need a bit more breathing space. |
For medium components (e.g. cards, callouts, alerts)
Medium components usually contain more content than small components and need adequate padding to prevent clutter.
Rem | Pixels | Typical use case |
|---|---|---|
1rem | 16px | Standard padding for medium components, creating clear separation between the content and edges. |
1.25rem | 20px | Slightly larger padding for situations where more separation is needed within medium components. |
1.5rem | 24px | Ample padding for medium components that contain varying content types like images and text. |
For large components (e.g. modals, promotional panels, banners)
Large components often encompass a variety of elements and require substantial padding to ensure a clear hierarchy and pleasant aesthetic.
Rem | Pixels | Typical use case |
|---|---|---|
2rem | 32px | Standard padding for large components, helping to balance the internal content with the surrounding space. |
2.5rem | 40px | Increased padding for significant separation of content within large components. |
3rem | 48px | Spacious padding for complex large components, like modals with forms or rich content. |
| 4rem | 64px | Extra spacious padding for special cases like promotional banners with impactful visuals. |
Research and rationale
Our spacing system was developed by using the spacing and grid system is based on the one created by Digital Transformation Agency's Design System. We broke down all the spacing values, expanded these to work across our new components and developed more specific guidelines for how this spacing would apply to UI elements on a page.
Most of the spacing values we used were the defaults that were inherent in the DTA Design System however they were just not exposed in a way that made it easy for users to see as whole or how they should be applied across a whole page layout.
We referred to our spacing guidelines as our vertical rhythm.
We found that the advantage of having a method like this to define spacing is that it allows designers and developers to speak a common language and lessons the risk of inconsistency when designing new components or patterns. It makes design scalable, simplifies the decision making process for designers and creates more visual harmony across our page layouts
Consistency and visual hierarchy
The spacing values are based on a modular scale, which helps create a consistent vertical rhythm. Consistent spacing enhances the visual hierarchy, which in turn improves the readability and scan-ability of the content. A List Apart has a detailed article on modular scales and meaningful typography.
Accommodating user preferences
By using rem units, the design can adjust to the user's browser font-size settings. This is also especially useful for creating responsive designs that adapt to different screen sizes and resolutions, accessibility and user preferences.
Harmonious design with 8-point grid system
The use of 8px increments is part of the widely adopted 8-point grid system. This grid is popular because it provides a simple, flexible way to size and align elements, and it works well with various screen sizes. Google's material design also uses an 8dp grid system.
Improved legibility and content grouping
With proper spacing, you allow for elements to be grouped or separated logically. This is important for the Gestalt principles where the human eye seeks to find order and can group elements based on proximity. Nielsen Norman Group’s article on proximity as a Gestalt principle explains this in detail.
Focus and attention
Adequate spacing, especially around headings and between sections, helps guide the user's focus and attention. It makes it easier to distinguish different sections and comprehend the structure of the page.
Lobotomised owl ( * + * )
We use a technique called lobotomised owl ( * + * ) to add spacing above components. This only occurs when the component follows another element. This allows us to apply a consistent spacing throughout the page.
If an element is the first child or doesn't follow an element it won't receive a margin-top.
References
Brown T (2023) More Meaningful Typography, A List Apart, accessed 3 July 2023.
Hayley A (2020) Proximity Principle in Visual Design, Nielsen Norman Group, accessed 3 July 2023.
W3C (2018) Web Content Accessibility Guidelines (WCAG) 2.1, World Wide Web Consortium, accessed 10 April 2023.
Material Design (n.d.) Spacing methods, Material Design, accessed 3 July 2023.
Digital Transformation Agency (2018) Core overview, Gold Design System (Formerly DTA), accessed 10 April 2023.
Last updated: August 2023