HP Design System

---

version: alpha

name: HP-design-analysis

description: An inspired interpretation of HP's design language — a white-paper enterprise-consumer system anchored by HP Electric Blue (`#024ad8`) as the lone signal CTA, near-black ink (`#1a1a1a`) for headlines, geometric Forma-DJR sans throughout, and angular blue-chevron decorations that nod to the HP wordmark's slashes. Cards round at 8–16px, photos sit in soft 16px frames, and dark navy slabs anchor the customer-story and "how can we help" closing bands.

colors:

primary: "#024ad8"

primary-bright: "#296ef9"

primary-deep: "#0e3191"

primary-soft: "#c9e0fc"

on-primary: "#ffffff"

ink: "#1a1a1a"

ink-deep: "#000000"

ink-soft: "#292929"

on-ink: "#ffffff"

canvas: "#ffffff"

paper: "#ffffff"

cloud: "#f7f7f7"

fog: "#e8e8e8"

steel: "#c2c2c2"

graphite: "#636363"

charcoal: "#3d3d3d"

hairline: "#e8e8e8"

hairline-strong: "#c2c2c2"

link: "#024ad8"

link-pressed: "#0e3191"

bloom-coral: "#ff5050"

bloom-rose: "#f9d4d2"

bloom-deep: "#b3262b"

bloom-wine: "#5a1313"

storm-mist: "#8ebdce"

storm-sea: "#7fadbe"

storm-deep: "#356373"

error: "#b3262b"

typography:

display-xxl:

fontFamily: Forma DJR Micro

fontSize: 72px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

display-xl:

fontFamily: Forma DJR Micro

fontSize: 56px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

display-lg:

fontFamily: Forma DJR Micro

fontSize: 44px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

display-md:

fontFamily: Forma DJR Micro

fontSize: 32px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

display-sm:

fontFamily: Forma DJR Micro

fontSize: 24px

fontWeight: 500

lineHeight: 1.17

letterSpacing: 0

display-xs:

fontFamily: Forma DJR Micro

fontSize: 20px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

body-lg:

fontFamily: Forma DJR Micro

fontSize: 18px

fontWeight: 400

lineHeight: 1.33

letterSpacing: 0

body-md:

fontFamily: Forma DJR Micro

fontSize: 16px

fontWeight: 400

lineHeight: 1.38

letterSpacing: 0

body-emphasis:

fontFamily: Forma DJR Micro

fontSize: 16px

fontWeight: 500

lineHeight: 1.38

letterSpacing: 0

caption-md:

fontFamily: Forma DJR Micro

fontSize: 14px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

caption-sm:

fontFamily: Forma DJR Micro

fontSize: 12px

fontWeight: 400

lineHeight: 1.33

letterSpacing: 0

caption-bold:

fontFamily: Forma DJR Micro

fontSize: 14px

fontWeight: 700

lineHeight: 1.3

letterSpacing: 0

link-md:

fontFamily: Forma DJR Micro

fontSize: 16px

fontWeight: 500

lineHeight: 1.38

letterSpacing: 0

button-md:

fontFamily: Forma DJR Micro

fontSize: 14px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0.7px

textTransform: uppercase

button-sm:

fontFamily: Forma DJR Micro

fontSize: 12.6px

fontWeight: 700

lineHeight: 1.0

letterSpacing: 0.126px

price-md:

fontFamily: Forma DJR Micro

fontSize: 24px

fontWeight: 500

lineHeight: 1.17

letterSpacing: 0

rounded:

none: 0px

xs: 2px

sm: 3px

md: 4px

lg: 8px

xl: 16px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 20px

xl: 24px

xxl: 32px

section: 80px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: 12px 24px

height: 44px

button-primary-pressed:

backgroundColor: "{colors.primary-deep}"

textColor: "{colors.on-primary}"

button-primary-disabled:

backgroundColor: "{colors.steel}"

textColor: "{colors.on-primary}"

button-ink:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: 12px 24px

height: 44px

button-outline:

backgroundColor: "{colors.canvas}"

textColor: "{colors.primary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: 12px 24px

height: 44px

button-outline-ink:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: 12px 24px

height: 44px

button-text-link:

backgroundColor: "{colors.canvas}"

textColor: "{colors.primary}"

typography: "{typography.link-md}"

padding: 4px 0

badge-pill-ink:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 6px 12px

