HP

HP's design language is a white-paper enterprise-consumer system anchored by HP Electric Blue (#024ad8) as the lone signal CTA, near-black ink (#1a1a1a) headlines, Forma DJR Micro sans throughout, and angular blue-chevron decorations echoing the HP wordmark's slashes. Cards round at 8-16px, buttons stay sharp at 4px, and dark navy slabs anchor the closing bands.

Homepage Example

HP
pc · prt · office
Built to turn big ideas…
into big impact.
Envy Notebook
From $1,199
Shop now
© HP — dark-navy slab

Color Palette (16)

HP Electric Blue#024ad8
Bright Blue#296ef9
Deep Navy#0e3191
Soft Blue#c9e0fc
Ink#1a1a1a
Ink Deep#000000
Ink Soft#292929
Canvas#ffffff
Cloud#f7f7f7
Fog#e8e8e8
Steel#c2c2c2
Graphite#636363
Charcoal#3d3d3d
Bloom Coral#ff5050
Storm Mist#4f7d8c
Storm Deep#356373

Typography (12)

display-xxl
display-xxl72px · weight 500
display-xl
display-xl56px · weight 500
display-lg
display-lg44px · weight 500
display-md
display-md32px · weight 500
display-sm
display-sm24px · weight 500
display-xs
display-xs20px · weight 500
body-lg
body-lg18px · weight 400
body-md
body-md16px · weight 400
body-emphasis
body-emphasis16px · weight 500
caption-bold
caption-bold14px · weight 700
button-md
button-md14px · weight 600
price-md
price-md24px · weight 500

Components (9)

button-primary
button-primary
button-ink
button-ink
button-outline
button-outline
button-outline-ink
button-outline-ink
badge-pill-ink
badge-pill-ink
badge-sale-coral
badge-sale-coral
card-product
card-product
card-featured
card-featured
category-tab
category-tab

Border Radius

0 (0px)
2 (2px)
3 (3px)
4 (4px)
8 (8px)
16 (16px)
pill (9999px)

Design Philosophy

Overview

HP reads like a long-running consumer-electronics catalog crossed with an enterprise-software product page. The whole system sits on pure white with thin gray panels (cloud #f7f7f7 / fog #e8e8e8) alternating for section rhythm. There is one chromatic action color — HP Electric Blue (#024ad8) — and one ink (#1a1a1a), together doing ninety percent of the work. Type is a single family, Forma DJR Micro, set at weight 500 for headlines and 400 for body.

Key Characteristics

  • Pure-white canvas with deep-ink body; light fog bands alternate for section rhythm
  • HP Electric Blue (#024ad8) is the lone CTA fill and link color, used at most twice per viewport
  • Angular blue-chevron decorations (0-radius slashes) echo the HP wordmark on hero bands
  • Cards round at 8-16px; buttons stay sharp at 4px — a clean two-tier split
  • Dark-navy ink slabs close every page rhythm — testimonial bands and the footer

Do's and Don'ts

Reserve Electric Blue for the primary CTA, links, and chevron decoration. Use 16px radius for cards and 4px for buttons. Close every page with a dark-navy slab. Don't introduce secondary saturated colors and don't round buttons above 4px.