Skip to main content

Foundation

Spacer

Consistent spacing makes clean and clear interface

banner-Spacer

Why Spacers Matter?

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.

Spacing units

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.

spacing units

Platform spesific

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.

Spacer Type

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:

  • Inline spacing
  • Stack spacing

Inline spacing

inline spacing

Stack spacing

stack spacing