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/matrix-music.svg
+63
View File
@@ -0,0 +1,63 @@
<svg width="587" height="252" viewBox="0 0 587 252" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M499 112L498.574 197H192" stroke="#7630EA" stroke-width="2" stroke-dasharray="6 6"/>
<path d="M495 114L499.4 109L503.5 114" stroke="#6633BC" stroke-width="2"/>
<g filter="url(#filter0_d_2634_15305)">
<rect x="211.834" y="6" width="162.828" height="93.6452" fill="white"/>
</g>
<rect x="219.479" y="23.2001" width="148.686" height="68.0361" fill="#EFEFEF"/>
<g filter="url(#filter1_d_2634_15305)">
<rect x="411.669" y="6" width="162.828" height="93.6452" fill="white"/>
</g>
<rect x="419.313" y="23.2001" width="148.686" height="68.0361" fill="#EFEFEF"/>
<g filter="url(#filter2_d_2634_15305)">
<rect x="12" y="6" width="162.828" height="93.6452" fill="white"/>
</g>
<rect x="19" y="23" width="148.686" height="68.0361" fill="#EFEFEF"/>
<path d="M69.3961 58.5742H71.3761C73.7701 58.5742 75.3901 57.2242 75.3901 54.7762C75.3901 52.3102 73.7701 50.9602 71.3761 50.9602H66.5341V62.0122H69.3961V58.5742ZM72.5821 54.7762C72.5821 55.6042 72.1141 56.1622 71.0701 56.1622H69.3961V53.3902H71.0701C72.1141 53.3902 72.5821 53.9302 72.5821 54.7762ZM79.3779 62.0122V50.3122H76.5519V62.0122H79.3779ZM85.3573 57.1342V57.4222C85.0333 57.1882 84.2773 56.9722 83.5933 56.9722C81.8473 56.9722 80.4793 57.9802 80.4793 59.5462C80.4793 61.2562 81.8473 62.1562 83.4493 62.1562C84.3133 62.1562 85.0873 61.8682 85.3573 61.5982V62.0122H88.0753V57.0082C88.0753 54.8662 86.7073 53.7322 84.3133 53.7322C83.1613 53.7322 82.0813 54.0022 81.4153 54.3622V56.6302C82.0633 56.2522 82.8553 56.0542 83.6293 56.0542C84.7813 56.0542 85.3573 56.5042 85.3573 57.1342ZM85.3573 59.2762V59.7442C85.1773 60.0682 84.7273 60.2842 84.2233 60.2842C83.6653 60.2842 83.1073 60.0502 83.1073 59.4922C83.1073 58.9522 83.6653 58.7182 84.2233 58.7182C84.7273 58.7182 85.1773 58.9342 85.3573 59.2762ZM90.4845 64.8742H93.2745L97.4505 53.9122H94.6425L93.1305 58.5202L91.5825 53.9122H88.6485L91.6725 61.8142L90.4845 64.8742ZM101.14 62.0122V50.3122H98.3136V62.0122H101.14ZM105.697 51.7162C105.697 50.7802 104.959 50.1862 104.095 50.1862C103.231 50.1862 102.493 50.7802 102.493 51.7162C102.493 52.6342 103.231 53.2282 104.095 53.2282C104.959 53.2282 105.697 52.6342 105.697 51.7162ZM105.499 62.0122V53.9122H102.673V62.0122H105.499ZM106.744 59.0422V61.4182C107.5 61.9222 108.688 62.1922 109.822 62.1922C111.82 62.1922 113.314 61.3462 113.314 59.6182C113.314 58.2502 112.612 57.5302 110.848 57.0622L110.11 56.8462C109.714 56.7382 109.48 56.6302 109.48 56.3242C109.48 56.0002 109.804 55.8382 110.29 55.8382C111.208 55.8382 112.072 56.2162 112.846 56.7742V54.4522C112.054 53.9662 111.172 53.7322 110.02 53.7322C108.112 53.7322 106.708 54.6862 106.708 56.3782C106.708 57.8362 107.662 58.5382 109.156 58.8622L109.786 59.0242C110.272 59.1322 110.524 59.2582 110.524 59.5822C110.524 59.9422 110.164 60.0682 109.606 60.0682C108.778 60.0682 107.518 59.6722 106.744 59.0422ZM118.142 62.0122V56.1082H119.726V53.9122H118.142V51.6802H115.334V53.9122H113.93V56.1082H115.334V62.0122H118.142Z" fill="#444444"/>
<path d="M281.433 51.1603H278.481L274.269 62.2123H277.131L277.905 60.0703H281.919L282.711 62.2123H285.645L281.433 51.1603ZM278.787 57.6943L279.921 54.5803L281.055 57.6943H278.787ZM291.971 56.7943V54.0763C291.845 54.0043 291.557 53.9323 291.197 53.9323C290.387 53.9323 289.757 54.2923 289.361 54.8323V54.1123H286.535V62.2123H289.361V57.4603C289.505 56.8843 290.027 56.5423 290.801 56.5423C291.251 56.5423 291.629 56.6143 291.971 56.7943ZM296.906 62.2123V56.3083H298.49V54.1123H296.906V51.8803H294.098V54.1123H292.694V56.3083H294.098V62.2123H296.906ZM302.55 51.9163C302.55 50.9803 301.812 50.3863 300.948 50.3863C300.084 50.3863 299.346 50.9803 299.346 51.9163C299.346 52.8343 300.084 53.4283 300.948 53.4283C301.812 53.4283 302.55 52.8343 302.55 51.9163ZM302.352 62.2123V54.1123H299.526V62.2123H302.352ZM303.597 59.2423V61.6183C304.353 62.1223 305.541 62.3923 306.675 62.3923C308.673 62.3923 310.167 61.5463 310.167 59.8183C310.167 58.4503 309.465 57.7303 307.701 57.2623L306.963 57.0463C306.567 56.9383 306.333 56.8303 306.333 56.5243C306.333 56.2003 306.657 56.0383 307.143 56.0383C308.061 56.0383 308.925 56.4163 309.699 56.9743V54.6523C308.907 54.1663 308.025 53.9323 306.873 53.9323C304.965 53.9323 303.561 54.8863 303.561 56.5783C303.561 58.0363 304.515 58.7383 306.009 59.0623L306.639 59.2243C307.125 59.3323 307.377 59.4583 307.377 59.7823C307.377 60.1423 307.017 60.2683 306.459 60.2683C305.631 60.2683 304.371 59.8723 303.597 59.2423ZM314.994 62.2123V56.3083H316.578V54.1123H314.994V51.8803H312.186V54.1123H310.782V56.3083H312.186V62.2123H314.994Z" fill="#444444"/>
<path d="M477.462 51.1603H474.51L470.298 62.2123H473.16L473.934 60.0703H477.948L478.74 62.2123H481.674L477.462 51.1603ZM474.816 57.6943L475.95 54.5803L477.084 57.6943H474.816ZM485.391 62.2123V50.5123H482.565V62.2123H485.391ZM489.75 62.2123V61.5643C490.128 61.9963 490.92 62.3923 491.748 62.3923C494.088 62.3923 495.366 60.5023 495.366 58.1623C495.366 55.8223 494.088 53.9323 491.748 53.9323C490.92 53.9323 490.128 54.3283 489.75 54.7603V50.5123H486.924V62.2123H489.75ZM489.75 59.2243V57.0823C489.966 56.6503 490.452 56.3263 490.992 56.3263C491.964 56.3263 492.54 57.1183 492.54 58.1623C492.54 59.2063 491.964 59.9803 490.992 59.9803C490.434 59.9803 489.966 59.6743 489.75 59.2243ZM504.245 62.2123V54.1123H501.419V59.0263C501.275 59.5843 500.789 59.9263 500.267 59.9263C499.547 59.9263 499.223 59.4403 499.223 58.7563V54.1123H496.415V59.4223C496.415 61.2223 497.477 62.3923 499.259 62.3923C500.177 62.3923 500.987 62.0143 501.419 61.5103V62.2123H504.245ZM512.896 54.9043C512.41 54.3283 511.69 53.9323 510.664 53.9323C509.764 53.9323 508.99 54.2743 508.576 54.7783V54.1123H505.75V62.2123H508.576V57.2803C508.702 56.7223 509.134 56.4163 509.62 56.4163C510.25 56.4163 510.538 56.9023 510.538 57.5863V62.2123H513.346V57.2803C513.49 56.7223 513.904 56.4163 514.39 56.4163C515.02 56.4163 515.308 56.9023 515.308 57.5863V62.2123H518.134V56.9023C518.134 55.0843 517.09 53.9323 515.398 53.9323C514.21 53.9323 513.382 54.4003 512.896 54.9043Z" fill="#444444"/>
<path d="M96.1379 106V133M96.1379 133L92 129.22M96.1379 133L100 129.22" stroke="#7630EA" stroke-width="2"/>
<g filter="url(#filter3_d_2634_15305)">
<rect x="14" y="140" width="162.828" height="93.6452" fill="white"/>
</g>
<rect x="21.6445" y="157.2" width="148.686" height="68.0361" fill="#EFEFEF"/>
<path d="M78.9676 192.828V195.492C79.7776 195.978 81.1096 196.392 82.5856 196.392C85.0696 196.392 87.1036 195.33 87.1036 192.936C87.1036 191.244 86.1856 190.182 84.1696 189.552L82.4956 189.048C81.9196 188.868 81.5776 188.67 81.5776 188.166C81.5776 187.608 82.2076 187.374 83.0356 187.374C84.2956 187.374 85.3936 187.788 86.3836 188.472V185.808C85.4656 185.304 84.4036 184.98 82.9096 184.98C80.5876 184.98 78.7336 186.186 78.7336 188.382C78.7336 190.218 79.7596 191.136 81.6136 191.676L83.2876 192.162C83.8816 192.378 84.2236 192.558 84.2236 193.098C84.2236 193.782 83.4316 193.98 82.5136 193.98C81.2716 193.98 79.9216 193.476 78.9676 192.828ZM96.2065 192.162C96.2065 189.66 94.5325 187.932 92.0665 187.932C89.6185 187.932 87.9265 189.66 87.9265 192.162C87.9265 194.664 89.6185 196.392 92.0665 196.392C94.5325 196.392 96.2065 194.664 96.2065 192.162ZM93.4345 192.162C93.4345 193.278 92.9485 194.052 92.0665 194.052C91.2025 194.052 90.7165 193.278 90.7165 192.162C90.7165 191.046 91.2025 190.254 92.0665 190.254C92.9485 190.254 93.4345 191.046 93.4345 192.162ZM97.3058 188.112V196.212H100.132V191.316C100.276 190.758 100.744 190.434 101.302 190.434C102.022 190.434 102.364 190.92 102.364 191.586V196.212H105.172V190.902C105.172 189.102 104.11 187.932 102.31 187.932C101.374 187.932 100.582 188.31 100.132 188.814V188.112H97.3058ZM111.698 195.114V195.384C111.698 196.518 110.762 196.968 109.682 196.968C108.566 196.968 107.684 196.68 106.856 195.978V198.57C107.504 198.984 108.638 199.254 109.772 199.254C112.364 199.254 114.488 198.03 114.488 195.042V188.112H111.698V188.724C111.338 188.292 110.672 187.932 109.79 187.932C107.504 187.932 106.208 189.678 106.208 191.91C106.208 194.142 107.504 195.906 109.79 195.906C110.672 195.906 111.338 195.528 111.698 195.114ZM111.698 190.848V192.99C111.482 193.35 111.032 193.656 110.492 193.656C109.556 193.656 108.998 192.936 108.998 191.91C108.998 190.884 109.556 190.164 110.492 190.164C111.032 190.164 111.482 190.488 111.698 190.848Z" fill="#444444"/>
<defs>
<filter id="filter0_d_2634_15305" x="199.834" y="0" width="186.828" height="117.645" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2634_15305"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2634_15305" result="shape"/>
</filter>
<filter id="filter1_d_2634_15305" x="399.669" y="0" width="186.828" height="117.645" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2634_15305"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2634_15305" result="shape"/>
</filter>
<filter id="filter2_d_2634_15305" x="0" y="0" width="186.828" height="117.645" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2634_15305"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2634_15305" result="shape"/>
</filter>
<filter id="filter3_d_2634_15305" x="2" y="134" width="186.828" height="117.645" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2634_15305"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2634_15305" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB