Sizes in Sanity UI

Why does Sanity UI use a number-based spacing scale?

Some UI libraries use spacing keys like none, xs, s, m, l , xl, etc., while Sanity UI uses numeric spacing keys.

For example – this is how you define the spacing/size of a button in Chakra UI:

<Button colorScheme='teal' size='sm'>
  Button
</Button>

While in Sanity UI you do:

<Button padding={2} tone="primary" text="Button" />

These are some advantages of number-based spacing scales:

The numbers are part of a spacing scale.

The spacing scale in Sanity UI is a sequence of 10 numbers – 0 to 9. Each number represent a spacing value:

Using a fibonacci scale gives us an effective scale for combining different paddings and get balanced and aligned compositions.

Which means:

<Card padding={0}> // no padding
<Card padding={1}> // 4px padding
<Card padding={4}> // 20px padding
<Card padding={6}> // 52px padding

and so on.

Made withby folks at