HP.com Design System HP.com Design System

Light hallway

Welcome to the HP.com design system

The HP.com Design System enables us to build consistent user experiences across platforms and devices. A collection of global elements, modular components and experiential components make up our library, and can be configured in a multitude of ways to create clean, beautiful and consistent looking pages across HP.com

Global elements

Global elements are the foundation of all of our layouts, components, and templates.

Color palette

The color palette is where first impressions of customers are based. Colors are more than just a visual aids, they convey emotions, feelings and experiences. They can make a page feel inviting, warm, technical or energetic. 

Typography

HP has it's own proprietary font, HP Simplified. It's our go-to font on the digital platform and we use it almost exclusively, with exceptions made only for certain product brands.

Responsive grid

Standard layout systems are in place to encourage consistency across platforms and screen sizes. Content is aligned to a grid to provide proper alignment in all our components and pages.

Header & footer

The global header and footer are required components on every page of the hp.com domain. It helps customers understand how our website is organized and allows them to find products and services easily.

Breadcrumbs

Breadcrumbs give users a sense of location within the overall website and allows them to easily navigate forward and back.

Modular components

Modular components are building blocks that enable the construction of flexible layouts. 

Buttons and links

Each button and link style conveys a level of emphasis and informs the user which call to action is the most important. 
content container

Content containers

Container allow us to layer visual aids in the background of either an entire section or smaller section within a layout.
layout containers

Layout containers

Modular components that allow us to arrange other modular components within a responsive grid layout. 

Experiential components

Experiential components are carefully crafted reusable modules that can be placed within a page. 

Secondary navigation

Secondary navigation components appear consistently on all pages within a section of the website. They facilitate rapid learning and intuitive exploration of a product, solution, or topic.

Anchor navigation

Helps users navigate up and down through different sections within a webpage.

Basic sticky

Presents one or two, always visible CTAs within a page.

Basic tabs

Enables the user to toggle between content placed in the section below. 

Basic banner

Use this basic module to introduce the topic of the page or to add supporting imagery to another section of a page. 

Content accordian

A module that holds either a numbered or bulleted list of items, each one with its own description and visual aid.

Countdown timer

Presents a visual cue to a product or service launch.

Faceted search

A sorting tool to help customers narrow down a large list of resources, products or services.

Feature focus

A module that allows a user to view a specific feature or part of a product in digestible increments. 

Hero product switcher

The  hero product switcher is used to provide a quick, interactive toggle of multiple models and form factors.

Highlighted CTA

Use the highlighted CTA to call attention to a service, resource, solution or contact information.

KSP carousel

A module used to demonstrate up to four key selling points of a product, family of products, service or solution with a carousel.

Large card slider

This carousel displays a stepped sequence showcasing a highlighted features of a product, solution, or service.

Performance comparison

This module is used to compare 2-3 sets of product specifications across multiple models. 

Port viewer

Used to highlight the various ports on a product or family of products.

Product module

A container that holds a group of product or service tiles in a carousel or grid for easy visual and feature comparison. 

Use case drawer

Features 2-3 personas or use case examples showcasing why a product or service is right for a target customer. 

Vertical content switcher

Presents a single key point with multiple supporting points as an interactive set of hide/show captions and visual aids. 

Audio player

Embeds audio from an external source so that the user doesn’t have to leave HP.com.

Data table

Houses multiple table formats for detailed yet scannable information.

Templates

A template is a page created with a purpose. We've curated several templates to be used across personal systems and print categories. For Zeplin access contact the UX Design Manager.

Family page

Comprised of a group of modules that highlight the features and technical specifications of a family of products.

Reference

Download

Gateway page

Easily leads consumers through groups of product lines and/or form factors, serving up recommended and featured products.

Reference

Download

Model detail page

Product specific page that deep-dives into a product's technical and design features. Also used to cross-sell across multiple categories. 

Reference

Download

Campaign page

A unique page that is heavily driven by campaign imagery and creative.

Reference

Download

Themes

Product families that have themes outside of the set HP brand visual guidelines.

Reference

Download

Resources

Guidelines to help you create beautiful and consistent experiences on HP.com

Learn

QUICK START GUIDE

HP.com Content Guidelines

Quick Look HP Content Guidelines
Updated 11 March 2020

Google Slide

View Presentation

COMPONENT CATALOG        

HP.com Design System

HP.com Design System
Updated 7 May 2020

Google Slide

View Presentation