HPE Design System Foundation

Foundation

These are the core elements of HPE that encompass the voice, language, and visuals that personify our brand and help establish and identify it from the rest of the community.

Philosophy

HPE Accessibility Preview

Central to the HPE Design System, accessibility is incorporated into all Design System facets, ensuring HPE applications are usable by as many people as possible.

HPE Philosophy Preview

Philosophy and Principles

What the HPE Design System is and why we’re creating it.

HPE Developer Guidance Preview

Developer Guidance

Resources for setting up your application with the HPE Design System library and HPE theme.

HPE Designer Guidance Preview

Designer Guidance

Starter files, patterns, interactions, and workflows on how to succeed using the design resources from HPE Design System and the HPE Brand.

HPE Human Centered

The starting point of the design system is human centered, generating experiences which are inclusive and vibrant.

HPE T-shirt Sizing Preview

Create consistent, composable interfaces with t-shirt sizing.

HPE Voice and Tone Preview with two speech bubbles

Deliver clear, consistent experiences to HPE customers by following guidelines for the voice and tone of text-based user interface elements.

Assets

The Element is about focus. It creates momentum and energy. It is a building block. It can move, change, expand, and constrain. It works across many touch points.

Distinctive Brand Assets

Our distinctive brand assets are comprised of the top elements that are always used, along with several optional components that can be added.

HPE Color Preview

Bringing out the depth and dimension of our identity, the HPE Design System use of color evokes energy and inspiration.

HPE Background Colors Preview

Background Colors Guidance

Leverage HPE background colors to seamlessly style your layout.

HPE Typography Preview

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.

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.