justin/hpe-branding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial mirror of the HPE Design System

Browse Source 
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.
This commit is contained in:
claude
2026-07-30 08:34:50 -04:00
commit 0730557624
752 changed files with 8423 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/README.md
+187
View File
@@ -0,0 +1,187 @@
# 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](https://www.hpe.com/us/en/about/legal/terms-of-use.html)
with the authoritative files and usage rules on
[Brand Central](https://brandcentral.hpe.com/home).
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?