Spacing and radius
A small, consistent set of gaps and two corner radii: one for cards, one for everything button-shaped.
Spacing
Section titled “Spacing”| Gap | Use |
|---|---|
| 4px | Micro-gaps: an icon to its own label, tight rows |
| 8px | Closely related items: a chip’s icon gap, small stacks |
| 16px | The standard: card padding, the default gap |
| 24px | Between distinct groups: separating a card’s own sections |
Radius
Section titled “Radius”30px: card (rounded-card)
30px on the outermost card, container, or anything the eye reads as “the surface”.
15px on everything else with a corner: buttons, inputs, pills, and just as often a smaller card nested inside a 30px one (an accommodation listing, a stat tile, a task row, a welcome-card step).
Once something sits inside another rounded surface, it drops to 15px, whether or not you can tap it.
Don’t invent a third radius. If something doesn’t obviously fit either bucket, it’s probably closer to 15px.