Design System Analysis of HP

A white-paper enterprise-consumer system anchored by HP Electric Blue (#024ad8) as the lone signal CTA, near-black ink for headlines, geometric Forma DJR Micro across every surface, and angular blue-chevron decorations that nod to the HP wordmark's slashes. Cards round at 16px, photos sit in soft 16px frames, and dark-navy slabs anchor the closing customer-story and "how can we help" bands.

Foundation

Color Palette

A pure-white canvas with deep ink ladder, HP Electric Blue as the lone signal, and supporting bloom + storm accent families for sale tags and lifestyle imagery.

Brand & Accent

HP Electric Blue
#024ad8

primary — lone signal CTA, link color, chevron-decoration fill

Bright Blue
#296ef9

primary-bright — CTA on dark slabs where the deep blue muddies

Deep Navy
#0e3191

primary-deep — pressed state, visited-link color

Soft Blue
#c9e0fc

primary-soft — selection chips, customer-story card backdrops

Surface

Canvas
#ffffff

canvas — universal page background

Cloud
#f7f7f7

cloud — alternating section band, feature-card group surface

Fog
#e8e8e8

fog — slightly darker surface band, FAQ outer panel

Steel
#c2c2c2

steel — outlined element borders, focus rings

Bloom Coral
#ff5050

bloom-coral — sale-tag chip, "25% off" overlays

Bloom Rose
#f9d4d2

bloom-rose — soft pink lifestyle accent

Storm Mist
#8ebdce

storm-mist — printer-plan illustration backdrop

Storm Deep
#356373

storm-deep — neutral status accent

Text

Ink
#1a1a1a

ink — universal text on white surfaces

Ink Deep
#000000

ink-deep — wordmark, hairline strokes

Charcoal
#3d3d3d

charcoal — secondary descriptions, fine-print

Graphite
#636363

graphite — small-print, legal lines, timestamp meta

On Ink
#ffffff

on-ink — text on dark-navy slabs and footer

Semantic

Bloom Deep
#b3262b

error / discount-emphasis

Bloom Wine
#5a1313

deep destructive accent

Voice

Typography Scale

Forma DJR Micro across every surface — display, body, button, caption — at weights 400 / 500 / 600 / 700. Inter is the closest open-source substitute.

display-xxlForma DJR Micro · 72/1.0 · 500
Limited offer
display-xlForma DJR Micro · 56/1.0 · 500
Shop the catalog
display-lgForma DJR Micro · 44/1.0 · 500
A device for every workflow
display-mdForma DJR Micro · 32/1.0 · 500
Why teams choose us
display-smForma DJR Micro · 24/1.17 · 500
Featured catalog updates
display-xsForma DJR Micro · 20/1.0 · 500
Choose a printer
body-lgForma DJR Micro · 18/1.33 · 400
All-in-one subscription with hardware delivery, premium support, and supplies refresh.
body-mdForma DJR Micro · 16/1.38 · 400
Default body color. Most paragraph runs and table cells use this style with a 1.38 line-height that keeps catalog spec rows tight without crowding.
body-emphasisForma DJR Micro · 16/1.38 · 500
Bolded run-in word style — used inside paragraphs.
caption-mdForma DJR Micro · 14/1.5 · 400
Specs row · 16GB RAM · 512GB SSD · 13.3-inch display
caption-boldForma DJR Micro · 14/1.3 · 700
SAVE $200 · LIMITED OFFER
caption-smForma DJR Micro · 12/1.33 · 400
Footnote: pricing reflects in-cart adjustments before checkout.
link-mdForma DJR Micro · 16/1.38 · 500 · #024ad8
View product details
button-mdForma DJR Micro · 14/1.4 · 600 · 0.7px · UPPER
SHOP NOW
Action

Button Variants

Sharp 4px-rounded rectangles with uppercase 600 labels. The blue primary appears at most twice per viewport.

button-primary
button-primary-pressed
button-primary-disabled
button-ink
button-outline (blue)
button-outline-ink
category-tab / active
badge-pill-ink
New Featured
badge-pill-outline
In Stock Available
badge-sale-coral
Save $200 25% Off
Containers

Card Examples

Cards round at 16px with Soft Lift shadow. Pricing tiers, product tiles, and category icons all share the same chrome vocabulary.

Laptop · 13.3"

Studio Laptop 13"

Lightweight · 12-hour battery · Compact form

$1,299

Laptop · 14"

Studio Laptop 14"

32GB RAM · 1TB SSD · Long battery

$1,599

Laptop · 17.3"

Studio Laptop 17"

16GB RAM · 1TB SSD · Compact form factor

$1,799

Basic

Essential

$8.99/month
  • Up to 100 pages/month
  • Original supplies delivered
  • Free shipping
Most Popular

Versatile

$15.99/month
  • Up to 500 pages/month
  • Premium supplies delivery
  • Free shipping + 24/7 support
  • Roll-over unused pages
High Volume

Frequent

$24.99/month
  • Up to 1,500 pages/month
  • Priority ink shipping
  • 24/7 phone support
Laptops
Desktops
Printers
Computer Tools
Accessories
Enterprise

Work that fits the way teams actually work.

A productivity-first design language with deep enterprise integration, AI-driven automation, and secure delivery across every device.

Inputs

Form Elements

Inputs sit on white with steel-gray hairline borders, 4px corners, 44px height. Focused state thickens the stroke to 2px ink.

We'll never share your email.

Focus state thickens the ink stroke; no halo.

Workspace requires at least 1 seat.

Compact search input — used inside the top nav.

Rhythm

Spacing Scale

8px base unit. The 80px section gap is the universal rhythm constant — every full-bleed band is separated by it.

xxs · 4
xs · 8
sm · 12
md · 16
lg · 20
xl · 24
xxl · 32
section · 80
Geometry

Border Radius Scale

Two-tier philosophy: buttons stay sharp at 4px while cards and photo frames soften at 16px.

none · 0pxchevron decorations, hero photos
xs · 2pxsale tag pills
sm · 3pxsmall CTA radius
md · 4pxbuttons, inputs (default)
lg · 8pxbadges, FAQ rows
xl · 16pxcards, photo frames
pill · 9999pxfilter chips, search
Depth

Elevation & Depth

Mostly flat. Soft Lift shadow is the workhorse for product cards and pricing tiers. Floating Modal is rare and reserved for transient overlays.

level 0 · flat

Section band

Full-bleed color block. No shadow, no border. Cloud + fog alternating bands rely on this.

level 1 · hairline

Hairline frame

1px hairline border. FAQ accordions, outlined buttons, comparison-table cells.

level 2 · soft lift

Soft Lift

0 2px 8px rgba(26,26,26,0.08). The catalog workhorse — every product card gets it.

level 3 · floating

Floating Modal

0 8px 24px rgba(26,26,26,0.12). Reserved for transient overlays — add-to-cart drawer, image zoom.

Adapt

Responsive Behavior

Five breakpoints. The blue chevron decorations vanish on mobile so the photo card centers cleanly.

NameWidthKey Changes
Mobile< 480pxSingle-column stack, hamburger nav, hero scales to ~36px, section padding ~48px, chevrons hidden
Mobile-Large480–767pxSame column count, hero scales to ~44px, pricing tiers stack vertically
Tablet768–1023px2-column product grid, 2x2 pricing, full text nav, chevrons shrink to ~60%
Desktop1024–1279px3-column product grid, 4-column pricing, full nav
Desktop-Large≥ 1280px4-column product grid, 1366px content max-width with full-bleed bands
320
480
768
1024
1280
1366+

Touch Targets

button-primary at 44px height + 24px horizontal padding clears WCAG-AAA 44×44 touch target.

category-tab at 8px 20px padding bumps to 12px 24px on touch screens.

Top-nav icons use 44×44 invisible hit boxes around 24×24 glyphs.

Collapsing Strategy

  • Utility strip stays visible on every breakpoint; account dropdowns collapse below 768px
  • Top nav middle category list collapses into hamburger drawer below 1024px
  • Hero chevrons shrink at tablet, vanish at mobile — photo card centers in viewport
  • Product family grid: 4 → 3 → 2 → 1 column as breakpoints shrink
  • Pricing comparison table 4-col → 2x2 → single-column accordion on mobile
  • Footer 5-col link grid → 2-col tablet → single-column accordion on mobile