The overall design philosophy is to distinguish content sections with the strategic use of color and avoid the use of excessive borders. This helps reduce visual clutter which a reader's eye and brain must sift through.

The application of background colors creates a visual hierarchy supporting the information hierarchy for the page. When applying background colors to content or layout, it is helpful to think about the content's role and relation to the page's information hierarchy.

There are two approaches to how background colors should be used: Basic or Layered. For consistency across an application, a single approach should be used app-wide.

The decision to use the Basic or Layered approach comes down to how much visual differentiation is desired between background and foreground elements.

• If a more subtle distinction is desired, use the Basic layout.
• If a more defined contrast is desired, such as what is used for this Design System website, use the Layered layout.

A single approach should be used app-wide. You should not use the layered approach on some pages of an application and the basic approach on others.

Explore detailed guidance for applying each approach below.

In this approach, background color is oriented to keep the overall user interface focused and clutter-free. The background color is held consistent throughout the page and content section separation is accomplished primarily through the use of typography and spacing (via margins and padding).

• background - The default background color when no other background color is specified.
• background-contrast - Used to indicate secondary content.

Refer to the background palette for definition of each background color namespace and value.

background should be used for the application background as well as foreground elements, like Cards.

The header, main content, and cards all use background for the background color.

In this example, the header and main content use background and the help text uses background-contrast . Usage of background-contrast and supplemental regions like this should be kept to a minimum.

The layered approach to background color is oriented towards more complex content situations. In addition to typography and spacing, background colors are used to create separate content sections and promote focus on primary content.

In this approach, the overall background color should be background-back and specific content sections which should be the primary focus of attention should use background-front.

From an information architecture, as well as from a component layout perspective, background-back should not be used within a context which already has `background-front`. For instance, a primary navigation header should not use background-front above a main content section that uses background-back.

• background-back - The overall background color.
• background-front - The background color for content which should be the primary focus.
• background-contrast - Could be used to indicate a secondary content area within a large content section.

Refer to the background palette for definition of each background color namespace and value.

For example, a page with a header, summary content, and a grid of cards would use background-front for each card and background-back for everything else.

For a multi-column page layout, background-front could be used to distinguish the column which should be the primary focus.

When the header is fixed, use background-front for the header since it is layered in front of the main content.

When the header scrolls with the main content, use background-back for the header since it is flush with the main content. An example of this design would be the Design System website.