Color

You will notice that the HPE Design System Color guidance is different from Brand Central. Prioritize the below HPE Design System color palette over Brand Central when identifying colors for your app or web based experience.

Color is a key way we express our brand. Using color on interface elements, how typography is presented, displaying data visualizations, and adjusting context of the experience to light and dark are just some of the ways we illustrate inclusive design for our app and web based experiences.

HPE green symbolizes growth and vitality, commands attention and inspires action. Our green is an essential part of our brand identity and should be evident in every communication wherever possible. Always use the custom color specifications seen here to maintain consistency across channels and media.

HPE Core colors provide a set of swatches that compliment HPE Green and help establish the vibrant experience HPE embraces. We use "emphasis" as a way to show the importance and use the most vibrant hue on light or dark contexts. To maintain accessibility requirements, it's important to be mindful of how the aspects of the color library are used in conjunction with the Core colors.

The light color palette provides a set of swatches which compliment HPE Core colors for use in combination with dark text to maintain color accessibility in your experience. Use these colors only when implementing a light theme.

The dark color palette provides a set of swatches which compliment HPE Core colors for use in combination with light text to maintain color accessibility in your experience. Use these colors only when implementing a dark theme.

The HPE Design System green ensures compliance with WCAG 2.1 standards for distinguishable text and color (see success criterion 1.4.1 and 1.4.3). With accessibility as one of its core principles, the HPE Design System focused on keeping accessibilty research and guidelines at the center of its color selection process.

AAA compliance is met for text on a light mode green background when using `text-strong` color. This is ensured for text of size 18px and above.

AA compliance is met for text on a dark mode green background when using `text-strong` color. To meet AAA compliance, use text size="large" and weight="bold".

Our color palette is only impactful when used in the correct context. Accommodating both light and dark modes of a user experience with the appropriate color palette creates a successful customer experience.

In light and dark modes, building depth with interface elements, and the background is key in making readability or text and key interactions key to driving users' success. The swatches below illustrate how to use color for your experiences.

For times when you have more than two layers of content (e.g. a background and a styled UI element on top of it), you can use contrast to help add more layers of depth to your design, illustrate a visual separation, or show how stacked interface elements will look. By default, contrast will bump your background to a lighter or darker tint based on the theme and background.

Using border colors properly ensures that the user is able to identify the state of various components. Borders help differentiate elements and input fields from surrounding content.

In light and dark modes, border is key in making separating input fields or layout elements from surrounding content. Depending on the context, a varying amount of strength is needed for the border to be effective, and in many cases there may be no border necessary.

Inputs that exist within FormFields have varying colors to suggest their state: enabled vs disabled, required, etc. The proper use of these colors ensures that the user can easily understand the state of the input.

In light and dark modes, input colors are key in providing the user with guidance on how they can interact with an input.

Text needs to be legible in all contexts. Ensuring high contrast is met for accessibility and readability is important to delivering users a consistent reading experience throughout HPE.

Text colors have two states when working on different background contexts; depending on background the text can invert to accomodate a dark mode. To ensure text maintains readability, we avoid color use with the exception of call to actions such as hyperlinks and anchors.

Focus is critical to accessibility. When a user is navigating with keyboard, focus indicates which element on the page is active. Do not remove focus outline in your application, as this will compromise the accessibility of the application.

Elevation creates depth between a foreground and background element. Depending on the desired contrast, varying strengths of elevation can be used. Elevation is implemented by default on certain elements such as Menu and Select.

When a Layer is open, this overlay extends over the rest of the application content. It creates a visual distinction between the active foreground Layer and the inactive background content. This is controlled by `layer.overlay.background` in the theme.

Graph colors should be applied in order, starting with graph-0. This color order was selected to provide clear distinction between adjacent data. When using Grommet DataChart, graph colors will be applied in order by default.