Spacing
Our system is designed using a 4 pixel baseline grid. Adopting strict vertical spacing principles allows us to achieve design consistency on the Y axis. It governs the spacing between stacked elements within a component, as well as the spacing in between objects on a page.
Using denominations of 4, between 4 and 80 pixels, there is plenty of scope for creative flexibility and use of negative space while still adhering to an underlying foundation of rules. Whichever spacing rules you use, be consistent throughout the environment.
On This Page
Local Spacing
Spacing between elements within a component is 20 px.
Example: In a contact form, the City and State fields are separated by 20 pixels.
Global Spacing
Between separate but related content types
Total spacing between components should be greater than 20 pixels and less than 40
pixels in order to maintain a distinct separation.
Example: In a contact form, the Address and Phone sections are separated by 32 pixels.
Between distinct content types
Spacing between distinct content types should be a minimum of 40 pixels. Consider
using a horizontal rule to separate distinct types of content.
Example: Within a profile, the Personal Details and Contact sections are separated by 40 pixels.