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.
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.
Polaris space units
All measurements used across the experience (space, width, height, etc) must reference Polaris space units to guarantee visual consistency and balance.
|Value||Space||px value||rem value|
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.
Repeating the same amount of spacing (left) and using more variation (right).
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.
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.
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
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.
People look for patterns instinctively, and they lean of visual cues like:
Grouping things based on physical appearance (shape, color, size, orientation).
Grouping things based on distance between objects.
Grouping things based on the way they are arranged.
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).
Grouping things that are implicitly enclosed by a larger object.
Grouping things based on how they move.
Grouping things that are explicitly enclosed by a larger object.
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.
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:
Regular rhythm is predictable, which makes it a useful way to organize large sets of objects that have the same level of importance.
Flowing rhythm is organic, and it can bring a high level of scannability to something that would be otherwise a random collection of objects.
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.
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.
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 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.
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.
Home feed overview (left) and location profile analytics (right).
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.
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.
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.