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/foundationImages/accessibilityImages/Operable-visual-element-invert.svg
+50
View File
@@ -0,0 +1,50 @@
<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="#404B5C"/>
<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="white" stroke-width="5" stroke-linecap="round"/>
<rect x="75.5" y="174.5" width="128" height="52" rx="5.5" fill="#404B5C" stroke="white" stroke-width="5"/>
<rect x="181.5" y="187.5" width="9" height="7" rx="1.5" fill="white" stroke="white"/>
<g filter="url(#filter0_d_514_204)">
<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="white"/>
</g>
<rect x="90.5" y="187.5" width="9" height="7" rx="1.5" fill="white" stroke="white"/>
<rect x="90.5" y="208.5" width="9" height="7" rx="1.5" fill="white" stroke="white"/>
<rect x="120.5" y="187.5" width="9" height="7" rx="1.5" fill="white" stroke="white"/>
<rect x="113.5" y="208.5" width="53" height="7" rx="2.5" fill="white" stroke="white"/>
<rect x="150.5" y="187.5" width="9" height="7" rx="1.5" fill="white" stroke="white"/>
<rect x="57.5" y="67.5" width="165" height="75" rx="2.5" fill="#01A982" stroke="white" stroke-width="5"/>
<g clip-path="url(#clip0_514_204)">
<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="#404B5C"/>
</g>
<g clip-path="url(#clip1_514_204)">
<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="#404B5C"/>
</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="#404B5C"/>
<g clip-path="url(#clip2_514_204)">
<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="#404B5C"/>
</g>
<defs>
<filter id="filter0_d_514_204" 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_514_204"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_514_204" result="shape"/>
</filter>
<clipPath id="clip0_514_204">
<rect width="29" height="29" fill="white" transform="translate(207 92) rotate(90)"/>
</clipPath>
<clipPath id="clip1_514_204">
<rect width="29" height="29" fill="white" transform="translate(73 121) rotate(-90)"/>
</clipPath>
<clipPath id="clip2_514_204">
<rect width="29" height="29" fill="white" transform="translate(172 121) rotate(-180)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

assets/site-images/foundationImages/accessibilityImages/Operable-visual-element.svg
+50
View File
@@ -0,0 +1,50 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

assets/site-images/foundationImages/accessibilityImages/Perceivable-visual-element-invert.svg
+18
View File
@@ -0,0 +1,18 @@
<svg width="280" height="282" viewBox="0 0 280 282" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="2" width="280" height="280" rx="10" fill="#EFEFEF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47716 0 10V272C0 277.523 4.47715 282 10 282H270C275.523 282 280 277.523 280 272V186.357L64.7853 187.775L64.7655 184.775L280 183.357V164.357L64.6404 165.775L64.6207 162.775L280 161.357V142.357L64.4956 143.776L64.4758 140.776L280 139.356V120.356L64.3507 121.776L64.331 118.776L280 117.356V98.3556L64.2058 99.7765L64.1861 96.7765L280 95.3555V10C280 4.47715 275.523 0 270 0H10Z" fill="#404B5C"/>
<path d="M196.5 107.5C166.075 91.8261 134.167 97.8331 113.5 104L148 187L178.5 181L209 165.5L221.5 150L215 141.5L223 129.5C223 129.5 213 116 196.5 107.5Z" fill="#404B5C"/>
<path d="M91 152.701C112.618 126.892 169.75 90.7597 225.338 152.701" stroke="white" stroke-width="5"/>
<path d="M224.838 149.299C203.221 175.107 146.588 212.941 91.0001 151" stroke="white" stroke-width="5"/>
<path d="M91 130.201C112.618 104.392 169.912 70.0588 225.5 132" stroke="white" stroke-width="5"/>
<path d="M225 129C203.382 154.809 147.25 192.142 91.6618 130.201" stroke="white" stroke-width="5"/>
<path d="M0 10C0 4.47716 4.47715 0 10 0H150V282H10C4.47715 282 0 277.523 0 272V10Z" fill="#01A982"/>
<path d="M150 97.5C138.5 97.5 105.5 102.5 81 130.804" stroke="#404B5C" stroke-width="5"/>
<path d="M150 163.958C133.765 164.599 105.353 155.644 81 127.5" stroke="#404B5C" stroke-width="5"/>
<path d="M150 118.5C138.5 118.5 106.706 123.657 81 154.517" stroke="#404B5C" stroke-width="5"/>
<path d="M150 185.965C133.765 186.558 105.353 177.064 81 151" stroke="#404B5C" stroke-width="5"/>
<path d="M129 79.5L115 43.5M90.5 92L73 68" stroke="#404B5C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42 110L64 118.5" stroke="#404B5C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42 171.5L64 163" stroke="#404B5C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M113 237.5L128.941 201.162M71.4999 207.362L88.798 183.216" stroke="#404B5C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

