Spacing

Theme

https://github.com/artsy/palette/blob/master/packages/palette/src/Theme.tsx#L116

API

https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space

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

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

Apply this spacing pattern

<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).