Image for post
Image for post

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

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

Space Divides Us

Image for post
Image for post

Space Concepts Are Primitive


Space Fundamentals

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

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

Set a Memorable Base Number & Expectations

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

Scale Options Nonlinearly

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

Name Each Step for Memorable, Accurate Reuse

Image for post
Image for post
A descriptive label for each stop? Be careful.


Extending a Vocabulary for Space

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Concept 1: (Square) Inset

Image for post
Image for post
Image for post
Image for post

Concept 2: Squish Inset

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

Concept 3: Stretch Inset

Image for post
Image for post

Concept 4: Stack

Image for post
Image for post

Concept 5: Inline

Image for post
Image for post

Concept 6: Grid


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

What We Learned

Teach a System of Space Visually

Image for post
Image for post
A visual reference, akin to a cheatsheet, of spatial concepts

Offer Simple Helpers, and Monitor Use


Avoid Variable Names with Padding or Margin


Solve Collisions like Line Height Systematically

Image for post
Image for post

Use Spatial Concepts to Dial Density

Image for post
Image for post
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…

Nathan Curtis

Written by

Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.

EightShapes

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

Nathan Curtis

Written by

Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.

EightShapes

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade