Doc page structure and color update

[schalkneethling]

Because of how we initially implemented the document pages, it limited us by how we could use margins to space out content. After the recent update, we now have more freedom. With that, I want to propose an update do the document layout to:

1. More clearly separate sections of content
2. Make the page more scannable
3. Add a small visual tweak to make the look and feel a bit more interesting if you will

Please see the screenshot below (I apologise for the massive screenshot, but you really need to see the entire page). The biggest changes are the margins between individual sections, changing h3 element to not have the "ZlliSlab highlight" style and moving that style to the h2 elements, and last, seeing that we are not actually using the ZillaSlab Highlight font we can use a bit of a gradient as the highlight.

I would really appreciate everyone's feedback here. Thank you

[peterbe]

I'm still not sure why we use that style of inverting the headings. I think it's called the "slab", right? Where the heading text is white-on-black-background. I don't quite see what the point is. It looks like you've selected the text with the mouse.

[Ryuno-Ki]

I looked into the Branding Guidelines and Design Guidelines but it seems, they're not applicable here.
(Except that the Dark Blue has the wrong value).

Since the highlight style is drawing the attention to it, I'm not sure, whether we want it to appear that often. It's rather reserved for Call-to-actions, from what I observed.

Applying it to <h1> don't buy us much either, since it then competes with the logo.

I'm fine with structuring content by whitespace (the margins). Perhaps you could upload a view with grid or track lines you used for aligning the elements?
Or consult someone from Marketing / OpenDesign team?

[schalkneethling]

So way back in the day when the redesign of MDN Web Docs happened, there was a period where we actually used ZillaSlab Highlight but ran into problems with all of the locales we supported and decided to do this faux slab highlighting.

My main proposal here is to move the slab highlighting to the h2 elements. The reason being that they define new sections and, other than the main h1 title, should therefore carry the most visual weight, not the h3 elements.

This combined with better use of whitespace between main sections should make pages generally more scannable and readable. The color is also not the main thing here. That is an afterthought really.

I looked into the Branding Guidelines and Design Guidelines but it seems, they're not applicable here.
(Except that the Dark Blue has the wrong value).

@Ryuno-Ki Don't worry too much about the Mozilla brand guidelines here. While MDN Web Docs do lend some stylistic aspects from the Mozilla brand, it is its own brand with its own unique visual needs.

Thank you for the feedback all!