Spacing

Spacing, sizing, radius, border-width and breakpoint tokens. Values come directly from the Figma _root global collection and are exposed as CSS custom properties.

Space

17 steps from 0 to 260px. Use for padding, margin, and gap.

TokenpxVisual

--space-0

0px

--space-1

2px

--space-2

4px

--space-3

6px

--space-4

8px

--space-5

12px

--space-6

16px

--space-7

20px

--space-8

24px

--space-9

32px

--space-10

40px

--space-11

48px

--space-12

64px

--space-13

80px

--space-14

96px

--space-15

160px

--space-16

260px

Size

16 steps from 4px to 128px. Use for square dimensions (icon boxes, avatars, control heights).

--size-1

4px

--size-2

6px

--size-3

8px

--size-4

12px

--size-5

16px

--size-6

20px

--size-7

24px

--size-8

32px

--size-9

40px

--size-10

48px

--size-11

56px

--size-12

64px

--size-13

72px

--size-14

80px

--size-15

96px

--size-16

128px

Border Radius

Corner radius tokens from 0 to full. Use for buttons, cards, inputs.

--radius-0

0px

--radius-1

2px

--radius-2

4px

--radius-3

6px

--radius-4

8px

--radius-5

12px

--radius-6

16px

--radius-7

24px

--radius-8

32px

--radius-full

9999px

Border Width

8 stroke thicknesses from 0 to 8px.

--border-width-0

0px

--border-width-1

0.5px

--border-width-2

1px

--border-width-3

2px

--border-width-4

3px

--border-width-5

4px

--border-width-6

6px

--border-width-7

8px

Breakpoints

5 viewport breakpoints for responsive layouts.

--breakpoint-xs

375px

--breakpoint-sm

440px

--breakpoint-md

768px

--breakpoint-lg

1024px

--breakpoint-xl

1280px