Spacing

Overview

Spacers are visual cues used to define fixed amounts of space between elements. They make it easy for designers to maintain consistent spacing across components and patterns as well as simplify the handoff process between designers and developers. Consistent spacing helps maintain balance and rhythm across the system.

Style

Base increment

The base increment of spacers starts at 4px. The Form field pattern features a 6px spacer for very specific use cases. It should not be used anywhere else.

Scale

There are a variety of spacers available which can be used for different spacing needs, which are all divisible by 4. To keep the system simple, there’s only one scale for spacers that applies to components, patterns, and layouts. The smallest spacer is 4px and the largest is 80px. New spacers are added based on design needs, so do not create any new spacers, combine different spacers instead.

Variable Amount Example
--pf-global--spacer--xs 4px 4px spacer
--pf-global--spacer--sm 8px 8px spacer
--pf-global--spacer--md 16px 16px spacer
--pf-global--spacer--lg 24px 24px spacer
--pf-global--spacer--xl 32px 32px spacer
--pf-global--spacer--2xl 48px 48px spacer
--pf-global--spacer--3xl 64px 64px spacer
--pf-global--spacer--4xl 80px 80px spacer

Applying spacers

The size of an element dictates its spatial relationship with other elements in a layout, i.e. small elements need less space and large elements need more space. For example, use small spacers to define the spacing between text styles or buttons and use large spacers to define the vertical rhythm in a layout or spacing between sections.

How to apply spacing

Typography

When placing text in a layout, using the right spacers will ensure a smooth vertical rhythm and readability.

How to apply spacing to typography

Spacing between text styles

Use spacers between text styles to establish hierarchy and maintain relationships. For example, if text styles are spaced too closely, the content in the group will be hard to process. If they’re spaced too far apart, it won’t appear as if the styles are related to each other.

Spacing between text styles

Titles and headlines

The spacing between Layout titles and headlines as well as Card titles and body copy is always the same at 16px on desktop, tablet, and mobile. It’s enough space so that the title can introduce the content underneath. For visual examples, see this XD document.

Spacing guidelines

  • The spacing between a Layout title and a headline is 16px on desktop, tablet, and mobile
  • The spacing between a Card title and body copy is 16px on desktop, tablet, and mobile
Headlines and body copy spacing guidelines

Headlines and body copy

The spacing between headlines and body copy depends on the point size of the headline. As headlines increase or decrease in point size, they require more or less spacing underneath. For visual examples, see this XD document.

Spacing guidelines

  • The spacing between large headlines and body copy is 24px on desktop, tablet, and mobile
  • The spacing between small headlines and body copy is 16px on desktop, tablet, and mobile
How to apply spacing to headlines and body copy

Desktop scale

The columns indicate which spacer to use between headlines and body copy on desktop and tablet devices. To see the exact size values of each text style, visit the Typography page.

Headline style Text style Spacer
Headline, xxl Body copy, lg 24px spacer
Headline, xl Body copy, lg 24px spacer
Headline, lg Body copy, lg 16px spacer
Headline, md Body copy, lg 16px spacer
Headline, sm Body copy, lg 16px spacer
Headline, xs Body copy, lg 16px spacer

Mobile scale

The columns indicate which spacer to use between headlines and body copy on mobile devices. To see the exact size values of each text style, visit the Typography page.

Headline style Text style Spacer
Headline, xxl Body copy, md 24px spacer
Headline, xl Body copy, md 24px spacer
Headline, lg Body copy, md 16px spacer
Headline, md Body copy, md 16px spacer
Headline, sm Body copy, md 16px spacer
Headline, xs Body copy, md 16px spacer

Headlines and Calls to action

The spacing between headlines and Calls to action depends on the point size of the headline. For visual examples, see this XD document.

Spacing guidelines

  • The spacing between large headlines and Calls to action is 32px on desktop and tablet, and 24px on mobile
  • The spacing between small headlines and Calls to action is 24px on desktop and tablet, and 16px on mobile
  • The spacing between body copy and Calls to action is always 24px on desktop, tablet, and mobile
How to apply spacing to headlines and calls to action

Scale

The columns indicate which spacer to use between headlines and Calls to action, depending on the breakpoint. To see the exact size values of each text style, visit the Typography page.

Text style Spacer (desktop and tablet) Spacer (mobile)
Headline, xxl 32px spacer 24px spacer
Headline, xl 32px spacer 24px spacer
Headline, lg 24px spacer 16px spacer
Headline, md 24px spacer 16px spacer
Headline, sm 24px spacer 16px spacer
Headline, xs 24px spacer 16px spacer
Body copy, lg 24px spacer 16px spacer
Body copy, md 24px spacer 16px spacer

Headlines and Buttons

The spacing between headlines and Buttons depends on the point size of the headline. For visual examples, see this XD document.

