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