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/creativetoolkitimages/components.svg
+146
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

assets/site-images/creativetoolkitimages/foundation.svg
+74
View File
@@ -0,0 +1,74 @@
<svg width="196" height="196" viewBox="0 0 196 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M78.046 37.571C78.3927 37.3721 78.8194 37.3722 79.1661 37.571L116.211 58.8171C116.561 59.0177 116.776 59.3907 116.776 59.7937C116.775 60.1965 116.56 60.5688 116.211 60.7693L79.1661 82.0154C78.8194 82.2142 78.3927 82.2143 78.046 82.0154L41.0187 60.7693C40.6692 60.5688 40.4534 60.1965 40.4532 59.7937C40.4532 59.3907 40.6691 59.0177 41.0187 58.8171L78.046 37.571Z" fill="url(#paint0_linear_2178_6708)" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M115.092 58.8171C115.44 58.6176 115.868 58.618 116.215 58.8191C116.562 59.0203 116.776 59.3914 116.776 59.7927V108.552C116.776 113.827 113.937 118.728 109.344 121.364L79.1659 138.673C78.8179 138.872 78.39 138.871 78.0428 138.67C77.6956 138.469 77.4813 138.097 77.4813 137.696V81.0388C77.4814 80.6359 77.6972 80.2637 78.0468 80.0632L115.092 58.8171Z" fill="#00E0AF" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M79.7318 137.697C79.7317 138.098 79.5174 138.469 79.1703 138.67C78.8231 138.871 78.3953 138.872 78.0472 138.673L47.8353 121.344C43.2397 118.708 40.4369 113.841 40.4369 108.568L40.4535 59.7927C40.4536 59.3914 40.6677 59.0202 41.015 58.8191C41.3623 58.6182 41.7901 58.6175 42.1381 58.8171L79.1664 80.0632C79.5158 80.2637 79.7317 80.636 79.7318 81.0388V137.697Z" fill="#01A982" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M127.573 72.9155C127.891 72.785 128.256 72.807 128.559 72.981L165.603 94.2271C165.952 94.4275 166.168 94.7997 166.168 95.2026C166.168 95.6057 165.953 95.9787 165.603 96.1792L128.559 117.425C128.212 117.624 127.786 117.624 127.44 117.425L90.3949 96.1792C90.0452 95.9787 89.8295 95.6057 89.8295 95.2026C89.8296 94.7997 90.0454 94.4275 90.3949 94.2271L127.44 72.981L127.573 72.9155Z" fill="url(#paint1_linear_2178_6708)" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M164.485 94.2292C164.833 94.0297 165.261 94.0301 165.608 94.2312C165.955 94.4324 166.169 94.8035 166.169 95.2048V129.741C166.169 135.019 163.335 139.892 158.742 142.527L128.559 159.838C128.211 160.037 127.783 160.037 127.436 159.836C127.089 159.635 126.874 159.263 126.874 158.862V116.451C126.875 116.048 127.09 115.676 127.44 115.475L164.485 94.2292Z" fill="#00E0AF" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M129.124 158.862C129.124 159.263 128.91 159.635 128.563 159.836C128.216 160.037 127.788 160.037 127.44 159.838L97.2572 142.527C92.6632 139.892 89.8295 135.019 89.8295 129.741V95.2048L89.8392 95.0564C89.8848 94.7136 90.087 94.4073 90.391 94.2312C90.7382 94.0303 91.166 94.0296 91.514 94.2292L128.559 115.475C128.908 115.676 129.124 116.048 129.124 116.451V158.862Z" fill="#01A982" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M90.5282 115.408C90.8468 115.277 91.2112 115.299 91.5145 115.473L128.558 136.719C128.908 136.92 129.124 137.292 129.124 137.695C129.124 138.098 128.908 138.471 128.558 138.672L91.5145 159.918C91.168 160.116 90.742 160.116 90.3954 159.918L53.3505 138.672C53.0008 138.471 52.785 138.098 52.785 137.695C52.7852 137.292 53.0009 136.92 53.3505 136.719L90.3954 115.473L90.5282 115.408Z" fill="url(#paint2_linear_2178_6708)" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M127.999 136.572C128.621 136.572 129.124 137.076 129.124 137.697V158.151C129.124 163.429 126.291 168.302 121.697 170.937L91.514 188.248C91.166 188.447 90.7382 188.447 90.391 188.246C90.0437 188.045 89.8295 187.674 89.8295 187.272V158.944C89.8295 158.541 90.0452 158.168 90.3949 157.968L127.44 136.721V136.722C127.605 136.628 127.796 136.572 127.999 136.572Z" fill="#00E0AF" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M92.08 187.272C92.08 187.674 91.8657 188.045 91.5184 188.246C91.1712 188.447 90.7435 188.447 90.3954 188.248L60.2128 170.937C55.6187 168.303 52.785 163.429 52.785 158.151V137.697L52.7948 137.549C52.8404 137.206 53.0426 136.899 53.3466 136.723C53.6938 136.522 54.1216 136.522 54.4696 136.721L91.5145 157.968C91.864 158.168 92.0798 158.54 92.08 158.943V187.272Z" fill="#01A982" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M79.7318 180.188C79.7318 180.59 79.5175 180.961 79.1703 181.162C78.823 181.363 78.3944 181.363 78.0463 181.164L65.6986 174.082C65.349 173.881 65.1333 173.509 65.1332 173.106V144.777C65.1332 144.376 65.3474 144.005 65.6947 143.803C66.0419 143.603 66.4697 143.602 66.8177 143.802L79.1664 150.884C79.5158 151.084 79.7318 151.456 79.7318 151.859V180.188Z" fill="#292D3A" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M115.091 80.0632C115.437 79.8644 115.864 79.8644 116.211 80.0632L140.907 94.2273C141.257 94.4278 141.472 94.8 141.473 95.2029C141.473 95.606 141.257 95.9789 140.907 96.1794L116.211 110.344C115.864 110.542 115.437 110.542 115.091 110.344L102.743 103.261C102.393 103.061 102.178 102.688 102.178 102.285C102.178 101.882 102.393 101.51 102.743 101.309L113.389 95.2029L102.743 89.0964C102.393 88.8959 102.178 88.5239 102.178 88.1208C102.178 87.7178 102.393 87.3458 102.743 87.1453L115.091 80.0632Z" fill="url(#paint3_linear_2178_6708)" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M102.876 122.492C103.195 122.361 103.559 122.383 103.863 122.557L116.21 129.639C116.56 129.84 116.776 130.212 116.776 130.615C116.776 131.018 116.56 131.39 116.21 131.591L79.1665 152.838C78.8198 153.036 78.393 153.036 78.0464 152.838L65.6987 145.756C65.3491 145.555 65.1333 145.182 65.1333 144.779C65.1334 144.376 65.3492 144.004 65.6987 143.803L102.744 122.557L102.876 122.492Z" fill="url(#paint4_linear_2178_6708)" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M116.775 130.613C116.775 131.014 116.561 131.385 116.214 131.587C115.866 131.788 115.438 131.788 115.09 131.589L102.742 124.508C102.393 124.307 102.177 123.935 102.177 123.532V102.285C102.177 101.884 102.391 101.512 102.738 101.311C103.085 101.11 103.513 101.11 103.861 101.309L116.21 108.39C116.559 108.591 116.775 108.963 116.775 109.366V130.613Z" fill="#292D3A" stroke="#292D3A" stroke-width="2.25" stroke-linejoin="round"/>
<path d="M79 49.875C83.4731 49.875 88.0079 50.7251 91.5244 52.4834C95.0028 54.2227 97.125 56.6971 97.125 59.5C97.125 62.3029 95.0028 64.7773 91.5244 66.5166C88.0079 68.2749 83.4731 69.125 79 69.125C74.5269 69.125 69.9921 68.2749 66.4756 66.5166C62.9972 64.7773 60.875 62.3029 60.875 59.5C60.875 56.6971 62.9972 54.2227 66.4756 52.4834C69.9921 50.7251 74.5269 49.875 79 49.875Z" fill="#292D3A" stroke="#292D3A" stroke-width="2.25"/>
<circle cx="79" cy="36" r="23.875" fill="url(#paint5_linear_2178_6708)" stroke="#292D3A" stroke-width="2.25"/>
<defs>
<linearGradient id="paint0_linear_2178_6708" x1="69.3555" y1="75.7316" x2="87.7026" y2="43.7566" gradientUnits="userSpaceOnUse">
<stop stop-color="#B1B9BE"/>
<stop offset="0.052" stop-color="#C0C7CB"/>
<stop offset="0.148" stop-color="#D7DBDE"/>
<stop offset="0.26" stop-color="#E9EBEC"/>
<stop offset="0.394" stop-color="#F5F6F7"/>
<stop offset="0.575" stop-color="#FCFDFD"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2178_6708" x1="118.738" y1="111.145" x2="137.089" y2="79.1628" gradientUnits="userSpaceOnUse">
<stop stop-color="#B1B9BE"/>
<stop offset="0.052" stop-color="#C0C7CB"/>
<stop offset="0.148" stop-color="#D7DBDE"/>
<stop offset="0.26" stop-color="#E9EBEC"/>
<stop offset="0.394" stop-color="#F5F6F7"/>
<stop offset="0.575" stop-color="#FCFDFD"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint2_linear_2178_6708" x1="81.6935" y1="153.637" x2="100.045" y2="121.655" gradientUnits="userSpaceOnUse">
<stop stop-color="#B1B9BE"/>
<stop offset="0.052" stop-color="#C0C7CB"/>
<stop offset="0.148" stop-color="#D7DBDE"/>
<stop offset="0.26" stop-color="#E9EBEC"/>
<stop offset="0.394" stop-color="#F5F6F7"/>
<stop offset="0.575" stop-color="#FCFDFD"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint3_linear_2178_6708" x1="112.566" y1="107.6" x2="124.799" y2="86.2813" gradientUnits="userSpaceOnUse">
<stop stop-color="#7764FC"/>
<stop offset="0.107" stop-color="#708DFA"/>
<stop offset="0.224" stop-color="#6AB2F8"/>
<stop offset="0.332" stop-color="#65CEF7"/>
<stop offset="0.428" stop-color="#62DFF6"/>
<stop offset="0.5" stop-color="#62E5F6"/>
<stop offset="0.7" stop-color="#3FDBD1"/>
<stop offset="1" stop-color="#05CC93"/>
</linearGradient>
<linearGradient id="paint4_linear_2178_6708" x1="66.2583" y1="137.697" x2="115.651" y2="137.697" gradientUnits="userSpaceOnUse">
<stop stop-color="#7764FC"/>
<stop offset="0.107" stop-color="#708DFA"/>
<stop offset="0.224" stop-color="#6AB2F8"/>
<stop offset="0.332" stop-color="#65CEF7"/>
<stop offset="0.428" stop-color="#62DFF6"/>
<stop offset="0.5" stop-color="#62E5F6"/>
<stop offset="0.7" stop-color="#3FDBD1"/>
<stop offset="1" stop-color="#05CC93"/>
</linearGradient>
<linearGradient id="paint5_linear_2178_6708" x1="91.6743" y1="45.6615" x2="69.0483" y2="32.0872" gradientUnits="userSpaceOnUse">
<stop stop-color="#B1B9BE"/>
<stop offset="0.081" stop-color="#BCC3C7"/>
<stop offset="0.316" stop-color="#D9DDDF"/>
<stop offset="0.549" stop-color="#EEF0F1"/>
<stop offset="0.778" stop-color="#FAFBFB"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

