Overview
Spacing defines the distance between elements in an interface. A consistent space system improves scannability, grouping, and visual balance. It helps users focus on what matters and makes interfaces feel clean, clear, and intentional, reducing cognitive load.
The 8px base unit
Our spacing system is built on an 8px base unit, meaning all spacing values are multiples of 8. This approach ensures consistency across layouts and components, regardless of screen size. Here's how the 8px base spacing is typically implemented:
- Grid system: Aligns sections and components on a predictable grid. The grid follows 8px increments, allowing for precise alignment and a consistent structure.
- Margins and padding: Applied to components like buttons, cards, or containers using the 8px base. This ensures spacing between elements feels consistent and balanced across the UI and in different screen sizes.
- Vertical rhythm: Establishes consistent vertical spacing between sections or blocks of content, such as spacing between paragraphs, headings, images, or elements in the layout.
- Modular scaling: Spacing scales proportionally to support different sizes and densities, adapting to the component or context.
- Responsiveness: The 8px base adapts well to responsive layouts, helping maintain proportional spacing across screen sizes.
Component spacing
Component spacing handles the spaces inside and around individual components. This includes:
- Padding: Space inside a component (e.g., space between button text and its edges).
- Gap: Gaps between internal elements (e.g. space between an icon and label inside a button).
- Proportions: Consistent spacing helps with visual balance and perceived usability.
Good component spacing ensures that components feel clear, accessible, and well-structured, especially in complex UIs such as forms or cards.
Layout spacing
Layout spacing defines the space between sections, components on the screen, and overall compositions. This spacing is essential for creating visually appealing and user-friendly designs. Good layout spacing enhances readability, ensures consistency, and establishes a clear visual hierarchy, ultimately contributing to a positive user experience.
It helps define:
- Hierarchy: More space between unrelated sections and less space between related content.
- Clarity: It keeps dense layouts readable and user-friendly.
- Consistency: Following predictable spacing rules helps screens feel familiar and easier to scan.
Best practices
- Use tokens: Never hardcode spacing values. Tokens ensure scalability and consistency.
- Think in systems: Use consistent spacing logic across components and pages.
- Mind grouping: Use spacing to guide relationships, tighter for related elements, wider for separation.