Spacing and sizing
The 4px spacing scale and control sizes.
Spacing scale
Spacing uses a 4px grid. Use the token classes, for example p-ds-16 or gap-ds-8.
| Preview | Value | Class |
|---|---|---|
| 0px | p-ds-0 | |
| 4px | p-ds-4 | |
| 8px | p-ds-8 | |
| 12px | p-ds-12 | |
| 16px | p-ds-16 | |
| 20px | p-ds-20 | |
| 24px | p-ds-24 | |
| 32px | p-ds-32 | |
| 40px | p-ds-40 | |
| 48px | p-ds-48 |
Control sizes
Controls use control.height, not the sizes below directly, so they change with density. The smallest size, 24px, is the minimum target size.
| Token | Value |
|---|---|
size.control.xs | 24px |
size.control.sm | 28px |
size.control.md | 32px |
size.control.lg | 36px |
size.control.xl | 40px |
Guidance
Use 4 between an icon and its label in small controls and tags, and 8 in medium and large controls. Use 8 inside fields and small buttons, and between related items. Use 12 to 16 between form fields, 24 between groups, and 32 to 48 between page sections.