Files
hpe-branding/assets/README.md
T
claude 0730557624 Initial mirror of the HPE Design System
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.
2026-07-30 08:34:50 -04:00

10 KiB

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.svg and chat.svg (24x25), and chat-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.svg is 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 with brand/. 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-grommet cover 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?