Skip to content
a library of design elements used in creating web/app experiences
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
Previews readme updates Nov 17, 2018
.gitignore Create .gitignore Nov 17, 2018 Update Nov 23, 2018
grommet-2-hpe-theme.framerx add framer x components library Nov 20, 2018
grommet-2-hpe-theme.sketch Added Sketch Library Cover Image. Jan 4, 2019
grommet-2-hpe-theme.xd Adobe XD version Nov 14, 2018

alt text


components can be used to build a variety of HPE web sites, pages and applications that are a key way to showcase our brand to employees, customers and partners. In this section you will find the elements to help build your experience to meet standards, as well as a set of typographic and color styles on a variety of platforms to help you with your development look and feel.

alt text


grommet is a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. It's also the de-facto UI framework HPE uses to build apps and websites. All of our component design files works especially well when paired with grommet! Go check it out and tell your devs!

To learn more, visit

alt text

Sketch (Mac only)

There are two ways to use the Sketch Component Library; One, by manually downloading the Sketch file that contains the entire symbol library (best for folks that want to enhance the design and contribute ideas to the brand) or, Two, add the Sketch Library (read-only) version that automagically updates from the Cloud! The later, being better for folks that just want to use the standard elements and ensure they're always up to date.

Download the Sketch Component Library

Click the link to add to you your Sketch app, Sketch Component Library

If you don't see this window, goto the Menubar and navigate to, Sketch/ Preferences.../ Libraries or use shortcut command + , and add it manually with the + button. (see below) alt text

alt text

Adobe XD

Adobe XD is a great alternative to Sketch (Mac only) for users looking for design and prototyping in the Adobe and Microsoft ecosystems.

Download the XD Components

alt text

Framer X

The closet we have to parity between the designer and developer. Framer X takes Sketch libraries to the next level by not only having design components but coded components in the same design tool, providing the closest fidelity to the running app.

Download the Framer X Components

alt text


For teams that want a web based solution, Figma is a great alternative as it can be run in any modern browser and it has a bunch of cool features to check out. From asset creation to comments on the designs, its a great way to work collaboratively with the components...

Open the file on Figma

Legal Stuff

Trademark Use and Permissions

Hewlett Packard Enterprise, the Hewlett Packard Enterprise Logo, HPE and Hewlett Packard Enterprise product marks are trademarks of Hewlett Packard Enterprise Company and/or its affiliates or licensors. They may only be used to refer fairly and accurately to Hewlett Packard Enterprise and its products and services, subject to the guidelines herein.

Any other use may result in consequences for the user. For example, a third party may not use Hewlett Packard Enterprise trademarks in a manner likely to mislead consumers as to affiliation with Hewlett Packard Enterprise, sponsorship or endorsement by Hewlett Packard Enterprise, or as to the origin of any products or services. Any use of Hewlett Packard Enterprise trademarks that is likely to confuse or mislead the public is unlawful and expressly prohibited.

Joint Promotions

Occasionally, Hewlett Packard Enterprise enters into a written agreement with another company to jointly promote a product or service. In these cases, Hewlett Packard Enterprise may allow the use of its trademarks on communications to endorse the service or product. Joint promotions require a full review of content and design by a Hewlett Packard Enterprise marketing or marketing communications manager. The Hewlett Packard Enterprise logo must be used in accordance with our logo standards and our brand relationship guidelines.

Company Brand Name

Our company brand name is Hewlett Packard Enterprise, regardless of the typeface in which it appears. Use of HPE as an abbreviation is permissible in certain situations as set forth in these guidelines. When referring to our products and services, always use Hewlett Packard Enterprise and HPE as adjectives modifying a generic noun. For example, Hewlett Packard Enterprise computers or HPE support services. When used in editorial text: the first letter of each word in Hewlett Packard Enterprise and every letter in HPE should be capitalized; Hewlett Packard Enterprise and HPE should appear in the same typeface as surrounding text; and Hewlett Packard Enterprise and HPE should be separated from product model numbers and names by a minimum of one-half character space. For example, Hewlett Packard Enterprise Servers or HPE BladeSystem Servers. Company Trade Name

The company trade name of the U.S. parent corporation is Hewlett Packard Enterprise Company. The company trade name is always used as a noun. When referring to Hewlett Packard Enterprise in formal documentation (i.e., annual reports, financial reports), the full company name is preferred. In other cases the company may be referred to simply as Hewlett Packard Enterprise. The company trade name should appear in the same typeface as surrounding text.

You can’t perform that action at this time.