HPE
Design System
Foundation
Components
Templates
Extend
Extend

Developer Guidance

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

Getting started

We're excited you're using the HPE Design System! Below are a set of resources that will help you get your application set-up with Grommet and the HPE theme. If you don't find what you're looking for, please reach out in the #hpe-design-system channel on Slack.

Preferred environment

The HPE Design System is primarily focused on user interfaces developed with ReactJS and Grommet. We encourage teams to use ReactJS and Grommet if possible because there are more resources, examples, and community help for this environment.

Questions and feedback should be routed through the #hpe-design-system channel on Slack.

ReactJS and Grommet starter resources

If you are new to ReactJS, the React Tutorial is a good place to start.

If you are already familiar with ReactJS but are unfamiliar with Grommet, check out the Getting Started with Grommet guide.

Applying the HPE theme

Once your project is set up with ReactJS and Grommet, make sure you have the latest grommet-theme-hpe theme via npm or yarn. This will help ensure that your application is aligned with the HPE Design System colors, fonts, and default component styles.

What if our team doesn't use ReactJS?

For non-ReactJS environments, such as those with a large code base that are not ready to absorb changing the UI framework, we recommend using the examples and patterns shown in the HPE Design System as a reference. Styles should be matched as closely as possible. Using the browser develop tools to inspect the styling can help with this process.

If you have questions or would like some guidance on migrating to ReactJS, please reach out to the HPE Design System team.

Related

Related content you may find useful when using Developer Guidance.

HPE Cards Preview
Components
Our component library provides a vetted set interface elements for use in your applications and websites. Using the latest web technology to keep you compliant and performant.
HPE Cards Preview
Templates
Jumpstart application design and development with use-case specific templates. Interactive templates demonstrate desired user experiences and the building block components used to create them.
HPE Designer Preview
Designer
Build HPE compliant designs in code that are ready to be consumed on the web.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page