HPE Design System
The Design System was created to empower designers, developers, and others to contribute to making great experiences for the customer.
Starter files, patterns, interactions, and workflows on how to succeed using the design resources from HPE Design System and the HPE Brand.
Common form use cases from application configuration to payment acceptance.
Header is a Box with a set of preset properties for introductory content.
The starting point of the design system is human centered, generating experiences which are inclusive and vibrant.
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.
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.
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.
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.
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 formailzed 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.
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 Stack component is a container that stacks content on top of each other.
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.
What the HPE Design System is and why we’re creating it.
Philosophy and Principles
Accessibility will be an important part of guidance in using our components.
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.
Bringing out the depth and dimension of our identity, the HPE Design System use of color evokes energy and inspiration.
At-a-glance preview for operation critical information with easy access to areas requiring attention.
A navigation pattern promoting focused execution through a central "hub" from which all activities begin and "spokes" on which more focused tasks are accomplished.
Hub and Spoke Navigation
Go-to patterns for displaying many services, devices, users, and more.
Page layout options, anatomies, and behaviors serving a wide variety of enterprise application, workflow, and marketing contexts.
Navigation choices which persist throughout the application structure, presenting consistent, easy to click-through choices.
Wizards are an effective way to handle multi-step forms.
Data visualizations are an effective way to present quantitative data to a user.
Allows users to create a focused data set by specifying data attributes and values of interest.
Notifications are a helpful way to notify a user of changes to application state or to prompt action from a user.
Build HPE compliant designs in code that are ready to be consumed on the web.
Got API, but need to easily pull data out of it for use in your app or designs. Chomp! Chomp!
For use when building applications and services that live in the HPE eccosystem.
Keep it simple! Present and share slides with this lightweight service.
The only CMS you will ever need! Publish content quickly and easily.
Need a place to host images in the cloud for use by your HPE services and apps?
A collection of navigational components that compose declaratively with your application.
Build tables for your app quickly with all the filtering, sorting, and controls you could need!