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/site-images/templateImages/template-preview-global-header-invert.svg
+20
View File
@@ -0,0 +1,20 @@
<svg width="368" height="192" viewBox="0 0 368 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_187_446)">
<rect x="22" y="22" width="324" height="148" rx="4" fill="#22252E"/>
<path d="M87.9 44.1587V48.5913H102V52H84.3V40.75H102V44.1587H87.9Z" fill="#01A982"/>
<path d="M73.5841 34H62.4273V52H66.0273V47.4241H73.5283C78.2676 47.4241 80.9898 44.7254 80.9898 40.7498C80.9898 36.7482 78.2676 34 73.5841 34ZM73.349 43.9741H66.0273V37.4088H73.349C76.1839 37.4088 77.2591 38.7192 77.2591 40.7498C77.2591 42.7597 76.1839 43.9741 73.349 43.9741ZM87.9 39.0787H84.3V34H102V37.4088H87.9V39.0787ZM57.9 34V52H54.3V44.623H42.6V52H39V34H42.6V41.173H54.3V34H57.9Z" fill="white"/>
<path d="M101.5 41.25V43.6592H87.4004V49.0908H101.5V51.5H84.7998V41.25H101.5ZM73.584 34.5C75.8285 34.5 77.5475 35.1574 78.7012 36.2393C79.852 37.3185 80.4902 38.8664 80.4902 40.75C80.4902 42.6191 79.8527 44.1465 78.6973 45.21C77.5378 46.277 75.8044 46.9238 73.5283 46.9238H65.5273V51.5H62.9277V34.5H73.584ZM42.0996 34.5V41.6729H54.7998V34.5H57.4004V51.5H54.7998V44.123H42.0996V51.5H39.5V34.5H42.0996ZM65.5273 44.4746H73.3486C74.8249 44.4746 75.9461 44.1596 76.6992 43.4893C77.4645 42.8079 77.7588 41.8417 77.7588 40.75C77.7588 39.6499 77.4661 38.6595 76.708 37.9521C75.9566 37.2512 74.8336 36.9092 73.3486 36.9092H65.5273V44.4746ZM101.5 34.5V36.9092H87.4004V38.5791H84.7998V34.5H101.5Z" stroke="white" stroke-opacity="0.06"/>
<path opacity="0.5" d="M122.5 76H45.5C43.567 76 42 77.1939 42 78.6667V121.333C42 122.806 43.567 124 45.5 124H122.5C124.433 124 126 122.806 126 121.333V78.6667C126 77.1939 124.433 76 122.5 76Z" fill="white" fill-opacity="0.06"/>
<path opacity="0.5" d="M218.5 76H141.5C139.567 76 138 77.1939 138 78.6667V121.333C138 122.806 139.567 124 141.5 124H218.5C220.433 124 222 122.806 222 121.333V78.6667C222 77.1939 220.433 76 218.5 76Z" fill="white" fill-opacity="0.06"/>
<path opacity="0.5" d="M314.5 76H237.5C235.567 76 234 77.1939 234 78.6667V121.333C234 122.806 235.567 124 237.5 124H314.5C316.433 124 318 122.806 318 121.333V78.6667C318 77.1939 316.433 76 314.5 76Z" fill="white" fill-opacity="0.06"/>
<path opacity="0.5" d="M122.5 132H45.5C43.567 132 42 133.194 42 134.667V177.333C42 178.806 43.567 180 45.5 180H122.5C124.433 180 126 178.806 126 177.333V134.667C126 133.194 124.433 132 122.5 132Z" fill="white" fill-opacity="0.06"/>
<path opacity="0.5" d="M218.5 132H141.5C139.567 132 138 133.194 138 134.667V177.333C138 178.806 139.567 180 141.5 180H218.5C220.433 180 222 178.806 222 177.333V134.667C222 133.194 220.433 132 218.5 132Z" fill="white" fill-opacity="0.06"/>
<path opacity="0.5" d="M314.5 132H237.5C235.567 132 234 133.194 234 134.667V177.333C234 178.806 235.567 180 237.5 180H314.5C316.433 180 318 178.806 318 177.333V134.667C318 133.194 316.433 132 314.5 132Z" fill="white" fill-opacity="0.06"/>
<path d="M22 62.7822H346" stroke="white" stroke-opacity="0.06" stroke-width="0.7"/>
</g>
<defs>
<clipPath id="clip0_187_446">
<rect x="22" y="22" width="324" height="148" rx="4" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB