HP Brand Design System Deep Dive

1. Brand Overview

HP’s Singapore homepage reads like a masterclass in corporate tech branding done with restraint. This is not the hyper-creative, “let’s surprise you” design language of a startup. It’s a mature, engineered, and consistent system aimed at reassuring you that your printer, laptop, or enterprise solution is backed by decades of reliability.

The vibe is confident but not flashy. You’ll see a lot of blue – the kind of blue that’s used in enterprise software and corporate identity manuals. It communicates trust, stability, and a technology-forward mindset. HP isn’t trying to be playful; they want their visual language to feel like a safe bet for CIOs and home users alike.

Typography is modern but utilitarian: Forma DJR Micro is the workhorse here, a geometric sans with just enough warmth to avoid feeling soulless. There’s a disciplined 8px spacing grid, tight border radii for most elements, and very controlled use of shadows (almost none).

You’ll notice clear separation between interactive elements and background surfaces – buttons are bold and high-contrast, links change color on hover in predictable ways. The system is built for accessibility and clarity, but also for scalability: you can tell this design language works across HP’s massive product catalog without breaking.

Who’s this for? Corporate buyers, tech-savvy consumers, and anyone who values stability over trendiness. HP’s design system says, “We know what works; we’re not reinventing the wheel.”

2. Color System

2.1 Primary Colors

The main brand color in the interface is #024ad8 – a deep, saturated blue used for primary buttons and key CTAs. It’s accompanied by a lighter accent blue #007bff for certain links and overlays. This combination is classic for tech brands: blue = trust, competence, and calm authority.

The primary blue is darker than Microsoft’s default blue and less cyan than Dell’s. It plays well against white backgrounds and meets WCAG contrast requirements with white text.

2.2 Complete Palette

2.3 Color Relationships

