Spacing

Scale

Steps are named by their value in pixels, so --sonar-space-12 is 12 px wherever you read it. Use the closest step; if none fits, the design probably needs a different structure, not a new number.

1. 2 --sonar-space-2
2. 4 --sonar-space-4
3. 6 --sonar-space-6 Icon to label, status dot to its text. The most common gap inside rows.
4. 8 --sonar-space-8
5. 10 --sonar-space-10
6. 12 --sonar-space-12 Between related controls in a row.
7. 14 --sonar-space-14
8. 16 --sonar-space-16
9. 20 --sonar-space-20 Between cards: the layout gap.
10. 24 --sonar-space-24
11. 28 --sonar-space-28 Card padding, left and right, at every size.
12. 32 --sonar-space-32 Page margin on desktop.
13. 40 --sonar-space-40
14. 48 --sonar-space-48 Minimum touch target on tablets and phones.

Cards on the grid

Cards keep 28 px of side padding at every size and sit 20 px apart, in columns and in rows. Content inside a card aligns to the padding, so titles, rules and figures line up from card to card.