Spacing

When building layouts and components, palette hooks into a handful of reusable base-10 spacing units. With ten pixels as the base, 1 equals 10px, 2 equals 20px, .5 equals 5px (and so on). This allows us to constrain the possibilities available to a component to only what's defined in our spacing system and thus reduce drift.

This means that in practice one should rarely use concrete pixel values. For example:

Avoid

<Box mt="10px" p="20px">
  <Button>View more</Button>
</Box>

Notice how we're passing in pixel values in mt and p? This should be revised as seen below.

Apply this spacing pattern

<Box mt={1} p={2}>
  <Button variant="secondaryOutline">View more</Button>
</Box>

All spacing values

{
  "1": "10px",
  "2": "20px",
  "4": "40px",
  "6": "60px",
  "12": "120px",
  "0.5": "5px"
}

Styled System API

If you'd like to read more about how this to use this form of spacing, check out the styled-system docs here.

On this page
Avoid
Apply this spacing pattern
All spacing values
Styled System API