# 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.