• LOOK AND FEEL
    • Typography
    • Color
    • Space
    • Illustrations
    • Icons
    • Animation
    • Delight
  • LAYOUTS
    • Responsive design
    • Web layout
    • Email layout
    • Print layout
  • COMPONENTS
    • Accordians
    • Buttons
    • Dropdowns
    • Lists
    • Selectors
    • Text fields
  • CONTENT GUIDELINES
    • Overview
    • Tips for effective writing
    • Our voice
    • Content style guide
    • Common words and phrases

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.

Padding

1.25rem 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 1.25rem (2.50rem, 5rem, 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 1.25rem Basic unit for padding. Used for grid gutters, margins, and space between structural components.
$halfSpacing 0.625rem Half of basic unit for padding. Used for spacing between bullets, button padding, and other typographic elements.
$quarterSpacing 0.3125rem Used sparsely. Remember, space is a good thing.