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?
Learn more about Atomic Design here.
Micro spacing – Spacing between atoms and molecules
Macro spacing – Spacing between organism
Component micro spacing (fixed)
Component macro spacing (fixed)
|Component||Mobile whitespace||Desktop whitespace|
|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|