Orbit

Spacing

Source

A single spacing scale powers padding, margin, and gaps. Pass token names to props like padding, margin, gap, rowGap, and columnGap.

The scale is intentionally small so layouts stay consistent. Prefer a token over an arbitrary pixel value. Spacing props accept these tokens directly, and margin props additionally accept the value auto.

Scale

Each step and its resolved pixel value.

none

0px

4px

8px

12px

16px

24px

2xl

32px

3xl

48px

4xl

64px

5xl

96px

Usage

Gap and padding both consume the same scale, so rhythm stays uniform across nesting levels.

First

Second

Third

<Box flexDirection="column" gap="m" padding="xl">
  <Box>First</Box>
  <Box>Second</Box>
</Box>