claude
0730557624
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.
188 lines
10 KiB
Markdown
188 lines
10 KiB
Markdown
# 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?
|