Create visually independent layout regions

Problem/Motivation

Right now the current layout doesn't have a max-width on some pages and some elements like paragraphs and cards fill all the width available. At the same time, some elements in forms need wider regions.

Proposed resolution

Create visually independent layout regions to improve the layout and give it more flexibility we need to make page elements visually independent. We need to switch the general strategy to use a background color where each region will have its own wrapper. It’ll help us move away from the old layout design we’ve had over the last decade to a new component oriented layout. Some quick tests:

Remaining tasks

• Define the specs to implement Layers from the initial idea on Drupal's Design System.
• Evaluate components that will need a background when we add the new color to the body. For example tables(/admin/content) and admin lists (/admin/config).
• Evaluate design changes needed, like the tabs.
• Create child issues to style those components.
• Finally, add the new background color

User interface changes

All the Claro administration interface will be affected

Release notes snippet

@todo