Spacing

Spacing is a fundamental aspect of our design system, providing structure and rhythm to our layouts. Proper use of spacing ensures that our interfaces are easy to read, navigate, and interact with. It helps to create a visually balanced and aesthetically pleasing design. Our spacing system is standardized through design tokens, which are used consistently across all components to maintain uniformity and coherence.

Storybook

Storybook - Spacing Documentation

Figma Demo

Guidelines

Spacing Values

Our design system defines a set of spacing values that can be applied to margins, padding, and gaps between elements. These values are designed to be flexible and adaptable to various design needs:

  • 0: 0px / 0rem
  • 1: 1px / 0.0625rem
  • 2: 2px / 0.125rem
  • 4: 4px / 0.25rem
  • 6: 6px / 0.375rem
  • 8: 8px / 0.5rem
  • 10: 10px / 0.625rem
  • 12: 12px / 0.75rem
  • 16: 16px / 1rem
  • 20: 20px / 1.25rem
  • 24: 24px / 1.5rem
  • 32: 32px / 2rem
  • 36: 36px / 2.25rem
  • 40: 40px / 2.5rem
  • 48: 48px / 3rem
  • 56: 56px / 3.5rem
  • 64: 64px / 4rem
  • 96: 96px / 6rem
  • 128: 128px / 8rem

Usage Guidelines

Consistent application of spacing values is key to maintaining a clean and organized design. Here are some guidelines for using spacing effectively:

  • Margins: Use margins to create space outside an element, ensuring proper separation between components.
  • Padding: Apply padding to create space inside an element, enhancing readability and interaction by providing adequate breathing room for content.
  • Gaps: Use spacing values to define gaps between grid items or flexbox children, maintaining consistent and predictable layouts.

Best Practices

  • Consistency: Use the predefined spacing values consistently across all components to ensure a harmonious design.
  • Hierarchy: Establish a clear visual hierarchy by using larger spacing values for more significant separations and smaller values for closely related items.
  • Balance: Balance the use of spacing to avoid overcrowding or excessive white space, aiming for a comfortable and accessible user experience.
  • Responsive Design: Adjust spacing values based on screen size and device type to maintain a responsive and adaptive layout.

Implementation Tips

  • Design Tokens: Use spacing design tokens in your CSS or styling framework to ensure consistency and ease of maintenance.
  • Documentation: Maintain comprehensive documentation of spacing guidelines and examples to facilitate adoption by all team members.
  • Testing: Regularly test designs across different devices and screen sizes to ensure that spacing is optimized for various contexts.

By adhering to these spacing guidelines and utilizing the standardized values, we ensure that our designs are visually appealing, functional, and consistent across all our digital products.