justin/hpe-branding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0730557624a28835a85eec44e1d2a513e6961546
hpe-branding/assets/site-images/extendImages/extend-preview-table.svg
T
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

158 lines
12 KiB
XML
Raw Blame History

<svg width="336" height="192" viewBox="0 0 336 192" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="16" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="16" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="16" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="44" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="44" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="72" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="72" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="100" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="100" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="128" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="128" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="156" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="156" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="184" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="184" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="212" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="212" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="240" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="89" width="24" height="8" fill="white" fill-opacity="0.5" stroke="#00E8CF" stroke-width="2"/>
<rect x="240" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="240" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="268" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="268" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="11" width="24" height="8" fill="white" fill-opacity="0.3"/>
<rect x="296" y="29" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="41" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="53" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="65" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="77" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="89" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="101" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="113" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="125" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="137" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="149" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="161" width="24" height="8" fill="white" fill-opacity="0.5"/>
<rect x="296" y="173" width="24" height="8" fill="white" fill-opacity="0.5"/>
<path opacity="0.2" d="M16 24H320" stroke="white"/>
</svg>
Reference in New Issue View Git Blame Copy Permalink