Files
claude 0730557624 Initial mirror of the HPE Design System
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.
2026-07-30 08:34:50 -04:00

69 lines
5.9 KiB
XML

<svg width="824" height="601" viewBox="0 0 824 601" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.9">
<g filter="url(#filter0_d)">
<rect x="8" y="170.718" width="240" height="360" rx="16" transform="rotate(-44 8 170.718)" fill="#272E3F"/>
</g>
</g>
<g opacity="0.9">
<g filter="url(#filter1_d)">
<rect x="203" y="204.206" width="240" height="360" rx="16" transform="rotate(-34 203 204.206)" fill="#272E3F"/>
</g>
</g>
<g opacity="0.8" filter="url(#filter2_d)">
<rect x="338" y="216.775" width="240" height="360" rx="16" transform="rotate(-23 338 216.775)" fill="white"/>
</g>
<g opacity="0.8">
<g filter="url(#filter3_d)">
<rect x="496" y="239.061" width="240" height="360" rx="8" transform="rotate(-14 496 239.061)" fill="#272E3F"/>
</g>
<path d="M555.42 249.958L548.591 251.66L551.265 262.384L558.094 260.682L557.785 259.442L552.318 260.804L551.408 257.154L556.368 255.918L556.063 254.695L551.103 255.932L550.259 252.543L555.725 251.18L555.42 249.958ZM562.623 255.286L564.416 250.869L562.983 251.226L561.667 254.504L559.019 252.214L557.517 252.589L561.169 255.704L559.293 260.383L560.708 260.03L562.12 256.468L565.022 258.954L566.506 258.584L562.623 255.286ZM570.16 257.673L568.506 251.036L570.304 250.588L570.026 249.47L568.227 249.918L567.717 247.875L566.407 248.202L566.917 250.245L565.293 250.65L565.571 251.768L567.196 251.363L568.85 258L570.16 257.673ZM573.242 253.028L578.586 251.695L578.469 251.224C577.903 248.953 576.441 247.704 574.345 248.226C572.284 248.74 571.309 250.782 571.91 253.193C572.52 255.638 574.401 256.783 576.636 256.225C577.562 255.995 578.317 255.602 578.824 254.956L578.524 253.751C577.956 254.449 577.379 254.816 576.506 255.034C575.091 255.386 573.743 254.813 573.242 253.028ZM574.641 249.34C575.899 249.026 576.719 249.86 577.054 250.983L573.055 251.98C572.942 250.487 573.611 249.596 574.641 249.34ZM579.348 247.146L581.281 254.9L582.591 254.574L581.28 249.317C581.351 248.409 581.984 247.601 582.893 247.375C584.063 247.083 584.791 247.699 585.061 248.782L586.276 253.655L587.604 253.324L586.336 248.242C585.914 246.547 584.67 245.652 582.906 246.092C581.911 246.34 581.203 247.073 580.902 247.797L580.658 246.819L579.348 247.146ZM594.717 250.586L594.944 251.494L596.271 251.163L593.44 239.811L592.113 240.141L593.237 244.648C592.713 244.184 591.748 243.887 590.788 244.126C588.517 244.693 587.756 246.849 588.301 249.032C588.849 251.233 590.529 252.762 592.8 252.195C593.76 251.956 594.472 251.24 594.717 250.586ZM593.585 246.045L594.369 249.189C594.167 250.092 593.516 250.755 592.696 250.96C591.211 251.33 590.037 250.343 589.628 248.701C589.219 247.059 589.791 245.636 591.276 245.266C592.097 245.062 592.983 245.342 593.585 246.045Z" fill="white"/>
<path d="M521.656 259.289L534.593 256.063" stroke="white" stroke-width="4" stroke-linecap="round"/>
<path d="M524.075 268.992L530.543 267.379" stroke="white" stroke-width="4" stroke-linecap="round"/>
</g>
<path d="M602.83 378.183L631.938 370.925" stroke="white" stroke-width="6" stroke-linecap="round"/>
<path d="M611.7 413.76L708.729 389.568" stroke="white" stroke-width="6" stroke-linecap="round"/>
<path d="M620.763 450.111L659.575 440.434" stroke="white" stroke-width="6" stroke-linecap="round"/>
<path d="M648.11 366.893L661.047 363.667" stroke="white" stroke-width="6" stroke-linecap="round"/>
<path d="M607.265 395.971L684.889 376.618" stroke="white" stroke-width="6" stroke-linecap="round"/>
<path d="M616.329 432.322L622.797 430.71" stroke="white" stroke-width="6" stroke-linecap="round"/>
<path d="M638.776 425.904L677.588 416.227" stroke="white" stroke-width="6" stroke-linecap="round"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="438.719" height="441.68" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="195" y="66" width="416.278" height="448.66" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="330" y="119" width="377.584" height="441.157" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="488" y="177" width="335.963" height="423.368" 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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>