Spacing
Working with a common sizing framework is an essential starting point for any project. It is the controlling principle helping to create an organized interface that is tight and easy to understand, while also providing a framework for making design choices.
The 5 × 5 pixel unit
The grid defines a mathematical system for the design and provides rules for the size and placement of objects within it. The number of possibilities for any given decision is reduced, making it faster to explore and iterate solutions.
At Proxyclick we have settled on a base unit of 5 × 5 pixels. This is our smaller size and every measurement becomes a multiple of 5, including column width, margin/paddings, components heights and widths, leading, and spacing between elements.
Choosing objects sizes and spacings to be a multiple of the modular pixel grid helps to ensure that all elements are perfectly aligned vertically and horizontally. This way moving objects around on the canvas is much easier and faster because the math is simple.
With the help of the 5 × 5 pixel grid, we can establish a consistent, repeated pattern that makes the design more balanced and readable.
Font-size and line-height
When typesetting text the line height is always a multiple of 5px.
The font size itself is not related to the spacing unit and thus can have any size. However, it’s important to keep consistency and avoid multiplicity of text sizes. We have a set of common font sizes and line heights detailed in the typography guidelines.
Spacings
We have a set of predefined spacing sizes we use in most cases. Stick to it as much as possible to keep the white space consistency across the different views of the interface.
The largest sizes will adapt depending on the display size.
| Scale | Default | From @medium breakpoint | Note |
|---|---|---|---|
none |
0 px (0 units) | 0 px (0 units) | |
2xs |
5 px (1 units) | 5 px (1 units) | |
xs |
10 px (2 units) | 10 px (2 units) | |
s |
15 px (3 units) | 15 px (3 units) | |
m (default) |
30 px (6 units) | 30 px (6 units) | |
l |
60 px (12 units) | 60 px (12 units) | |
xl |
90 px (18 units) | 90 px (18 units) | |
2xl |
90 px (18 units) | 160 px (32 units) | |
gutter |
20 px (4 units) | 20 px (4 units) | Our default gutter size used for grid layout. |
outer |
20 px (4 units) | 40 px (8 units) | Our default outer margins for layout. |
auto |
auto | auto | Used to align element with auto rule spacing in CSS. |
Adjustments and exceptions
When text is vertically centered the top and bottom padding can be any size. The priority is that the outer height of the element is a multiple of the 5px unit to fit nicely with surrounding elements.
It is sometimes necessary to use a different spacing than our 5px unit inside elements for optical corrections. Especially when dealing with inner elements that deviate from standard sizes. For example icons (24px and 16px) are not fitting with our 5px-grid.
Elements flow
With all our elements and spacings sized with the same 5px unit rule, the whole layout should theoretically maintain itself on a 5 × 5 pixel grid. However, for some elements sizes are unpredictable.
Images or videos for example have their specific width/height ratios. Their height will vary depending on their width and might not fall on a multiple of 5.
In the same way, the text determines the width of the element when placed in a row.