Welcome to the HP.com Design System

An overview of HP.com's visual identity and its basic rules and principles, as well as breakdown of the components that serve as the building blocks of our experiences.

We are still undeniably HP, but in a new and refreshing way.

Our design system is built using the foundation of HP's new and fresh visual identity (VisID) and we use it in a way that delivers consistency, distinctiveness, and quality for the HP brand. It's simple in its approach, using a combination of photography, typography, lines, and color to create endlessly configurable user interface components. 

Our pages should follow the hiearchy of the brand.

Vision, Mission, and Belief

It's the tip of the pyramid. The focus of the brand and the driving force for all the work.

Philosophy and Tone

This is the glue of brand. It holds together the levels above and below. It's how we show up and manifest the Vision, Mission, and Belief and how we express the design principles.

Design Principles

They're the base for everything we do and the groundwork supporting everything. They're how we visually execute the two levels above and the container messaging, style, and aesthetics.

Dave and Bill, those two engineers who wanted to make a difference to the world, were radically thoughtful. They were thoughtful and considerate, but their output and ideas were always unexpected and trailblazing. 

The thought they put into their work produced unexpected, trailblazing ideas. This is how we want to present HP.com. Our designs should inspire action, be fused with inspiration and excitement, and encourage new types of thinking.

Design approach

Make it work first

Before making it cool, just make it work. Does it read well? Does it make sense? Is it clear? Does it have nice proportions? Is it spaced well?

People, product, or idea

Make it about the people. Make it about the product. Make it about a big Idea. Don’t over-complicate it.

No gimmicks

No need for tricks or gimmicks or extra decoration. No cheesy filters, elaborate composites, or special effects. Embrace simplicity.

Confidence

Be OK with the lack of flashy stuff. Don’t try to overcompensate. Just lay things out nicely. Showcase the people and products confidently.

Hiearchy

Everything should flow from the top down or left to right in a very logical and pragmatic way. Using the grid and the VisID stacking structure, there is no guessing which piece of content comes next.

Stay pragmatic

Think like an engineer. These layouts and system in general are about functionality.

Be consistent

Show up and perform the same way over time. Work to create cohesion and family building.

Repeatability

Just keep doing it. Frequency and saturation are key to creating consistency. The more things repeat, the more the visual style and system will become an identifiable and memorable feature of the brand.

Don't over-design it!

Everything above adds up to “Don’t Over-design It!” The Vis ID is about the collective work, and not any one individual thing being a superstar. If every product tries to fight for importance the Vis ID will revert back to things trying to stand out and becoming mismatched. Be OK with things family-ing together.

Okay. Let's get started!

Typography

We have one typeface for the HP visual identity. Forma DJR Regular. The font is a culmination of an entire era of typography: an era when formal purity was the ultimate design achievement.

Color

We've created a color family that is diverse, varied, and nuanced but feels familiar and synergistic. When seen as a whole, the color family speaks to a larger idea with a conceptual backstory that points to the brand itself.

Photography

Our photography is broken into two categories: Documentary/editorial style people photography that is journalistic in nature, and a no-nonsense but artistic approach to product photography.

UI Elements

Our entire platform is built with a series of global, modular, and experiential elements. They are carefully crafted, reusable modules that can be placed anywhere on a page. 

Resources

A repository of guidelines, resources, and component templates to help designers gain in-depth knowledge of our complete design system.