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/highlightImages/table-dark.svg
+51
View File
@@ -0,0 +1,51 @@
<svg width="134" height="128" viewBox="0 0 134 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M4 6C4 3.79086 5.79086 2 8 2H126C128.209 2 130 3.79086 130 6V118C130 120.209 128.209 122 126 122H8C5.79086 122 4 120.209 4 118V6Z" fill="#404B5C"/>
<path d="M8 2.5H126C127.933 2.5 129.5 4.067 129.5 6V118C129.5 119.933 127.933 121.5 126 121.5H8C6.067 121.5 4.5 119.933 4.5 118V6C4.5 4.06701 6.067 2.5 8 2.5Z" stroke="#7887A2"/>
</g>
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9106 37.6121C21.6061 37.3047 21.1144 37.3028 20.8081 37.6121L17.6939 40.7562C17.3894 41.0636 17.3876 41.5601 17.6939 41.8693L20.8081 45.0135C21.1125 45.3208 21.6043 45.3227 21.9106 45.0135L25.0248 41.8693C25.3292 41.562 25.3311 41.0655 25.0248 40.7562L21.9106 37.6121Z" fill="#D04F4E" stroke="#D04F4E"/>
</g>
<g clip-path="url(#clip1)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2874 58.0312L26.9302 65.0625H17.6445L22.2874 58.0312Z" fill="#9B6310" stroke="#9B6310" stroke-linejoin="round"/>
</g>
<g clip-path="url(#clip2)">
<path d="M21.3593 108.031C23.4961 108.031 25.2283 106.282 25.2283 104.125C25.2283 101.968 23.4961 100.219 21.3593 100.219C19.2225 100.219 17.4902 101.968 17.4902 104.125C17.4902 106.282 19.2225 108.031 21.3593 108.031Z" fill="#008567" stroke="#008567"/>
</g>
<g clip-path="url(#clip3)">
<path d="M21.3593 87.4062C23.4961 87.4062 25.2283 85.6574 25.2283 83.5C25.2283 81.3426 23.4961 79.5938 21.3593 79.5938C19.2225 79.5938 17.4902 81.3426 17.4902 83.5C17.4902 85.6574 19.2225 87.4062 21.3593 87.4062Z" fill="#008567" stroke="#008567"/>
</g>
<path d="M80 14H18V27H80V14Z" fill="#C0CADC"/>
<path d="M87.5 14.5H115.5V26.5H87.5V14.5Z" fill="#C0CADC" stroke="#7887A2"/>
<path d="M80 38H36V45H80V38Z" fill="#C0CADC"/>
<path d="M116 38H87V45H116V38Z" fill="#C0CADC"/>
<path d="M80 59H36V66H80V59Z" fill="#C0CADC"/>
<path d="M116 59H87V66H116V59Z" fill="#C0CADC"/>
<path d="M80 80H36V86H80V80Z" fill="#C0CADC"/>
<path d="M116 80H87V86H116V80Z" fill="#C0CADC"/>
<path d="M80 100H36V107H80V100Z" fill="#C0CADC"/>
<path d="M116 100H87V107H116V100Z" fill="#C0CADC"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="134" height="128" 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="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.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="9.28572" height="9.375" fill="white" transform="translate(16.7168 36.625)"/>
</clipPath>
<clipPath id="clip1">
<rect width="11.1429" height="9.375" fill="white" transform="translate(16.7168 57.25)"/>
</clipPath>
<clipPath id="clip2">
<rect width="9.28572" height="9.375" fill="white" transform="translate(16.7168 99.4375)"/>
</clipPath>
<clipPath id="clip3">
<rect width="9.28572" height="9.375" fill="white" transform="translate(16.7168 78.8125)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB