Spacing

Spacing is used to describe relationships between elements. Larger spaces suggests elements are separate, smaller spaces suggest they’re related. By using space consistently, we can inspire trust and help people orient themselves across all of NerdWallet.

spacing-1

spacing-2

spacing-3

spacing-4

spacing-5

How to use spacing

Communicate in units of space instead of pixels.

Visual design is about relationships and hierarchy, not hardcoded values. Those values often change across device size, browser settings and other contexts, so they aren’t reliable for specs or requirements. Communicate whitespace by units of space to save time.

Don’t mix units of spacing.

Patterns and repetition help people understand what’s important by creating emphasis, hierarchy, and legibility. Combining units of space breaks those patterns.

Having a visual separation, even with the most minimal horizontal rule, allows a person to recognize the pattern again:

spacing-3


spacing-4