Positive and negative space

Positive space is occupied by content, such as the mug photograph, product name, price and button. Negative space is the empty area inside and around those elements. It does not have to be white.

Compare the two product cards. Space around the title, description and action separates the groups and helps people scan the information. Tight packing makes the same content harder to distinguish.

Use spacing to express relationships: keep related items close and leave more room between different groups. More space is not automatically better; preserve enough information for the task.