When building layouts and components, palette hooks into a handful of
reusable base-10 spacing units.
With ten pixels as the base, 1
equals 10px
, 2
equals 20px
, .5
equals
5px
(and so on). 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. For example:
Notice how we're passing in pixel values in mt
and p
? This should be revised
as seen below.
{ "1": "10px", "2": "20px", "4": "40px", "6": "60px", "12": "120px", "0.5": "5px" }
If you'd like to read more about how this to use this form of spacing, check out
the
styled-system
docs here.