Spacing
Theme
API
See Notion for complete spec.
Base grid
We employ a base-10px grid for consistent vertical rhythm.
Spacing units
Spacing units are set in multiples of 10px.
Example
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).