Space

Consistent spacing creates visual balance that makes the user interface (UI) easier for merchants to scan. Apply consistent spacing to improve the quality of the UI.


Space is the distance between objects in your design. It should be used to organize information in a way that is familiar and easy to scan, while helping reinforce its purpose.

A visual example of a polaris unit

Principles

Illustrations of blocks representing each principle

1. Make content easy to understand.

Guides merchants' eyes, rather than expecting them to decipher all the information.

2. Augment the purpose of a page.

Make sure the information is organized in a way that makes clear its function.

3. Make it feel integrated.

Merchants experience pages, space should feel like a small part of a bigger system. Only introduce uniqueness when the benefits massively outweigh the cost of inconsistency.


Spacing tools

Polaris space units

All measurements used across the experience (space, width, height, etc) must reference Polaris space units to guarantee visual consistency and balance.

A visual example of a polaris unit

Space scale

ValueSpacepx valuerem value
0--p-space-000
0.25--p-space-02510.0625
0.5--p-space-0520.125
1 (base)--p-space-140.25
2--p-space-280.5
3--p-space-3120.75
4--p-space-4161
5--p-space-5201.25
6--p-space-6241.5
8--p-space-8322
10--p-space-10402.5
12--p-space-12483
16--p-space-16644
20--p-space-20805
24--p-space-24966
28--p-space-281127
32--p-space-321288

Polaris units are more dense at a small scale, and less so as dimensions increase. This is intentional to provide a good range to work with, but you must be deliberate in the units you decide to pair. We encourage designing with rhythm and contrast to achieve clear visual hierarchy. This often means skipping at least one unit in the scale when you’re pairing different spaces.

Examples of different variations of spacing

Repeating the same amount of spacing (left) and using more variation (right).


Column grid

The column grid is meant to give teams agency for page layouts, while still providing low level constraints that ensure consistent pages across the experience. This means teams should feel empowered to experiment with layout, as long as they use the column grid as a grounding element.


Breakpoints

The grid adapts to the viewport width. The amount of columns will change depending on how much space there is. This is a recommendation for how much should be displayed horizontally. Less columns means less content.


Screen sizeColumnsMarginGutterNavigation
XS
0-489
Phones
61616Collapsed
SM
490-767
Small tablets
61616Collapsed
MD
768-1039
Tablets
62416Collapsed
LG
1040-1399
Laptops
122416Visible
XL
1440+
Desktops
123216Visible

The grid is meant to serve as a point of reference for page level design and alignment, but this doesn’t need to apply to component level layouts.


Essentials for designing with space

Gestalt principles

The perception of any given page goes beyond the individual elements presented, and the space between them. People’s perception is heavily influenced by their own expectations and motivations. When designing, it’s key to consider that people look for patterns, and will always perceive things in their simplest form. For instance, a bunch of similar items stacked on top of each other will likely read as a list.

Different types of list items, such as menus, popovers, and dropdowns


People look for patterns instinctively, and they lean of visual cues like:

Similarity

Grouping things based on physical appearance (shape, color, size, orientation).

Index table


Proximity

Grouping things based on distance between objects.

Customers and orders page


Continuity

Grouping things based on the way they are arranged.

Tag multiselect popover and media card

Shadows inside popovers act as visual cues to indicate additional content when scrolled (left). Cards placed horizontally in a media carousel communicates related topics (right).


Closure

Grouping things that are implicitly enclosed by a larger object.

Order details page


Common fate

Grouping things based on how they move.


Common Region

Grouping things that are explicitly enclosed by a larger object.

Customer details card

Because people perceive these instinctively, we can use them as tools to create hierarchy, visual rhythm, and guide the user's eye to what’s important.



Rhythm

Alternating between objects and space creates a pattern. Repeated patterns create visual rhythm, which can be used to effectively direct the viewer’s attention. Anything can establish rhythm: space, typography, icons, color, shape, and size.

Like in music, different types of rhythm serve a different purpose, in design there’s three worth highlighting:


Example of data table

Regular rhythm is predictable, which makes it a useful way to organize large sets of objects that have the same level of importance.


Location profile page

Flowing rhythm is organic, and it can bring a high level of scannability to something that would be otherwise a random collection of objects.


Home page with progressive disclosure card

Progressive rhythm is a gradual progression, and is very effective in giving the eye a path to follow, along the progression. This is great to establish hierarchy and aid the user through a series of steps.

Rhythm plays another job in designs, it’s the norm that enables the introduction of variation and points of attention, otherwise known as contrast.



Density

The overall perception people get from the space between information as a whole is density. It can range from tight to loose, and there is a very different purpose for each end of the spectrum.

Examples showign tigher versus looser spacing

Tighter spacing (left) makes it easier to scan and comprehend large sets of data, like lists and tables. It also naturally enables one to fit more elements in a given page. Looser space (right) can help attract the user attention and make a layout feel more user-friendly.



Contrast

Contrast is meant to create sticking points that help make content easy to scan, highlight important pieces of information, or just to give viewers a moment to breathe.

Marketing page and empty state

Highlights (left): Callout cards are used to encourage merchants to take an action related to a new feature or opportunity.

Breather moment (right): Empty states provide explanation or guidance to help merchants progress.

Contrast can play a role at very different levels, but it must be used sparingly, otherwise its effect gets diluted.

Examples on the analytics page to show contrast

Home feed overview (left) and location profile analytics (right).



Optical adjustment

Sometimes software will say two objects are aligned, or that they have the same size, but visually they don’t feel like that. This happens because computers aren’t great at perceiving visual weight or simultaneous color contrast, so we can’t fully rely on them to create balanced compositions.

That means designers must make optical corrections, using Polaris units until the space feels balanced. Some things to keep an eye out for:


Visual weight ≠ Size

Two things can have the same size, but feel unbalanced.

Before and after comparison of optical adjustment applied to a button

Without optical adjustment, the disclosure icon appears too far from the right edge of the button. After optical correction, the perceived spacing is more balanced.

Before and after comparison of optical adjustment applied to an icon

The square icon seems larger compared to the circle icon without optical adjustment, however, they in fact have the same size and diameter. The shapes look visually closer to each other after decreasing the size of the square.


Colors affect each other

Two things can have the same colour, but feel unbalanced.

Before and after comparison of applying the same colour versus slightly different colours to a banner component

    đź‘‹

    We've made some improvements to our website to help you build more efficiently with Polaris.