Files

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

5.7 KiB

Raw Permalink Blame History

hpe-branding

A readable mirror of the HPE Design System, HPE's brand standard for software user interfaces: what an HPE product UI must look like, how its text must read, and what accessibility it must meet.

Canonical source: https://design-system.hpe.design Upstream repo: https://github.com/grommet/hpe-design-system (Apache-2.0)

Why this exists

The official site is a Next.js static export that renders entirely in the browser. Fetch a page and you get a 1.5 KB empty shell:

curl -s https://design-system.hpe.design/foundation/color | wc -c   # 1540

There is no sitemap and no robots.txt. That makes the guidance hard to grep, hard to diff, and impossible to feed to a coding agent without a browser.

This repo is the same material in plain Markdown, with the values resolved. Every color here is a real hex code, not a token reference. Every spacing step is a real pixel value. The icons and graphics are checked in.

Path	What it covers
`01-what-it-is.md`	Scope, published packages, how it ships, Brand Central vs Design System authority
`02-brand-foundations.md`	Logo and Element placement, resolved color tables, HPE Graphik, the spacing scale, icon rules
`03-design-tokens.md`	The three token tiers, naming, the version map, how to consume them
`04-voice-and-tone.md`	UI string rules: capitalization, acronyms, banned phrasings, the term list
`05-accessibility.md`	Conformance level, the responsibility split, testing tools
`06-components-templates.md`	The 48-component and 27-template inventory, and what each layer is for
`07-adoption-and-compliance.md`	Three adoption paths, a review checklist, what is worth arguing about
`HOWTO-mirror-the-design-system.md`	Runbook to rebuild this repo from scratch. Verified commands and two scripts
`assets/icons/`	All 452 SVG icons, the complete HPE set
`assets/brand/`	HPE and HPE Aruba Networking word-marks
`assets/site-images/`	All 282 documentation graphics

New to this? Read 01, then 02. If you are about to build or review a UI, skip to the checklist in 07.

To regenerate this against a newer upstream, the runbook is the whole procedure, including the two scripts that do the awkward parts.

Things that surprise people

HPE green #01a982 is not the button color. It is color.decorative.brand. Primary interactive surfaces use #068667 in light mode and #05cc93 in dark. Reaching for #01a982 on a button produces the wrong button.
The Element is an icon, not a logo file. It is assets/icons/element.svg, the only icon in the set with a hardcoded color, because the brand green must not inherit.
Brand Central and the Design System disagree on color, deliberately. The Design System extends brand color for digital product use and instructs product teams to prefer its palette for app and web work. Brand Central governs logos, print, and marketing.
The HPE GreenLake badge is retired. It must not be added to new material, pending a GreenLake rebrand.
The upstream "What's new" page is stale. Its most recent entry is April 2023. It is not a changelog. Use the GitHub releases and the hpe-design-tokens changelog instead.
Token JSON holds no values. It holds references. Reading color.light.json directly gives you {base.color.grey.50}, not #f7f7f7.

Provenance

Content read from grommet/hpe-design-system at commit 567c4d5 (2026-07-16), mirrored 2026-07-30.

Versions current at that date: hpe-design-tokens 2.2.3, @hpe-design/icons-grommet 1.2.0, @hpe-design/icons-svg 0.2.0. Theme generation v2-Landmark (October 2025 onward), paired with grommet-theme-hpe 8.x.

This is a point-in-time snapshot and it will drift. For anything that ships, check upstream. The runbook exists so refreshing is cheap.

Colors were not transcribed by hand. Because token JSON stores references, every color in these docs was produced by resolving the reference chain with the script in the runbook, then diffed against the written claim.

License and trademark

Upstream is Apache-2.0, "Copyright 2025 Hewlett Packard Enterprise Development LP." The license text ships with the icons at assets/icons/LICENSE. This mirror is redistributed under the same terms.

An open-source copyright license grants no trademark rights. The HPE logo and the Element are HPE trademarks. Their use is governed by the HPE Terms of Use, with authoritative files and usage rules on Brand Central (HPE login required).

Treat assets/brand/ as a reference copy for reading. For anything that ships or reaches a customer, pull the current file from Brand Central. A vendored mark goes stale silently, and the pending GreenLake rebrand is exactly the event that would make a copy wrong.

assets/site-images/logos/ holds third-party partner logos (Apache, Dataiku, Dremio, H2O, SingleStore, StreamSets and others). Those marks belong to their owners and are not covered by the Apache-2.0 license above.

Not affiliated

An unofficial mirror kept for reference. Not published by, or endorsed by, the HPE Design System team. Upstream is the authority: open issues against grommet/hpe-design-system, not here.

5.7 KiB Raw Permalink Blame History