This document discusses the importance of spacing in design systems. It recommends establishing a geometric progression scale for spacing with a base unit of 24px to provide consistency across interfaces. It warns of pitfalls like ignoring typography, overly colorful spacers, and overly prescriptive rules. The document advocates taking the guesswork out of spacing for designers and engineers and references other design systems that emphasize spacing best practices.

1. Copyright 2019 Virtru Corporation
Designing the Invisible:
Space in Design Systems
Art Klepchukov

2. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation
When should you consider
a design system?
| PRIVATE & CONFIDENTIAL 2

3. Copyright 2019 Virtru Corporation
Virtru Email Protection
- Gmail (browser extension)
- Outlook (native app)
- iOS & Android (native app)
Google Drive Encryption (browser
extension)
Secure Reader (web app)
Administrative Dashboard (web app)
… and more
Image (up to 480px X 540px)
| PRIVATE & CONFIDENTIAL
Design & Product at Virtru
3
We help more than
5,000 organizations
worldwide protect
data wherever it’s
created or shared so
they can collaborate
with confidence.

4. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL 4
When should you consider
a design system?
When you grow
beyond one interface
+ and +
are willing to invest
in consistency.

5. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation
Quick Sketch demo of
Virtuoso Design System
| PRIVATE & CONFIDENTIAL 5

6. Copyright 2019 Virtru Corporation
Atoms
No interactions
Organisms
> 1 interaction
Molecules
Only 1 interaction
A OM
| PRIVATE & CONFIDENTIAL 6
Terminology grounded in interactions
Why? No debating where things belong.

7. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL 7
Spend the most time on the basics;
they’ll propagate the most.

8. Copyright 2019 Virtru Corporation
Image (up to 480px X 540px)
| PRIVATE & CONFIDENTIAL
Conscious spacing in action
TBD TM side-by-side
8

9. Copyright 2019 Virtru Corporation
Image (up to 480px X 540px)
| PRIVATE & CONFIDENTIAL
Conscious spacing
Geometric Progression: 24px base
9

10. Copyright 2019 Virtru Corporation
Space affects every interface:
- Margins
- Paddings
- Borders & radii
- Shadow depths
- Gutters
- Default widths & heights
But often chosen ad-hoc for any
given interface
Image (up to 480px X 540px)
| PRIVATE & CONFIDENTIAL
Applying a spacing scale
10

11. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation
How did we pick this scale?
| PRIVATE & CONFIDENTIAL 11

12. Copyright 2019 Virtru Corporation
Image (up to 480px X 540px)
| PRIVATE & CONFIDENTIAL
Pitfall: ignoring typography
default spacer = default line height
establishes
vertical
rhythm
12

13. Copyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL
Pitfall: overly colorful spacers
Otherwise, spacers distract from UI
Redlining is a last resort
(due to how long it takes)
Instead:
Stick to one contrasting color & opacity
13

14. Copyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL
Consider a mobile spacer to help build and
test any tap-friendly symbols.
Don’t forget minimum spacing between
tap-friendly elements.
Ideally: it fits in your scale as well.
Pitfall: ignoring mobile accessibility
14

15. Copyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL
Spacing symbols:
● inserting & positioning takes too long.
(Yes, even with Sketch Runner.)
● yet another thing to manage in your
messy layers list
● not fun to inspect for engineers
Instead: change Sketch nudging so it
fits your spacing scale.
Pitfall: relying on Sketch symbols too much
15

16. Copyright 2019 Virtru Corporation
Image (up to 480px X 540px)
| PRIVATE & CONFIDENTIAL
Pitfall: overly prescriptive
We welcome all integers
that are factors of 24!
Why?
● Trust designers to pick the right
number in the right context
● Flexible given any kind of information
density or third-party UI we can’t
control or change
● Easy to communicate to engineers
16

17. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL 17
Take most of the guesswork
out of spacing for designers & engineers.

18. Copyright 2019 Virtru Corporation
Space in Design Systems (2016)
by Nathan Curtis
bit.ly/2AMGccm
● “Space Rivals Color”
(in Nathan’s CSS analysis)
● “Space epitomizes the ‘I design this way,
you build that way’ gap between design
and dev.”
● “Grid ≠ Space.
Grid is a Component, Using Space.”
…most space conversations stop at grids
| PRIVATE & CONFIDENTIAL 18
Required Reading

19. Copyright 2019 Virtru Corporation
QuickBooks
Design System
designsystem.
quickbooks.com/
foundations/spacial-units/
IBM
Carbon
carbondesignsystem.com/
guidelines/spacing/
WeWork
Plasma
http://plasma.guide/
layout-spacing/
| PRIVATE & CONFIDENTIAL 19
Space in other design systems

20. Copyright 2019 Virtru CorporationCopyright 2019 Virtru Corporation | PRIVATE & CONFIDENTIAL 20
Questions?
Art Klepchukov