Documentation content vertical spacing

[nsolerieu]

The current documentation markdown page use very tight vertical spacing which leads to a very dense "wall of text" effect. I'd suggest to update our spacing classes to promote an easier reading experience.

---

Before: most of the spacing is handled by margin-bottom rules on paragraphs and headings and is set at 16px

---

Suggestion: We could consider creating a stronger visual hierarchy by having larger spacing above the heading with a gradual scale. H2 would have a greater margin top of 64px than and H3 at 48px. Margin bottom should also follow this logic and to allow the text to pair withe the heading. The bulk of our documentation seems to use h2 and h3 extensively so addressing these 2 could alleviate a lot of the visual density.

Paragraphs could be bumped up to margin-bottom:24px

---

Before/after

[tallys]

Heads up @mperrotti - let's invite @nsolerieu to a Primer Patterns so we can get on the same page about the design for Primer.style.

[nsolerieu]

PRs are open:

• Paragraphs: Update paragraph.js #705
• Headings: Update heading.js #706

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.