HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
Preferred environment
ReactJS and Grommet starter resources
Applying the HPE theme
What if our team doesn't use ReactJS?
Foundation

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 on Slack in #hpe-design-system.

Related

Related content you may find useful when using Developer Guidance.

HPE Cards Preview
Components
The component library provides a vetted set of interface elements for use in your applications and websites. All components are published in Figma for use in your designs. Web versions are built atop Grommet and styled by the HPE Theme providing the "building blocks" your application needs to be performant and compliant.
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.

Still have questions?

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

Edit this page