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.
218 lines
8.9 KiB
Markdown
218 lines
8.9 KiB
Markdown
# 02 — Brand foundations
|
|
|
|
Concrete values, so a review question can be settled without opening the site.
|
|
|
|
## Logo and the Element
|
|
|
|
HPE has two marks that matter for software.
|
|
|
|
**The HPE logo** (the full word-mark) is for establishing the brand in layouts
|
|
with less dense content. Place it top-left or bottom-left. The docs state
|
|
neither placement is preferred over the other.
|
|
|
|
**The Element** (the green symbol alone) is the one that governs product UI:
|
|
|
|
> Always use the HPE Element at the top-left of your service or product
|
|
> experience. To ensure consistency across HPE, the Element should always be
|
|
> accompanied by the company name and product/service name. Do not veer from
|
|
> the layout and spacing of the elements.
|
|
|
|
Three rules fall out of that, and they are the ones a product UI most often
|
|
breaks:
|
|
|
|
1. Element top-left, not centered, not right.
|
|
2. Element alone is not enough. Company name plus product name must appear
|
|
with it.
|
|
3. The lockup spacing is fixed. Do not re-space it.
|
|
|
|
Both marks have a positive and a reversed (dark background) variant:
|
|
`HPE_logo_full-clr_pos_rgb.svg` and `HPE_logo_full-clr_rev_rgb.svg`.
|
|
|
|
All brand element usage is subject to the HPE Terms of Use. Logo files and the
|
|
full usage rules are on Brand Central, not in the design system.
|
|
|
|
HPE Aruba Networking has its own word-mark rules, also on Brand Central.
|
|
|
|
## HPE GreenLake badge: retired
|
|
|
|
As of the current docs, the existing HPE GreenLake badge is **retired and must
|
|
not be added to any new material**. GreenLake is described as launching a new
|
|
brand "later this year" with a new logo, visual identity, messaging, and naming
|
|
updates. Until then, existing GreenLake materials are frozen: make no changes.
|
|
|
|
This is a live constraint. Any new UI that would have carried a GreenLake badge
|
|
should not add one.
|
|
|
|
## Color
|
|
|
|
### The rule
|
|
|
|
Do not put hex values in a product UI. Apply semantic tokens. The docs give
|
|
four reasons, and they are all practical rather than stylistic:
|
|
|
|
- Alignment with the current theme, which changes without your involvement
|
|
- Accessibility contrast is already solved in the token pairs
|
|
- Light and dark mode switching works for free
|
|
- A theme update propagates by version bump instead of a find-and-replace
|
|
|
|
### HPE green
|
|
|
|
The brand green is primitive token `base.color.green.600`, value **`#01a982`**.
|
|
Its semantic name is `color.decorative.brand`. That is the green people mean
|
|
when they say "HPE green."
|
|
|
|
Note that the *brand* green is not the *primary action* green. Interactive
|
|
primary surfaces use a darker value in light mode and a brighter one in dark
|
|
mode, for contrast reasons:
|
|
|
|
| Purpose | Light mode | Dark mode |
|
|
| --- | --- | --- |
|
|
| `color.decorative.brand` | `green.600` `#01a982` | `green.600` `#01a982` |
|
|
| `color.background.primary.strong` (rest) | `green.700` `#068667` | `green.550` `#05cc93` |
|
|
| `color.background.primary.strong` (hover) | `green.800` `#006750` | `green.500` `#00e0af` |
|
|
| `color.text.primary` / `color.icon.primary` | `green.800` `#006750` | `green.550` `#05cc93` |
|
|
|
|
The full green ramp: 100 `#d1ffee`, 125 `#aafade`, 400 `#00e0af`, 450 `#66ebcf`,
|
|
500 `#00e0af`, 550 `#05cc93`, 600 `#01a982`, 650 `#009a71`, 700 `#068667`,
|
|
800 `#006750`, 900 `#074738`, 1000 `#093d32`.
|
|
|
|
### Surface and text values
|
|
|
|
| Token | Light | Dark |
|
|
| --- | --- | --- |
|
|
| `color.background.back` | `#f7f7f7` | `#1d1f27` |
|
|
| `color.background.front` | `#ffffff` | `#292d3a` |
|
|
| `color.background.floating` | `#ffffff` | `#22252e` |
|
|
| `color.text.default` | `#3e4550` | `#e6e8e9` |
|
|
| `color.text.strong` / `color.text.heading` | `#292d3a` | `#ffffff` |
|
|
| `color.text.weak` | `#606a70` | `#b1b9be` |
|
|
| `color.border.default` | `#b1b9be` | white at 36% opacity |
|
|
|
|
Layering convention: start a product on `background.back`, layer surfaces with
|
|
`background.front`, and use `background.floating` for elevated surfaces. Prefer
|
|
a contrast background over a border when separating dense regions, because a
|
|
border adds visual noise that a background change does not.
|
|
|
|
`color.background.screenOverlay` dims inactive content behind a center layer,
|
|
side drawer, or dialog.
|
|
|
|
### The eight color families
|
|
|
|
Background, border, text, icon, decorative, data visualization, foreground,
|
|
status. Each has a defined job:
|
|
|
|
- **Decorative** carries brand and accent but never status. Do not substitute a
|
|
decorative color for a status color.
|
|
- **Data visualization** is a categorical palette built to be distinguishable
|
|
and colorblind-friendly. Use it in series order, starting at the first token.
|
|
Consolidate thin series into an "other" bucket with drill-down rather than
|
|
extending the palette.
|
|
- **Foreground** fills quantitative regions: meters, progress bars, indicators.
|
|
- **Status** covers critical, warning, ok, informational, unknown. Use it only
|
|
where it carries meaning, and always pair it with an icon or a label.
|
|
|
|
### Two accessibility rules on color
|
|
|
|
1. **Pairing.** Strong background colors require the `onStrong` text and icon
|
|
tokens. Getting this wrong is the most common contrast failure.
|
|
2. **Never color alone.** Anything conveyed by color must also be conveyed by a
|
|
text label, an icon, a pattern, or an underline.
|
|
|
|
## Typography
|
|
|
|
The typeface is **HPE Graphik**, with **GraphikXXCondensed** as a condensed
|
|
companion. Digital experiences use Light, Regular, Medium, Semibold, and Bold.
|
|
|
|
Weight tokens: thin 100, light 300, regular 400, medium 500, semibold 600,
|
|
bold 700, black 900.
|
|
|
|
### Font delivery
|
|
|
|
Point at the web-hosted fonts so users get the current version. The CDN base is
|
|
`https://www.hpe.com/content/dam/hpe/fonts/graphik/`, with files like
|
|
`HPEGraphik-Regular-Web.woff2`, `-Medium-`, `-Semibold-`, `-Bold-`,
|
|
`-Extralight-`.
|
|
|
|
Grommet teams get these URLs from `grommet-theme-hpe` already. Non-Grommet
|
|
teams copy the `@font-face` block from the typography page. Offline or desktop
|
|
use requires downloading OTF or web files from Brand Central.
|
|
|
|
### Heading rules
|
|
|
|
Headings use `rem` units so they scale with the browser's font setting.
|
|
|
|
The rule that gets broken: **pick the heading level for semantics, pick the
|
|
token for size.** Never demote an `<h2>` to an `<h3>` because you wanted
|
|
smaller text. Apply a heading token instead.
|
|
|
|
```
|
|
Correct: <h2 class="card heading-medium">Card title</h2>
|
|
Incorrect: <h3 class="card heading-medium">Card title</h3> (to get the size)
|
|
```
|
|
|
|
Levels beyond 3 are described as rarely needed and a signal the content is too
|
|
dense. Before reaching for h4 through h6, reorganize.
|
|
|
|
Paragraphs differ from plain text in that they carry a `maxWidth`, which caps
|
|
line length for readability. Use the `maxWidth` token that matches the text
|
|
t-shirt size.
|
|
|
|
## Spacing
|
|
|
|
Spacing is a subset of the scale system, expressed as t-shirt sizes. The
|
|
resolved pixel values:
|
|
|
|
| Token | px | Token | px |
|
|
| --- | --- | --- | --- |
|
|
| `hair` | 1 | `small` | 16 |
|
|
| `6xsmall` | 2 | `medium` | 24 |
|
|
| `5xsmall` | 3 | `large` | 32 |
|
|
| `4xsmall` | 4 | `xlarge` | 48 |
|
|
| `3xsmall` | 6 | `xxlarge` | 64 |
|
|
| `xxsmall` | 8 | `3xlarge` | 96 |
|
|
| `xsmall` | 12 | | |
|
|
|
|
Three rules:
|
|
|
|
1. **Spacing tokens are for layout, not elements.** Use them on cards, layers,
|
|
grids. For element-level components use component tokens or element tokens,
|
|
which size correctly across screen sizes.
|
|
2. **Use gap and padding. Avoid margin.** Margin produces unpredictable
|
|
responsive behavior.
|
|
3. **Prefer spacing over borders.** The system deliberately minimizes borders,
|
|
building hierarchy from spacing, typography, and background color instead.
|
|
|
|
## Icons
|
|
|
|
Icons ship as `@hpe-design/icons-grommet` (React) and `@hpe-design/icons-svg`.
|
|
There is an interactive Storybook at `hpe-design-icons-grommet.netlify.app` and
|
|
a Figma production file. A migration guide covers moving from `grommet-icons`
|
|
to the HPE set.
|
|
|
|
Usage rules:
|
|
|
|
- Universal symbols (search, delete, close) can stand alone. Anything less
|
|
common needs a label.
|
|
- If an icon always needs a label to be understood, drop the icon and use text.
|
|
- Never use the same symbol for different meanings across products.
|
|
- Default size is medium; sizes align to the typography scale. When inline with
|
|
text, set `height` to match the text size prop.
|
|
- Default color token is `icon-default`. Emphasis variants: `icon-strong`,
|
|
`icon-weak`, `icon-disabled`, `icon-primary`.
|
|
- Brand or third-party SVGs keep their native colors via `color="plain"`.
|
|
- Status icons are reserved for system health. Do not use them decoratively.
|
|
- Every icon carries an `aria-label`; override it with `a11yTitle`. Purely
|
|
decorative icons need `aria-hidden` so screen readers skip them.
|
|
|
|
The icon library is semantically named and carries metadata, so search by
|
|
intent rather than by shape.
|
|
|
|
## Open questions
|
|
|
|
- What is the full `onStrong` token set, and is there a published contrast
|
|
matrix, or is pairing verified per-case?
|
|
- Are the data visualization palette values fixed across theme versions, or do
|
|
they shift on a major bump? A shift would break saved dashboards.
|
|
- Does HPE Graphik cover the character sets needed for the languages HPE
|
|
products ship in, or is there a fallback stack for CJK and Cyrillic?
|