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).

In the basic approach, visual distinction for a header or an app-wide sidebar from the page's primary background is created by applying a second color with significant contrast to background. For instance, a dark blue, persistent navigation sidebar creates the desired contrast, achieving visual separation of the sidebar from the primary content.

• background
  - The default background color when no other background color is specified.
• background-contrast
  - Used to indicate secondary content.
• background (dark) or another color (dark)
  - Used to indicate a primary navigation sidebar or header.

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

background

The header, main content, and cards all use background

In this example, the header and main content use background

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.
• background (dark) or another color (dark)
  - Could be used to indicate a primary navigation sidebar or header.

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

When the header scrolls with the main content, use background-back