Palette | Spacing

When building layouts and components, palette hooks into a Theme file for returning values. 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:

Avoid this

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

Good

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

Since units use ten pixels as the base, 1 equals 10px, 2 equals 20px, .5 equals 5px (and so on).