Space in Design Systems

From Basics to Expanded Concepts to Apply Space with Intent

Nathan Curtis
Sep 25, 2016 · 9 min read

Space Rivals Color

Space is everywhere. CSS uses properties like padding, margin, and absolute positioning’s left, right, top and bottom to separate objects. Across five libraries (Bootstrap, Salesforce Lightning, Foundation, a previous project, and a current project), I compared occurrence of these space properties relative to property groups of color, size, type, layout and more.

Space rivals color in frequency of use within a library’s style rules

Space Divides Us

Space epitomizes the “I design this way, you build that way” gap between design and dev. We’ve long lamented the red-lined specs sprinkled over our designs. It never feels worth it. Yet they persist, uninformed by our product’s finished material: HTML’s box model.

Space Concepts Are Primitive

We could weave more intentional spatial concepts through design, code, and conversation. But we don’t. We just use T-shirt sizes and call it a day. We can do better. We can replace red-lined, red-faced rage to inset, squish, stretch, and stack our way towards a future of spatial clarity.


Space Fundamentals

Grid ≠ Space. Grid is a Component, Using Space.

Grids are rich with spatial decisions for columns, gutters, outer margins, and responsive nuance.Teams tackle grids early so users can easily make a page. Unfortunately, that’s often when spatial conversations stop.

Grid conventions for margin (blue) and gutter (lime green)

Set a Memorable Base Number & Expectations

Teams setup a memorable, even magical base number to ground all other spatial values. Some teams prefer base 10, because of how we count (due to our ten fingers, by the way). I’ve even seen a team use a base 6 — with helpful factors of 2 and 3 — to make way for an uber-flexible array of 3s, 4s, 6s, 8s, 9s, 12s, 15s, 16s, 18s, 21s, 24s, 32s, and more. Stop the madness!

A set of spacing options, based on 6 but supplying any multiple of 3s & 2s. Really? All these options?
A set of more limited spatial options, based on 16

Scale Options Nonlinearly

With an established base, teams can still slip into random steps (12, 14, 18, 22, 24, 28, 30, 32, …). To prevent that, others use a linear scale (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, …) where each step is a fixed increment. To me, either result is unpredictably used, offering too many choices too close together. When do I use 24 or 28? I dunno.

Linear progression from 4 to 32. Really, you need all these options?
Geometric progression, doubling each step. %s represent proportional use in our library.

Name Each Step for Memorable, Accurate Reuse

I love Gmail’s Compact, Cozy, Comfortable space toggle. So when we built our space system, I suggested we use those labels in our work. Immediately, a teammate challenged me: “What do we call other steps?” My spartan, teeny, and luxurious options didn’t pass muster.

A descriptive label for each stop? Be careful.


Extending a Vocabulary for Space

In reviewing our emerging work, there aren’t many distinct intents for applying space. For example, let’s inspect my favorite component: the card.


Concept 1: (Square) Inset

An inset offers indents content on all four sides like the matte of the framed photo on a wall. It’s use is widespread, across many components at varying sizes, whether our 3-Up module and block messages medium feel, extra compact pills, or spacious footers and mastheads.


Concept 2: Squish Inset

A squished inset reduces space top and bottom, in our case by 50%. While less common than its squared counterpart, a squish occurred frequently in elements (like a button) and cell-like containers like a data table or list item.

Squished inset in buttons, data table cells, and list group items

Concept 3: Stretch Inset

Contrasted with a button or pill’s squish, we found ourselves vertically stretching the insets of textboxes, textareas, and other form elements.


Concept 4: Stack

With all due respect to horizontally scrolled UI, the overwhelming majority scroll vertically. And that means one thing: we stack things. We stack message on heading on data table. We stack modules in rails. We stack copy, pills & toolbars, all in a card, each in a grid. Heck, infinite scroll means infinite stack! We stack, stack, stack.


Concept 5: Inline

We also arrange objects inline, wrapping as they flow like text from the left or right. Such objects — pills, tags, breadcrumbs, and more — may stand alone or stack and mingle with other objects.


Concept 6: Grid

Ah, save the grid for last? As spacing stabilizes, we find ourselves revisiting grid margins and gutters, aligning these spaces with our magical starting point and other uses.


Notional application of insets, stacks, and inlines (or generic spacers — ack!) onto a Card

What We Learned

Using space concepts requires us to adapt to something new. On my team, it took a day for light skepticism to give way to embracing the new model.

Teach a System of Space Visually

Most collaborators can’t see space, a primary reason it’s so arbitrarily applied. But now we’ve got a system: a limited number of concepts, each offering a limited range of options.

A visual reference, akin to a cheatsheet, of spatial concepts

Offer Simple Helpers, and Monitor Use

Don’t be foolish. These six models don’t solve everything. We still adjusted a margin-bottom here and left there from time to time. So, there’s justification for following more intentional space options with more generic alternatives (like $space-m).


Avoid Variable Names with Padding or Margin

When you introduce something more complicated, others justifiably advocate for something familiar, like “Why can’t we use padding and margin in our variable names?” In this case, 2+ space concepts using padding, and those concepts can be applied via left and right properties too. margin is used to stack, grid, and space inline. Plus, how about non-web platforms that don’t use HTML?


Solve Collisions like Line Height Systematically

Simple inset padding and stack margin rules collided with a long-known spatial adversary: line-height. This interaction increments space unpredictably, adding a pixel above and below our simpler inset-default of 16px.


Use Spatial Concepts to Dial Density

With concepts like inset, stack, and grid, you can tune the dials of density with aplomb. Search a repository, find insets and stacks of interest, and extend or override those rules to fine tune display density.

On the left, default spacing. On the right, tuning by increasing just the inset by 50%.

EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Nathan Curtis

Written by

Founder of UX firm @eightshapes. Speaker. Writer. Fan of Arsenal, Hokies. Cyclist & runner. Father & husband. VT & @uchicago grad.

EightShapes

A collection of stories, studies, and deep thinking from EightShapes