Layout and space

Visualising the space in and around components is tricky. This page demonstrates the levels of spacing that can be applied through our space and size scales.

Space

This scale will apply to the space between and internal to elements, it applies to the following common CSS layout properties, margin, padding, grid-gap and flexbox gap.

$0

0.125rem

2px

$1

0.25rem

4px

$2

0.5rem

8px

$3

0.75rem

12px

$4

1rem

16px

$5

2rem

32px

$6

2.5rem

40px

$7

3rem

48px

$8

4rem

64px

$9

5rem

80px

Size

The size scale is used when defining the dimensions of an element, it applies to the following common CSS properties, width and height, including the max and min of both.

$0

0.5rem

8px

$1

1rem

16px

$2

1.5rem

24px

$3

2rem

32px

$4

2.5rem

40px

$5

3rem

48px

$6

4rem

64px

$7

6rem

96px

$8

8rem

128px

Radius

The radii scale uses similar scale values for applying a border-radius.

$0

0.25rem

4px

$1

0.5rem

8px

$2

0.75rem

12px

$3

1rem

16px

$round

100rem

1600px

Example

The following "Avatar" style component is created using the size, space and radii scale. A size of $3 is used to set the height and width, mr and mb are used to set the spacing between elements, and the $round token is used to apply a circluar border-radius.

<Flex
  css={{
    alignItems: 'center',
    border: '1px solid $tonal300',
    borderRadius: '$2',
    p: '$3',
    width: '320px'
  }}
>
  <Box
    css={{
      bg: '$primary',
      borderRadius: '$round',
      size: '$5',
      mr: '$3'
    }}
  />
  <Flex css={{ flexDirection: 'column' }}>
    <Heading size="sm" css={{ mb: '$3' }}>
      Steve Brusatte
    </Heading>
    <Text size="sm" css={{ color: '$tonal600' }}>
      @SteveBrusatte
    </Text>
  </Flex>
</Flex>