claude
0730557624
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.
67 lines
11 KiB
XML
67 lines
11 KiB
XML
<svg width="336" height="192" viewBox="0 0 336 192" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0)">
|
|
<rect width="336" height="192" fill="#7630EA"/>
|
|
<g opacity="0.9">
|
|
<g filter="url(#filter0_d)">
|
|
<rect x="95.4307" y="59.3781" width="96" height="140" rx="4" transform="rotate(-30 95.4307 59.3781)" fill="white"/>
|
|
</g>
|
|
<g filter="url(#filter1_d)">
|
|
<rect x="103.379" y="46.91" width="96" height="140" rx="4" transform="rotate(-20 103.379 46.91)" fill="white"/>
|
|
</g>
|
|
<g filter="url(#filter2_d)">
|
|
<rect x="112.574" y="35.3986" width="96" height="140" rx="4" transform="rotate(-10 112.574 35.3986)" fill="white"/>
|
|
</g>
|
|
</g>
|
|
<g filter="url(#filter3_d)">
|
|
<rect x="124" y="26" width="96" height="140" rx="4" fill="white"/>
|
|
</g>
|
|
<circle cx="172" cy="96" r="30" fill="#FEC901"/>
|
|
<path d="M156.41 102.219C155.574 102.219 154.898 102.031 154.383 101.656C153.875 101.289 153.512 100.789 153.293 100.156C153.098 99.625 153 99.0352 153 98.3867C153 98.2773 153.008 97.9961 153.023 97.543C153.047 97.0898 153.188 96.4492 153.445 95.6211C153.703 94.7852 154.055 93.9766 154.5 93.1953C154.945 92.4062 155.465 91.6992 156.059 91.0742C156.66 90.4414 157.32 89.9375 158.039 89.5625C158.766 89.1875 159.531 89 160.336 89C160.953 89 161.457 89.1289 161.848 89.3867C162.238 89.6367 162.531 89.9375 162.727 90.2891C162.945 90.6875 163.055 91.082 163.055 91.4727C163.055 91.8477 162.98 92.2812 162.832 92.7734C162.691 93.2578 162.461 93.7344 162.141 94.2031C161.758 94.7422 161.316 95.0859 160.816 95.2344C160.535 95.3125 160.262 95.3516 159.996 95.3516C159.785 95.3516 159.516 95.3125 159.188 95.2344C158.867 95.1562 158.594 95.0078 158.367 94.7891C158.648 94.7578 159.043 94.5039 159.551 94.0273C160.066 93.5508 160.551 93.0039 161.004 92.3867C161.457 91.7617 161.738 91.2227 161.848 90.7695C161.863 90.6914 161.871 90.6211 161.871 90.5586C161.871 90.2695 161.68 90.125 161.297 90.125H161.25C160.758 90.1875 160.117 90.5781 159.328 91.2969C158.547 92.0156 157.855 92.9258 157.254 94.0273C156.816 94.8633 156.477 95.6758 156.234 96.4648C155.977 97.3164 155.848 98.0742 155.848 98.7383C155.848 99.3242 155.961 99.8047 156.188 100.18C156.422 100.547 156.801 100.73 157.324 100.73C157.996 100.73 158.664 100.523 159.328 100.109C159.992 99.6953 160.598 99.1836 161.145 98.5742C161.699 97.957 162.16 97.332 162.527 96.6992C162.629 96.5117 162.734 96.418 162.844 96.418C162.906 96.4336 162.938 96.4766 162.938 96.5469C162.938 96.6094 162.914 96.6914 162.867 96.793C162.211 98.207 161.453 99.3477 160.594 100.215C159.297 101.551 157.902 102.219 156.41 102.219Z" fill="#444444"/>
|
|
<path d="M168.211 100.766H168.164C167.219 100.664 166.695 100.055 166.594 98.9375C166.289 99.4141 165.949 99.7812 165.574 100.039C165.199 100.297 164.832 100.426 164.473 100.426C163.84 100.426 163.344 100.23 162.984 99.8398C162.453 99.2773 162.188 98.4648 162.188 97.4023C162.188 97.0977 162.23 96.6953 162.316 96.1953C162.402 95.6875 162.605 95.1328 162.926 94.5312C163.246 93.9297 163.66 93.4375 164.168 93.0547C164.676 92.6641 165.262 92.4688 165.926 92.4688C166.949 92.4688 167.535 92.9375 167.684 93.875L167.918 93.3477C168.09 92.9961 168.379 92.7773 168.785 92.6914C168.98 92.6523 169.18 92.6328 169.383 92.6328C169.602 92.6328 169.879 92.6719 170.215 92.75C170.551 92.8203 170.863 92.9531 171.152 93.1484C170.918 93.4688 170.645 93.9609 170.332 94.625C170.02 95.2891 169.727 95.9922 169.453 96.7344C169.18 97.4766 168.988 98.1172 168.879 98.6562C168.84 98.8672 168.82 99.0391 168.82 99.1719C168.82 99.4219 168.891 99.5469 169.031 99.5469C169.484 99.5469 170.082 98.9141 170.824 97.6484C171.168 97.0703 171.383 96.6914 171.469 96.5117C171.508 96.4492 171.539 96.418 171.562 96.418C171.602 96.418 171.621 96.4609 171.621 96.5469C171.566 97.1875 171.352 97.8359 170.977 98.4922C170.609 99.1484 170.172 99.6914 169.664 100.121C169.156 100.551 168.672 100.766 168.211 100.766ZM165.105 99.5469C165.371 99.5234 165.652 99.25 165.949 98.7266C166.254 98.1953 166.516 97.5781 166.734 96.875C166.961 96.125 167.074 95.4805 167.074 94.9414C167.074 94.4883 166.934 94.2539 166.652 94.2383C166.395 94.2773 166.141 94.4766 165.891 94.8359C165.648 95.1875 165.426 95.625 165.223 96.1484C165.027 96.6719 164.879 97.1914 164.777 97.707C164.707 98.082 164.672 98.4141 164.672 98.7031C164.672 98.8125 164.684 98.9805 164.707 99.207C164.73 99.4336 164.863 99.5469 165.105 99.5469Z" fill="#444444"/>
|
|
<path d="M172.57 100.824C172.43 100.824 172.246 100.781 172.02 100.695C171.801 100.602 171.633 100.465 171.516 100.285C171.172 99.7227 171 99.0352 171 98.2227C171 98.1914 171.008 97.9531 171.023 97.5078C171.031 97.0547 171.141 96.4062 171.352 95.5625C171.57 94.7109 171.797 94.0195 172.031 93.4883C172.195 93.1289 172.484 92.9102 172.898 92.832C173.078 92.8008 173.262 92.7852 173.449 92.7852C173.691 92.7852 173.988 92.8242 174.34 92.9023C174.691 92.9805 175.012 93.1172 175.301 93.3125C174.559 94.1797 173.953 95.4453 173.484 97.1094L173.812 96.4648C174.031 96.0352 174.324 95.5391 174.691 94.9766C175.066 94.4141 175.488 93.9062 175.957 93.4531C176.434 93 176.934 92.7227 177.457 92.6211H177.586C177.984 92.6211 178.266 92.7891 178.43 93.125C178.562 93.4062 178.629 93.7383 178.629 94.1211C178.629 94.2539 178.609 94.4961 178.57 94.8477C178.539 95.1992 178.398 95.6211 178.148 96.1133C177.898 96.5977 177.586 96.9258 177.211 97.0977C177.094 97.1523 176.977 97.1797 176.859 97.1797C176.57 97.1797 176.266 97.0391 175.945 96.7578C176.406 96.4062 176.637 96.0078 176.637 95.5625C176.637 95.2344 176.523 95.0586 176.297 95.0352C176.102 95.0352 175.781 95.3008 175.336 95.832C174.898 96.3555 174.461 97.0508 174.023 97.918C173.594 98.7773 173.293 99.707 173.121 100.707C172.934 100.785 172.75 100.824 172.57 100.824Z" fill="#444444"/>
|
|
<path d="M180.211 100.766H180.164C179.43 100.68 178.98 100.258 178.816 99.5C178.73 99.1406 178.688 98.7461 178.688 98.3164C178.688 97.8398 178.758 97.1953 178.898 96.3828C179.047 95.5625 179.285 94.625 179.613 93.5703H178.875L179.25 92.6211H179.918C180.293 91.5664 180.578 90.8008 180.773 90.3242C180.945 89.9727 181.234 89.7539 181.641 89.668C181.828 89.6289 182.016 89.6094 182.203 89.6094C182.438 89.6094 182.727 89.6484 183.07 89.7266C183.414 89.8047 183.727 89.9375 184.008 90.125C183.773 90.4688 183.383 91.3008 182.836 92.6211H183.785L183.41 93.5703H182.461C181.617 95.7578 181.09 97.4141 180.879 98.5391C180.832 98.7812 180.809 98.9805 180.809 99.1367C180.809 99.4102 180.883 99.5469 181.031 99.5469C181.289 99.5469 181.59 99.3516 181.934 98.9609C182.285 98.5703 182.613 98.1289 182.918 97.6367C183.23 97.1367 183.445 96.7773 183.562 96.5586C183.609 96.4648 183.648 96.418 183.68 96.418C183.727 96.418 183.75 96.4609 183.75 96.5469C183.695 97.1875 183.469 97.8359 183.07 98.4922C182.68 99.1484 182.219 99.6914 181.688 100.121C181.164 100.551 180.672 100.766 180.211 100.766Z" fill="#444444"/>
|
|
<path d="M185.988 100.613C185.645 100.613 185.234 100.551 184.758 100.426C184.289 100.293 183.887 99.9609 183.551 99.4297C183.238 98.8828 183.082 98.2188 183.082 97.4375C183.082 96.9844 183.145 96.4844 183.27 95.9375C183.402 95.3828 183.629 94.8359 183.949 94.2969C184.27 93.7578 184.672 93.3203 185.156 92.9844C185.641 92.6406 186.195 92.4688 186.82 92.4688C187.367 92.4688 187.82 92.6016 188.18 92.8672C188.547 93.1328 188.801 93.4688 188.941 93.875C189.027 94.1172 189.07 94.3633 189.07 94.6133C189.07 94.7852 189.051 94.9609 189.012 95.1406C188.809 95.9219 188.473 96.4531 188.004 96.7344C187.582 96.9844 187.172 97.1094 186.773 97.1094C186.734 97.1094 186.594 97.1016 186.352 97.0859C186.109 97.0703 185.93 96.9844 185.812 96.8281C185.703 97.25 185.648 97.6445 185.648 98.0117C185.648 98.1992 185.676 98.4688 185.73 98.8203C185.793 99.1719 186.055 99.4219 186.516 99.5703C186.594 99.5938 186.68 99.6055 186.773 99.6055C187 99.6055 187.289 99.5312 187.641 99.3828C188 99.2344 188.352 98.9336 188.695 98.4805C189.125 97.8398 189.461 97.2852 189.703 96.8164C189.781 96.6836 189.84 96.5859 189.879 96.5234C189.918 96.4531 189.949 96.418 189.973 96.418C190.012 96.418 190.031 96.4609 190.031 96.5469C189.977 97.1797 189.766 97.8125 189.398 98.4453C189.133 98.9219 188.824 99.332 188.473 99.6758C188.027 100.09 187.484 100.371 186.844 100.52C186.555 100.582 186.27 100.613 185.988 100.613ZM186.293 96.2422C186.738 96.2422 187.098 96.1523 187.371 95.9727C187.762 95.7305 187.957 95.3789 187.957 94.918C187.957 94.793 187.926 94.6523 187.863 94.4961C187.809 94.332 187.699 94.2461 187.535 94.2383C187.309 94.2695 187.074 94.4258 186.832 94.707C186.59 94.9883 186.375 95.3477 186.188 95.7852C186.117 95.9258 186.059 96.0742 186.012 96.2305L186.293 96.2422Z" fill="#444444"/>
|
|
</g>
|
|
<defs>
|
|
<filter id="filter0_d" x="87.4307" y="7.37805" width="169.138" height="185.244" 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="95.3794" y="10.076" width="154.093" height="180.391" 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="104.574" y="14.7284" width="134.852" height="170.543" 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="116" y="22" width="112" height="156" 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>
|
|
<clipPath id="clip0">
|
|
<rect width="336" height="192" fill="white"/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
