Spacing

The intentional use of white space between characters, elements, and components plays an active role in both defining your brand and the usability of your design.

Why it matters

Think of spacing between chairs. If seats are too close, the whole event is inaccessible. Yet too far apart and you lose the context of where you’re expected to sit. Whether digital or physical, spacing is all about finding the sweet spot.

Start with margins

This is the space between different sections. It helps define hierarchy and provide context. The sweet spot will be close enough to know what’s related, but not so close that it impedes readability.

[image needed]

Then determine padding

This space is how items are arranged within each section It also defines hierarchy and provides context, but it’s on a micro level relative to margins.

[image needed]

Additional considerations

• Fixed values won’t be responsive - you’ll want to make sure your margins and padding can scale fluidly across screens.
• Readability is accessibility - note the recommendations for minimum values before determining your aesthetics
• Be cautious toward declaring fixed values - scalability requires flexibility

More on design states

• Alignment
• Depth

[note: we're missing info on other dimensions]
[note: we should not dictate order of operations for space, it makes it feel like we need explictly define spacing, when in fact a lot of spacing is a side effect of other choices like font size.]