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.


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 spacing pattern

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

Apply this spacing pattern

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

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