Our spacing system is based on a modified base-8px grid. Spacing values are set in multiples of 8px, with exception of values below 24px, which are set in increments of 4px to allow for low smaller padding and margin for denser parts of the UI.
When building layouts and components, we can utilize a set of resusable spacing values that align to our base grid. This allows us to constrain the possibilities available to a component to only what's defined in our spacing system.
In practice one should rarely use concrete pixel values.
<Box m="18px" py="6px" pt="12px" />
<Box m={4} py={2} pt={3} />
theme.space[0]theme.space[1]theme.space[2]theme.space[3]theme.space[4]theme.space[5]theme.space[6]theme.space[7]theme.space[8]theme.space[9]theme.space[10]theme.space[11]