claude
0730557624
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.
114 lines
5.7 KiB
Markdown
114 lines
5.7 KiB
Markdown
# 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.
|