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.
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).
- 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.
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.
Page title
This is the main page content. It may include buttons, tables, forms, or any other kind of component.
Learn about page layoutsCard 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.
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.
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.
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.
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.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.