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
| Name | Size |
|---|---|
| 6xl | 64px - 4rem |
| 5xl | 56px - 3.5rem |
| 4xl | 48px - 3rem |
| 3xl | 40px - 2.5rem |
| 2xl | 32px - 2rem |
| xl | 24px - 1.5rem |
| l | 20px - 1.25rem |
| m | 16px - 1rem |
| s | 12px - 0.75rem |
| xs | 8px - 0.5rem |
| 2xs | 4px - 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