Spacing

Spacing tokens define consistent distances for padding, margins, gaps, and positioning. Radius tokens control corner rounding across UI components.

Raw Scale

0 pixels

Variable:

1 pixel

Variable:

2 pixels

Variable:

3 pixels

Variable:

4 pixels

Variable:

8 pixels

Variable:

12 pixels

Variable:

16 pixels

Variable:

24 pixels

Variable:

28 pixels

Variable:

32 pixels

Variable:

40 pixels

Variable:

44 pixels

Variable:

48 pixels

Variable:

64 pixels

Variable:

80 pixels

Variable:

96 pixels

Variable:

Radius

Context: Form FieldVariable: 4pxRefs: var(--spacing-4)
Context: DropdownVariable: 8pxRefs: var(--spacing-8)
Context: CardVariable: 12pxRefs: var(--spacing-12)
Context: Card LargeVariable: 24pxRefs: var(--spacing-24)
Context: ButtonVariable: 100px

Layout

Margin

Variable:

Default (<1024px): 16px (var(--spacing-16))

1024px and up: 80px (var(--spacing-80))

Gutter

Variable:

Default (<1024px): 16px (var(--spacing-16))

1024px and up: 24px (var(--spacing-24))