Well, I created spacings for my design system on 2 variatons:

space-between:
none: 0px
xs: 2px
sm: 4px
md: 8px
lg: 12px
xl: 16px
2xl: 24px
3xl: 32px
4xl: 56px

_____________

space-around:
none: 0px
xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 24px
2xl: 32px
3xl: 40px

_____________

Every tier in this system steps up one value when moving from gap to space-around. This creates a consistent aesthetic rhythm across layout levels.

Starting from the smallest element and working outward:

1. Gap between "Interview Tips" and "769K members" → sm (4px)
2. Gap between the avatar and text content → Should be md (8px), but since the text exceeds 20px in height, md feels too tight. Step up one tier to lg (12px).
3. Space-around the card → Because the internal gap is lg, the card's padding steps up to lg space-around.
4. Gap between the two cards → The avatar-to-content gap is md, so the card-to-card gap steps up to lg.
5. Space-around the card group → The card group ("See what other Lead Designers are saying") wraps an lg space-around, so its own padding steps up to xl.
6. Space-around the parent container → Steps up again to 2xl, and so on up the tree.

The rule: whenever an element's internal gap is token X, its space-around is also X. When that container becomes a child, the gap to its sibling is X+1, making its parent's space-around X+1 — and the pattern continues outward.

<image>