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.
51 lines
5.2 KiB
XML
51 lines
5.2 KiB
XML
<svg width="280" height="280" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="280" height="280" rx="10" fill="white"/>
|
|
<path d="M143.139 145C143.139 148.071 142.791 151.326 143.197 154.377C143.782 158.76 149.48 160.635 153.544 161.29C162.656 162.758 172.401 162.768 181.497 161.303C190.494 159.854 197.816 158.064 206.976 159.22C209.78 159.573 213.973 160.5 216.563 162C220.189 164 222.518 166 224.334 168C227.511 171.5 229.094 176.064 228.996 182.5C228.889 189.5 224.334 193.5 221.245 196.026C218.157 198.552 207.453 201 203.612 201" stroke="#444444" stroke-width="5" stroke-linecap="round"/>
|
|
<rect x="75.5" y="174.5" width="128" height="52" rx="5.5" fill="white" stroke="#444444" stroke-width="5"/>
|
|
<rect x="181.5" y="187.5" width="9" height="7" rx="1.5" fill="#444444" stroke="#444444"/>
|
|
<g filter="url(#filter0_d_488_327)">
|
|
<rect x="180" y="208" width="11" height="9" rx="2" fill="#01A982"/>
|
|
<rect x="180.5" y="208.5" width="10" height="8" rx="1.5" stroke="black"/>
|
|
</g>
|
|
<rect x="90.5" y="187.5" width="9" height="7" rx="1.5" fill="#444444" stroke="#444444"/>
|
|
<rect x="90.5" y="208.5" width="9" height="7" rx="1.5" fill="#444444" stroke="#444444"/>
|
|
<rect x="120.5" y="187.5" width="9" height="7" rx="1.5" fill="#444444" stroke="#444444"/>
|
|
<rect x="113.5" y="208.5" width="53" height="7" rx="2.5" fill="#444444" stroke="#444444"/>
|
|
<rect x="150.5" y="187.5" width="9" height="7" rx="1.5" fill="#444444" stroke="#444444"/>
|
|
<rect x="57.5" y="67.5" width="165" height="75" rx="2.5" fill="#01A982" stroke="#444444" stroke-width="5"/>
|
|
<g clip-path="url(#clip0_488_327)">
|
|
<rect width="29" height="29" transform="translate(207 92) rotate(90)" fill="#01A982"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M207 106.5C207 98.4919 200.508 92 192.5 92C184.492 92 178 98.4919 178 106.5C178 114.508 184.492 121 192.5 121C200.508 121 207 114.508 207 106.5ZM192.5 94.4167C199.173 94.4167 204.583 99.8266 204.583 106.5C204.583 113.173 199.173 118.583 192.5 118.583C185.827 118.583 180.417 113.173 180.417 106.5C180.417 99.8266 185.827 94.4167 192.5 94.4167ZM200.25 106.5L193.354 113.396L191.646 111.687L195.625 107.708L185.25 107.708L185.25 105.292L195.624 105.292L191.646 101.313L193.354 99.604L200.25 106.5Z" fill="white"/>
|
|
</g>
|
|
<g clip-path="url(#clip1_488_327)">
|
|
<rect width="29" height="29" transform="translate(73 121) rotate(-90)" fill="#01A982"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M73 106.5C73 114.508 79.4919 121 87.5 121C95.5081 121 102 114.508 102 106.5C102 98.4919 95.5081 92 87.5 92C79.4919 92 73 98.4919 73 106.5ZM87.5 118.583C80.8266 118.583 75.4167 113.173 75.4167 106.5C75.4167 99.8266 80.8266 94.4167 87.5 94.4167C94.1734 94.4167 99.5833 99.8266 99.5833 106.5C99.5833 113.173 94.1734 118.583 87.5 118.583ZM79.7495 106.5L86.6456 99.6038L88.3545 101.313L84.3755 105.292L94.75 105.292L94.75 107.708L84.3756 107.708L88.3545 111.687L86.6456 113.396L79.7495 106.5Z" fill="white"/>
|
|
</g>
|
|
<rect width="29" height="29" transform="translate(108 92)" fill="#01A982"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M122.5 92C114.492 92 108 98.4919 108 106.5C108 114.508 114.492 121 122.5 121C130.508 121 137 114.508 137 106.5C137 98.4919 130.508 92 122.5 92ZM110.417 106.5C110.417 99.8266 115.827 94.4167 122.5 94.4167C129.173 94.4167 134.583 99.8266 134.583 106.5C134.583 113.173 129.173 118.583 122.5 118.583C115.827 118.583 110.417 113.173 110.417 106.5ZM122.5 98.7495L129.396 105.646L127.687 107.354L123.708 103.375V113.75H121.292V103.376L117.313 107.354L115.604 105.646L122.5 98.7495Z" fill="white"/>
|
|
<g clip-path="url(#clip2_488_327)">
|
|
<rect width="29" height="29" transform="translate(172 121) rotate(-180)" fill="#01A982"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M157.5 121C165.508 121 172 114.508 172 106.5C172 98.4919 165.508 92 157.5 92C149.492 92 143 98.4919 143 106.5C143 114.508 149.492 121 157.5 121ZM169.583 106.5C169.583 113.173 164.173 118.583 157.5 118.583C150.827 118.583 145.417 113.173 145.417 106.5C145.417 99.8266 150.827 94.4167 157.5 94.4167C164.173 94.4167 169.583 99.8266 169.583 106.5ZM157.5 114.25L150.604 107.354L152.313 105.646L156.292 109.625L156.292 99.25L158.708 99.25L158.708 109.624L162.687 105.646L164.396 107.354L157.5 114.25Z" fill="white"/>
|
|
</g>
|
|
<defs>
|
|
<filter id="filter0_d_488_327" x="176" y="206" width="19" height="17" 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="2"/>
|
|
<feGaussianBlur stdDeviation="2"/>
|
|
<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_488_327"/>
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_488_327" result="shape"/>
|
|
</filter>
|
|
<clipPath id="clip0_488_327">
|
|
<rect width="29" height="29" fill="white" transform="translate(207 92) rotate(90)"/>
|
|
</clipPath>
|
|
<clipPath id="clip1_488_327">
|
|
<rect width="29" height="29" fill="white" transform="translate(73 121) rotate(-90)"/>
|
|
</clipPath>
|
|
<clipPath id="clip2_488_327">
|
|
<rect width="29" height="29" fill="white" transform="translate(172 121) rotate(-180)"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|