Spacing

Every part of your interface should be intentional, this also includes spacing. While spacing is invisible, it gives air and readability to your interface.

Guidelines

Spacing is used to apply margin and padding across all platforms. The EDS has a predefined set of spacers. These predefined sizes will ensure consistency across interfaces. Our spacing scale is based on 8px increments.

The spacers XX Small and X Small are only to be used inside of components, while the spacers Small up to XXX Large can be used both within and between components.

• Always make sure to follow the  by having 8px of spacing between each clickbound.

There are eight spacers to choose between: XX Small, X Small,  Small, Medium, Large, X Large, XX Large and XXX Large. The spacers XX Small and X Small are only to be used inside components, while the other spacers are to be used in layouts.

Usage

When expanded use tab to review current page headings and press enter or space to navigate to the selected section

DESIGN TOKENS

Spacing

Every part of your interface should be intentional, this also includes spacing. While spacing is invisible, it gives air and readability to your interface.

Figma

How to add

1. Locate the Assets tab in the Layers Panel.

2. There are two ways to locate the Spacing component needed:

   1. Use the search bar to search for a component grouping name or variation name.

   2. Scroll through the folders list and open the relevant grouping.

3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

1. Select the Spacing in the frame/artboard.

2. Resize the component by dragging the component from one end while not holding shift.

   1. Horizontal components will only be resizable horizontally and Vertical components will only be resizable vertically.