assets/site-images/foundationImages/accessibilityImages/Perceivable-visual-element.svg
+18
View File
@@ -0,0 +1,18 @@
<svg width="280" height="280" viewBox="0 0 280 280" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="1.98584" width="280" height="278.014" rx="10" fill="#EFEFEF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47715 0 0 4.47715 0 10V270C0 275.523 4.47715 280 10 280H270C275.523 280 280 275.523 280 270V184.357L64.7854 185.775L64.7656 182.775L280 181.357V162.357L64.6405 163.775L64.6207 160.775L280 159.357V140.357L64.4956 141.776L64.4759 138.776L280 137.356V118.356L64.3508 119.776L64.331 116.776L280 115.356V96.3556L64.2059 97.7765L64.1862 94.7765L280 93.3555V10C280 4.47715 275.523 0 270 0H10Z" fill="white"/>
<path d="M196.5 106.737C166.075 91.1746 134.167 97.1391 113.5 103.262L148 185.673L178.5 179.716L209 164.326L221.5 148.936L215 140.496L223 128.581C223 128.581 213 115.177 196.5 106.737Z" fill="white"/>
<path d="M91 151.618C112.618 125.992 169.75 90.1162 225.338 151.618" stroke="#444444" stroke-width="5"/>
<path d="M224.838 148.24C203.221 173.865 146.588 211.431 91.0001 149.929" stroke="#444444" stroke-width="5"/>
<path d="M91 129.277C112.618 103.651 169.912 69.5619 225.5 131.064" stroke="#444444" stroke-width="5"/>
<path d="M225 128.085C203.382 153.711 147.25 190.779 91.6618 129.278" stroke="#444444" stroke-width="5"/>
<path d="M0 10C0 4.47715 4.47715 0 10 0H150V280H10C4.47715 280 0 275.523 0 270V10Z" fill="#01A982"/>
<path d="M150 96.8086C138.5 96.8086 105.5 101.773 81 129.877" stroke="white" stroke-width="5"/>
<path d="M150 162.795C133.765 163.432 105.353 154.541 81 126.596" stroke="white" stroke-width="5"/>
<path d="M150 117.66C138.5 117.66 106.706 122.78 81 153.422" stroke="white" stroke-width="5"/>
<path d="M150 184.646C133.765 185.236 105.353 175.808 81 149.929" stroke="white" stroke-width="5"/>
<path d="M129 78.9361L115 43.1914M90.5 91.3474L73 67.5176" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42 109.22L64 117.659" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42 170.284L64 161.844" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M113 235.816L128.941 199.736M71.4999 205.891L88.798 181.917" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

assets/site-images/foundationImages/accessibilityImages/Robust-visual-element-invert.svg
+15
View File
@@ -0,0 +1,15 @@
<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="#404B5C"/>
<path d="M121 83H199" stroke="white" stroke-width="5" stroke-linecap="round"/>
<rect x="65" y="127" width="137" height="16" rx="4" fill="#263040"/>
<path d="M121 111H199" stroke="white" stroke-width="5" stroke-linecap="round"/>
<path d="M121 97H199" stroke="white" stroke-width="5" stroke-linecap="round"/>
<rect x="41.5" y="57.5" width="193" height="100" rx="3.5" stroke="white" stroke-width="5"/>
<rect x="150.5" y="252.5" width="116" height="69" rx="3.5" transform="rotate(-90 150.5 252.5)" fill="#01A982" stroke="white" stroke-width="5"/>
<rect x="67" y="76" width="36" height="39" rx="4" fill="#01A982" stroke="white" stroke-width="4"/>
<rect x="167" y="160" width="36" height="39" rx="4" fill="#01A982" stroke="white" stroke-width="4"/>
<path d="M171 215H199" stroke="white" stroke-width="4" stroke-linecap="round"/>
<path d="M171 231H199" stroke="white" stroke-width="4" stroke-linecap="round"/>
<path d="M171 223H199" stroke="white" stroke-width="4" stroke-linecap="round"/>
<path d="M92 202H89.5C89.5 203.381 90.6193 204.5 92 204.5V202ZM89.5 165.25C89.5 166.631 90.6193 167.75 92 167.75C93.3807 167.75 94.5 166.631 94.5 165.25H89.5ZM94.5 175.75C94.5 174.369 93.3807 173.25 92 173.25C90.6193 173.25 89.5 174.369 89.5 175.75H94.5ZM89.5 186.25C89.5 187.631 90.6193 188.75 92 188.75C93.3807 188.75 94.5 187.631 94.5 186.25H89.5ZM94.5 196.75C94.5 195.369 93.3807 194.25 92 194.25C90.6193 194.25 89.5 195.369 89.5 196.75H94.5ZM99 204.5C100.381 204.5 101.5 203.381 101.5 202C101.5 200.619 100.381 199.5 99 199.5V204.5ZM113 199.5C111.619 199.5 110.5 200.619 110.5 202C110.5 203.381 111.619 204.5 113 204.5V199.5ZM127 204.5C128.381 204.5 129.5 203.381 129.5 202C129.5 200.619 128.381 199.5 127 199.5V204.5ZM141 199.5C139.619 199.5 138.5 200.619 138.5 202C138.5 203.381 139.619 204.5 141 204.5V199.5ZM89.5 160V165.25H94.5V160H89.5ZM89.5 175.75V186.25H94.5V175.75H89.5ZM89.5 196.75V202H94.5V196.75H89.5ZM92 204.5H99V199.5H92V204.5ZM113 204.5H127V199.5H113V204.5ZM141 204.5H148V199.5H141V204.5Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