badge-pill-outline:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 6px 12px

badge-sale-coral:

backgroundColor: "{colors.bloom-coral}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: 4px 8px

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 12px 16px

height: 44px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

text-input-search:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 12px 16px

height: 40px

card-product:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 24px

card-product-feature:

backgroundColor: "{colors.cloud}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 32px

card-pricing-tier:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 24px

card-pricing-tier-featured:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 24px

card-customer-story:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 16px

card-article-tile:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 16px

card-category-icon:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-emphasis}"

rounded: "{rounded.lg}"

padding: 16px

promo-strip-dark:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 48px

hero-promo-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 32px

utility-strip:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-md}"

height: 36px

padding: 0 24px

nav-bar-top:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

height: 64px

padding: 0 32px

nav-link:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

padding: 8px 16px

category-tab:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-emphasis}"

rounded: "{rounded.pill}"

padding: 8px 20px

category-tab-active:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

rounded: "{rounded.pill}"

faq-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-emphasis}"

rounded: "{rounded.lg}"

padding: 20px 24px

chevron-decoration:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

rounded: "{rounded.none}"

help-band-dark:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

padding: 64px 32px

footer-dark:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

padding: 64px 32px

---

HP reads like a long-running consumer-electronics catalog crossed with an enterprise-software product page. The whole system sits on **pure white** (`{colors.canvas}` — `#ffffff`) with thin gray panels (`{colors.cloud}` / `{colors.fog}`) for alternating section bands. There is one chromatic action color — **HP Electric Blue** (`{colors.primary}` — `#024ad8`) — and one ink color (`{colors.ink}` — `#1a1a1a`); together they do ninety percent of the work. Type is a single family across every surface: **Forma DJR Micro**, HP's bespoke geometric grotesque, set at weight 500 for headlines and 400 for body — clean, neutral, slightly mechanical.

The signature gesture is **angular blue chevrons** — sharp 0-radius slashes derived from the HP wordmark's pair of parallel slashes — that anchor the homepage hero, the laptop-page hero, and the printer pricing page. They appear on the left and right edges of the primary banner card, layered behind product photography. Outside those decorative slashes, every other surface is rectilinear with **soft 8–16px corners** on cards and a 4px corner on buttons.

The system breaks into three voice modes: a **white commercial body** for product browsing (cards, category icons, pricing tiers); a **dark navy slab** (`{colors.ink}` near-black) for testimonial bands, the closing "How can we help?" footer-prelude, and the page footer; and a **light fog band** (`{colors.cloud}` / `{colors.fog}`) for utility sections like comparison strips and FAQ accordions. The blue accent appears only on filled CTAs, link text, the chevron decorations, and the active price-stamp on a featured tier — never as a section background.

**Key Characteristics:**

> **No Interaction sub-section.** Hover colors are silently filtered. Allowed sub-sections: Brand & Accent, Surface, Text, Semantic.

