Space

We use plenty of negative space to aid comprehension and make content feel approachable.

Once upon a time, people skimped on negative space to reduce the amount of scrolling. Now we know that the notion that users don’t scroll is a myth. Using generous padding and negative space makes the interface feel roomy and helps users focus on key messages.

Alternating background colors

We use alternating background colors to show different types of information. Light gray is the default background color. We use white backgrounds for:

  • Insight or interpretation about a preceding chart
  • Marketing or promotion
  • Summary or explanation

Padding

20px is the basic unit for padding, and you’ll see it all over Opattern: padding at the bottom of paragraphs, distance between grouped buttons, etc.

If you need even more breathing room, we use increments of 20px (40px, 60px, and so on). Use Sass arithmetic when using more or less padding (example: padding-left: $spacing*2), so that customizations to the $spacing variable will recursively affect the rest of the spacing in the interface.

Spacing reference

Variable Default Description
$spacing 20px Basic unit for padding. Used for grid gutters, margins, and space between structural components.
$halfSpacing 10px Half of basic unit for padding. Used for spacing between bullets, button padding, and other typographic elements.
$quarterSpacing 5px Used sparsely. Remember, space is a good thing.