Spacing

The space key allows you to customize the global spacing and sizing scale for your project. By default, these spacing values can be referenced by the padding, margin, top, left, right, and bottom styles.

export const space = {
  '1x': '.25rem',
  '-1x': '-.25rem',
  '2x': '.5rem',
  '-2x': '-.5rem',
  '3x': '.75rem',
  '-3x': '-.75rem',
  '4x': '1rem',
  '-4x': '-1rem',
  '5x': '1.25rem',
  '-5x': '-1.25rem',
  '6x': '1.5rem',
  '-6x': '-1.5rem',
  '7x': '1.75rem',
  '-7x': '-1.75rem',
  '8x': '2rem',
  '-8x': '-2rem',
  '9x': '2.25rem',
  '-9x': '-2.25rem',
  '10x': '2.5rem',
  '-10x': '-2.5rem',
  '11x': '2.75rem',
  '-11x': '-2.75rem',
  '12x': '3rem',
  '-12x': '-3rem',
  '13x': '3.25rem',
  '-13x': '-3.25rem',
  '14x': '3.5rem',
  '-14x': '-3.5rem',
  '15x': '3.75rem',
  '-15x': '-3.75rem',
  '16x': '4rem',
  '-16x': '-4rem',
  '17x': '4.25rem',
  '-17x': '-4.25rem',
  '18x': '4.5rem',
  '-18x': '-4.5rem',
  '19x': '4.75rem',
  '-19x': '-4.75rem',
  '20x': '5rem',
  '-20x': '-5rem',
  '24x': '6rem',
  '-24x': '-6rem',
  '32x': '8rem',
  '-32x': '-8rem',
  '40x': '10rem',
  '-40x': '-10rem',
  '48x': '12rem',
  '-48x': '-12rem',
  '56x': '14rem',
  '-56x': '-14rem',
  '64x': '16rem',
  '-64x': '-16rem'
}

export const space = {
  '1x': '.25rem',
  '-1x': '-.25rem',
  '2x': '.5rem',
  '-2x': '-.5rem',
  '3x': '.75rem',
  '-3x': '-.75rem',
  '4x': '1rem',
  '-4x': '-1rem',
  '5x': '1.25rem',
  '-5x': '-1.25rem',
  '6x': '1.5rem',
  '-6x': '-1.5rem',
  '7x': '1.75rem',
  '-7x': '-1.75rem',
  '8x': '2rem',
  '-8x': '-2rem',
  '9x': '2.25rem',
  '-9x': '-2.25rem',
  '10x': '2.5rem',
  '-10x': '-2.5rem',
  '11x': '2.75rem',
  '-11x': '-2.75rem',
  '12x': '3rem',
  '-12x': '-3rem',
  '13x': '3.25rem',
  '-13x': '-3.25rem',
  '14x': '3.5rem',
  '-14x': '-3.5rem',
  '15x': '3.75rem',
  '-15x': '-3.75rem',
  '16x': '4rem',
  '-16x': '-4rem',
  '17x': '4.25rem',
  '-17x': '-4.25rem',
  '18x': '4.5rem',
  '-18x': '-4.5rem',
  '19x': '4.75rem',
  '-19x': '-4.75rem',
  '20x': '5rem',
  '-20x': '-5rem',
  '24x': '6rem',
  '-24x': '-6rem',
  '32x': '8rem',
  '-32x': '-8rem',
  '40x': '10rem',
  '-40x': '-10rem',
  '48x': '12rem',
  '-48x': '-12rem',
  '56x': '14rem',
  '-56x': '-14rem',
  '64x': '16rem',
  '-64x': '-16rem'
}

By default, the values are proportional. Therefore, a 1x spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

Name	Relative Length Unit (rem)	Absolute Length Unit (px)
0	0	0px
1x	.25rem	4px
2x	.5rem	8px
3x	.75rem	12px
4x	1rem	16px
5x	1.25rem	20px
6x	1.5rem	24px
7x	1.75rem	28px
8x	2rem	32px
9x	2.25rem	36px
10x	2.5rem	40px
11x	2.75rem	44px
12x	3rem	48px
13x	3.25rem	52px
14x	3.5rem	56px
15x	3.75rem	60px
16x	4rem	64px
17x	4.25rem	68px
18x	4.5rem	72px
19x	4.75rem	76px
20x	5rem	80px
24x	6rem	96px
32x	8rem	128px
40x	10rem	160px
48x	12rem	192px
56x	14rem	224px
64x	16rem	256px


EDITABLE EXAMPLE
<Stack direction="column" spacing="6x">
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="1x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="2x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="4x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
</Stack><Stack direction="column" spacing="6x">
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="1x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="2x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="4x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
</Stack>

Configuration Reference

Except for breakpoints, colors, and spacing, all keys in the theme object map to one of the core themes. All keys can be replaced or extended.

For more information, see the complete properties reference table.