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. |
