Document space between components for designers

How are spacial relations between components documented by the big design systems? They only seem to explain how the components look and behave in isolation, not in relation to each other.

For example, if I have an H1 followed by a paragraph, I would like the distance between them to be 40px. On a different page I have an H1 followed by an image, in which case I want the distance to be 30px.

For different combinations of elements I want to define different distances. I want to document these combinations so that designers and developers don't have to figure this out each time and there is more consistency between pages.

For developers this could be documented in css. Designers typically don't see that. How should these rules be communicated to design teams so they use the appropriate spacing between components in their designs?

What is the best method to communicate / document spacial rules between components to designers?