Spacing

Every part of your interface should be intentional---this includes spacing. While spacing is invisible, it gives air and readability to your interface. Our spacing scale is based on 8px increments.

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.
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 accessibility guidelines by having 8px of spacing between each clickbound.

Spacing hierarchy

Too much information without spacing can overwhelm the user. Sufficient spacing helps the user process information and rest the eyes.

• Less spacing between elements imply they relate to each other.
• More spacing between elements imply they do not relate to each other.
• Sufficient spacing around elements helps users process the information.
• Generally, more spacing around an element makes it seem more important.

Variations

Vertical spacing

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.

Horizontal spacing

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.

Using with components