HPE Design System

Highlights

The Design System was created to empower designers, developers, and others to contribute to making great experiences for the customer.

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 Forms Preview

Common form use cases from application configuration to payment acceptance.

Header is a Box with a set of preset properties for introductory content.

HPE Human Centered

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

HPE Developer Guidance Preview

Developer Guidance

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

Buttons are used to indicate actions that can be performed.

HPE Navigation Preview

The entry point for the expansive topic of Navigation.

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.

Find content corresponding to keyword queries.

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.

HPE Accordion Preview

The accordion affords content to be delivered progressively.

Used with text based navigation, such as inline text.

Box is where it all starts. Flexible props allow the behavior of content to be defined to optimize the user experience.

HPE Cards Preview

A container providing at-a-glance information and easy access to more details.

When the user needs to select one or more options, use a checkbox.

When the user needs to select one or more options from a set of options, use a CheckBoxGroup.

A widget which allows the user to select a date or range of dates from a calendar.

Footer is a Box with a set of preset properties. Box properties allow you to customize the footer.

The Grid component is used to layout content. Responsive grid is important to consider in every use case.

The Layer component is flexible and can be used in multiple use cases such as modal, dialogs, or notifications.

The Main component is where you define the location and layout of the primary context of your content.

MaskedInput allows you to specify formalized text within a form field.

Menu contains a list of actions. When a menu item is clicked, the menu closes and the action is executed.

HPE Design System Pagination

Pagination divides content into separate pages in order to enhance navigation to specific items.

RadioButtonGroup

When one option of a set of options can be specified, use the RadioButtonGroup component.

The RangeInput component is a slider control that provides a handle the user can move to make changes to values.

Flexible input allowing users to choose from a list of options.

A loading state for quick asynchronous tasks.

A Stack component is a container that stacks content on top of each other.

HPE Tables Preview

Table presents data in a column and row format.

Tabs allow a user to access content while maintaining the existing context.

When you need to allow the user to provide longer forms of content, use a TextArea component.

The TextInput component allows the user to input shorter forms of data and content.

HPE Tip preview

A Tip is used to specify extra information when the user moves the mouse pointer over the element.

HPE Philosophy Preview

Philosophy and Principles

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

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.

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.

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 Dashboards Preview

At-a-glance preview for operation critical information with easy access to areas requiring attention.

HPE Hub and Spoke Navigation Preview

Hub and Spoke Navigation

A navigation pattern promoting focused execution through a central "hub" from which all activities begin and "spokes" on which more focused tasks are accomplished.

HPE Lists Preview

Go-to patterns for displaying many services, devices, users, and more.

HPE Page Layouts Preview

Page layout options, anatomies, and behaviors serving a wide variety of enterprise application, workflow, and marketing contexts.

HPE Peristent Navigation Preview

Persistent Navigation

Navigation choices which persist throughout the application structure, presenting consistent, easy to click-through choices.

HPE Wizard Preview

Wizards are an effective way to handle multi-step forms.

HPE Data Visualization Preview

Data Visualization

Data visualizations are an effective way to present quantitative data to a user.

HPE Filtering Preview

Allows users to create a focused data set by specifying data attributes and values of interest.

HPE Design System Global Header

A standardized header for use when building applications and services that live in the HPE ecosystem.

HPE Notifications Preview

Notifications are a helpful way to notify a user of changes to application state or to prompt action from a user.

HPE Designer Preview

Build HPE compliant designs in code that are ready to be consumed on the web.

HPE Design System Roadmap

An interactive roadmap of the HPE Design System that provides insight into current and future milestones.

HPE API Chomp Preview

Got API, but need to easily pull data out of it for use in your app or designs. Chomp! Chomp!

HPE Global Sidebar Preview

For use when building applications and services that live in the HPE eccosystem.

HPE Audience Preview

Keep it simple! Present and share slides with this lightweight service.

HPE docs Preview

The only CMS you will ever need! Publish content quickly and easily.

HPE Images Preview

Need a place to host images in the cloud for use by your HPE services and apps?

HPE React Router Preview

A collection of navigational components that compose declaratively with your application.

HPE Table Topper Preview

Build tables for your app quickly with all the filtering, sorting, and controls you could need!