HP

Overview

HP's design system embodies a 'Corporate-Technical Clarity' aesthetic—a fusion of enterprise professionalism with modern digital accessibility. The brand serves global audiences seeking reliable computing, printing, and business solutions, and the UI reflects this through a clean, high-contrast palette anchored by electric blue (#024ad8) accents against a neutral white canvas. The visual language prioritizes legibility and functional hierarchy, avoiding ornamentation in favor of purposeful spacing and deliberate color contrast. The emotional response is one of trustworthiness and technological competence: users should feel confident that HP products are dependable, well-engineered, and designed with their needs in mind.

HP's voice is direct, informative, and solution-oriented. The brand speaks in clear, action-driven language without corporate jargon—sentences are short, benefit-focused, and grounded in real user outcomes. Vocabulary emphasizes capability ('performance', 'reliability', 'innovation') and accessibility ('simple', 'seamless', 'connected'). Example sentence in HP's voice: 'Step into the future of communication with HP Dimension and Google Beam—collaboration that works.'

Colors

The color system is built on a neutral foundation with a vibrant electric-blue primary accent. Primary (#024ad8) is the signature brand color, deployed on all call-to-action buttons, interactive links, and focus states—it commands attention without overwhelming the interface. Secondary (#0171ad) provides a complementary accent for secondary actions and status indicators. The surface stack ranges from pure white (#ffffff) at the brightest level to soft grays (#d8d8d8 at surface-container-highest) for subtle depth and layering. On-surface text is near-black (#1a1a1a) for maximum legibility on light backgrounds, with a variant gray (#3d3d3d) for secondary information. The electric-blue family extends into fixed variants (primary-fixed: #c9e0fc, primary-fixed-dim: #b2d2ff) for contained, lower

Typography

The type system uses Forma DJR Micro as the primary typeface, a geometric sans-serif that conveys precision and modernity while maintaining excellent screen legibility at all sizes. The hierarchy spans eight levels: display (56px, 700 weight) for hero headlines, headline-lg (40px, 600) for major section titles, headline-md (28px, 600) for subsections, title-lg (20px, 600) for card headers, body-lg (18px, 400) for long-form content, body-md (16px, 400) for standard body text, label-md (14px, 600) for button labels and form fields, and label-sm (12px, 500) for metadata and captions. Letter-spacing is minimal (-0.02em on display, 0em on body) to maintain tight, professional spacing. Line-height is generous (1.5x to 1.75x) to ensure readability on screens and accessibility for users with dysle

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing for flexible responsive behavior across mobile (1 column), tablet (6 columns), and desktop (12 columns) viewports. The gutter spacing is consistently 24px (md spacing token), creating rhythm between grid items. Section separation uses lg spacing (40px) vertically to create breathing room between major content blocks; card-to-card spacing within a section uses md spacing (24px). The header is fixed at the top with a white background (surface color) and 0px border-radius, spanning the full viewport width. Hero sections occupy 100% viewport height or a minimum of 600px, with a 40px horizontal padding (lg spacing) on mobile and 64px (xl spacing) on desktop. Cards and containers use md spacing (24px) for

Elevation & Depth

Depth is conveyed through a three-tier shadow system that creates clear visual hierarchy without relying on color gradients or transparency. Level 1 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and standard containers. This shadow is subtle enough to read as 'on the same plane' but distinct enough to separate from the background. Level 2 (Elevated Containers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for modals, dropdowns, and floating panels. The larger blur radius (24px) and vertical offset (8px) create a sense of floating above the pag

Shapes

The shape philosophy is 'Precise-Technical'—border-radius values are small and intentional, reflecting HP's engineering heritage and commitment to clarity. Buttons use md border-radius (8px), creating a slightly rounded rectangle that feels modern without being playful. Input fields and form controls use DEFAULT border-radius (4px), maintaining a compact, utilitarian appearance. Cards and containers use md border-radius (8px) to match buttons and create visual consistency. Badges and pills use full border-radius (9999px) for a distinct, contained appearance. The header and hero sections use 0p

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (solid electric-blue background, white text, 8px border-radius, 40px height, 6px 12px padding), secondary (transparent background, blue text, 1px outline, 8px border-radius), and ghost (no background or border, blue text, used for tertiary actions). All buttons use label-md typography (14px, 600 weight). On hover, primary buttons transition to primary-container (#3860be) with an md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) applied over 150ms. Secondary buttons gain a surface-container-high background on hover. Focus states apply a 2px solid outline in primary with 2px outlineOffset. All buttons have a cursor: pointer and are keyboard-accessible via tab navigation.

Containers & Surfaces Car

Do's and Don'ts

**Do**

• Do use primary (#024ad8) exclusively for call-to-action buttons, links, and focus states—it is the brand's signature accent and should never be diluted or overused.
• Do maintain consistent spacing using the semantic tokens (sm: 12px, md: 24px, lg: 40px) to create predictable rhythm and reduce cognitive load.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and elevated containers to establish clear visual hierarchy.
• Do use Forma DJR Micro at 600 weight for all interactive text (buttons, links, labels) to signal clickability and improve scannability.
• Do test all interactive elements with keyboard navigation (Tab, Enter, Escape) to ensure accessibility for users who cannot use a mouse.

**Don't**

• Don't use secondary (#0171ad) or tertiary (#231f20) as primary action colors—they are supporting accents and will confuse users about what is clickable.
• Don't apply border-radius greater than md (8px) to buttons or input fields; the technical aesthetic requires precision, not softness.
• Don't use color alone to convey meaning (e.g., a red input field without an error message); always pair color changes with text or icons.
• Don't nest more than two levels of cards or containers; excessive layering creates visual confusion and breaks the clarity principle.
• Don't use shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.12)) on standard components; reserve the largest shadows for modals and critical overlays only.