Guidelines

Spacing

Spacing are used to consistently apply margin and padding across elements, components and layouts. With a set scale for spacing, information can be structured to have a consistent and intuitive user interface across the website.

Use of space

For spacing values to be able to conform in the baseline grid and contribute to the vertical rhythm, all sizes must be multiples of 4px. A vertical rhythm starts from a baseline and it's the basis for everything from the font sizes, line height and image sizes. The spacing are always referring to fixed values and thus they are not responsive. All spacing can be used as values for both margins and paddings.

Space is used to create hierarchy and visual relationships. By using the spacing, you can achieve visual grouping and other associations both between and within the components. Along with the typography system, they contribute to an overall visual hierarchy, providing users with a structured way of organising information.

Inner component space

Whenever we need a fixed horizontal or vertical spacing inside components then these spacing values are to be used. All the values are multiples of 4px so they can complement the typography when placed in a 4px vertical grid. The values are based on a geometric progression. There are some exceptions like the 12px/0.75rem and 48px/3rem that they don't fit in the geometric progression, but the need of having was apparent for some rare occasions where the only using geometric progression values wasn't enough.

Layout spacing

Whenever we need a fixed horizontal or vertical spacing to place components in a layout then the below values need to be used. In most cases, the horizontal spacing has been determined to be the 12 column horizontal grid (If there are cases of fixed horizontal spacing, then the spacing need to be used). So the layout spacing values are used mostly to define the vertical relationships between components. These spaces are always fixed.

Spacing values

NameSize
6xl64px - 4rem
5xl56px - 3.5rem
4xl48px - 3rem
3xl40px - 2.5rem
2xl32px - 2rem
xl24px - 1.5rem
l20px - 1.25rem
m16px - 1rem
s12px - 0.75rem
xs8px - 0.5rem
2xs4px - 0.25rem

Do's

  • always use the spacing values when spacing out element (either margin or padding)

Don'ts

  • don't go outside the provided spacing values
  • don't stack the spacing (such as 12px + 16px)

When to use

  • whenever you need to space out the inner parts within a component (when creating a new component that is outside what ECL provided)
  • whenever you need to space out one component from another or other elements outside of a component

When not to use

  • do not use when you want to have responsive spacing since the values are fixed