hpe-branding/02-brand-foundations.md

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?