Sizes

The sizes key allows you to customize the global sizing of components you build for your project. By default, these values can be referenced by the width, height, maxWidth, minWidth, maxHeight, and minHeight styles.

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

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

Width


EDITABLE EXAMPLE
<Stack direction="column" spacing="4x" alignItems="center">
  <Box textAlign="center" width="40x" p="1x" fontSize="sm" bg="gray:70">Width 10rem(160px)</Box>
  <Box textAlign="center" width="48x" p="1x" fontSize="sm" bg="gray:70">Width 12rem(192px)</Box>
  <Box textAlign="center" width="56x" p="1x" fontSize="sm" bg="gray:70">Width 14rem(224px)</Box>
  <Box textAlign="center" width="64x" p="1x" fontSize="sm" bg="gray:70">Width 16rem(256px)</Box>
</Stack><Stack direction="column" spacing="4x" alignItems="center">
  <Box textAlign="center" width="40x" p="1x" fontSize="sm" bg="gray:70">Width 10rem(160px)</Box>
  <Box textAlign="center" width="48x" p="1x" fontSize="sm" bg="gray:70">Width 12rem(192px)</Box>
  <Box textAlign="center" width="56x" p="1x" fontSize="sm" bg="gray:70">Width 14rem(224px)</Box>
  <Box textAlign="center" width="64x" p="1x" fontSize="sm" bg="gray:70">Width 16rem(256px)</Box>
</Stack>

Height


EDITABLE EXAMPLE
<Stack direction="row" spacing="2x" justifyContent="center">
  <Box width="48x" height="8x" p="2x" fontSize="sm" bg="gray:70">Height 2rem(32px)</Box>
  <Box width="48x" height="16x" p="2x" fontSize="sm" bg="gray:70">Height 4rem(64px)</Box>
  <Box width="48x" height="24x" p="2x" fontSize="sm" bg="gray:70">Height 6rem(96px)</Box>
  <Box width="48x" height="32x" p="2x" fontSize="sm" bg="gray:70">Height 8rem(128px)</Box>
</Stack><Stack direction="row" spacing="2x" justifyContent="center">
  <Box width="48x" height="8x" p="2x" fontSize="sm" bg="gray:70">Height 2rem(32px)</Box>
  <Box width="48x" height="16x" p="2x" fontSize="sm" bg="gray:70">Height 4rem(64px)</Box>
  <Box width="48x" height="24x" p="2x" fontSize="sm" bg="gray:70">Height 6rem(96px)</Box>
  <Box width="48x" height="32x" p="2x" fontSize="sm" bg="gray:70">Height 8rem(128px)</Box>
</Stack>