Spacing

Name	Size
0	0px0px
px	1px1px
0.5	0.125rem2px
1	0.25rem4px
1.5	0.375rem6px
2	0.5rem8px
2.5	0.625rem10px
3	0.75rem12px
3.5	0.875rem14px
4	1rem16px
5	1.25rem20px
6	1.5rem24px
7	1.75rem28px
8	2rem32px
9	2.25rem36px
10	2.5rem40px
11	2.75rem44px
12	3rem48px
14	3.5rem56px
16	4rem64px
20	5rem80px
24	6rem96px
28	7rem112px
32	8rem128px
36	9rem144px
40	10rem160px
44	11rem176px
48	12rem192px
52	13rem208px
56	14rem224px
60	15rem240px
64	16rem256px
72	18rem288px
80	20rem320px
96	24rem384px

Usage in Figma

Spacing tokens are published from Stylus Design System 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.