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.
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
# 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:
|
||||
|
||||
1. **Focus on the experience.** Consider the use cases; simplify end to end.
|
||||
2. **Simplify.** Reduce visual and cognitive overload; understand why each
|
||||
element is needed.
|
||||
3. **Be intuitive.** Use common UI paradigms and consistent terminology; make
|
||||
designs self-documenting so users do not need the help docs.
|
||||
4. **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 both `grommet.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.com` reachable 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.
|
||||
Reference in New Issue
Block a user