Spacing

Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.

• XXS

  Variable:space-xxs
  Min: 7px

  Max: 9px

• XS

  Variable:space-xs
  Min: 11px

  Max: 14px

• S

  Variable:space-s
  Min: 14px

  Max: 18px

• M

  Variable:space-m
  Min: 21px

  Max: 27px

• L

  Variable:space-l
  Min: 28px

  Max: 36px

• XL

  Variable:space-xl
  Min: 42px

  Max: 54px

• 2XL

  Variable:space-2xl
  Min: 56px

  Max: 72px

• 3XL

  Variable:space-3xl
  Min: 84px

  Max: 108px

• 4XL

  Variable:space-4xl
  Min: 98px

  Max: 126px

• 5XL

  Variable:space-5xl
  Min: 112px

  Max: 144px

• 6XL

  Variable:space-6xl
  Min: 126px

  Max: 162px

• 7XL

  Variable:space-7xl
  Min: 140px

  Max: 180px

• XS - L

  Variable:space-xs-l
  Min: 11px

  Max: 36px

• S - M

  Variable:space-s-m
  Min: 14px

  Max: 27px

• M - L

  Variable:space-m-l
  Min: 21px

  Max: 36px

• M - XL

  Variable:space-m-xl
  Min: 21px

  Max: 54px

• M - 2XL

  Variable:space-m-2xl
  Min: 21px

  Max: 72px

• L - XL

  Variable:space-l-xl
  Min: 28px

  Max: 54px

• L - 2XL

  Variable:space-l-2xl
  Min: 28px

  Max: 72px

• XL - 4XL

  Variable:space-xl-4xl
  Min: 42px

  Max: 126px

• XL - 3XL

  Variable:space-xl-3xl
  Min: 42px

  Max: 108px

• 2XL - 4XL

  Variable:space-2xl-4xl
  Min: 56px

  Max: 126px