Spacing guidelines

  • The spacing between large headlines and Buttons is 32px on desktop and tablet, and 24px on mobile
  • The spacing between small headlines and Buttons is 24px on desktop and tablet, and 16px on mobile
  • The spacing between body copy and Buttons is always 24px on desktop, tablet, and mobile
How to apply spacing to headlines and buttons

Scale

The columns indicate which spacer to use between headlines and Buttons, depending on the breakpoint. To see the exact size values of each text style, visit the Typography page.

Headline style Spacer (desktop and tablet) Spacer (mobile)
Headline, xxl Do not use Do not use
Headline, xl Do not use Do not use
Headline, lg 32px spacer 24px spacer
Headline, md 32px spacer 24px spacer
Headline, sm 24px spacer 16px spacer
Headline, xs 24px spacer 16px spacer

Other examples

Spacing on lists

Other use cases

If you still have questions about how to use spacers with typography, please contact us or create an issue in our GitHub repo.


Components and patterns

When working in Adobe XD, components and patterns have built-in spacers, so there’s no need to guess. Remember to take into account how spacers might change when modifying content inside of a component or pattern.

Responsive design

XD maintains the spacers inside of components and patterns even when used on different screen sizes. Spacers used in complex layouts may change values from large to small breakpoints and vice versa, depending on the screen real estate.

Spacing in search layout

Calls to action

Some styles have a 2:1 spacing ratio. That ratio never changes, so do not add more spacing to those styles.

Primary and Secondary styles have a 2:1 spacing ratio, meaning the left and right spacing is fixed at 32px and the top and bottom spacing is fixed at 16px.

Spacing within calls to action

The Brick style has a fixed top and bottom spacing of 16px, but the left and right spacing can stretch to fit a certain amount of grid columns.

Spacing within brick CTAs

The Default style needs 8px of spacing between the text and the arrow or icon.

Spacing within default CTAs

Accordion

An Accordion is a good example of how a component uses spacers to maintain a comfortable balance between text, horizontal rules, icons, and backgrounds.

Spacing within accordions

Tabs

Tabs is another good example of how a component uses spacers to maintain a comfortable balance between lots of elements that are in close proximity to each other. The area below (or to the right) of the component is a large content area layout and therefore should use a large spacer. For more information about using spacers in Tabs, see this XD document.

Spacing within tabs

Cards

Cards are small layouts that use different spacers depending on their size. As Cards increase or decrease in size, they require more or less spacing on the inside or outside.

Spacing within cards
Spacing within 4 column cards

Scale

Breakpoint Columns Spacer
Desktop 8 or more 48px spacer
Desktop 3 – 7 32px spacer
Tablet 8 or more 32px spacer
Tablet 3 – 7 24px spacer
Mobile 1 or 2 16px spacer

Other components or patterns

Here’s how spacing is used in other components and patterns.

Spacing within other components

Other use cases

If you still have questions about how to use spacers with components, please contact us or create an issue in our GitHub repo.


Layout

Layouts require large spacers to create white space and disassociate sections from each other.

Applying spacers

Every layout or section on a page needs enough vertical spacing so that content doesn’t feel too close or crushed. The top and bottom spacing of a layout is 64px by default, but some layouts feature different spacing depending on hierarchy or importance. Some components like Tabs contain a large spacer because there’s a content area layout inside.

Spacing within layouts

Responsive design

When layouts reduce in size, the spacers will also reduce in size to compensate for the loss in screen real estate.

In the desktop breakpoint, the gutters in the grid are spaced 30px apart from each other.

Spacing within the grid

In the tablet, landscape breakpoint, the gutters in the grid are spaced 24px apart from each other.

Spacing within a landscape tablet layout

In the tablet, portrait breakpoint, the gutters in the grid are spaced 18px apart from each other.

Spacing within a portrait tablet layout

In the mobile breakpoint, the gutters in the grid are spaced 16px apart from each other.

Spacing within a mobile landscape layout
Spacing within a mobile portrait layout

Other use cases

If you still have questions about how to use spacers in a layout, please contact us or create an issue in our GitHub repo.


Best practices

Use existing spacers for horizontal and vertical spacing. If a current spacer doesn’t meet your needs, submit a request for us to establish new spacers.

Use existing spacers

To be as clear as possible, include spacers in your design specs to make it easy for developers to see what spacers you want to use between elements. Note that Adobe XD sometimes won’t produce exact pixel amounts between elements when viewed in Developer specs.

Include spacers in design specs

Spacers in XD

All of the components and patterns in the design kit include spacers. Turn on the group named Spacing and you can see how they’re used.

Spacing in Adobe XD

Feedback

To give feedback about this page, contact us.

Foundations

To learn more about color, grid, typography, etc., visit the Foundations section.