--- version: alpha name: "HP" description: "HP is the 84-year-old technology brand's mainstream consumer face — a paper-white canvas (`#ffffff`) anchored by the iconic **HP-circle** wordmark in `#0096d6` cyan-blue (the same hex Hewlett-Packard adopted in the 2008 brand refresh and has barely budged since). Type runs **Forma DJR**, the proprietary humanist sans Pentagram designed for HP in 2016 — a friendlier, more open Helvetica with subtle inkwell terminals. The brand voice is \"technology for everybody\": laptops, printers, monitors, gaming Omen, professional Z workstations all share the same blue-on-white canvas with sentence-case Forma headlines. Where Apple is premium-minimal and Razer is gamer-aggressive, HP is approachable-mainstream — the technology brand your parents and your kids both recognise." colors: bg: "#ffffff" bg-soft: "#f7f7f7" bg-cool: "#f0f4f8" bg-deep: "#1c1c1c" bg-omen: "#000000" surface: "#ffffff" surface-soft: "#f7f7f7" surface-cool: "#f0f4f8" surface-strong: "#e0e6ed" surface-input: "#ffffff" text: "#1c1c1c" text-strong: "#000000" text-soft: "#5d6770" text-faint: "#8a939d" text-disabled: "#b8c0c8" text-on-dark: "#ffffff" text-link: "#0096d6" brand: "#0096d6" brand-light: "#33acdd" brand-deep: "#005d83" brand-darkest: "#002d4c" brand-hover: "#0080b8" brand-active: "#005d83" on-brand: "#ffffff" cta-primary: "#0096d6" cta-primary-hover: "#0080b8" omen-red: "#e60000" omen-red-hover: "#c40000" omen-deep: "#1c1c1c" z-charcoal: "#3c4148" link-default: "#0096d6" link-visited: "#0096d6" link-hover: "#0080b8" border: "#e0e6ed" border-soft: "#f0f4f8" border-strong: "#0096d6" scrim: "rgba(0,0,0,0.5)" shadow-soft: "rgba(0,90,150,0.06)" shadow-card: "rgba(0,90,150,0.1)" shadow-elev: "rgba(0,90,150,0.15)" shadow-modal: "rgba(0,0,0,0.25)" badge-new: "#0096d6" badge-deal: "#e60000" badge-eco: "#2d8659" badge-energy-star: "#1d4f9e" price: "#1c1c1c" price-strikethrough: "#8a939d" price-discount: "#e60000" rating-star: "#ff9500" success: "#2d8659" warning: "#ff9500" danger: "#e60000" info: "#0096d6" typography: display: fontFamily: "Forma DJR Display" fontSize: "64px" lineHeight: 1.55 letterSpacing: "-0.015em" body: fontFamily: "Forma DJR Text" fontSize: "16px" lineHeight: 1.55 mono: fontFamily: "JetBrains Mono" rounded: button: "6px" card: "12px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "48px" --- ## Overview ## Overview HP is the 84-year-old technology brand's mainstream face — Hewlett-Packard founded in 1939 in a Palo Alto garage, now a global hardware brand whose laptops, printers, and monitors live in nearly every classroom, home office, and corporate procurement order in the world. The page reflects that scale through restraint: a paper-white canvas (`#ffffff`) anchored by the iconic **HP-circle** wordmark in **HP Cyan** (`#0096d6`) — the same hex Hewlett-Packard adopted in the 2008 brand refresh designed by Moving Brands and has barely budged since. The brand voice is **technology for everybody**. Headlines run **Forma DJR Display** at 48–64px Bold 700, sentence-case, with subtle negative tracking. Forma DJR is the proprietary humanist sans Pentagram designed for HP in 2016 (the David Jonathan Ross cut, hence "DJR"). It reads as a friendlier, more open Helvetica with subtle inkwell terminals — designed specifically to give HP a typographic voice between Microsoft's Segoe (too system-utility) and Apple's San Francisco (too premium-minimal). The result is approachable corporate. Product photography is **mainstream-clean**: every laptop is shot at 3/4 angle on white seamless with a soft cool-tinted shadow pool beneath. HP's product family is broad — consumer Pavilion, premium Spectre, professional EliteBook, gaming Omen, workstation Z series, printers across every price tier — and the marketing site standardises the photography across all of them, so a Spectre x360 shoots like an Omen 16 shoots like a LaserJet Pro: same canvas, same lighting, same shadow tone. The interaction language is **conservative-clean**. Cards are 6px-radius rectangles (slightly less rounded than Logitech's 12px) with cool-grey hairlines. Primary CTAs are pill-shaped (9999 radius) cyan blue. Spec strips appear inline on product cards — a 4-cell horizontal block with CPU / RAM / Storage / Display — because HP customers are price-and-spec shoppers more than gaming enthusiasts. Prices render at **22/700** (HP's prices are notably larger than its competitors; they're a primary purchase signal). Sub-brands carry slight variations: **Omen** (gaming) flips to a `#000000` dark canvas with a `#e60000` red CTA. **Z** (workstations) introduces a `#3c4148` charcoal accent. **Spectre** (premium consumer) deepens to a navy gradient. But the underlying typographic and chrome system stays the same — HP is one parent brand expressed through colour-tonal sub-brand variants. **Key Characteristics:** - Paper-white `#ffffff` canvas with cool-grey `#e0e6ed` hairline borders - HP Cyan `#0096d6` — the iconic logomark colour, used for every brand accent and primary CTA - Forma DJR (Pentagram, 2016) at 700 for headlines, 400 for body — humanist sans with subtle warmth - HP-circle logomark anchored top-left on every page in cyan on white - Pill-shaped (9999 radius) primary CTAs in cyan - 6px-radius cards (slightly less rounded than Logitech / Bose) - Large 22/700 price display — HP customers shop on price-and-spec - Inline 4-cell spec strip on product cards — CPU · RAM · Storage · Display - Dark `#1c1c1c` promotional bar above main nav with rotating deal copy - Sub-brand colour variants: Omen red `#e60000`, Z charcoal `#3c4148`, ENERGY STAR `#1d4f9e` ## Colors ### Primary - **Canvas** (`#ffffff`): the page floor — corporate paper-white - **Bg Soft** (`#f7f7f7`): near-white surface tier 1, used for spec strips and alternating bands - **Bg Cool** (`#f0f4f8`): cool-grey surface tier 2, used for soft sections - **Bg Deep** (`#1c1c1c`): near-black inverted band, promotional bar, Omen sub-brand surface - **Bg Omen** (`#000000`): Omen gaming sub-brand pure black - **Text Primary** (`#1c1c1c`): soft near-black body - **Text Strong** (`#000000`): display headlines - **Border** (`#e0e6ed`): 1px cool-grey hairline ### Brand - **HP Cyan** (`#0096d6`): the iconic logomark colour and primary brand accent - **HP Cyan Light** (`#33acdd`): brighter brand for hover states on icons - **HP Cyan Deep** (`#005d83`): deeper brand for gradient stops - **HP Cyan Darkest** (`#002d4c`): darkest brand for high-contrast surfaces - **Brand Gradient** (`linear-gradient(135deg, #0096d6 0%, #005d83 100%)`): the signature HP gradient on flagship hero bands - **Brand Hover** (`#0080b8`): hovered brand for CTAs - **Brand Active** (`#005d83`): pressed brand ### Sub-Brand Accents - **Omen Red** (`#e60000`): the gaming sub-brand accent — used only on Omen product pages and Omen Gaming Hub - **Omen Red Hover** (`#c40000`): hovered Omen - **Omen Deep** (`#1c1c1c`): Omen dark canvas - **Z Charcoal** (`#3c4148`): Z workstation pro brand accent - **Spectre Navy** (`#001a33`): Spectre premium consumer deeper navy ### Interactive - **Link** (`#0096d6`): same as brand — HP collapses link into accent - **Link Hover** (`#0080b8`): deeper cyan on hover - **Link Visited** (`#0096d6`): unchanged - **Disabled** (`#b8c0c8`): muted cool-grey - **Selected** (`#0096d6`): selected radio / checkbox / tab fill ### Neutral Scale - **Text** (`#1c1c1c`) — primary body - **Text Strong** (`#000000`) — display headlines - **Text Soft** (`#5d6770`) — secondary metadata - **Text Faint** (`#8a939d`) — tertiary captions - **Text Disabled** (`#b8c0c8`) — disabled labels - **Text on Dark** (`#ffffff`) — text on inverted bands - **Border** (`#e0e6ed`) — 1px cool-grey hairline - **Border Soft** (`#f0f4f8`) — softer divider - **Border Strong** (`#0096d6`) — focused input ### Surface & Borders HP's depth ladder: `#ffffff` → `#f7f7f7` → `#f0f4f8` → `#e0e6ed`. Four near-whites within 8% lightness. The brand position: stay corporate-bright, let the cyan brand accent and the product photography carry the visual interest. ### Shadow Colors **Cool-tinted blue-undertone shadows** with a slightly heavier blue weight than Logitech's. `rgba(0,90,150, *)` base — the blue undertone ties depth to the brand cyan. Modal shadows use neutral `rgba(0,0,0, *)` for stronger emphasis on dialogs. ### Semantic - **Success** (`#2d8659`): also EPEAT eco-badge green - **Warning** (`#ff9500`): amber warnings - **Danger** (`#e60000`): red — also Omen sub-brand and SALE badge - **Info** (`#0096d6`): brand cyan doubles as info - **Energy Star** (`#1d4f9e`): partnership-specific blue, used only for ENERGY STAR certification badges ## Typography ### Font Family **Display**: `Forma DJR Display` and `Forma DJR Banner` — the headline cuts of the Pentagram-commissioned Forma DJR family designed by David Jonathan Ross for HP in 2016. Forma DJR was conceived as a corporate humanist sans with optical sizing built in: Banner for poster-scale 100px+ display, Display for headline 32–96px, Text for body 12–24px, Micro for sub-12px caption. Falls back to `"Helvetica Neue", Arial, sans-serif`. Weights: 400 (regular), 500 (medium), 700 (bold). **Body**: `Forma DJR Text` and `Forma DJR Micro` for sub-12px contexts. The Text cut is optimised for 14–18px readability with subtly inkwell-traced terminals. **Mono**: `Consolas, "SF Mono", monospace` — appears in technical documentation and BIOS/firmware update steps. **OpenType features**: `kern`, `liga` enabled by default. `tnum` enabled on price text and spec values. Optical-sizing via `font-variation-settings` where supported. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | display-hero | Forma DJR Display | 64 | 700 | 1.1 | -0.015em | — | Homepage hero "Reinvent how you work" | | display-xl | Forma DJR Display | 48 | 700 | 1.15 | -0.01em | — | Product launch hero, category H1 | | display-lg | Forma DJR Display | 36 | 700 | 1.2 | -0.005em | — | Section banner | | display-md | Forma DJR Display | 28 | 700 | 1.25 | 0 | — | Product detail H1 | | display-sm | Forma DJR Display | 22 | 500 | 1.3 | 0 | — | Card title, modal heading | | section-head | Forma DJR Display | 14 | 700 | 1.2 | 0.05em | uppercase | "LAPTOPS", "PRINTERS" | | sub-section | Forma DJR Display | 18 | 500 | 1.4 | 0 | — | Sub-heading within product | | body-lg | Forma DJR Text | 18 | 400 | 1.55 | 0 | — | Hero supporting copy | | body-md | Forma DJR Text | 16 | 400 | 1.55 | 0 | — | Default body | | body-sm | Forma DJR Text | 14 | 400 | 1.5 | 0 | — | Sidebar copy, spec list | | body-xs | Forma DJR Micro | 12 | 400 | 1.4 | 0 | — | Caption, footer, legal | | nav-link | Forma DJR Text | 14 | 500 | 1.0 | 0 | — | "Shop · Support · Print Solutions" | | sub-nav-link | Forma DJR Text | 13 | 400 | 1.0 | 0 | — | Sub-nav category labels | | button-cta | Forma DJR Text | 15 | 500 | 1.0 | 0 | — | Add to cart, Buy Now | | button-md | Forma DJR Text | 14 | 500 | 1.0 | 0 | — | Compare, Wishlist | | button-sm | Forma DJR Text | 13 | 500 | 1.0 | 0 | — | Inline pills, filters | | badge | Forma DJR Display | 11 | 700 | 1.0 | 0.1em | uppercase | "NEW", "SALE", "ENERGY STAR" | | price | Forma DJR Display | 22 | 700 | 1.0 | -0.005em | tnum | Product price (HP renders large) | | spec-label | Forma DJR Text | 12 | 500 | 1.3 | 0 | — | Spec table label | | spec-value | Forma DJR Text | 16 | 500 | 1.4 | 0 | tnum | Spec value | | code | Consolas | 13 | 400 | 1.5 | 0 | — | Setup steps | ### Principles - **Forma DJR's optical sizing is the brand's typographic signature.** Different cuts for Banner / Display / Text / Micro mean a 96px hero and a 12px caption render with proportional weight rather than mechanically scaled glyphs. - **Sentence-case headlines.** HP rejects the all-caps display common in tech-aggressive brands. Even hero copy reads "Reinvent how you work" not "REINVENT HOW YOU WORK". - **Negative tracking on display.** -0.015em on hero, -0.01em on display-xl, -0.005em on display-lg. The negative tracking compresses Forma's slightly open silhouette. - **Price renders large at 22/700.** HP's customers are price-and-spec shoppers — the price is a primary scanning element, not metadata. Forma DJR Display 700 with `tnum` gives prices precise alignment. - **Forma DJR Text for body.** The Text cut at 16/400 with 1.55 line-height is the canonical body — slightly more open than Helvetica. - **Section heads at 14/700 with 0.05em uppercase tracking** — only marginally tracked. HP doesn't reach for the wide 0.15em tracking that Razer uses; the slim 0.05em tracking signals "label" without shouting. - **Open-source fallback: Inter or Mulish.** Forma DJR is proprietary; Inter at 400/500/700 is the closest free analogue. ## Layout ### Spacing System - Base unit: **8px** with 4px sub-steps - Scale: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128` - Section gap: **80–128px** between major bands - Card internal padding: **20–32px** - Gutters: **20–24px** between product cards ### Grid & Container - Max content width: **1440px** with 80–120px outer gutters at wide viewports - Product grid: 4 columns at 1280–1440px → 3 → 2 → 1 - Promo bar: full-bleed at 40px tall above main nav - Hero band: full-bleed gradient with content centred at 1280px ### Whitespace Philosophy HP runs **structured-mainstream**. Marketing pages breathe at 80–128px between bands; product list pages tighten to 48–64px. The rhythm is conservative — generous enough to feel premium, dense enough to ship the broad product family efficiently. ### Section Cadence Pages alternate **white canvas** (`#ffffff`), **soft-grey bands** (`#f7f7f7`), occasional **cool-grey deep bands** (`#f0f4f8`), and one **gradient brand band** per page (the cyan-to-deep-blue diagonal on flagship hero only). ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Promo bar simplifies to single deal; nav collapses to logo + hamburger; product grid 1-up | | Tablet | 600–960px | Product grid 2-up; sub-nav horizontal scroll | | Desktop | 960–1280px | Default — 3-up grid | | Wide | 1280px+ | 4-up grid with 1440 cap | ### Touch Targets - CTA buttons: 48px height — exceeds AAA - Search bar: 48px - Product card: full tile is the tap target ### Collapsing Strategy - Promo bar: full message → truncated → hidden on mobile - Top nav: utilities collapse first; primary nav hamburgers - Spec strip: 4-cell → 2x2 grid → stacked - Hero: 2-column → stacked - Section padding: 128px → 80px → 48px ### Image Behavior Product photography delivered at multiple aspect crops. `` with `srcset` for WebP/AVIF. Hero photography uses art-direction sources for mobile vs desktop crops. ### Container Queries Used in product card spec strip when stacked in narrow rails — collapses 4-cell to 2x2 grid below 280px container width. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow | Default for most surfaces | | 1 — Ambient | `rgba(0,90,150,0.06) 0 1px 3px` | Default card at rest | | 2 — Soft | `rgba(0,90,150,0.1) 0 8px 24px` | Card on hover | | 3 — Card | `rgba(0,90,150,0.15) 0 12px 32px` | Featured card | | 4 — Modal | `rgba(0,0,0,0.25) 0 24px 48px` | Modal surface | ### Shadow Philosophy HP's shadows are **cool-tinted with a heavier blue weight** than Logitech's — `rgba(0,90,150, *)` vs Logitech's `rgba(0,32,77, *)`. The deeper saturation reads as more corporate-substantial, less consumer-soft. Modals revert to neutral black for stronger emphasis. ## Shapes | Tier | Value | Use | |------|-------|-----| | None | 0px | Promo bar, full-bleed photography | | Micro | 2px | Inset surfaces — rare | | Small | 4px | Tags, badges | | Medium | 6px | Default cards, inputs | | Large | 12px | Featured product card | | XL | 16px | Modal surface, hero card | | Pill | 9999px | All primary CTAs, search bar | The radius vocabulary is **slightly squarer than Logitech**. Cards live at 6px (HP) vs 12px (Logitech) — a more conservative corporate posture. Pills for CTAs. ## Components ### Buttons **`button-primary`** — HP Cyan pill: solid `#0096d6` fill, white label in 15/500 sentence-case (e.g. "Add to Cart"), 12×28px padding, 9999 radius, soft `0 1px 3px rgba(0,90,150,0.1)` ambient shadow. Hover deepens to `#0080b8` + larger shadow. **`button-secondary`** — outline pill: white fill, `#0096d6` blue label and 1px border. Hover fills cool-grey `#f0f4f8`. **`button-tertiary`** — inline link with arrow: `#0096d6` text + "→". **`button-omen`** — Omen gaming red CTA: `#e60000` solid fill, white label, 9999 pill radius. Used only on Omen sub-brand pages. ### Cards **`product-card`** — 320×460 with white floor, 1px `#e0e6ed` border, 6px radius, 20px padding. Stack: 16:9 product hero on white, "NEW" / "SALE" badge top-left, title 18/500 dark sentence-case, sub-title 14/400 muted, **22/700 price** (large), inline 4-cell spec strip on `#f7f7f7` floor (CPU · RAM · Storage · Display), "Add to Cart" pill CTA. **`product-card-featured`** — 32px padding, 12px radius, deeper drop shadow at rest. **`hero-card`** — full-bleed cyan-to-deep-blue gradient (`#0096d6 → #005d83`), 16px radius, 64×48px padding. **`spec-strip`** — inline horizontal block on product cards: `#f7f7f7` floor, 12×16px padding, 4 spec values separated by `#e0e6ed` hairline dividers. Each cell: 12/500 muted label above 16/500 dark value. Example: "Intel i7 · 16GB · 512GB SSD · 14" Touch". ### Promotional Bar **`promo-bar`** — dark `#1c1c1c` band 40px tall above main nav. White text 14/400 with rotating deal copy "Free shipping on orders $25+", "Save up to 40% on select laptops", "Refurbished + free shipping". Click-through anchored right. ### Badges **`badge-new`** — `#0096d6` cyan pill, white "NEW" label. **`badge-sale`** — `#e60000` red pill, white "SALE" or "SAVE $200" label. **`badge-energy-star`** — outline `#1d4f9e` ENERGY STAR partnership blue. **`badge-eco`** — outline `#2d8659` "EPEAT GOLD" / "OCEAN-BOUND PLASTIC" green eco label. ### Inputs / Forms **`text-input`** — white floor, 1px `#e0e6ed` border, 6px radius, 48px height. Focus lights cyan border + 3px `rgba(0,150,214,0.15)` glow. **`search-bar`** — soft-grey pill `#f7f7f7` floor with magnifier icon left, 9999 radius, 48px height. ### Navigation **`primary-nav`** — 56px tall white floor with `#e0e6ed` bottom border. HP-circle logomark in cyan anchored left at 32px. "Shop · Support · Print Solutions · Business · Deals" labels in 14/500 sentence-case. Search trigger, account, cart flush right. **`hp-logomark`** — the iconic cyan circle with "hp" wordmark inside, lowercase, in cyan on white surfaces and white on dark/gradient surfaces. Always 1:1 aspect ratio. ### Modals **`modal-backdrop`** — `rgba(0,0,0,0.5)` translucent. **`modal-surface`** — white fill, 16px radius, `0 24px 48px rgba(0,0,0,0.25)` deep shadow. ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Button colour swap | | Standard | 250ms | Card hover | | Slow | 400ms | Carousel, modal enter | ### Per-Component Recipes - **Card hover**: -2px Y + shadow deepens over 250ms. - **CTA hover**: fill deepens + shadow grows over 150ms. - **CTA active**: scales 0.98 + shadow tightens over 150ms. - **Promo bar rotation**: copy fades through deal messages over 400ms every 5s. - **Modal enter**: scrim fades, dialog scales 0.98 → 1.0 + opacity over 250ms. ### Reduced Motion Card lift suppresses; promo bar copy rotation freezes (shows first message); modal becomes opacity-only. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #1c1c1c text on #ffffff canvas | 16.5 | AAA | | #5d6770 soft on #ffffff | 7.0 | AAA | | #0096d6 link on #ffffff | 4.5 | AA | | #ffffff on #0096d6 CTA | 4.5 | AA | | #ffffff on #1c1c1c promo bar | 16.5 | AAA | | #ffffff on #e60000 Omen CTA | 5.9 | AA | Cyan-on-white sits at 4.5 — borderline AA. HP compensates with 15/500 button labels and 22/700 price emphasis. ### Focus Indicators 3px `rgba(0,150,214,0.15)` outset glow + 1px solid `#0096d6` border on inputs. Buttons get an outset 3px cyan glow ring without changing fill. ### ARIA Patterns - Search: `role="search"`, input `aria-label="Search HP"` - Product card: full `` with `aria-label` containing title, price, key spec - Promo bar: `role="region"` `aria-live="polite"` for rotating copy - Mega-menu: `role="navigation"` with `aria-expanded` - Spec strip: `
` with `
/
` pairs for label/value ### Keyboard Navigation - Tab: promo-bar → logo → primary nav → search → utilities → main → footer - Esc closes modals - Enter activates - Arrow keys cycle product carousels ### Reduced Motion Card lift suppresses; promo-bar rotation freezes. ### Tone Approachable-corporate. HP's voice is **technology for everybody** — confident in the product's mainstream relevance, conversational in delivery, never aggressive or overly aspirational. Examples: "Reinvent how you work." "Designed for productivity." "Get more done with HP." Never: "OUTSMART. OUTPLAY." (Razer's idiom). Never: "Think different." (Apple's idiom). ### Microcopy Patterns - **Button verbs**: "Add to Cart", "Buy Now", "Compare", "Learn More", "Configure", "View Details" — sentence-case, action-imperative - **Error message recipe**: helpful + actionable — "Sorry, this configuration is unavailable. Please choose a different option or contact us." - **Success confirmations**: warm + transactional — "Added to cart. Continue shopping or proceed to checkout." - **Field labels**: short sentence-case — "Email", "Password", "Shipping address" - **Stock urgency**: factual — "Ships in 3–5 business days", "In stock — usually delivered within 1 week" ### Empty States Empty cart: "Your cart is empty. Browse our laptops, printers, or accessories to find what you need." Empty wishlist: "No items saved yet. Tap the heart on any product to save it for later." Empty search: "No matches for [query]. Try a different keyword or browse our shop." ### CTA Verb Conventions - Primary: **"Add to Cart"**, **"Buy Now"**, **"Configure"** (for built-to-order systems), **"Shop Now"** - Save: **"Add to Wishlist"** — universal save verb - Tertiary: **"Compare"**, **"Learn More"**, **"View Specs"**, **"Watch the video"** - Avoided: "Get started" (too SaaS), "Click here" (too low-effort), "Discover" (too vague) **Light-default with Omen dark sub-brand.** HP main consumer site is light-only across canonical product pages. The **Omen** gaming sub-brand pages flip to a dark theme: - Canvas: `#ffffff` → `#000000` - Surface: `#f7f7f7` → `#1c1c1c` - Border: `#e0e6ed` → `#3a3a3a` - Text: `#1c1c1c` → `#ffffff` - Brand: `#0096d6` cyan → `#e60000` Omen red The brand position: light is canonical for everyday HP, dark is contextual to Omen gaming. HP's visual lineage runs through three traditions: **84-year-old American technology corporate trade dress** (HP was founded in 1939; the brand has cycled through multiple identities — the 1960s "blue rectangle" wordmark, the 1980s monochrome "hp", the 2008 Moving Brands cyan circle, the 2016 Pentagram Forma DJR refresh — but has consistently anchored on cyan-blue and a circular logomark since the 1980s); **mainstream consumer-electronics retail** (Best Buy, Staples, big-box procurement — the page is engineered to ship to a mass audience that includes parents, students, IT directors, and small business owners simultaneously); and **modern Pentagram corporate identity work** (the 2016 Forma DJR commission joins a Pentagram lineage that includes Mastercard, Slack, Shake Shack, and Asana — humanist sans systems with optical sizing). The current site solidified around 2018 with the rollout of Forma DJR Display in headlines and the simplified cyan-on-white surface. Subsequent updates have refined the promo-bar treatment and the spec-strip card pattern but have not changed the colour or typographic foundations. What HP rejects: gamer-aggression on consumer pages (Omen sub-brand carries that voice instead), uppercase-tracked everything (only labels), neon accents on consumer products, dense data tables on marketing pages, premium-minimal restraint (HP fills the page with information because customers shop on spec). The brand position: **mainstream technology — informative, friendly, broadly accessible**. **Influences:** - Pentagram (2016 Forma DJR commission and brand system) — the typographic refresh - Moving Brands (2008 brand redesign) — the cyan circle logomark - Apple consumer hardware photography — white seamless with pastel shadow pools - Best Buy / Staples retail — mainstream electronics merchandising layout (price-forward, spec-strip) - Microsoft Surface — competing premium consumer technology brand - Dell — direct competitor in commercial PC market with parallel light-canvas blue-accent system ## Do's and Don'ts **Do** - Anchor the page on `#ffffff` paper-white canvas with `#e0e6ed` cool-grey hairline borders - Use HP Cyan `#0096d6` for the logomark, primary CTAs, links, focus borders, and brand accents - Display the HP-circle logomark anchored top-left in cyan on white surfaces - Use Forma DJR Display 700 with `-0.015em` tracking for hero headlines at 48–64px sentence-case - Render product prices large at 22/700 — HP customers shop on price - Show inline 4-cell spec strips on product cards (CPU · RAM · Storage · Display) - Use cool-tinted shadows `rgba(0,90,150, *)` for elevation - Render primary CTAs as `#0096d6` solid pills (9999 radius) with white labels - Display the dark `#1c1c1c` promotional bar above main nav with rotating deal copy - Use sentence-case section heads — uppercase only on tiny badges - Show ENERGY STAR / EPEAT GOLD outline badges for sustainability certifications - Switch to Omen red `#e60000` and dark `#000000` canvas only on Omen sub-brand pages **Don't** - Don't replace HP Cyan with another brand colour — `#0096d6` is canonical - Don't pluralise the HP-circle — never two logos, always one anchored top-left - Don't use uppercase tracked headlines on marketing pages (sentence-case is canonical) - Don't soften card corners past 12px on featured cards or 6px on default — HP is corporate-rectangular - Don't write tech-aggressive copy — HP's voice is "Reinvent how you work", not "OUTSMART. OUTPLAY." - Don't hide the price — make it large at 22/700 (HP customers price-shop) - Don't skip the spec strip — laptops without inline CPU / RAM / Storage / Display fail HP merchandising - Don't use Omen red on non-Omen pages — sub-brand colour discipline matters - Don't pile shadows on inverted dark bands — dark mode (Omen) relies on tonal borders - Don't use serifs anywhere — Forma DJR sans is canonical - Don't pad sections at 32px on marketing — HP breathes at 80–128px - Don't use neon brights or pastel candy colours — HP is corporate-blue mainstream ### Quick Color Reference ``` Canvas: #ffffff Bg Soft: #f7f7f7 HP Cyan: #0096d6 HP Cyan Hover: #0080b8 HP Cyan Deep: #005d83 Brand Gradient: linear-gradient(135deg, #0096d6 0%, #005d83 100%) Text: #1c1c1c Text Soft: #5d6770 Border: #e0e6ed Promo Bar: #1c1c1c Sale Red: #e60000 Omen Red: #e60000 Energy Star: #1d4f9e Shadow Base: rgba(0,90,150, *) ``` ### Example Component Prompts - "Create an HP Add to Cart button: solid `#0096d6` fill, white label 'Add to Cart' in Forma DJR 15/500 sentence-case, 12×28px padding, 9999 radius (fully pilled), `0 1px 3px rgba(0,90,150,0.1)` ambient shadow. On hover, fill deepens to `#0080b8` and shadow grows." - "Build an HP product card: 320×460 with white floor, 1px `#e0e6ed` cool-grey border, 6px radius, 20px padding. Stack inside: 16:9 product hero on white, 'NEW' or 'SALE' badge top-left if applicable, title in Forma DJR 18/500 dark sentence-case (e.g. 'HP Spectre x360 14'), sub-title 14/400 muted, **22/700 price** (large), inline 4-cell spec strip on `#f7f7f7` floor with hairline dividers showing 'Intel i7 · 16GB · 512GB SSD · 14\" Touch', 'Add to Cart' cyan pill CTA. Hover lifts -2px Y + shadow deepens to `0 8px 24px rgba(0,90,150,0.1)` over 250ms." - "Design an HP hero band: full-bleed cyan-to-deep-blue gradient `linear-gradient(135deg, #0096d6 0%, #005d83 100%)`, 16px radius if contained, 64×48px padding. Headline in Forma DJR Display 700 at 64px / 1.1 line-height / -0.015em tracking, white, sentence-case (e.g. 'Reinvent how you work.'). Below it body-lg 18/400 white. Product photography floats right with subtle shadow." - "Build an HP promo bar: 40px-tall full-bleed `#1c1c1c` near-black band above main nav. White text 14/400 sentence-case rotating between deals: 'Free shipping on orders \$25+ · Save up to 40% on select laptops · Refurbished + free shipping'. Aria-live polite for screen readers. Click-through link anchored right in cyan." - "Create an HP spec strip: inline horizontal block on product cards, `#f7f7f7` soft-grey floor, 12×16px padding, 4 cells separated by `#e0e6ed` 1px hairline dividers. Each cell stacks: 12/500 muted label (Processor · Memory · Storage · Display), 16/500 dark value (Intel i7 · 16GB · 512GB SSD · 14\" Touch). Tabular numerals on values." - "Design an HP top nav: 56px-tall white floor with 1px `#e0e6ed` bottom border. HP-circle logomark in `#0096d6` cyan anchored left at 32px. Nav items 'Shop · Support · Print Solutions · Business · Deals' centred in Forma DJR 14/500 sentence-case `#1c1c1c`. Search trigger, account icon, cart count flush right." ### Iteration Guide 1. **Start with the white.** If your canvas isn't `#ffffff` corporate paper-white with `#e0e6ed` cool-grey hairlines, it isn't HP. 2. **HP Cyan is the only brand colour.** `#0096d6` for logo, every CTA, every link, every focus. Don't introduce a second saturated colour outside the Omen sub-brand red. 3. **Forma DJR is the typographic signature.** Pentagram-commissioned, optical-sized. Inter is the closest free fallback. 4. **Sentence-case headlines.** "Reinvent how you work" not "REINVENT HOW YOU WORK". HP rejects uppercase display. 5. **Render prices large at 22/700.** HP customers shop on price; the price is a primary scanning element. 6. **Inline 4-cell spec strip on every laptop card.** CPU · RAM · Storage · Display in `#f7f7f7` floor with hairline dividers. 7. **Pill CTAs at 9999 radius.** Cyan fill, white label, 15/500 sentence-case. 8. **The dark promo bar is canonical.** 40px `#1c1c1c` above main nav with rotating deal copy.