Skip to content
Design system

Spacing

Space comes in four families, named after what it does: padding inside a component, gaps between items, and the space between the main parts of a page.

How to use spacing

  • Pick the family first, then the step. The family says what the space is for.
  • Use section only between the main parts of a page. Everything smaller, inside one part, is a gap.
  • In a grid, use a gap-inline step between columns and a gap-block step between rows.
  • All values sit on a 4 px grid and are set in rem, so space grows with the reader's font size.

Inset: top and bottom

Padding inside a component, above and below its content.

Token Value Preview Use
--space-inset-block-2xs 2 px Top and bottom padding in tags.
--space-inset-block-xs 4 px Top and bottom padding in small links, such as footer links and breadcrumbs.
--space-inset-block-sm 8 px Top and bottom padding in form fields and default buttons.
--space-inset-block-md 12 px Top and bottom padding in large buttons and menu links.
--space-inset-block-lg 16 px Top and bottom padding in cards.
--space-inset-block-xl 24 px Top and bottom padding in the meta row of a post.

Inset: sides

Padding inside a component, on the left and right. Pair it with the inset step of the same size.

Token Value Preview Use
--space-inset-inline-2xs 8 px Side padding in tags.
--space-inset-inline-xs 8 px Side padding that pairs with inset-block-xs.
--space-inset-inline-sm 12 px Side padding in form fields and default buttons.
--space-inset-inline-md 16 px Side padding in large buttons and menu links.
--space-inset-inline-lg 20 px Side padding in cards.
--space-inset-inline-xl 24 px Side padding that pairs with inset-block-xl.

Gap between stacked items

Space between things placed under each other, inside one main part of the page.

Token Value Preview Use
--space-gap-block-xs 8 px Items in a list, content in a card, and a label above its field.
--space-gap-block-sm 12 px A heading and the text right below it.
--space-gap-block-md 16 px Blocks of content, such as paragraphs, and rows in columns.
--space-gap-block-lg 32 px The page title and the meta row in the header of a page or post.
--space-gap-block-xl 48 px Fields in a form, and rows in the footer grid.

Gap between items side by side

Space between things placed next to each other, and between columns in a grid.

Token Value Preview Use
--space-gap-inline-sm 8 px An icon and its text, tags in a row, and breadcrumbs.
--space-gap-inline-md 24 px The logo and the menu, and columns in the footer.
--space-gap-inline-lg 32 px The gap between columns in a grid.

Section

Space between the main parts of a page. These grow with the screen width, between 400 and 1200 px.

Token Value Preview Use
--space-section-sm 24–32 px, fluid The smallest space between main parts of a page. Grows from 24 to 32 px.
--space-section-md 32–48 px, fluid Padding at the top and bottom of a section. Grows from 32 to 48 px.
--space-section-lg 48–64 px, fluid Space above and below the content of a page, and between posts. Grows from 48 to 64 px.
--space-section-xl 64–96 px, fluid The largest space, for example at the top of a page without breadcrumbs. Grows from 64 to 96 px.

Primitives

Raw values that the roles point to. The name is the value in pixels, so --space-16 is 16 px. Use a role instead of these.

Token Value Preview
--space-2 0.125rem
--space-4 0.25rem
--space-8 0.5rem
--space-12 0.75rem
--space-16 1rem
--space-20 1.25rem
--space-24 1.5rem
--space-32 2rem
--space-48 3rem
--space-64 4rem
--space-96 6rem
--space-24-32 clamp(1.5rem, 1.25rem + 1vw, 2rem)
--space-32-48 clamp(2rem, 1.5rem + 2vw, 3rem)
--space-48-64 clamp(3rem, 2.5rem + 2vw, 4rem)
--space-64-96 clamp(4rem, 3rem + 4vw, 6rem)