HP’s palette is high-contrast. Black (#000) on white (#fff) is the default for text. Primary blue (#024ad8) on white yields excellent contrast (>4.5:1). The lighter accent blue (#007bff) is used sparingly because its contrast with white is borderline for WCAG AAA but fine for AA.

Dark grays (#1a1a1a, #3d3d3d) provide softer contrast for secondary text and navigation. Slate blue-gray (#485571) works as a muted link color that still fits the corporate palette.

No evidence of dark mode – the palette is optimized for light backgrounds. Transparency is used in secondary colors (rgba) for overlays.

2.4 Usage Guide

• Primary actions: Use #024ad8 with white text.
• Secondary actions: Use white background with black text or slate blue-gray for muted CTAs.
• Text: Default black on white; secondary text in #1a1a1a or #696969.
• Links: #007bff for inline links; always change to white on hover.
• Avoid: Using accent blue for large backgrounds – it’s meant for small interactive elements.
• Focus states: Always use #ccdef5 outline color for accessibility consistency.

3. Typography

3.1 Font Families

The dominant font is forma-djr-micro, a geometric sans-serif. Fallbacks include Arial, Helvetica Neue, Helvetica depending on context. There’s also FormaDJRMicro with slight variations in weight usage. Icon fonts appear under newhpicon.

No Google Fonts or Adobe Fonts loading – likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

HP uses large H1s (60px) for hero headlines, scaling down to 38px and 30px for section titles. Body text sizes hover at 16px, with captions and secondary info at 14px or smaller. The hierarchy is clear: big headlines draw attention, consistent body size aids readability.

Weights are mostly 400 (regular) with occasional 600 or 700 for emphasis. Line heights are tight for headings (around 1.1–1.3) and looser for body/caption (1.4–1.5), improving scanability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is clearly 8px – common in modern UI systems.

4.2 Layout

Breakpoints range from 400px (mobile) to 1920px+ (desktop). This is a responsive system with granular breakpoints: 426px, 550px, 768px, 1024px, 1280px, etc. Suggests careful tuning for multiple device widths.

5. Visual Elements

Border Radius

HP uses small radii for most components:

• 2px: Buttons, close icons
• 3px: Divs, tab panels
• 4px: Buttons
• 10px: Images
• 20px: Larger buttons/divs
• Extreme: 1000px for a fully rounded element (likely a pill or circle avatar)
• 50%: Circles (icons, avatars)

Shadows

Almost flat design – most shadows are rgba(0,0,0,0) placeholders. A rare shadow: rgba(77,93,133,0.22) 0px 1px 1.5px for subtle depth.

Borders

Borders are used instead of shadows for separation:

• 1px solid #024ad8 for buttons
• 1px solid white for light elements
• 0px 0px 1px solid black for dividers

6. Components

6.1 Buttons

Primary Button (.c-button--large)

• Default: bg #024ad8, color #fff, padding 0 32px, border none
• Hover: bg #212237, color #fff, scale 1.1
• Active: bg #2c6415, color #fff, border 1px solid rgba(162,192,169,0.5)
• Focus: outline var(--hp-button-focus-outline), bg #ccc, color #013bac, border 1px solid black

Secondary Button (white background)

• Default: bg #fff, color #000, padding 0 32px
• Hover: bg #212237, color #fff
• Active/Focus: same as primary

Link Button (.c-button-link)

• Default: transparent bg, black text
• Hover: bg #212237, white text
• Active: greenish bg #2c6415, white text
• Focus: bg #ccc, blue text

Pagination Bullet

• Default: bg #000, radius 20px
• Focus: outline var(--hp-button-focus-outline)

6.2 Links

Eight link styles, all with hover to white text:

• #3d3d3d default → white on hover
• #1a1a1a default → white on hover
• #252525 underline → white on hover
• #000000 default → white on hover
• #ffffff default → white on hover
• #024ad8 default → white on hover
• #007bff default → white on hover
• #3860be underline → white on hover

6.3 Forms

Search input:

• Default: transparent bg, black text, no border
• Focus: bg #1eaedb, white text, black border, blue box-shadow

6.4 Cards

No explicit card data, but likely use 10px radius, white bg, subtle borders instead of shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-charcoal: #1a1a1a;
  --color-slate-blue-gray: #485571;
  --color-accent-blue: #007bff;
  --color-primary-blue: #024ad8;
  --color-dim-gray: #696969;
  --color-dark-gray: #3d3d3d;
  --color-deep-corporate-blue: #0056b3;
  --color-focus-outline-blue: #ccdef5;

  /* Typography */
  --font-primary: "forma-djr-micro", Arial;
  --font-secondary: "FormaDJRMicro", "forma-djr-micro", Arial;
  --font-icon: "newhpicon";

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-120: 120px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-full: 1000px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-none: rgba(0,0,0,0) 0px 0px 10px 0px;
}

8. AI Coding Assistant Prompt

# HP Design System Specification

You are an HP design expert. Build UIs matching their visual language exactly.

## Brand Context
HP's design language is corporate, technology-focused, and built for clarity. It uses a disciplined 8px grid, restrained color palette dominated by deep blues, and modern geometric sans-serif typography. Interactive states are predictable and accessible.

## Color Palette
- Black: #000000 — Primary text, icons
- White: #ffffff — Backgrounds, text on dark surfaces
- Charcoal: #1a1a1a — Secondary text, header/footer
- Slate Blue Gray: #485571 — Muted links, secondary buttons
- Accent Blue: #007bff — Inline links, overlay CTAs
- Primary Blue: #024ad8 — Primary buttons, main CTAs
- Dim Gray: #696969 — Category headers
- Dark Gray: #3d3d3d — Menu links
- Deep Corporate Blue: #0056b3 — Hover/focus states
- Focus Outline Blue: #ccdef5 — Focus outlines

## Typography
- Headings: "forma-djr-micro", Arial
- Secondary: "FormaDJRMicro", "forma-djr-micro", Arial
- Icon font: "newhpicon"
- Sizes & weights:
  - H1: 60px, 400, lh 1.03
  - H2: 38px, 400, lh 1.11
  - H3: 30px, 400, lh 1.20
  - H4: 24px, 400, lh 1.33
  - Body: 16px, 400, lh 1.50
  - Captions: 14px, 400–700
  - Buttons: 16px, 500

## Spacing & Grid
Base: 8px grid
Scale: 1px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 28px, 30px, 40px, 50px, 60px, 120px
Use multiples for all padding/margins.

## Border Radius
- sm: 2px — small buttons
- md: 4px — inputs
- lg: 10px — images
- xl: 20px — large buttons
- full: 1000px — pills
- circle: 50% — avatars/icons

## Shadows & Depth
Mostly flat — use borders for separation, minimal rgba shadows.

## Component Specifications

### Primary Button
Default: bg #024ad8, color #fff, padding 0 32px, border none
Hover: bg #212237, color #fff, scale 1.1
Active: bg #2c6415, color #fff, border 1px solid rgba(162,192,169,0.5)
Focus: outline #ccdef5, bg #ccc, color #013bac, border 1px solid #000

### Secondary Button
Default: bg #fff, color #000, padding 0 32px
Hover: bg #212237, color #fff

### Link
Default: color palette values above, no underline unless specified
Hover: color #fff, no underline

### Input Field (search)
Default: transparent bg, black text, no border
Focus: bg #1eaedb, white text, black border, box-shadow #2196f3 0 0 1px

## Layout & Responsive Rules
Breakpoints: 400px, 426px, 550px, 768px, 1024px, 1280px, 1920px
Max content width: follow breakpoint widths
Padding: multiples of 8px

## Interaction Rules
Transitions: 150ms ease for hover/focus/active
Focus indicators: always visible, use #ccdef5 outline
Hover scale: up to 1.1x on buttons

## DO List
- Use only defined palette colors
- Maintain 8px spacing multiples
- Use forma-djr-micro for all text
- Keep corner radii consistent by type
- Use hover to white text for all links

## DON'T List
- Introduce unapproved colors
- Mix sharp and rounded corners in same component
- Overuse shadows — prefer borders
- Change button hover scale beyond 1.1

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #024ad8;
  color: #fff;
  padding: 0 32px;
  border-radius: 0;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #212237;
  transform: scale(1.1);
}
.btn-primary:focus {
  outline: 2px solid #ccdef5;
}

Secondary Button

.btn-secondary {
  background: #fff;
  color: #000;
  padding: 0 32px;
  font-size: 16px;
}
.btn-secondary:hover {
  background: #212237;
  color: #fff;
}

Input Field

.input-search {
  background: transparent;
  color: #000;
  border: none;
  padding: 1px 2px;
}
.input-search:focus {
  background: #1eaedb;
  color: #fff;
  border: 1px solid #000;
  box-shadow: #2196f3 0 0 1px;
}

---

## 9. Summary

**TL;DR** – HP’s design system is a corporate-grade, blue-heavy, 8px grid-driven UI language with modern geometric sans typography and minimal shadows. It’s built for clarity, consistency, and scalability across products.

**Brand Keywords**:
- corporate-tech
- trust-blue
- grid-disciplined
- flat-accessible
- geometric-sans