Spacing tokens

The space scale helps maintain consistent spacing around and between elements. This scale applies primarily to margin, padding, spacing and gap.

Name	Value	Example
`50`	2px
`100`	4px
`200`	8px
`300`	12px
`400`	16px
`500`	24px
`600`	32px
`700`	40px
`800`	48px
`900`	64px
`950`	80px
`1000`	96px
`1100`	128px
`1200`	160px

React

See the style props documentation for the complete list of style props that use the space scale.

<VStack
  sx={{
    div: { backgroundColor: 'brandRed.600', height: '400', width: '400' },
  }}
>
  <Box marginBottom="100" />
  <Box marginBottom="300" />
  <Box marginBottom="500" />
  <Box marginBottom="700" />
  <Box marginBottom="900" />
</VStack>

Bootstrap

Use the spacing utilities to apply system spacing such as margin, padding etc.

<div class="mb-100 bg-brandRed-600 h-size-400 w-size-400"></div>
<div class="mb-300 bg-brandRed-600 h-size-400 w-size-400"></div>
<div class="mb-500 bg-brandRed-600 h-size-400 w-size-400"></div>
<div class="mb-700 bg-brandRed-600 h-size-400 w-size-400"></div>
<div class="mb-900 bg-brandRed-600 h-size-400 w-size-400"></div>

Size tokens

Typography