Spacing

Space helps to guide the user and provide a consistent experience within products

Overview

Space is the distance between elements on a screen. It’s often referred to as whitespace.

Good use of whitespace can de-clutter and group content to provide a visual hierarchy. This helps users focus on what matters, and reduces cognitive load.


Space Tokens & 8 px base unit

An 8px base spacing in design systems refers to the use of an 8-pixel unit as the foundational spacing measurement for defining the vertical and horizontal distances between elements. It serves as a consistent reference point for maintaining visual alignment and balance throughout the design system. Here's how the 8px base spacing is typically implemented:

  1. Grid system: The 8px base spacing forms the basis of a grid system within the design system. The grid is divided into 8-pixel increments, allowing for consistent and precise alignment of elements. This grid helps designers maintain a sense of order and rhythm in the layout, making it easier to position and space elements uniformly.
  2. Margins and padding: Margins and padding around components, such as buttons, cards, or containers, are often defined using the 8px base spacing. This ensures consistent spacing between elements and maintains visual harmony across different screen sizes and layouts. For example, a component might have 8px of padding on each side or a margin of 16px between adjacent components.
  3. Vertical spacing: The 8px base spacing is also applied to establish consistent vertical spacing between different sections or blocks of content. This includes the spacing between paragraphs, headings, images, or any other vertical elements within the layout. By adhering to the 8px base spacing, designers ensure a harmonious and balanced vertical rhythm throughout the design system.
  4. Modular scaling: The 8px base spacing can be scaled proportionally to accommodate different sizes or scales within the design system. For example, elements with larger sizes might have a 16px or 24px spacing, while smaller elements might have a 4px or 6px spacing. This modular scaling allows for flexibility while maintaining the overall consistency and alignment of the design.
  5. Responsiveness: The 8px base spacing is adaptable to different screen sizes and responsive layouts. It helps designers maintain consistent spacing proportions and avoid inconsistencies that may arise when elements are resized or rearranged. This ensures that the design remains visually pleasing and usable across various devices and screen resolutions.

By establishing an 8px base spacing in a design system, designers can achieve a consistent and harmonious layout, where all the elements are properly aligned and spaced. This approach helps maintain visual coherence, scalability, and usability, while providing a solid foundation for the overall design aesthetic.

Spacing-Documentation

Component spacing

Component spacing refers to the arrangement and distance between individual elements within a specific user interface component, such as a button, form field, or card. It involves determining the optimal spacing to achieve visual balance, usability, and clarity within the component.

There are several key considerations when establishing component spacing:

  1. Margins: Margins refer to the space between the component's boundaries and the adjacent elements or edges of the layout. Appropriate margin values ensure that the component doesn't appear cramped or crowded, allowing it to stand out and maintain a clear visual distinction from surrounding elements.
  2. Padding: Padding refers to the space between the content or interactive elements within the component and its boundaries. Sufficient padding helps create breathing room, preventing the content from feeling cramped and making it easier for users to interact with specific elements within the component.
  3. Internal spacing: Internal spacing refers to the distance between different elements within the component itself. It includes the spacing between text, buttons, icons, images, or any other interactive or informative elements contained within the component. Proper internal spacing ensures that these elements have enough separation to be visually distinct and easily recognizable.
  4. Proportions: Maintaining consistent proportions and relationships between different elements within a component is essential. For example, the spacing between a button's text and its edges should be balanced to avoid an uneven appearance. Consistency in proportions contributes to a cohesive and polished design.
Component spacing

Layout spacing

Layout spacing refers to the arrangement and distribution of elements within a design or layout. It involves the intentional placement of spaces between various components such as text, images, buttons, and other graphical elements. Proper spacing is crucial for achieving a balanced and visually appealing composition.

Effective layout spacing provides several benefits. First, it enhances readability and comprehension by allowing elements to breathe and stand out individually. Adequate spacing prevents elements from appearing cluttered or cramped, making it easier for users to navigate and understand the content.

Consistency in spacing is also important for maintaining visual harmony across different screens and devices. A well-defined spacing system, often based on a predefined unit or grid, ensures that the spaces between elements are proportionate and consistent. This creates a sense of coherence and professionalism in the overall design.

Additionally, layout spacing can be used strategically to guide the user's attention and establish visual hierarchy. By adjusting the spacing between elements, designers can emphasize certain elements or group related items together. This helps users understand the relationships between different components and directs their focus to key areas of the layout.

In summary, layout spacing plays a vital role in creating visually appealing and user-friendly designs. It ensures readability, consistency, and visual hierarchy, ultimately contributing to a positive user experience.

Layout spacing