Spacing, or the use of whitespace, can play an important role in a design system by:

• Improving readability: Adequate spacing between elements can improve readability and make it easier for users to understand and interact with designs.
• Creating visual interest: Strategic use of whitespace can create visual interest and hierarchy, helping to guide users through designs.
• Improving usability: Consistent spacing between elements can improve usability by making it easier for users to find and access the content.
• Enhancing accessibility: Adequate spacing can enhance accessibility, particularly for users with visual impairments or disabilities.
• Reinforcing brand identity: Consistent use of spacing across designs can reinforce brand identity and improve recognition.
• Improving user experience: Consistent spacing can help to create a more cohesive and pleasant user experience by providing a consistent visual element across designs.
• Enhancing contrast: Adequate spacing can help to improve the contrast between design elements, making it easier for users to differentiate between them.

By using spacing as part of a design system, designers and developers can ensure that designs are readable, accessible, and consistent, helping to improve the overall user experience.

Spacing

Spacing tokens can be used inside of components for building and between components for layout spacing. It complements our grids and typography scale by using using multiples of four.

Spacing