HPE Design System Foundation
HPE
Design System
Foundation
Components
Templates
Learn

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
Foundation

Accessibility

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
Foundation

Philosophy and Principles

What the HPE Design System is and why we’re creating it.
HPE Developer Guidance Preview
Foundation

Developer Guidance

Resources for setting up your application with the HPE Design System library and HPE theme.
HPE Designer Guidance Preview
Foundation

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
Foundation

Human Centered

The starting point of the design system is human centered, generating experiences which are inclusive and vibrant.
HPE T-shirt Sizing Preview
Foundation

T-shirt Sizing

Create consistent, composable interfaces with t-shirt sizing.
HPE Voice and Tone Preview with two speech bubbles
Foundation

Voice and Tone

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

Assets

HPE Our Brand Preview
Foundation

Our Brand

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.
color.brand
color.text.strong
Foundation

Design Tokens

Design tokens are the single source of truth between the design system and code. Tokens store values like colors and fonts so that those values can be used across designs, code, tools, and platforms.
Foundation

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
Foundation

Color

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

Background Colors Guidance

Leverage HPE background colors to seamlessly style your layout.
HPE Typography Preview
Foundation

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
Foundation

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.