Spacing & Sizing

Introduction

We are constantly thinking about size, balance, flow, hierarchy, and how the space between visual elements impact the experience. To keep the UI sharp, aligned, and visual spacing consistently beautiful (and therefore perceived to be more usable), a systematic framework is needed for both the sizing of elements and the spacing between elements. For The Alkami Platform, we've chosen to use an 8pt grid framework.

Why A Grid?

Not to be confused with CSS Grid, grids have been a necessary component of modern design since the 1960s and 70s when European designers developed the ever-popular Swiss style of design. Grid systems make design more appealing and help people interpret complex sets of information quickly.

Grid systems within digital design have evolved as technology has developed. In the past, designers created digital products using grid systems rooted in values of 5 or 10. This method has become obsolete thanks to the rising popularity of retina and ultra-high-density screens. On modern screens "one pixel" doesn't necessarily refer to a literal pixel. Instead, these screens are built with thousands, or even millions of pixels, and elements are dynamically scaled 1.5x, 2x, or 3x to fit depending on the display density. Back in the days when 1 pixel actually equaled 1 pixel, sizing and spacing could be anything without negative consequences; but today pixels are relative units.

Why 8?

Imagine a grid of 8x8px. The philosophy behind this spacing framework is that every element should align to the grid. If all type levels are sized at a multiple of 8, and all UI atoms/molecules/organisms are sized at a multiple of 8, then in theory everything will align to the grid by default. 

Even numbers scale to larger even numbers while odd numbers like 5 do not always scale to an even number, so the device ends up either scaling to the closest even number or attempts to render a sub-pixel calculation. Both of these outcomes are undesirable and end up with an unbalanced composition or blurry UI.

The majority of popular screen sizes are divisible by 8, so scaling in increments of 8 offers the best amount of options compared to a system based on 6 or 10. Also the number 8 more easily fits within the golden ratio.

Consistent Visual Rhythm

Great design is supposed to go unnoticed. When a digital interface works in harmony and balance, users enjoy the experience and rarely consciously perceive the UI — even if the UX is lacking. One small way to create this natural balance is through the use of the “golden ratio” which is the mathematical proportion between elements of different sizes that is the most aesthetically pleasing to humans. This ratio is 1:1.618 and can be utilized when designing layouts, using typography, determining the size of objects, and also through spacing between visual elements.

There’s only one thing though: using the golden ratio at small numbers mathematically leads to wonky sub-pixel sizing…so to allow for both the aesthetics of the golden ratio while also using nice round numbers, use the Fibonacci Sequence (each number is the sum of the previous two numbers) starting with the number 8. The golden ratio and Fibonacci Sequence create similar experiences. 

This approach is quickly becoming the industry standard spacing and sizing framework for digital experiences.

Practical Application

Every fixed-size component, from atom to organism, is designed using units divisible by 8. When we refer to the 8-point grid, we are referring to the methodology of using increments of 8 units within our designs. These increments inform the design of both space between elements and size of elements.

Size

Following the principles of Atomic Design (atoms, molecules, organisms), the overall height of a molecule or organism is not defined; but should be dynamically determined by the combination of the size of atoms contained within and the spacing between atoms and parent container. For the purposes of this document, guidelines around sizes are primarily just for atoms. 

A note on typography

Because of the diversity needed within our type system, we have, in a few cases, created styles using line-heights divisible by 4 instead of 8. We also allow a limited use of spacers sized at 4 units when spacing typographic elements. This should not impact the overall visual rhythm created by the 8-point grid.

Spacing

Generally designers like to determine spacing between elements based on feel (what feels right). This is fine when there’s just one or two designers working on a project, but that feeling is hard to pin down consistently as contributors grow over time. For this reason, use the following guidelines to help make consistent spacing decisions:

• Interactive elements: Use a 24-point spacer between actionable elements
• Hero elements: Use a 40-point spacer below hero elements
• Padding within components: Use a 16-point spacer to create padding within components
• Visual groups: Use a 40-point spacer to indicate a break in visual grouping

Specs

Please note: Although pixel units are used in the table below, please keep in mind that these are relative (see Why A Grid?) above.