Spacing tokens

Spacing tokens create a shared rhythm between controls, related groups, and larger sections. The primitive names mirror their pixel value at the default 16px root size, while their rem values allow the interface to grow with the user’s text scale.

The scale includes 0, compact 2–8 steps, regular 12–24 steps, and spacious 32–64 steps. This gives layouts enough range without encouraging arbitrary one-off gaps.

0

2

4

6

8

12

16

20

24

32

40

48

64

Use smaller values for tight internal relationships and larger values to separate distinct groups. Prefer gap in flex and grid layouts so parent containers own the space between children. Component internals may use primitive spacing when no semantic layout contract exists.

For fluid layouts, combine the scale into bounded values rather than introducing arbitrary endpoints:

.section {
  padding-inline: clamp(var(--aidsgn-space-16), 3vw, var(--aidsgn-space-32));
}

Spacing tokens are not breakpoints. See responsive layout for query thresholds and container-query guidance.