Spacing

Spacing refers to the values used to create space between elements (margin) and within elements (padding). Our spacing values should be far enough apart to create a distinct heirarchy while using as few values as possible. Spacing is largely applied using utility classes rather than within component styles to make components as reusable as possible in different contexts.

Spacing Scale

• $spacing-xs
  (5px)
• $spacing-sm
  (10px)
• $spacing-md
  (20px)
• $spacing-lg
  (30px)
• $spacing-xl
  (60px)

Logical Properties

CSS logical properties replace directions (up/down/left/right) with inline and block to better support languages with writing directions that are not left-to-right, top-to-bottom.

In English:

• Inline refers to left/right values
• Block refers to top/bottom values
• Inline Start = left
• Inline End = right
• Block Start = top
• Block End = bottom

See web.dev’s logical properties for more.

Terminology

Terminology for spacing is derived from Nathan Curtis’ Space in Design Systems.

Inset

Inset describes the space within an element and refers to a padding value. There are also several modifiers that describe how the space is distributed.

• Inset Square has equal padding on all four sides.
• Inset Squish has more inline padding than block padding.
• Inset Stretch has more block padding than inline padding.

Stack

Stack descibes the vertical space applied to the outside of an element to provide space between elements and refers to a margin value. To avoid collapsing margins, we only apply margin to the bottom or right of an element wherever possible.

Inline

Inline describes the horizontal space applied to the outside of an element to provide space between elements and refers to a margin value.