HPE
Design System
Foundation
Components
Templates
Extend
Foundation

Background Colors Guidance

Leverage HPE background colors to seamlessly style your layout.

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.

Basic or Layered approach?

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.

Basic

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.

Basic layout with Cards

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. The sidebar uses a different color
to differentiate it from the rest of the content.

Sidebar
HPE
App Name

Page title

This is the main page content. It may include buttons, tables, forms, or any other kind of component.

Learn about page layouts
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11

Basic layout with supporting content

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.

Sidebar
HPE
App Name

This is the main page content. It may include buttons, tables, forms, or any other kind of component.

For more info on building page layouts, see our page layouts guidance.

Here is some text that is supplementing the main content.

It is recommended to keep these supplemental sections to a minimum.

Layered

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.

Examples of Layered Layout

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.

With fixed header

When the header is fixed, use background-front

for the header since it is layered in front of the main content.

Sidebar
HPE
App Name

Page title

In a layered layout, background-back is used for the app background, and background-front is used on the foreground content, such as these Cards.

Header scrolls with 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.

Sidebar
HPE
App Name

Page title

In a layered layout, background-back is used for the app background, and background-front is used on the foreground content, such as these Cards.

Related

Related content you may find useful when using Background Colors Guidance.

HPE Color Preview
Color
Bringing out the depth and dimension of our identity, the HPE Design System use of color evokes energy and inspiration.
HPE Typography Preview
Typography
The MetricHPE font is an integral part of our personality and design. When we’re making a statement, our visual language is clear, recognized and understood.
Hpe Icon Preview
Icons
Icons are an integral part of our visual storytelling style to represent objects, actions, programs and other communicative symbols. This clean, dynamic style remains flexible while retaining the voice of our brand.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page