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/404-pile.svg
+34
View File
@@ -0,0 +1,34 @@
<svg width="774" height="421" viewBox="0 0 774 421" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="596.076" y="203" width="185" height="115" rx="14.439" transform="rotate(16.7151 596.076 203)" fill="#17EBA0"/>
<rect x="599.371" y="201.991" width="77" height="115" rx="14.439" transform="rotate(-15.0735 599.371 201.991)" fill="#FFD63E"/>
<rect x="174.393" y="205" width="121" height="119" rx="14.439" transform="rotate(12.321 174.393 205)" fill="#FF8300"/>
<rect x="251.692" y="74.3674" width="279.439" height="278.439" rx="21.6585" transform="rotate(-14.8931 251.692 74.3674)" stroke="#00739D" stroke-width="14.439"/>
<rect x="391" y="227" width="121" height="121" rx="14.439" fill="#00C8FF"/>
<path d="M569 242.724H631.076" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M662.725 242.724H690.314" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M569 275.266H729.502" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M569 304.518H649.893" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M675.723 304.521H689.517" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M596.322 336.283L728.648 336.283" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M628.075 368.033L696.884 368.033" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M250.217 180.924L311.799 173.106" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M343.196 169.12L370.565 165.646" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M254.315 213.206L413.539 192.993" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M257.999 242.226L338.248 232.038" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M363.873 228.788L377.557 227.051" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M289.104 270.297L420.376 253.632" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<path d="M324.603 297.795L392.864 289.13" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round"/>
<rect y="237.731" width="121" height="121" rx="14.439" transform="rotate(-24.2676 0 237.731)" fill="#F740FF"/>
<path d="M536.521 171.187L507.889 152.058L395.626 231.653L423.386 250.198L444.733 234.498L483.666 260.508L477.508 286.356L505.965 305.368L536.521 171.187ZM468.639 217.234L499.759 194.465L490.637 231.93L468.639 217.234Z" fill="#444444"/>
<path d="M596.402 291.511L589.656 301.607C588.316 296.432 582.495 287.759 574.464 282.394C557.878 271.313 538.446 272.43 528.793 286.879C518.558 302.199 525.197 320.231 541.085 330.845C550.163 336.91 560.869 338.271 565.931 337.121L562.093 342.865L574.838 351.38L609.844 298.981C620.777 282.617 616.698 265.288 598.366 253.041C588.764 246.626 577.65 243.23 569.97 243.386L561.713 255.746C570.964 255.884 579.692 257.938 588.246 263.653C599.595 271.235 602.798 281.936 596.402 291.511ZM580.236 315.708L574.886 323.716C568.953 328.061 558.712 326.759 550.507 321.277C541.079 314.979 534.908 304.561 541.188 295.161C547.352 285.934 559.222 287.821 568.65 294.12C576.855 299.602 581.979 308.564 580.236 315.708Z" fill="#444444"/>
<g clip-path="url(#clip0_6_401)">
<circle cx="350.007" cy="275.249" r="12" transform="rotate(-1.03471 350.007 275.249)" fill="#F740FF"/>
<circle cx="386.001" cy="274.599" r="12" transform="rotate(-1.03471 386.001 274.599)" fill="#F740FF"/>
<circle cx="421.995" cy="273.949" r="12" transform="rotate(-1.03471 421.995 273.949)" fill="#F740FF"/>
</g>
<defs>
<clipPath id="clip0_6_401">
<rect width="107" height="25" fill="white" transform="translate(337.783 262.968) rotate(-1.03471)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB