Spacing

Space Scale

Spacing values are derived from a 10-step scale, which is used for props like margin, padding, and gap. The scale is based on powers of two, which allows for a consistent and predictable spacing system.

0

1

2

3

4

5

6

7

8

9

Scale	Spacing
0	0
1	4px
2	8px
3	12px
4	16px
5	24px
6	32px
7	40px
8	48px
9	64px

Customizing

Spacing is configured in the theme

import { createTheme, defaultTheme } from "@atomicjolt/atomic-elements";

const theme = createTheme({
  variables: {
    "space-0": "0",
    "space-1": "0.25rem",
    "space-2": "0.5rem",
    "space-3": "1rem",
    "space-4": "2rem",
    "space-5": "4rem",
    "space-6": "8rem",
    "space-7": "16rem",
    "space-8": "32rem",
    "space-9": "64rem",
  },
  base: defaultTheme,
});