assets/site-images/foundationImages/accessibilityImages/Robust-visual-element.svg
+15
View File
@@ -0,0 +1,15 @@
<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="M121 83H199" stroke="#444444" stroke-width="5" stroke-linecap="round"/>
<rect x="65" y="127" width="137" height="16" rx="4" fill="#EFEFEF"/>
<path d="M121 111H199" stroke="#444444" stroke-width="5" stroke-linecap="round"/>
<path d="M121 97H199" stroke="#444444" stroke-width="5" stroke-linecap="round"/>
<rect x="41.5" y="57.5" width="193" height="100" rx="3.5" stroke="#444444" stroke-width="5"/>
<rect x="150.5" y="252.5" width="116" height="69" rx="3.5" transform="rotate(-90 150.5 252.5)" fill="#01A982" stroke="#444444" stroke-width="5"/>
<rect x="67" y="76" width="36" height="39" rx="4" fill="#01A982" stroke="#444444" stroke-width="4"/>
<rect x="167" y="160" width="36" height="39" rx="4" fill="#01A982" stroke="#444444" stroke-width="4"/>
<path d="M171 215H199" stroke="#444444" stroke-width="4" stroke-linecap="round"/>
<path d="M171 231H199" stroke="#444444" stroke-width="4" stroke-linecap="round"/>
<path d="M171 223H199" stroke="#444444" stroke-width="4" stroke-linecap="round"/>
<path d="M92 202H89.5C89.5 203.381 90.6193 204.5 92 204.5V202ZM89.5 165.25C89.5 166.631 90.6193 167.75 92 167.75C93.3807 167.75 94.5 166.631 94.5 165.25H89.5ZM94.5 175.75C94.5 174.369 93.3807 173.25 92 173.25C90.6193 173.25 89.5 174.369 89.5 175.75H94.5ZM89.5 186.25C89.5 187.631 90.6193 188.75 92 188.75C93.3807 188.75 94.5 187.631 94.5 186.25H89.5ZM94.5 196.75C94.5 195.369 93.3807 194.25 92 194.25C90.6193 194.25 89.5 195.369 89.5 196.75H94.5ZM99 204.5C100.381 204.5 101.5 203.381 101.5 202C101.5 200.619 100.381 199.5 99 199.5V204.5ZM113 199.5C111.619 199.5 110.5 200.619 110.5 202C110.5 203.381 111.619 204.5 113 204.5V199.5ZM127 204.5C128.381 204.5 129.5 203.381 129.5 202C129.5 200.619 128.381 199.5 127 199.5V204.5ZM141 199.5C139.619 199.5 138.5 200.619 138.5 202C138.5 203.381 139.619 204.5 141 204.5V199.5ZM89.5 160V165.25H94.5V160H89.5ZM89.5 175.75V186.25H94.5V175.75H89.5ZM89.5 196.75V202H94.5V196.75H89.5ZM92 204.5H99V199.5H92V204.5ZM113 204.5H127V199.5H113V204.5ZM141 204.5H148V199.5H141V204.5Z" fill="#444444"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

assets/site-images/foundationImages/accessibilityImages/Understandable-visual-element-invert.svg
+8
View File
@@ -0,0 +1,8 @@
<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="#404B5C"/>
<path d="M81 163.449V111.816L99.3943 86H192V201H81V163.449Z" fill="#404B5C" stroke="#01A982" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
<rect x="56.5" y="57.5" width="55" height="55" fill="#01A982" stroke="white" stroke-width="5"/>
<rect x="162.5" y="55.5" width="58" height="59" rx="29" fill="#404B5C" stroke="white" stroke-width="5"/>
<rect x="56.5" y="165.5" width="52" height="52" rx="5.5" fill="#404B5C" stroke="white" stroke-width="5"/>
<path d="M162.603 182.448L192 161.09L221.397 182.448L210.168 217.007H173.832L162.603 182.448Z" fill="#404B5C" stroke="white" stroke-width="5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 774 B

assets/site-images/foundationImages/accessibilityImages/Understandable-visual-element.svg
+8
View File
@@ -0,0 +1,8 @@
<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="M81 163.449V111.816L99.3943 86H192V201H81V163.449Z" fill="white" stroke="#01A982" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
<rect x="56.5" y="57.5" width="55" height="55" fill="#01A982" stroke="#444444" stroke-width="5"/>
<rect x="162.5" y="55.5" width="58" height="59" rx="29" fill="white" stroke="#444444" stroke-width="5"/>
<rect x="56.5" y="165.5" width="52" height="52" rx="5.5" fill="white" stroke="#444444" stroke-width="5"/>
<path d="M162.603 182.448L192 161.09L221.397 182.448L210.168 217.007H173.832L162.603 182.448Z" fill="white" stroke="#444444" stroke-width="5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 772 B