HP DESIGN.md

Design System Inspiration of HP

Overview

Visual Theme & Atmosphere

HP is one of the founding companies of Silicon Valley, and its digital surfaces carry that legacy with a deliberate, engineered calm. The hp.com experience opens on bright white (#ffffff) with near-black text (#212121) and a single, unmistakable accent: HP Blue (#0096D6) — a clean, confident cyan-leaning blue that has been the brand's signature since 2012. The atmosphere is precise but approachable: lots of air, generous photography of hardware (laptops, printers, monitors), and a restrained interface that lets the products themselves be the color.

HP's identity is built on the idea of human-centered technology that recedes — the design should never compete with the device on screen. Where consumer-tech rivals lean into gradients and neon, HP stays flat, optical, and trustworthy. The 2024–2025 brand evolution introduced a brighter HP Electric Blue for marketing energy, but the working digital primary remains the classic #0096D6, paired with the four-letter lowercase logo locked inside a perfect circle.

The typographic voice is Forma DJR, a contemporary grotesque commissioned from type designer David Jonathan Ross. Its Forma DJR UI and Forma DJR Office cuts were engineered specifically for screen and document legibility — tall x-height, open apertures, and a slightly humanist warmth that softens an otherwise corporate-precise system. The result is a brand that feels both established (a 1939 garage-startup heritage) and current.

Key Characteristics:

• HP Blue (#0096D6) as the sole interactive accent — links, CTAs, focus, selection
• Forma DJR type family (DJR UI for screen, DJR Office for documents) — humanist grotesque
• Bright white canvas (#ffffff) with near-black text (#212121) — high-contrast, product-forward
• Sentence case as the default for headlines and UI copy — approachable, not shouting
• Type is black or white only; HP Blue carries interaction, never decorative body text
• Flat, low-shadow surfaces — hardware photography supplies the visual richness
• Generous whitespace and a clean 8px-derived spacing rhythm

Primary tasks

• Add a printer or laptop to the cart
• Compare specs and total cost across HP products
• Read every review tab before choosing a laptop
• Get a printer connected with step-by-step support guidance
• Ask to be notified when an out-of-stock product returns

Brand Narrative

HP traces to a 1939 Palo Alto garage where Bill Hewlett and Dave Packard built audio oscillators — the literal origin of the Silicon Valley founder myth. That heritage of practical, well-engineered hardware still anchors the brand: HP makes things people use to get work done. In 2015 the company split into HP Inc. (personal systems and printing — the consumer-facing hp.com) and Hewlett Packard Enterprise; this design system describes HP Inc.'s consumer surface.

The visual identity has been deliberately stable. HP Blue #0096D6 has held since 2012, and the four-letter lowercase logo inside a circle — designed by Eight Inc. as a "future" mark — represents continuity and approachability. The 2024–2025 brand evolution refreshed the system with Forma DJR typography (replacing HP Simplified) and a brighter Electric Blue for campaign energy, while keeping the working digital blue intact. The thesis: technology that is human-centered and quietly capable — the device, not the chrome, is the hero.

What HP refuses: the cold institutional gray of legacy enterprise IT, the neon maximalism of gaming-first rivals (HP's OMEN sub-brand carries that energy separately), and decorative ornament that competes with product photography. HP's restraint is its statement — a brand confident enough to let a laptop on white speak for itself.

Principles

1. The product is the hero. Interface chrome recedes; hardware photography and whitespace carry the visual weight. Never let UI ornament out-shout the device.
2. Blue is interaction, not decoration. #0096D6 appears only where the user can act. Headlines, rules, and illustration never borrow it.
3. One ink per layout. Text is black or white. Color richness comes from imagery and the single blue accent — never multi-color type.
4. Sentence case, always. Approachable over authoritative. Headlines read like a helpful person talking, not a billboard shouting.
5. Engineered restraint. Flat surfaces, 1px borders, neutral shadows on hover only. The system should feel as precisely built as the hardware it sells.
6. Benefit before spec. Copy and layout lead with what you can do; specifications are available but secondary.
7. Stability is a feature. The blue and the logo have barely moved in over a decade. Consistency signals reliability — a core consumer-tech trust cue.
8. Accessible by default. High contrast (#212121 on white), 44px touch targets, visible focus rings in HP Blue.

Personas

Personas below are fictional archetypes informed by publicly described consumer-tech buyer segments, not individual people.

Marcus, 41, Austin. Small-business owner shopping for an OfficeJet printer and three laptops for new hires. Comes to hp.com to compare specs and total cost, not to be entertained. Wants clear product cards, honest stock status, and a frictionless cart. Trusts HP because his last printer "just worked for six years." Bounces if the spec table is hard to scan on his phone.

Priya, 23, Toronto. Design student buying her first premium laptop (eyeing a Spectre). She researches across three sites and reads every review tab. Responds to the clean product photography and benefit-led headlines, but ultimately decides on screen quality and weight. Expects sentence-case, jargon-free copy and a fast mobile flow with the sticky "Add to cart" bar.

Robert, 58, Manchester. Replacing the family printer and dreading driver setup. Lands on HP Support, not the store. Needs patient, step-by-step guidance (Let's get your printer connected) with big tap targets and no marketing distraction. Values that HP's support pages look calm and official. Will call support if the page feels cluttered.

Colors

Primary

• HP Blue (#0096D6): The brand-defining cyan-blue (PMS 2925 C). Primary interactive color — CTAs, links, active states, focus rings, selection. Stable since 2012.
• HP Blue Dark (#0073A8): Hover/pressed state for #0096D6 elements. Roughly 18% darker.
• HP Blue Light (#E6F4FB): Informational tints, selected-row backgrounds, subtle blue surfaces.
• HP Electric Blue (#0278AB): The intensified marketing blue introduced in the 2025 refresh (Pantone 2132). Energetic campaign moments; not the default UI blue.

Neutral / Ink

• Near Black (#212121): ink900. Primary heading and body text. HP's "black" is a soft near-black, never pure #000.
• Pure White (#ffffff): background, surface. Page background and card surfaces.
• Grey 50 (#f7f7f7): Lightest section fill, alternating bands, app shell background.
• Grey 100 (#eeeeee): Card fills, disabled surfaces, table zebra rows.
• Grey 200 (#e0e0e0): Default border, dividers, input outlines.
• Grey 300 (#cccccc): Strong borders, active input outline.
• Grey 500 (#9e9e9e): Placeholder text, disabled icons.
• Grey 600 (#767676): Caption and secondary label text (WCAG-AA on white).
• Grey 700 (#595959): Body text on light surfaces, metadata.
• Grey 800 (#404040): Emphasized body, sub-headings.

Semantic

• Success Green (#0c7d2f): Order confirmed, in-stock, positive status.
• Error Red (#d32f2f): Errors, destructive actions, out-of-stock, form validation.
• Warning Amber (#f5a623): Low-stock, pending, attention-needed states.
• Info Blue (#0096D6): Informational banners reuse HP Blue with the light tint backdrop.

Surface & Borders

• Border Default: #e0e0e0 (grey200). Cards, inputs, dividers.
• Border Strong: #cccccc (grey300). Active inputs, emphasized separators.
• Overlay Scrim: rgba(33,33,33,0.6). Modal/drawer backdrop.

Color Rules

• HP Blue is interaction. It never colors plain paragraph text or decorative rules.
• Per HP brand guidelines, foreground type is black or white only within a single layout — no mixed-color text. Color lives in the photography and the blue accent.

Typography

Font Family

• Primary (screen/UI): "Forma DJR UI", "Forma DJR Display", "HP Simplified", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
• Documents/Long-form: "Forma DJR Office", "Forma DJR Text", Georgia-fallback-free, sans-serif
• Monospace: "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace
• Legacy fallback: HP Simplified (the prior brand font) ships as a fallback on properties not yet migrated to Forma DJR.

Hierarchy

Principles

• Sentence case by default. HP guidelines mandate sentence case for display copy — titles, subtitles, and UI labels — for an approachable, consistent read. Avoid ALL CAPS except small eyebrow labels.
• Three working weights. Forma DJR ships many weights; the UI uses 400 (body), 600 (emphasis/buttons), and 700 (headings). Restraint over variety.
• Black or white text only. Within a layout, type is one ink color — never blue, never multi-color paragraphs. Blue is reserved for interactive text.
• Humanist grotesque legibility. Forma DJR's open apertures and tall x-height carry small UI sizes (12–14px) cleanly; do not condense or letterspace body copy.

Layout

Spacing System

• Base unit: 8px
• Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Section vertical rhythm: 48–64px between major page bands
• Card internal padding: 16–24px

Grid & Container

• Max content width: 1280px, centered
• Desktop: 12-column grid, 24px gutters, 32px outer margins
• Product grids: 4 columns (desktop) → 2 (tablet) → 1 (mobile)
• Generous outer margins keep hardware photography from touching viewport edges

Whitespace Philosophy

• Let the hardware breathe. Product imagery gets surrounding negative space so devices read as hero objects, not catalog thumbnails.
• Banded sections. The page alternates #ffffff and #f7f7f7 full-width bands to chunk content without borders.
• Quiet density on support/specs. Marketing pages are spacious; specification tables and support docs become denser and more utilitarian.

Border Radius Scale

• Sharp (4px): Buttons, inputs, badges, banners
• Soft (8px): Cards, tiles, modals
• Pill (9999px): Filter chips, toggles, search field

Responsive Behavior

Breakpoints

Touch Targets

• Buttons: minimum 44px height
• List/nav items: minimum 48px row height on mobile
• Icon buttons: 40px minimum tap area

Collapsing Strategy

• Mega-menu collapses to an accordion drawer on mobile
• 4-up product grid reflows to 2-up (tablet) then 1-up (mobile)
• Specification tables become stacked key/value rows below tablet width
• Sticky "Add to cart" bar pins to the bottom on mobile product pages

Image Behavior

• Hero product shots: responsive, maintain aspect ratio, never edge-crop the device
• Product thumbnails: square, contained on white, 1:1
• Logos / icons: 24–40px, consistent within context

Elevation & Depth

Shadow Philosophy: HP uses shadows sparingly and neutrally. Depth is communicated mainly through background banding and 1px borders; shadows appear on hover and floating layers only. Pure black at low opacity keeps the system clinical and product-forward — no colored or brand-tinted shadows.

Blur Effects

• Mega-menu and sticky header may apply a light backdrop blur over content on scroll.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.flat: none

Motion & Easing

Durations:

Easings:

Signature motions.

1. Product card lift. On hover, the card raises to 0 4px 12px rgba(0,0,0,0.10) and the product image scales 1.02× over motion-fast / ease-standard. Subtle — the device should appear to come forward, not bounce.
2. Mega-menu reveal. The header mega-menu fades and slides down from y-8px over motion-slow / ease-enter, with a synchronized light backdrop. Dismissal uses motion-fast / ease-exit.
3. Add-to-cart confirmation. The cart icon count animates with a brief scale pulse (1 → 1.15 → 1, motion-standard), paired with the success banner sliding in. Reassuring, never flashy.
4. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant; slides and scales become simple fades. The experience stays fully usable.

Components

Buttons

HP buttons are rectangular with a soft radius, full-weight labels, and a clear primary/secondary/tertiary hierarchy. HP Blue is the primary fill.

Primary

• Background: #0096D6
• Text: #ffffff
• Border: none
• Radius: 4px
• Padding: 12px 24px
• Font: 16px / 600 / Forma DJR UI
• Min-height: 44px
• Hover: background #0073A8
• Pressed: background #005C87
• Disabled: background #cccccc, text #767676
• Use: Primary CTA (Add to cart, Buy now, Continue)

Secondary (Outline)

• Background: #ffffff
• Text: #0096D6
• Border: 1.5px solid #0096D6
• Radius: 4px
• Padding: 12px 24px
• Font: 16px / 600 / Forma DJR UI
• Hover: background #E6F4FB
• Use: Secondary action paired with a Primary on the same screen

Tertiary (Text)

• Background: transparent
• Text: #0096D6
• Border: none
• Radius: 4px
• Padding: 12px 8px
• Font: 16px / 600 / Forma DJR UI, underline on hover
• Use: Low-emphasis inline action (Learn more, View details)

Dark (On-image / On-dark)

• Background: #ffffff
• Text: #212121
• Border: none
• Radius: 4px
• Padding: 12px 24px
• Font: 16px / 600 / Forma DJR UI
• Use: CTA placed on hardware photography or dark hero banners

Danger

• Background: #d32f2f
• Text: #ffffff
• Border: none
• Radius: 4px
• Padding: 12px 24px
• Font: 16px / 600 / Forma DJR UI
• Use: Destructive confirmation (Remove from cart, Cancel order)

Sizes (height · font · padding): small 36px · 14px · 8px 16px; medium (default) 44px · 16px · 12px 24px; large 52px · 16px · 16px 32px. Pill variant uses radius 9999px for filter chips only.

Inputs

Default

• Background: #ffffff
• Text: #212121
• Border: 1px solid #cccccc
• Radius: 4px
• Padding: 12px 14px
• Font: 16px / 400 / Forma DJR UI
• Placeholder: #9e9e9e
• Focus: border #0096D6, 2px focus ring rgba(0,150,214,0.3)
• Label: 13px / 600 / #595959, above the field
• Use: Standard form input

Error

• Background: #ffffff
• Text: #212121
• Border: 1px solid #d32f2f
• Radius: 4px
• Padding: 12px 14px
• Font: 16px / 400 / Forma DJR UI
• Help text below: #d32f2f 13px
• Use: Validation failure state

Search (rounded)

• Background: #f7f7f7
• Text: #212121
• Border: 1px solid transparent
• Radius: 24px
• Padding: 10px 16px 10px 40px (left icon)
• Use: Global product search in the header

Cards

Product Card

• Background: #ffffff
• Border: 1px solid #e0e0e0
• Radius: 8px
• Padding: 16px
• Shadow: none (rests on grey50 bands) → 0 4px 12px rgba(0,0,0,0.10) on hover
• Use: Product grid item — image, name (16px/600), price, rating, CTA

Content Card

• Background: #ffffff
• Border: none
• Radius: 8px
• Padding: 24px
• Shadow: 0 2px 8px rgba(0,0,0,0.08)
• Use: Promotional / editorial card on the home and support pages

Flat Tile

• Background: #f7f7f7
• Border: none
• Radius: 8px
• Padding: 20px
• Shadow: none
• Use: Category navigation tile, support topic tile

Badges

Promo (Fill)

• Background: #0096D6
• Text: #ffffff
• Radius: 4px
• Padding: 3px 8px
• Font: 12px / 700 / Forma DJR UI
• Use: "New", "Featured"

Sale (Fill)

• Background: #d32f2f
• Text: #ffffff
• Radius: 4px
• Padding: 3px 8px
• Font: 12px / 700 / Forma DJR UI
• Use: Discount / sale flag

Stock (Weak)

• Background: #e6f4d9 (success tint)
• Text: #0c7d2f
• Radius: 4px
• Padding: 3px 8px
• Font: 12px / 600 / Forma DJR UI
• Use: "In stock" status

Neutral (Weak)

• Background: #eeeeee
• Text: #595959
• Radius: 4px
• Padding: 3px 8px
• Font: 12px / 600 / Forma DJR UI
• Use: Metadata, category label

Tabs

Underline Tab

• Background: #ffffff
• Text (inactive): #595959
• Text (active): #212121
• Indicator: 2px bottom border #0096D6
• Font: 16px / 600 / Forma DJR UI
• Padding: 12px 16px
• Use: Product detail sections (Overview / Specs / Reviews)

Toasts / Notifications

Inline Banner

• Background: #E6F4FB (info) / #e6f4d9 (success) / #fdecea (error)
• Border-left: 4px solid the matching semantic color
• Text: #212121 14px
• Radius: 4px
• Padding: 12px 16px
• Use: Page-level status (cart updated, order placed, validation summary)

Dialogs

Modal

• Background: #ffffff
• Radius: 8px
• Padding: 24px
• Shadow: 0 8px 24px rgba(0,0,0,0.16)
• Scrim: rgba(33,33,33,0.6)
• Title: 22px / 600 / #212121
• Use: Confirmation, quick-view, configuration dialogs

Toggles

Switch

• Background: #0096D6 (on) / #cccccc (off)
• Radius: 9999px
• Thumb: #ffffff 18px circle, 0 1px 2px rgba(0,0,0,0.2)
• Use: Boolean settings, compare toggles

Tier 1 sources: https://www.hp.com (live production site, verified via live DOM getComputedStyle).

States

Do's and Don'ts

Do

• Use HP Blue (#0096D6) for every interactive element — links, buttons, focus, toggles, active tabs
• Keep foreground text black (#212121) or white only, per HP brand guidelines
• Write headlines and labels in sentence case
• Use Forma DJR with weights 400 / 600 / 700 only
• Give hardware photography surrounding whitespace; never crop devices to the edge
• Use 4px radius for controls, 8px for cards
• Reserve #0073A8 for hover/pressed of the primary blue

Don't

• Don't tint body text blue — blue means "interactive"
• Don't mix multiple text colors in one layout
• Don't use ALL CAPS for headlines (sentence case only)
• Don't apply heavy or colored drop shadows — rely on banding and borders
• Don't confuse HP Electric Blue (#0278AB, marketing) with the working UI blue (#0096D6)
• Don't use pure black (#000) — the brand ink is #212121
• Don't over-round controls; buttons stay at 4px, not pill, except filter chips

Voice & Tone

HP speaks like a knowledgeable, optimistic guide — clear, confident, human, and free of jargon. The tagline lineage ("Keep Reinventing", "Let's create") frames technology as an enabler of human creativity, not a spec sheet. Copy is in sentence case, declarative, and benefit-led: it explains what the product lets you do before how it works.

Forbidden moves. ALL-CAPS headlines, multi-color text in one layout, exclamation-heavy hype, jargon without payoff, and pure-black (#000) ink. Avoid "Oops" and faux-casual error apologies.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: HP Blue (#0096D6)
• CTA Hover: HP Blue Dark (#0073A8)
• Background: Pure White (#ffffff)
• Section band: Grey 50 (#f7f7f7)
• Heading text: Near Black (#212121)
• Body text: Grey 700 (#595959)
• Caption text: Grey 600 (#767676)
• Placeholder: Grey 500 (#9e9e9e)
• Border: Grey 200 (#e0e0e0)
• Success: Green (#0c7d2f)
• Error: Red (#d32f2f)
• Warning: Amber (#f5a623)

Example Component Prompts

• "Create an HP product card: white bg, 1px #e0e0e0 border, 8px radius, 16px padding. Square product image on white. Name 16px/600 #212121, price 18px/700 #212121, star rating, primary 'Add to cart' button (#0096D6, white text, 4px radius, 44px tall). Hover: lift with 0 4px 12px rgba(0,0,0,0.10)."
• "Build an HP primary button: #0096D6 bg, white text, 16px/600 Forma DJR, 12px 24px padding, 4px radius, 44px min-height. Hover #0073A8, pressed #005C87, disabled #cccccc bg / #767676 text."
• "Design an HP form field: white bg, 1px #cccccc border, 4px radius, 12px 14px padding, 16px text. Label 13px/600 #595959 above. Focus: #0096D6 border + rgba(0,150,214,0.3) 2px ring. Error: #d32f2f border + red help text."
• "Create an HP hero band: full-width #f7f7f7, centered 1280px content, headline 48px/700 #212121 sentence case, body 16px/400 #595959, primary CTA #0096D6, hardware photo right with breathing room."
• "Design HP underline tabs: white bg, inactive #595959, active #212121 with 2px #0096D6 bottom indicator, 16px/600, 12px 16px padding."

Iteration Guide

1. Use Forma DJR UI with system-sans fallbacks; weights 400 / 600 / 700 only
2. HP Blue #0096D6 is the sole interactive accent — never decorative
3. Text is black (#212121) or white; sentence case for headlines
4. Controls 4px radius, cards 8px radius
5. Use grey50 banding + 1px borders for structure, shadows only on hover/float
6. Give product imagery generous whitespace; contained on white
7. Desktop max 1280px, 12-col / 24px gutters; reflow grids 4→2→1

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #0096d6 measures 3.32:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-secondary. Text #0096d6 on #ffffff measures 3.32:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-tertiary. Text #0096d6 on #ffffff measures 3.32:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.