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.