assets/site-images/creativetoolkitimages/templates.svg
+35
View File
@@ -0,0 +1,35 @@
<svg width="196" height="196" viewBox="0 0 196 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.9404 176.137C47.9404 177.86 48.7983 179.273 50.0479 180.119C50.5506 180.46 50.6937 181.137 50.3711 181.651C50.0483 182.166 49.3759 182.332 48.8506 182.027L35.8262 174.472C35.7898 174.451 35.7545 174.427 35.7207 174.402C34.0286 173.148 32.8731 171.133 32.873 168.729V90.1367C32.873 89.7339 33.0876 89.3615 33.4365 89.1602C33.7854 88.9588 34.2157 88.9595 34.5645 89.1611L47.377 96.5674C47.7254 96.7688 47.9404 97.1405 47.9404 97.543V176.137Z" fill="#01A982" stroke="#292D3A" stroke-width="2.25451" stroke-linejoin="round"/>
<path d="M139.857 12.8281C142.471 11.3172 145.452 11.7016 147.572 13.2588L159.56 20.1396H159.559L159.721 20.2305H159.72C159.725 20.2335 159.73 20.2362 159.735 20.2393C160.27 20.5517 160.452 21.2374 160.144 21.7744C159.835 22.311 159.151 22.4986 158.612 22.1943L158.459 22.1074C157.075 21.3689 155.346 21.293 153.798 22.1855L54.498 79.5908C50.4411 81.9346 47.9405 86.2708 47.9404 90.9648V97.5439C47.9404 97.9468 47.7249 98.3192 47.376 98.5205C47.0271 98.7216 46.5977 98.721 46.249 98.5195L33.4355 91.1143C33.0871 90.9128 32.873 90.5402 32.873 90.1377V83.5586C32.8731 78.0609 35.8016 72.9801 40.5566 70.2305L139.857 12.8281Z" fill="url(#paint0_linear_2178_6792)" stroke="#292D3A" stroke-width="2.25451" stroke-linejoin="round"/>
<path d="M149.318 53.1016L115.966 72.3816V109.416L149.318 90.1359V53.1016Z" fill="#00E0AF"/>
<path d="M103.994 141.19L102.285 140.16L92.584 134.316L92.0381 133.987V133.351L92.0283 85.5693V84.9189L92.5908 84.5938L102.303 78.9795L103.994 78.001V141.19Z" fill="#01A982" stroke="#292D3A" stroke-width="2.25451"/>
<path d="M93.7354 132.384L103.447 138.229L105.084 139.214L103.431 140.17L60.1914 165.181L58.5 166.159V152.171L59.0605 151.845L92.5879 132.375L93.165 132.04L93.7354 132.384Z" fill="#00E0AF" stroke="#292D3A" stroke-width="2.25451"/>
<path d="M163.257 111.528C163.257 117.026 160.329 122.107 155.574 124.856L56.2749 182.259V182.26C53.7528 183.717 50.885 183.411 48.7837 181.985C46.9585 180.749 45.6861 178.659 45.686 176.138V96.8926L46.2485 96.5674L161.566 29.9053L163.257 28.9268V111.528ZM60.7544 105.6V162.251L101.739 138.544V81.9082L60.7544 105.6ZM117.093 73.0322V107.462L148.191 89.4844V55.0557L117.093 73.0322Z" fill="url(#paint1_linear_2178_6792)" stroke="#292D3A" stroke-width="2.25451"/>
<ellipse cx="2.29854" cy="2.29854" rx="2.29854" ry="2.29854" transform="matrix(0.866025 -0.5 0 1 115.507 118.844)" fill="#292D3A"/>
<rect width="33.4748" height="2.63026" rx="1.31513" transform="matrix(0.866025 -0.5 0 1 122.832 115.68)" fill="#292D3A"/>
<ellipse cx="2.29854" cy="2.29854" rx="2.29854" ry="2.29854" transform="matrix(0.866025 -0.5 0 1 115.507 128.381)" fill="#292D3A"/>
<rect width="32.5122" height="2.63026" rx="1.31513" transform="matrix(0.866025 -0.5 0 1 122.832 125.217)" fill="#292D3A"/>
<path d="M152.67 20.2354C155.023 18.8757 157.678 19.048 159.73 20.2354C161.782 21.4223 163.258 23.6385 163.259 26.3564V30.8828C163.258 31.2851 163.043 31.657 162.695 31.8584L47.3787 98.5205C47.0299 98.7221 46.5997 98.7228 46.2507 98.5215C45.9018 98.3202 45.6873 97.9477 45.6873 97.5449V90.9658C45.6873 85.468 48.6157 80.3874 53.3708 77.6377L152.67 20.2354Z" fill="url(#paint2_linear_2178_6792)" stroke="#292D3A" stroke-width="2.25451" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_2178_6792" x1="34" y1="55.2719" x2="159.167" y2="55.2719" gradientUnits="userSpaceOnUse">
<stop stop-color="#7764FC"/>
<stop offset="0.5" stop-color="#62E5F6"/>
<stop offset="0.7" stop-color="#3FDBD1"/>
<stop offset="1" stop-color="#05CC93"/>
</linearGradient>
<linearGradient id="paint1_linear_2178_6792" x1="58.4493" y1="186.295" x2="151.789" y2="24.9003" gradientUnits="userSpaceOnUse">
<stop stop-color="#B1B9BE"/>
<stop offset="0.143" stop-color="#C9CED2"/>
<stop offset="0.326" stop-color="#E0E3E5"/>
<stop offset="0.521" stop-color="#F1F3F3"/>
<stop offset="0.735" stop-color="#FBFCFC"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint2_linear_2178_6792" x1="46.8142" y1="58.9756" x2="162.131" y2="58.9756" gradientUnits="userSpaceOnUse">
<stop stop-color="#7764FC"/>
<stop offset="0.5" stop-color="#62E5F6"/>
<stop offset="0.7" stop-color="#3FDBD1"/>
<stop offset="1" stop-color="#05CC93"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB