Developer Guidance

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.

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.

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.

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.

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.