# 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: ```bash 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. ## Contents | Path | What it covers | | --- | --- | | [`01-what-it-is.md`](01-what-it-is.md) | Scope, published packages, how it ships, Brand Central vs Design System authority | | [`02-brand-foundations.md`](02-brand-foundations.md) | Logo and Element placement, resolved color tables, HPE Graphik, the spacing scale, icon rules | | [`03-design-tokens.md`](03-design-tokens.md) | The three token tiers, naming, the version map, how to consume them | | [`04-voice-and-tone.md`](04-voice-and-tone.md) | UI string rules: capitalization, acronyms, banned phrasings, the term list | | [`05-accessibility.md`](05-accessibility.md) | Conformance level, the responsibility split, testing tools | | [`06-components-templates.md`](06-components-templates.md) | The 48-component and 27-template inventory, and what each layer is for | | [`07-adoption-and-compliance.md`](07-adoption-and-compliance.md) | Three adoption paths, a review checklist, what is worth arguing about | | [`HOWTO-mirror-the-design-system.md`](HOWTO-mirror-the-design-system.md) | **Runbook to rebuild this repo from scratch.** Verified commands and two scripts | | [`assets/icons/`](assets/icons/) | All 452 SVG icons, the complete HPE set | | [`assets/brand/`](assets/brand/) | HPE and HPE Aruba Networking word-marks | | [`assets/site-images/`](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`](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`](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](https://www.hpe.com/us/en/about/legal/terms-of-use.html), with authoritative files and usage rules on [Brand Central](https://brandcentral.hpe.com/home) (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`](https://github.com/grommet/hpe-design-system), not here.