Spacing
Spacing is used to create visual hierarchy and improve readability.
Name | Size | Pixels |
---|---|---|
0 | 0px | 0px |
px | 1px | 1px |
0.5 | 0.125rem | 2px |
1 | 0.25rem | 4px |
1.5 | 0.375rem | 6px |
2 | 0.5rem | 8px |
2.5 | 0.625rem | 10px |
3 | 0.75rem | 12px |
3.5 | 0.875rem | 14px |
4 | 1rem | 16px |
5 | 1.25rem | 20px |
6 | 1.5rem | 24px |
7 | 1.75rem | 28px |
8 | 2rem | 32px |
9 | 2.25rem | 36px |
10 | 2.5rem | 40px |
11 | 2.75rem | 44px |
12 | 3rem | 48px |
14 | 3.5rem | 56px |
16 | 4rem | 64px |
20 | 5rem | 80px |
24 | 6rem | 96px |
28 | 7rem | 112px |
32 | 8rem | 128px |
36 | 9rem | 144px |
40 | 10rem | 160px |
44 | 11rem | 176px |
48 | 12rem | 192px |
52 | 13rem | 208px |
56 | 14rem | 224px |
60 | 15rem | 240px |
64 | 16rem | 256px |
72 | 18rem | 288px |
80 | 20rem | 320px |
96 | 24rem | 384px |
Usage in Figma
Spacing tokens are published from Stylus Design Tokens and should be available by default in the Scribe workspace. Select the hexagon icon in applicable fields to apply spacing tokens.
Usage in code
Our spacing scale is inherited from Tailwind and can be used to set padding
, margin
, width
, minWidth
, maxWidth
, height
, minHeight
, maxHeight
, size
, gap
, inset
, space
, translate
, scrollMargin
, and scrollPadding
.
One spacing unit is equal to 0.25rem
, which translates to 4px
by default in common browsers.
<Component className="p-2" /> // Set padding to 0.5rem (8px)<Component className="mt-4" /> // Set top margin to 1rem (16px)<Component className="w-10" /> // Set width to 2.5rem (40px)<Component className="size-6" /> // Set width and height to 1.5rem (24px)
Prefer using spacing values from the scale whenever possible.