The voice is **single-family**: Forma DJR Micro (HP's bespoke geometric grotesque, fallback Arial) across every surface — display, body, button, caption. Forma DJR Micro is a wide, slightly rounded grotesque designed at small optical sizes to stay legible at UI-chrome scale. HP runs it at weight 400 for body, 500 for display headlines, 600/700 for emphasis and button labels.

The 16/14/12-px caption tier carries the catalog metadata — model numbers, spec rows, fine print — at weight 400 with a 1.4–1.5 line-height. Button labels lift to weight 600/700 with positive 0.5–1.1px letter-spacing and uppercase transform — the only place the system tracks letters.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 72px | 500 | 1.0 | 0 | Hero headline (homepage, laptop hub) |

| `{typography.display-xl}` | 56px | 500 | 1.0 | 0 | Section headlines on landing pages |

| `{typography.display-lg}` | 44px | 500 | 1.0 | 0 | Sub-section headlines on shop pages |

| `{typography.display-md}` | 32px | 500 | 1.0 | 0 | Promo strip headlines, FAQ section headers |

| `{typography.display-sm}` | 24px | 500 | 1.17 | 0 | Card titles, pricing-tier names |

| `{typography.display-xs}` | 20px | 500 | 1.0 | 0 | Inline list headers, accordion labels |

| `{typography.body-lg}` | 18px | 400 | 1.33 | 0 | Lead paragraphs |

| `{typography.body-md}` | 16px | 400 | 1.38 | 0 | Default body |

| `{typography.body-emphasis}` | 16px | 500 | 1.38 | 0 | Bolded run-in copy |

| `{typography.caption-md}` | 14px | 400 | 1.5 | 0 | Specs, metadata, captions |

| `{typography.caption-bold}` | 14px | 700 | 1.3 | 0 | Sale tags, in-card highlights |

| `{typography.caption-sm}` | 12px | 400 | 1.33 | 0 | Footnotes, legal lines |

| `{typography.link-md}` | 16px | 500 | 1.38 | 0 | Inline link emphasis |

| `{typography.button-md}` | 14px | 600 | 1.4 | 0.7px | Primary/secondary button labels (uppercase) |

| `{typography.button-sm}` | 12.6px | 700 | 1.0 | 0.126px | Compact button labels in tight cells |

| `{typography.price-md}` | 24px | 500 | 1.17 | 0 | Tier and product price stamps |

The typographic decision worth flagging: HP runs **weight 500 for every display size**, including the largest 72px hero headline. Most editorial systems jump to 600/700 at hero scale; HP doesn't. The result feels open and approachable rather than commanding — appropriate for a brand that sells across consumer, SMB, and enterprise audiences in the same catalog.

Forma DJR Micro's rounded-grotesque shapes do most of the warmth. There's no italic in the system except inside legal disclaimers; emphasis is carried by weight (500 → body-emphasis, 700 → caption-bold) instead.

Forma DJR Micro is proprietary (Commercial Type / Mark Caneso). Closest open-source substitutes:

When swapping, set body line-height to 1.4 and display line-height to 1.0 explicitly — the Forma DJR Micro line-height numbers are tight, and most substitutes default looser.

The 80px section gap is the universal rhythm constant — it appears between every major homepage band, between the hero and the comparison table on the printer-plan page, and between feature rows on the laptop-shop page.

Whitespace is **commercial-clean** — generous around hero photography, tight around catalog spec rows. Product cards leave breathing room above and below the photo (≥32px) so the laptop or printer reads as a hero shot rather than a thumbnail. The fine-print disclaimer regions (legal, footnote rows) tighten line-height to 1.3 and shrink type to 11–12px so the bulk of fine print stays compact.

| Level | Treatment | Use |

|---|---|---|

| 0 — Flat | No border, no shadow. | Section bands (white, cloud, fog), full-bleed photo heroes |

| 1 — Hairline | 1px solid `{colors.hairline}` (`#e8e8e8`) border, no shadow. | Outlined buttons, comparison-table cells, FAQ accordion outers |

| 2 — Soft Lift | `0 2px 8px rgba(26, 26, 26, 0.08)`. | Product cards, pricing-tier columns, customer-story tiles |

| 3 — Floating Modal | `0 8px 24px rgba(26, 26, 26, 0.12)`. | Add-to-cart drawer, mobile-nav sheet, image zoom modal |

The system is mostly flat — depth is communicated by **color contrast** (cloud-band vs. white card on the same band) rather than shadow elevation. The Soft Lift level is the workhorse for the catalog — every product tile and pricing column gets it; nothing else does. Modal-floating is rare and reserved for transient overlays.

The system's most distinctive depth gesture is the **HP blue chevron pair** — two angular `{colors.primary}` slashes (no radius, no shadow) that sit on the left and right of the homepage hero card and the laptop-shop hero. They're not decorative noise; they're a literal echo of the HP wordmark's two parallel slashes, scaled up to architectural size. Treat them as a brand artifact, not a generic geometric flourish.

Photography on the homepage and laptop-shop pages frames product imagery inside `{rounded.xl}` (16px) containers with a soft 1px hairline. Lifestyle photography (testimonials, "How HP works for X") sits full-bleed inside dark-navy slabs without rounding.

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Hero chevron decorations, full-bleed photo heroes, marquee strips |

| `{rounded.xs}` | 2px | Secondary chip backgrounds, sale-tag pills |

| `{rounded.sm}` | 3px | Default secondary CTA radius (small touch zones) |

| `{rounded.md}` | 4px | Primary buttons, secondary buttons, text inputs |

| `{rounded.lg}` | 8px | Badge pills, category-icon cards, FAQ row containers |

| `{rounded.xl}` | 16px | Product cards, pricing tiers, customer-story tiles, photo frames |

| `{rounded.pill}` | 9999px | Category sub-nav tabs, search-pill input, filter chips |

The system maintains a clear two-tier philosophy: **buttons stay sharp** (4px, almost rectilinear) while **cards and photo frames stay soft** (16px). This split is the visual signature — sharp interactive elements against softer container surfaces.

Hero photography sits in `{rounded.xl}` (16px) frames with no border. Product family thumbnails inside the laptop-grid are 1:1 (square) on a `{colors.canvas}` background, padded so the laptop is shown at ~70% of the frame. Customer-story photography uses 16:9 inside the same `{rounded.xl}` frame. There are no full-bleed circular avatars; testimonial avatars are 4px-rounded squares.

> **No hover states documented.** Every component spec below documents only Default and Active/Pressed states. Variants live as separate front-matter entries.

**`button-primary`** — the lone HP Electric Blue CTA

**`button-ink`** — black filled CTA

**`button-outline`** — blue-text outlined CTA

**`button-outline-ink`** — black-text outlined CTA

**`button-text-link`** — inline blue link with underline

**`card-product`** — the workhorse product tile

**`card-product-feature`** — full-row feature card with photo + copy

**`card-pricing-tier`** + **`card-pricing-tier-featured`**

**`card-customer-story`** — the three-up testimonial tile

**`card-article-tile`** — the four-up "Latest from HP" tile

**`card-category-icon`** — the small icon-and-label card in the homepage "Our Products" row

**`hero-promo-card`** — the homepage hero card with chevron decorations

**`promo-strip-dark`** — the inline dark navy promo block

**`text-input`** + **`text-input-focused`**

**`text-input-search`** — pill search in the top nav

**`badge-pill-ink`** — filled tag pill

**`badge-pill-outline`** — outlined tag pill

**`badge-sale-coral`** — the sale price-stamp

**`utility-strip`** — the top-of-page utility bar

**`nav-bar-top`** — desktop top nav (sits below utility strip)

**`nav-link`**

**Top Nav (Mobile)**

**`category-tab`** + **`category-tab-active`** — the pill sub-nav

**`chevron-decoration`** — the geometric blue slash motif

**`faq-row`** — the accordion row on the printer-plan FAQ

**`help-band-dark`** — the closing "How can we help?" prelude band

**`footer-dark`**

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 480px | Single-column stack; hamburger nav; section padding drops to ~48px; hero serif scales to ~36px |

| Mobile-Large | 480–767px | Same column count; hero scales to ~44px; pricing tiers stack vertically |

| Tablet | 768–1023px | 2-column product grid; pricing 2x2; nav still full text labels |

| Desktop | 1024–1279px | 3-column product grid; 4-column pricing; full nav |

| Desktop-Large | ≥ 1280px | 4-column product grid; 1366px content max-width with full-bleed bands |

Every interactive element clears 44×44px on mobile. `button-primary` at 44px height + 24px horizontal padding meets WCAG-AAA touch target. `category-tab` at 8px 20px padding bumps to 12px 24px on touch screens. Nav-link tap areas extend invisibly beyond the text run to the full 44px row height. Sticky cart/sign-in icons in the top nav use 44×44 invisible hit boxes around their visible 24×24 glyph.

Hero photography uses `{rounded.xl}` containers at every breakpoint. The chevron decorations vanish on mobile; the underlying photo card centers in the viewport. Lifestyle photography in the testimonial and "how-can-we-help" bands maintains 16:9 ratio with horizontal cropping rather than letterboxing on mobile. There are no art-direction crop swaps between desktop and mobile — the same image is used at every size.

1. Focus on ONE component at a time; resist refactoring an entire section in one pass

2. Reference component names and tokens directly (`{colors.primary}`, `{typography.display-xxl}`, `{rounded.xl}`, `card-product`) — do not paraphrase to hex/px in prose

3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically

4. Add new variants as separate component entries (`-pressed`, `-disabled`, `-focused`); never bury state inside prose

5. Default body to `{typography.body-md}`; reach for `{typography.body-emphasis}` for run-in bolds; keep display sizes for true heading roles

6. Keep `{colors.primary}` scarce — at most two flame elements per viewport (one CTA + one chevron decoration). Three flame items in one viewport is over-saturation

7. When introducing a new section band, choose from `{colors.canvas}` / `{colors.cloud}` / `{colors.fog}` / `{colors.ink}` — six pre-defined surface modes is the entire surface vocabulary