A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
HP, in one page
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:
- Pure white canvas (
{colors.canvas}) with deep ink ({colors.ink}) running every body surface; light fog bands ({colors.cloud},{colors.fog}) alternate for section rhythm - HP Electric Blue (
{colors.primary}) is the lone CTA fill and link color; it appears at most twice per viewport - Bespoke Forma DJR Micro across every surface — display, body, button, caption — at weights 400 / 500 / 600 / 700
- Cards round at
{rounded.xl}(16px) for product/pricing tiles; buttons sit at{rounded.md}(4px) with capitalize labels - Geometric blue chevrons (
{colors.primary}rectangles cut at 45°) frame hero photography and reinforce the wordmark - Dark-navy slabs (
{colors.ink}) close every page rhythm — testimonial bands, "how can we help?" prelude, and the footer - Section rhythm: utility-strip → top nav → white body → cloud-band → ink slab → cloud-band → ink footer
Do's and don'ts
Do
- Reserve
{colors.primary}for the primary CTA, link color, andchevron-decorationmotif — at most twice per viewport - Set every headline in Forma DJR Micro at weight 500 with line-height 1.0 — resist the urge to bump weight at hero scale
- Use
{rounded.xl}(16px) for cards and photo frames;{rounded.md}(4px) for buttons and inputs — keep the two-tier split sharp - Pair white
{colors.canvas}body bands with{colors.cloud}(#f7f7f7) alternating bands; let the gray do the breathing - Close every page rhythm with a dark-navy
{colors.ink}slab — the "How can we help?" prelude + footer - Set button labels in uppercase with
{typography.button-md}(0.7px tracking) — the only place the system tracks letters - Use Soft Lift shadow exclusively for product cards and pricing tiers — leave section bands flat
- Frame product photography inside
{rounded.xl}containers; never use full-bleed circular masks
Don't
- Don't introduce secondary saturated colors outside
{colors.primary}family + thebloom-coralsale-tag andstormprinter-plan accents - Don't apply heavy material shadows — depth is via color contrast (cloud vs. white) and Soft Lift only
- Don't round buttons above
{rounded.md}(4px); a soft 8px+ button reads as a different brand - Don't run Forma DJR Micro below 12px — small caption at 11px is the floor
- Don't use the chevron decoration as inline noise; it is a hero-only architectural element tied to the wordmark
- Don't drop ink text opacity to create hierarchy — switch surface or shift to
{colors.charcoal}/{colors.graphite}instead - Don't replace the HP wordmark with a generic sans lockup; the wordmark is a custom mark with its own ratio
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the HP design language. Follow the measured tokens below — do not substitute your own palette.
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
Type:
- families: Forma DJR Micro, Inter, Manrope, Roboto
- scale: 12, 12.6, 14, 16, 18, 20, 24, 32, 44
- weights: 400, 500, 600, 700
Shape:
- radius: 0, 2, 3, 4, 8, 16
- elevation: Background `{colors.primary}`, rounded `{rounded.none}`, no shadow
Spacing: 4, 6, 8, 12, 16, 20, 24, 32, 64, 80
Rules:
- Reserve `{colors.primary}` for the primary CTA, link color, and `chevron-decoration` motif — at most twice per viewport
- Set every headline in Forma DJR Micro at weight 500 with line-height 1.0 — resist the urge to bump weight at hero scale
- Use `{rounded.xl}` (16px) for cards and photo frames; `{rounded.md}` (4px) for buttons and inputs — keep the two-tier split sharp
- Pair white `{colors.canvas}` body bands with `{colors.cloud}` (`#f7f7f7`) alternating bands; let the gray do the breathing
- Close every page rhythm with a dark-navy `{colors.ink}` slab — the "How can we help?" prelude + footer
- Set button labels in uppercase with `{typography.button-md}` (0.7px tracking) — the only place the system tracks letters
Avoid:
- Don't introduce secondary saturated colors outside `{colors.primary}` family + the `bloom-coral` sale-tag and `storm` printer-plan accents
- Don't apply heavy material shadows — depth is via color contrast (cloud vs. white) and Soft Lift only
- Don't round buttons above `{rounded.md}` (4px); a soft 8px+ button reads as a different brand
- Don't run Forma DJR Micro below 12px — small caption at 11px is the floor
- Don't use the chevron decoration as inline noise; it is a hero-only architectural element tied to the wordmark
- Don't drop ink text opacity to create hierarchy — switch surface or shift to `{colors.charcoal}` / `{colors.graphite}` instead
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
No Interaction sub-section. Hover colors are silently filtered. Allowed sub-sections: Brand & Accent, Surface, Text, Semantic.
Brand & Accent
- HP Electric Blue (
{colors.primary}—#024ad8): the system's lone signal — primary CTA fill, link color, chevron-decoration fill, active sub-nav indicator. Reserved. - Bright Blue (
{colors.primary-bright}—#296ef9): a slightly lighter variant used inside dark slabs (testimonial-card buttons, dark-band CTA links) where the deeper blue would muddy. - Deep Navy (
{colors.primary-deep}—#0e3191): pressed state for the primary CTA and the visited-link color. - Soft Blue (
{colors.primary-soft}—#c9e0fc): pale-blue surface used inside customer-story cards and selection chips.
Surface
- Canvas (
{colors.canvas}—#ffffff): the universal page background. White, full opacity. - Paper (
{colors.paper}—#ffffff): card surfaces — same white as canvas, with hairline borders or shadows providing the lift. - Cloud (
{colors.cloud}—#f7f7f7): the lightest gray section band, used for alternating-row backgrounds and product-feature card groups. - Fog (
{colors.fog}—#e8e8e8): a slightly darker gray surface band, used for FAQ outer panels and the "Trending laptops" header strip. - Steel (
{colors.steel}—#c2c2c2): hairline border used on outlined elements with stronger emphasis (focus states, active filter). - Bloom Coral / Bloom Rose (
{colors.bloom-coral}/{colors.bloom-rose}—#ff5050,#f9d4d2): the "Get 25% off" sale-tag chip + soft pink lifestyle accent on the sale hero. - Storm Mist / Sea / Deep (
{colors.storm-mist},{colors.storm-sea},{colors.storm-deep}—#8ebdce,#7fadbe,#356373): the teal-storm tones reserved for the printer-plan illustration backdrop and supporting infographic accents.
Text
- Ink (
{colors.ink}—#1a1a1a): the universal text color on white surfaces — headlines, body, button labels, navigation. - Ink Deep (
{colors.ink-deep}—#000000): pure black used for the wordmark and 1px hairline strokes around badge outlines. - Ink Soft (
{colors.ink-soft}—#292929): an alternate near-black used inside dark-navy slabs as a subtle textural shift. - On Ink (
{colors.on-ink}—#ffffff): pure white used for headline and body text on every dark-navy slab. - Charcoal (
{colors.charcoal}—#3d3d3d): muted body color on white surfaces — secondary descriptions, fine-print disclaimers. - Graphite (
{colors.graphite}—#636363): smaller-print color, used for legal lines and timestamp metadata.
Semantic
- Bloom Deep (
{colors.bloom-deep}—#b3262b) + Bloom Wine ({colors.bloom-wine}—#5a1313): error and discount-emphasis colors. The deep brick reads as "sale" or "destructive" depending on placement. - Storm Deep (
{colors.storm-deep}—#356373): used as a neutral status accent (e.g., printer-plan tier "Versatile" tier color).
Type scaleRead the full spec
Font Family
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.
Hierarchy
| 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 |
Principles
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.
Note on Font Substitutes
Forma DJR Micro is proprietary (Commercial Type / Mark Caneso). Closest open-source substitutes:
- Inter at weights 400 / 500 / 600 / 700 — slightly narrower than Forma DJR Micro; bump font-size by ~3% to compensate
- Manrope at weights 400 / 500 / 600 / 700 — closer in proportion, gentler curves; use directly with no metric adjustment
- Roboto at weights 400 / 500 / 700 — flatter character; use as last-resort fallback
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.
Components and layoutRead the full spec
No hover states documented. Every component spec below documents only Default and Active/Pressed states. Variants live as separate front-matter entries.
Buttons
button-primary — the lone HP Electric Blue CTA
- Background
{colors.primary}, text{colors.on-primary}, type{typography.button-md}(uppercase, 0.7px tracking), padding{spacing.sm} {spacing.xl}(12 × 24), height 44px, rounded{rounded.md} - Pressed state
button-primary-pressed— background{colors.primary-deep}, same text - Disabled state
button-primary-disabled— background{colors.steel}, white text - Used for: "Buy now", "Shop now", "Get a printer", primary form submit
button-ink — black filled CTA
- Background
{colors.ink}, text{colors.on-primary}, padding{spacing.sm} {spacing.xl}, height 44px, rounded{rounded.md}, type{typography.button-md} - Used for: "Buy now" on dark photo overlays, secondary primary actions where the blue would clash with imagery
button-outline — blue-text outlined CTA
- Background
{colors.canvas}, text{colors.primary}, 1px{colors.primary}border, padding{spacing.sm} {spacing.xl}, height 44px, rounded{rounded.md} - Used for: "Compare", "Customize", "Learn more" — secondary actions on white surfaces
button-outline-ink — black-text outlined CTA
- Background
{colors.canvas}, text{colors.ink}, 1px{colors.ink}border, padding{spacing.sm} {spacing.xl}, height 44px, rounded{rounded.md} - Used for: "View" buttons inside product family card grids — neutral against the blue primary
button-text-link — inline blue link with underline
- Background
{colors.canvas}, text{colors.primary}, type{typography.link-md}, padding{spacing.xxs} 0 - Used for: "See details", "Read more" inside cards and disclaimer rows
Cards & Containers
card-product — the workhorse product tile
- Background
{colors.canvas}, rounded{rounded.xl}(16px), padding{spacing.xl}(24px), Soft Lift shadow - Layout: hero photo (1:1 ratio) on top, title in
{typography.display-xs}, spec rows in{typography.caption-md}, price in{typography.price-md}, CTA pinned to bottom - Used for: laptop catalog cards, desktop catalog cards
card-product-feature — full-row feature card with photo + copy
- Background
{colors.cloud}, rounded{rounded.xl}, padding{spacing.xxl}(32px) - Layout: photo on the left (50% width), copy on the right with section eyebrow + title + body + CTA pair
- Used for: "Trending laptops" feature rows, "Shop these must haves"
card-pricing-tier + card-pricing-tier-featured
- Background
{colors.canvas}, rounded{rounded.xl}, padding{spacing.xl}, Soft Lift shadow - Tier name in
{typography.display-sm}, monthly price in{typography.display-md}with{typography.caption-md}cadence, page count caption, full feature list, primary CTA - Featured tier carries
{colors.primary}text accent on the price-stamp + a{colors.primary}thin top border instead of a colored card background — never inverted to dark
card-customer-story — the three-up testimonial tile
- Background
{colors.canvas}, rounded{rounded.xl}, padding{spacing.md}(16px), Soft Lift shadow - 16:9 photo at top in
{rounded.xl}frame, quote excerpt in{typography.body-md}, attribution row at the bottom - Used in the "See what our customers say" homepage section
card-article-tile — the four-up "Latest from HP" tile
- Background
{colors.canvas}, rounded{rounded.xl}, padding{spacing.md}, Soft Lift shadow - 16:9 thumbnail at top, date eyebrow in
{typography.caption-sm}, title in{typography.body-emphasis}, "Read more" link
card-category-icon — the small icon-and-label card in the homepage "Our Products" row
- Background
{colors.canvas}, rounded{rounded.lg}(8px), padding{spacing.md} - 48px icon at top, label in
{typography.body-emphasis}below - Used for: Laptops, Desktops, Printers, Computer Tools, Accessories, Enterprise Solutions
hero-promo-card — the homepage hero card with chevron decorations
- Background
{colors.canvas}, rounded{rounded.xl}, padding{spacing.xxl}(32px) - Photography occupies left half; copy block (eyebrow + headline + price stamp + CTA pair) occupies right half
- Flanked by
chevron-decorationblue slashes outside the card's bounding box on left and right edges
promo-strip-dark — the inline dark navy promo block
- Background
{colors.ink}, text{colors.on-ink}, rounded{rounded.xl}, padding{spacing.xxl} 48px - Used for: "When did work start getting in the way of work?" mid-page promo, the SMB testimonial slab
Inputs & Forms
text-input + text-input-focused
- Background
{colors.canvas}, text{colors.ink}, rounded{rounded.md}, padding{spacing.sm} {spacing.md}, height 44px - 1px
{colors.steel}border in default; gains 1px{colors.ink}border on focus (no halo)
text-input-search — pill search in the top nav
Responsive behaviourRead the full spec
Breakpoints
| 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 |
Touch Targets
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.
Collapsing Strategy
- Utility strip: stays visible on every breakpoint; dropdowns collapse into a single "Account" icon below 768px
- Top nav: middle category list collapses into a hamburger drawer below 1024px; the right-side Search + Sign-in + Cart stay visible
- Hero: stays single-column at every breakpoint; chevron decorations shrink to ~60% size on tablet and disappear entirely on mobile
- Product family grid: 4 → 3 → 2 → 1 column as breakpoints shrink; cards keep
{rounded.xl}corners at every size - Pricing comparison table: 4-column grid on desktop collapses to 2x2 on tablet, then stacks into individual accordion-style cards on mobile
- Footer: 5-column link grid → 2-column tablet → single-column accordion on mobile; HP wordmark stays flush left
Image Behavior
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.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-hp {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1a1a1a;
--heading-color: #1a1a1a;
--link-color: #024ad8;
--link-hover-color: #0239a5;
--border-color: #d6d6d6;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(26,26,26,0.06);
--card-hover-shadow: 0 6px 18px rgba(26,26,26,0.12);
--header-bg: #1a1a1a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6a6a6a;
--button-bg: #024ad8;
--button-text-color: #ffffff;
--button-hover-bg: #0239a5;
--button-border: none;
--button-border-radius: 4px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #1a1a1a;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d6d6d6;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1a1a1a;
--base-font: var(--font-inter);
--heading-font: var(--font-roboto);
--card-border-radius: 4px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
volt/design-md/hp/DESIGN.md· 35.2 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.