A gap only works if it’s empty

Paint the gap and it stops looking like a gap. That is the whole problem — and the whole fix.

Now — the gap is inside the blue

Coloured section
the gap is here — and it’s blue

The gap is blue, so you can’t see it. It reads as one taller blue block touching the next section.

Better — the gap is empty page

Coloured section
the gap is here — and it’s empty

Same amount of space, moved outside. Now you can see it — whatever colour the section above is.

Why this caused eleven exceptions

Because the gap is invisible whenever the section above is coloured, an author has to notice it and switch extra padding on by hand. That has been written up eleven times for different components — Banner, Carousel, Image Cards, and all nine Corporate ones.

Move the gap outside and there is nothing left to notice. One field replaces the three padding checkboxes and the two typed margin boxes: Spacing: Inherit · S · M · L · XL.

The five gaps, now matching live

XS
article text
24
S
images, summary
32
M
contextual card
48
L
explore map
56
XL
standard gap
80 / 80 / 56

Bars are drawn at real height. XL was the broken one — it shrank to 48 on tablet and 32 on mobile, where live uses 80 and 56.

To decide