# HP — Design System
> Global technology company providing personal computing, printing, and enterprise solutions.
- **Canonical:** https://uiuxskills.com/library/hp
- **Source:** https://www.hp.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:35.057Z

---

---
version: alpha
name: HP
description: Global technology company providing personal computing, printing, and enterprise solutions.
tone: Authoritative, innovative, professional, and solution-oriented.
color-scheme: light
colors:
  primary: "#0096D6"
  surface: "#FFFFFF"
  surface-dim: "#F5F5F5"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#D1D1D1"
  error: "#D32F2F"
  success: "#388E3C"
  surface-container: "#EBEBEB"
  focus-ring: "#007DBA"
typography:
  display-lg:
    fontFamily: HP Simplified, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: HP Simplified, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: HP Simplified, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: HP Simplified, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: HP Simplified, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: HP Simplified, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: HP Simplified, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#007DBA"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#005A8D"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

HP maintains a professional, enterprise-focused visual identity that balances technical authority with human-centric innovation. The brand uses a clean, high-contrast aesthetic to convey reliability and performance across its diverse hardware and software portfolio.

## Colors

The color strategy relies on a high-contrast palette that prioritizes the signature brand blue to guide user action, set against a neutral, clean background.

*   Primary (#0096D6): The signature HP blue used for primary CTAs and brand highlights.
*   Surface (#FFFFFF): Standard white background for clean content presentation.
*   Surface-dim (inferred) (#F5F5F5): Light gray background for section differentiation.
*   On-surface (inferred) (#1A1A1A): Primary text color for high readability on light surfaces.
*   On-primary (inferred) (#FFFFFF): Text color for buttons and elements using the primary brand color.
*   Outline (inferred) (#D1D1D1): Border color for cards and input fields.
*   Error (inferred) (#D32F2F): Standard semantic error color for alerts and validation.
*   Success (inferred) (#388E3C): Standard semantic success color for status indicators.
*   Surface-container (inferred) (#EBEBEB): Container background for secondary cards.
*   Focus-ring (inferred) (#007DBA): High-contrast focus state for accessibility.

## Typography

The typography uses the "HP Simplified" family to maintain a consistent, professional, and accessible voice across all digital touchpoints.

*   Display-lg (inferred): Used for hero section headlines.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard paragraph text.
*   Label-sm (inferred): Used for small UI labels and metadata.

## Layout

The site utilizes a responsive grid system with a max-width of 964px for content containers. Spacing follows a consistent 8px-based rhythm, ensuring clear separation between product tiles and marketing sections. The page structure follows a logical flow: nav, hero, product-grid, case-studies, news, and footer. The hero composition features a centered headline and subhead with dual primary/secondary CTAs, accompanied by a large product image. Mobile-first design is standard, with navigation collapsing into a hamburger menu on smaller viewports.

## Elevation & Depth

Depth is conveyed through subtle, multi-layered shadows on interactive cards and navigation elements. The values are inferred based on the brand's minimal, clean aesthetic.

*   Elevation.sm: 0 1px 2px rgba(0,0,0,0.06) — subtle lift for small UI elements.
*   Elevation.md: 0 2px 4px rgba(0,0,0,0.08) — standard card lift.
*   Elevation.lg: 0 4px 8px rgba(0,0,0,0.10) — modal or drawer overlay.

## Shapes

The brand employs a conservative approach to corner radius, favoring sharp corners (2px-4px) for functional UI elements like inputs and buttons to emphasize precision. Slightly larger radii (8px) are reserved for cards to soften their visual impact while maintaining a professional, structured appearance.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use `{colors.primary}` with `{typography.label-sm}`. Use these for main calls to action. Secondary buttons use a transparent background with a `{colors.primary}` border.

### Card
Cards utilize `{colors.surface}` with `{rounded.md}` and a `{colors.outline}` border. Use `card-elevated` for interactive tiles that require depth, or `card-dim` for background-differentiated content areas.

### Input Field
Inputs use `{colors.surface}` with `{rounded.sm}` and a `{colors.outline}` border. Apply `{input-field-focus}` when the user interacts with the field to provide clear accessibility feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Do not mix multiple primary colors; stick to {colors.primary}. |
| Apply {typography.display-lg} for hero headlines only. | Avoid using {typography.label-sm} for primary content. |
| Use {rounded.md} for all product cards. | Do not use excessive shadows; keep elevation within {elevation.md}. |
| Maintain consistent {spacing.md} between content blocks. | Never apply {typography.body-md} on {colors.surface-dim} without contrast. |
| Use {colors.on-surface} for body text. | Avoid rounded corners larger than {rounded.lg} on standard UI. |
| Apply {colors.error} only for critical validation. | Do not use {colors.error} for decorative elements. |
| Use {input-field-focus} for active form states. | Do not use default browser focus rings. |
| Use {colors.surface-container} for secondary cards. | Do not use {colors.surface} for nested section backgrounds. |

## Content Style

CTA labels should use imperative verbs and sentence case, keeping them concise (e.g., "Shop," "Learn"). Avoid overly descriptive or long-winded button text.

Headlines should be benefit-driven and professional, focusing on innovation and future-readiness. The tone should remain authoritative yet accessible, positioning HP as a solution-oriented partner.

Maintain a density that favors short, scannable paragraphs. Use bullet points for feature lists and ensure there is ample whitespace between content blocks to prevent visual clutter.

## Imagery & Icons

Imagery combines high-quality product photography with clean, studio-lit backgrounds to maintain a professional aesthetic. Icons are typically thin-stroke and minimalist, reinforcing the "minimal" and "enterprise" design style. Avoid overly complex illustrations; prioritize clear, high-resolution product shots.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for HP, a minimal enterprise technology brand. Match its authoritative, solution-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never by hardcoded hex, pixel, or font-size values.
2. Respect the components block exactly. Use only the defined variants: `button-primary`, `button-secondary`, `card`, `card-elevated`, `card-dim`, `input-field`, `badge`, `badge-error`, `badge-success`. Do not invent new variants.
3. Follow the Shapes narrative: use `{rounded.sm}` for inputs and buttons, `{rounded.md}` for cards. Never exceed `{rounded.lg}` on standard UI elements.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Apply elevation conservatively: `{elevation.sm}` for small UI, `{elevation.md}` for cards, `{elevation.lg}` for modals only. Do not stack shadows beyond these values.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radii, and elevation.
- Include hover, focus, and disabled states for every interactive component where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding and gap values; maintain the 8px rhythm.
- Render `{typography.display-lg}` only for hero headlines; use `{typography.headline-md}` for card titles.
- Write CTAs in imperative verb, sentence case per the Content Style section (e.g., "Shop," "Learn more").

**Must NOT:**
- Hardcode colors, font sizes, or radii not present in the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, decorative use of `{colors.error}`, or filler copy.
- Rewrite page copy, button labels, or navigation items supplied by the product team.
- Alter page structure (nav, hero, product-grid, case-studies, news, footer) as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- For backgrounds, default to `{colors.surface-container}` for nested sections, not `{colors.surface}`.
- For ambiguous text roles, use `{colors.on-surface}` on light surfaces and `{colors.on-primary}` on `{colors.primary}` backgrounds.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values take precedence.
- For unspecified breakpoints, follow the Layout section; if absent, default to mobile-first with one breakpoint at 768px.