Spacing components in Design Systems

Spacing might seem simple, but it’s one of the most powerful tools in creating clear, consistent, and visually balanced interfaces. In design systems, however, managing spacing—especially for reusable components, often turns into a frustrating puzzle for designers and developers alike. So how do we keep things consistent without sacrificing flexibility? This article explores key principles to consider when defining spacing for components in a design system.

Understanding Spacing: Margin vs. Padding

Before we delve into best practices, it's essential to clarify two core concepts:

Margin

• What it is: Margin is the space outside an element.

• Purpose: It defines the space between that element and adjacent elements.

• Use case: Often used to create separation between components at the layout level.

  
  

Padding

• What it is: Padding is the space inside an element.

• Purpose: It defines the space between the element’s content and its border.

• Use case: Should be used to provide breathing room inside components, especially when they have a background color or border

  
  

  

Avoid Outer Spacing in Reusable Components

One of the most common mistakes in design systems is assigning outer spacing (margin/padding) to reusable components. While it might seem convenient at first, this approach often leads to layout rigidity and inconsistency.

An example when a card component has a fixed margin built into it, placing multiple cards within a new layout—like a grid or list—can lead to unintended extra spacing. Since the margin is baked into the card itself, it becomes difficult for the parent layout to control or adjust spacing between cards, often resulting in inconsistent gaps or layout misalignment.

Important Guideline Avoid using padding unless the element has a background or border. Padding makes sense only when it helps define the visual bounds of a component.

Why Outer Spacing is Problematic

• Unpredictable Layouts: Components with built-in margins push against each other or their containers, making layout behavior harder to predict.

• Lack of Flexibility: The same component may need different spacing depending on its placement or context.

• Difficult Overrides: Margins defined within components are often hard to override cleanly at the parent level.

Embrace Layout-Driven Spacing

The preferred strategy is to remove all outer spacing from reusable components and define spacing only at the layout (or parent) level.

Use gap for Layout Spacing

Modern CSS offers the gap property, which is ideal for managing spacing between elements within a container. It provides a cleaner, more intuitive, and maintainable approach compared to manually setting margins on individual elements. It closely mirrors how designers define spacing between layers in tools like Figma.

• Works with flex, grid, and multi-column layouts.

• Eliminates the need for “last-child” margin hacks.

• Keeps the component logic simple and reusable.

Benefits of Layout-Based Spacing

1. Greater Spacing Flexibility

By centralizing spacing at the layout level, you can:

• Adjust spacing based on screen size or context.

• Apply spacing tokens dynamically based on design needs.

• Create reusable layout containers (e.g., stacks or insets) that enforce spacing rules.

2. Component Reusability

A single component can be used in multiple contexts without having to redefine or override its spacing behavior. This keeps components truly atomic and portable.

3. Cleaner Code and Token Usage

Using spacing tokens at the layout level ensures consistent rhythm across the system. It also makes it easier for designers and developers to reason about space relationships.

Handling Complex Components

What about components that require dynamic spacing internally—those that change based on conditionally rendered sub-elements?

Take the example of a Story Card component, which can include elements like a rubric, title, description, byline, and date. If spacing is managed using fixed margins and padding, enabling or disabling these elements could cause the internal spacing to shift unpredictably.

The example above illustrates how the outer spacing of the same Story Card shifts when different combinations of elements are toggled on or off through component properties.

Structure First, Then Space

One easy way to space elements within complex components, apply Gestalt’s Law of Proximity to guide grouping. Elements placed closer together are perceived as related. This principle helps inform both the structure of the component and the thoughtful use of gap between groups.

The example above shows how internal spacing within the same Story Card can be managed using gap (space-between) instead of fixed padding or margins. With gap, the spacing isn’t tied to any specific element—it exists only between elements. This means if an element is removed, the corresponding space automatically disappears, keeping the layout clean and consistent.

1. Group related elements: Identify which sub-elements are visually and functionally connected, and wrap them in internal layout containers (e.g., vertical stacks, horizontal groups). Use gap to create consistent spacing within these groups.

2. Use padding only when needed: Apply padding inside a component only when it has a background color or border to create internal breathing room.

3. Avoid fixed margins: Do not define external margins within components. Allow the parent layout to control spacing between components for better flexibility and consistency.

   
   

Conclusion

Designing scalable spacing in a design system starts with the separation of component structure and layout responsibility. Components should focus on their own internal alignment and content padding, leaving external spacing to the parent layout.

By using modern CSS tools like gap and adopting layout-driven spacing strategies, your design system can gain:

• Consistency

• Flexibility

• Maintainability

This results in cleaner components, fewer overrides, and a smoother collaboration between design and engineering.