Readable mirror of https://design-system.hpe.design, sourced from github.com/grommet/hpe-design-system (Apache-2.0) at commit 567c4d5 (2026-07-16). The upstream site is a client-rendered Next.js export with no sitemap; it returns a 1.5 KB empty shell to curl. This repo is the same guidance in plain Markdown with every value resolved, plus the assets checked in. Docs: scope and authority model, brand foundations with resolved color and spacing tables, the design token tiers and version map, UI copy rules, accessibility conformance and the responsibility split, the component and template inventory, and an adoption/review checklist. Assets: 452 SVG icons, 5 HPE and Aruba word-marks, 282 documentation graphics. HOWTO-mirror-the-design-system.md is a verified runbook for rebuilding this from scratch against a newer upstream. Colors were resolved programmatically, not transcribed: token JSON stores references, not values. Apache-2.0 upstream. Note that it covers copyright, not trademark; Brand Central remains authoritative for the HPE marks.
hpe-branding/assets — vendored HPE assets
Copies of the icon set, brand marks, and documentation graphics from
github.com/grommet/hpe-design-system, taken at commit 567c4d5 (2026-07-16)
on 2026-07-30. Here so the marks, icons, and reference images are available
without a build step, an npm install, or loading a JavaScript site.
| Folder | Contents | Size |
|---|---|---|
icons/ |
452 SVG icons, the full HPE set | 1.9 MB |
brand/ |
5 HPE and Aruba word-marks | 34 KB |
site-images/ |
282 documentation graphics, mirrored from the docs site | 32 MB |
License and trademark
The code and icons are Apache-2.0, "Copyright 2025 Hewlett Packard
Enterprise Development LP." The license text is in icons/LICENSE.
The license is not the whole story for the brand marks. An open-source copyright license does not grant trademark rights. The HPE logo and the Element are HPE trademarks, and their use is governed by the HPE Terms of Use with the authoritative files and usage rules on Brand Central.
Treat brand/ as a convenience copy for reading and internal reference. For
anything that ships or goes to a customer, pull the current file from Brand
Central. A vendored logo goes stale silently, and the GreenLake rebrand noted
in ../02-brand-foundations.md is exactly the kind of event that would make
this copy wrong.
brand/
| File | What it is |
|---|---|
HPE_logo_full-clr_pos_rgb.svg |
HPE word-mark, positive (light backgrounds) |
HPE_logo_full-clr_rev_rgb.svg |
HPE word-mark, reversed (dark backgrounds) |
hpe-logo.svg |
Site header variant of the word-mark |
hpe-logo-invert.svg |
Site header variant, inverted |
aruba-logo.svg |
HPE Aruba Networking word-mark |
The Element (the green rectangle symbol) is not here. It ships as part of
the icon set: icons/element.svg. It is the only icon in the set with a
hardcoded color, #01A982, because the brand green is not allowed to inherit.
It is also one of the few icons that is not square, at 48x24.
Placement rules for the Element and the logos are in
../02-brand-foundations.md.
icons/
452 SVGs, flat directory, one file per icon, named semantically.
Properties worth knowing before using them:
- 448 of 452 are 24x24. The exceptions are
element.svg(48x24),catalog.svgandchat.svg(24x25), andchat-conversation.svg(24x26). If you are laying out an icon grid, those four will not align. - 451 of 452 use
fill="currentColor", so they take the color of their container with no edit.element.svgis the one exception. - No
<style>blocks, no external references, no embedded rasters. Safe to inline.
Sizing, color tokens, and accessibility rules (aria-label, aria-hidden on
decorative icons) are in ../02-brand-foundations.md.
For React, prefer the published package @hpe-design/icons-grommet over these
raw files. It carries the accessibility props and theme integration. These SVGs
are for non-React use, for design work, and for reading.
Largest name families
document (32), user (10), cloud (8), wifi (6), status (6),
shield (5), link (5), folder (5), table (4), star (4), power (4),
phone (4), caret (4), battery (4).
Full index
AI-gen-fill AI-gen AI-systems accessibility achievement actions ad add aed aggregate aid alarm alert analytics anchor announce app apps archive article ascend ascending assist-listening atm attachment attraction baby back-ten bar battery-empty battery-full battery-low battery beacon bike blades-horizontal blades-vertical blog bluetooth book bookmark braille briefcase brush bucket bug bulb bundle bus business-service cafeteria calculator calendar camera car caret-down caret-left caret-right caret-up cart catalog certificate channel chapter-add chapter-next chapter-previous chart-bar chart-line chart-pie chat-conversation chat checkmark circle-empty circle-fill clear clipboard clock clone close closed-caption cloud-add cloud-computer cloud-download cloud-locked cloud-offline cloud-software cloud-upload cloud cluster coat-check code coffee columns command compare compass compliance configure connect connectivity console contact contract copy cpu credit-card cube cubes currency cursor cut cycle dashboard database deliver deploy descend descending desktop detach device dial diamond directions disc dislike-fill dislike document-cloud document-config document-csv document-download document-excel document-image document-locked document-missing document-notes document-outlook document-pdf document-performance document-ppt document-rtf document-sound document-store document-test document-text document-threat document-time document-transfer document-txt document-update document-upload document-user document-verified document-video document-warning document-windows document-word document-zip document domain down download drag drive-cage duplicate edit eject element elevator emergency-fill emergency erase escalator expand fan fast-forward favorite filter finger-print firewall five-g flag flows focus folder-add folder-cycle folder-open folder-search folder forward-ten gallery gamepad gateway gem gift globe gpu grid group grow halt help-book help hide history home host-maintenance host ice-cream image impact in-progress inbox info inherit insecure inspect install integration iteration key keyboard language layer left like-fill like link-bottom link-next link-prev link-top link list-ordered list-unordered list local location-pin location lock lodging login logout lounge magic mail manual map-add map meeting memory menu microphone mode money monitor moon more-vertical more mouse multimedia multiple music navigate network-drive network-switch network new-window new nodes note notes notification object-group object-ungroup offline-storage optimize organization overview package paint pan pause-fill pause performance personal-computer phone-flip phone-horizontal phone-vertical phone pin play-fill play power-cycle power-force-shutdown power-reset power print progress projects qr redo refresh resources restaurant restroom-men restroom-unisex restroom-women restroom resume return revert rewind right risk robot rotate-left rotate-right rss run sans satellite save scan scorecard script sd search-advanced search secure select selection semantics send sensor-locked sensor-off sensor server-cluster server servers service-play services settings share shield-check shield-emergency shield-security shield-unsecure shield shift shop sidebar sign spa split splits stakeholder star-fill star-half-fill star-half star status-critical status-disabled status-good status-info status-unknown status-warning steps stop-fill stop storage street-view subtract sun support swim switch sync system table-add-column table-add table-search table tag tape target task technology temperature template test-desktop test text-wrap theme threats three-d-effects three-d ticket time tools tooltip train transaction trash tree-node tree trigger trophy tty undo unlink unlock unsorted up update upgrade upload usb-key user-add user-admin user-expert user-female user-manager user-new user-police user-settings user-worker user validate vend video view virtual-machine virtual-storage vm-maintenance volume-low volume-mute volume vulnerability waypoint webcam wheelchair-active wheelchair wifi-locked wifi-low wifi-medium wifi-none wifi-off wifi workshop yoga zoom-in zoom-out
site-images/
A mirror of apps/docs/public/ from the docs repo: every graphic the
documentation site renders. 282 files. These are the diagrams, do/don't
comparisons, and screenshots that the MDX prose refers to, so they are the
visual half of the guidance the docs in this folder summarize.
| Folder | Files | What it covers |
|---|---|---|
templateImages/ |
82 | The 27 template patterns: navigation, forms, wizards, dashboards, notifications |
foundationImages/ |
32 | Color, typography, spacing, scale. Includes accessibilityImages/ with the four WCAG principle graphics |
extendImages/ |
21 | Extending the system beyond stock components |
highlightImages/ |
20 | Home page and section highlights |
componentImages/ |
11 | Component illustrations. Includes PageBackground.svg at 2.3 MB |
logos/ |
10 | Third-party partner logos (Apache, Dataiku, Dremio, H2O, SingleStore, StreamSets and others), not HPE marks |
images/ |
6 | Page backgrounds, light and dark |
whatis/ |
5 | Explainer graphics |
creativetoolkitimages/ |
3 | Creative toolkit |
learnImages/ |
2 + 2 subfolders | Tutorial screenshots for the grid and box-model walkthroughs |
static/ |
2 + 2 subfolders | Site chrome, favicon, accessibility video cover and caption files |
| root | 50 | Component previews, 404 art, token version comparisons (hpe-design-tokens-v0.png / -v1.png), the HPE word-marks |
Notes on what is in here:
- About 14 MB of the 32 MB is Unsplash stock photography in
learnImages/grid-fundamentals-part-1/. Four JPGs between 2.5 and 4.9 MB used as filler content in a Grommet grid tutorial. They carry no HPE guidance. If repo size ever becomes a problem, delete that folder first and you reclaim nearly half the total at zero cost. logos/holds partner logos, not HPE brand marks. Do not confuse it withbrand/. Those third-party marks belong to their owners and are not covered by the Apache-2.0 license on this repo.- Five files are not images:
static/favicon.ico, two WebVTT caption tracks for the accessibility video, an.avif, and a.jp2. - The HPE word-marks appear both at the root here and in
brand/.brand/is the curated copy; use that one.
hpe-design-tokens-v0.png and hpe-design-tokens-v1.png are worth a look on
their own. They are the side-by-side dashboard comparison showing what a theme
major version actually changes, which makes the versioning argument in
../03-design-tokens.md concrete.
Open questions
- Does
@hpe-design/icons-grommetcover all 452, or is the React package a subset? - The icon docs mention per-icon metadata for discovery. That metadata is not in these raw SVGs. Where does it live, and is it published?
- Are the four off-grid icons a deliberate optical adjustment or a source bug worth reporting upstream?