Spacer

Spacer is an important part of visual design to make functional layouts, deliver clear design and encourage visual rhytm. Provides easy-to-understand, a label telling us what’s the pixel value of the vertical or horizontal space and code variables to apply and maintain space within and between a components.

Depending on the container, we recommend spacing the component using one of the following units (in pixels). In basic units the 4 pixel grid allows components to scale consistently across all display sizes on the website platform.

Our spacer is built on a base increment of 16px, with factors of 4px and 8px. You’ll notice that dekstop and mobile spacing units are slightly different. This reflects the design needs of each platform. Use these increments to maintain consistency.

Resisting the temptation of introducing spacers into our early design process is very important. To further our understanding and communication of space. We use basic spacers for anywhere we need to apply horizontal or vertical space in our layouts.

We reference 2 types of space and apply them in 2 ways: