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.
5.1 KiB
01 — What the HPE Design System is
The short version
An open-source library of UI components, design tokens, page templates, and
written guidance, published so that HPE software looks and reads like one
company. It is maintained in public on GitHub and documented at
design-system.hpe.design.
It is built on Grommet, a React component library. HPE's brand styling is applied to Grommet through a theme package, and the same styling is published separately as tech-agnostic design tokens for teams that do not use React.
What ships
Everything lives in one pnpm monorepo, grommet/hpe-design-system, under the
Apache-2.0 license. Published artifacts as of 2026-07-30:
| Package | Version | What it is |
|---|---|---|
hpe-design-tokens |
2.2.3 | The design tokens, in multiple output formats |
@hpe-design/icons-grommet |
1.2.0 | The HPE icon set as React components |
@hpe-design/icons-svg |
0.2.0 | The same icons as raw SVG |
hpe-design-system-codemods |
0.2.1 | Automated migrations between versions |
Two related packages live outside this repo:
grommet— the underlying component library (v2,v2.grommet.io)grommet-theme-hpe— the HPE theme for Grommet (github.com/grommet/grommet-theme-hpe)
The pairing matters: grommet-theme-hpe v8.x carries hpe-design-tokens v2.
See 03-design-tokens.md for the full version map.
What the documentation site contains
Doc page counts, read from the repo on 2026-07-30:
| Area | Pages | Purpose |
|---|---|---|
foundation/ |
20 | Brand, color, typography, spacing, icons, accessibility, voice and tone |
design-tokens/ |
11 | Token model, naming, versioning, consumption |
components/ |
48 | One page per component, plus an all-components index |
templates/ |
27 | Multi-component patterns (dashboards, wizards, forms, navigation) |
learn/ |
4 | Tutorials (grid fundamentals, the box model, toolbar and datatable how-tos) |
The site is a Next.js static export hosted on Netlify. It renders entirely in
the browser, publishes no sitemap, and returns 404 on robots.txt. Fetching a
page with curl gets you a 1.5 KB shell and no content. To read it
programmatically, read the MDX in the GitHub repo instead.
The stated philosophy
Three pillars, quoted from foundation/philosophy-and-principles:
- Human-centered design
- A common design language
- Collaboration and community
Four design principles, each with concrete sub-rules on the page:
- Focus on the experience. Consider the use cases; simplify end to end.
- Simplify. Reduce visual and cognitive overload; understand why each element is needed.
- Be intuitive. Use common UI paradigms and consistent terminology; make designs self-documenting so users do not need the help docs.
- Lead people to success. Show only choices that apply to the current context; order fields most-common-first; reveal fields only when they apply; add safeguards against destructive mistakes.
The principles page states they apply to "anyone authoring or authorizing any form of design on behalf of HPE," which includes people who are not designers.
Authoritative vs advisory
This distinction comes up in reviews, so it is worth being precise.
- Brand Central (
brandcentral.hpe.com) owns the corporate brand: logo files, logo usage rules, the master color specification, typography files, photography. Logo usage is governed by the HPE Terms of Use. - The Design System owns the digital product expression of that brand. It says explicitly that its "color palette and guidance differ from Brand Central," that the difference is deliberate, that it was made in partnership with HPE Brand, and that product teams should "prioritize the HPE Design System palette when selecting colors for app or web experiences."
So for a shipping software UI, the Design System is the operative reference. For a logo lockup, a printed asset, or anything marketing-facing, Brand Central governs.
How to get help or contribute
- Slack channel
#hpe-design-system, on bothgrommet.slack.com(public Grommet workspace) and the HPE enterprise Slack. - Designers request access to the HPE Design System Figma team by creating a Figma account with an HPE email address, then requesting to join the team from the HPE icon in the Figma sidebar.
- The repo carries a
knowledge/directory it describes as "the AI-first knowledge system for the HPE Design System": agent orchestrators for contributing to the design system itself. Six capabilities are listed (docs refactor, component creation, pattern creation, design-tokens publishing, package release, alignment audit), but only docs-refactor is marked active. The rest are planned stubs.
Open questions
- Is
grommet.slack.comreachable from an HPE account without a separate signup, or is the HPE enterprise Slack channel the practical route? - Does the design system team take intake from product teams for new components, and what is the lead time?
- Who owns the design system inside HPE (which org, which VP)? The docs name a Slack channel but no owning organization.