Space

The distance between elements and how these proportions interact in the design.

Usage

Padding and margin are relative to the base size of 16px or 1em.

Establish visual cohesion by applying consistent spacing in layouts and components.

Apply these proportions through:

• Box
• Stack
• Spacing Utilities

Guidelines

• There are five built in spacing sizes:
  • Extra Small (4px, .25rem)
  • Small (8px, .5rem)
  • Medium (16px, 1rem)
  • Large (32px, 2rem)
  • Extra Large (64px, 4rem)

Table of Contents

• Padding
  • Inset
  • Inset Short
  • Inset Tall
• Margin
  • Stack
  • Inline
  • Misc Sizes

Variants

Inset

Adds equal padding to all four sides of an element.

For illustrative purposes, gray represents the padding of the element. It will not appear in your project.

Inset Short

Similar to Inset, except the top and bottom padding is reduced by 50%.

For example, Inset Short Small has 8px of padding on the left and right sides, but 4px padding on the top and bottom.

For illustrative purposes, gray represents the padding of the element. It will not appear in your project.

Inset Tall

Similar to Inset, except the top and bottom padding is increased by 50%. For example, Inset Tall Small has 8px padding on the left and right sides, but 12px padding on the top and bottom.

For illustrative purposes, gray represents the padding of the element. It will not appear in your project.

Stack

Adds margin to the bottom of elements.

For illustrative purposes, gray represents the margin of the element. It will not appear in your project.

Inline

Adds right margin to inline elements.

For illustrative purposes, gray represents the margin of the element. It will not appear in your project.

Misc Sizes

Additional sizing proportions to supplement existing XS-XL sizes:

• Misc A (24px, 1.5rem)
• Misc B (40px, 2.5rem)
• Misc C (48px, 3rem)
• Misc D (80px, 5rem)

For illustrative purposes, gray represents the margin of the element. It will not appear in your project.