Whitespace

Whitespace guideline is updated on 26 Feb 2018

Whitespace is one of the fundamentals of design; it creates an emphasis on the key concepts of a product, improves user comprehension and reduces their cognitive overload. It should not be treated as a mere “blank’ space. It is the space in between that glues together the content, lines of text, graphics, figures, icons, and visual objects. But to create whitespace, you don’t necessarily have to use white; any colour is acceptable to provide space between the elements in design.


Applying whitespace to Atomic Design

We built our design system based on the Atomic Design methodology. This method allows us to create interfaces in a deliberate and hierarchical manner. When working with UI components, we need to take spacing into account from both micro and macro levels.

What is Atomic Design?

Atoms illustration
Atoms are the building blocks that live in all of our UIs. These atoms include basic HTML elements like form labels, inputs, buttons, and assets that are functional and indestructible.
Molecules illustration
Molecules consists of simple groups of atoms that function together as a unit. i.e. to create a molecule like a search form for example, you can combine a form label, a search input, and a button together.
Organisms illustration
Organisms are complex UI components constructed by groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections on an interface.

Learn more about Atomic Design here.

Whitespace units

Micro spacing – Spacing between atoms and molecules

Quarter
4px
Half
8px
Regular
16px

Macro spacing – Spacing between organism

One-half
24px
Double
32px
Triple
48px
Quadruple
64px

Page margins

Type Layout
Half
  • Mobile margins
Regular
  • Desktop margins
  • Mobile panel padding
  • Card padding
Double
  • Desktop panel padding
Page margins illustration

Component micro spacing (fixed)

Quarter-spacing

Quarter micro spacing illustration
Micro spacing inside an input field molecule
Quarter micro spacing (compact) illustration
Micro spacing inside a compact icon-text button

Half-spacing

Half micro spacing illustration
Micro spacing inside a listing
Half micro spacing (compact) illustration
Micro spacing between compact checkboxes

Regular-spacing

Regular micro spacing illustration
Micro spacing between job recommendation cards
Regular micro spacing (compact) illustration
Micro spacing between a regular icon-text link

Component macro spacing (fixed)

Component Mobile whitespace Desktop whitespace
Below header 24px 48px
Above footer 32px 64px
Vertical spaces between organisms / sub-sections 16px / 24px 32px / 48px
Vertical spaces between input fields (For both standard & compact) 8px / 16px / 24px 8px / 16px / 24px