prismdinstrument

EXTRACTED · 10 SECTIONS · 30 COLORS · GRADE B

hp.com

Accent #5e6ad2 · Roboto — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

shadows

keyframes

DESIGN.md tokens.json

real render · source of truth

hp.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(2, 74, 216) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside forma-djr-micro as the primary typeface. A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 5 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

30 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 17.58:1

Ink

#191919

AAA 17.58:1

Accent

#024ad8

AAA 7.06:1

Line

#3d3d3d

AAA 10.86:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

30 colors mined from the live renderexpand

Type — the ladder, in the real face

5 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl70px · 400

display lg

display-lg50px · 400 · ×1.40

display md

display-md28px · 400 · ×1.79

body

body16px · 400 · ×1.75

button

button30px · 400 · ×0.53

Depth — elevation is extracted, not invented

3 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

Motion — easings, transitions & live keyframes

1 easing curve · 5 keyframes · hover a tile to preview

Easing & transitions

transition-2ease-in-out

5 keyframe animations extracted

load8

appear

grow-search

vanish

onetrust-fade-in

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 2px

sm · 8px

md · 13px

base · 16px

lg · 24px

xl · 32px

2xl · 50px

3xl · 65px

Radius

none
0px

xs
7px

sm
8px

md
16px

lg
20px

xl
1000px

full
1000px

Components — the closed vocabulary

10 component families · 47 variants counted on the live DOM

Component	Variants found
buttons	×10
cta Banner	×10
heading H3	×9
heading H2	×7
nav Links	×3
links	×3
cards	×2
inputs	×1
search Bar	×1
badges	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent
Text: #3d3d3d {colors.hairline}
Padding: 1px 6px
Radius: 0px
Font: 30px weight 400
Use: Subtle action, toolbar, nav button

Outline

Background: transparent
Text: #000000
Padding: 0px 32px
Radius: 0px
Border: 1px solid rgb(0, 0, 0)
Font: 16px weight 500
Use: Secondary action with border

Primary Brand

Background: #024ad8 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 0px 32px
Radius: 0px
Border: 1px solid rgba(0, 0, 0, 0)
Font: 16px weight 500
Use: Primary CTA / brand action

Outline

Background: transparent
Text: #024ad8 {colors.primary}
Padding: 0px 32px
Radius: 0px
Border: 1px solid rgb(2, 74, 216)
Font: 16px weight 500
Use: Secondary action with border

Icon Button

Background: #000000
Text: #000000
Padding: 0px
Radius: 20px
Border: 2px solid rgba(0, 0, 0, 0)
Font: 16px weight 400
Use: Toolbar/UI icons

Inputs & Forms

Text Input

Background: transparent
Text: #000000
Padding: 1px 2px
Radius: 0px
Border: 0px none rgb(0, 0, 0)
Font: 14px weight 400
Use: Text fields, search inputs

Search Bar

Search Pill

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

gap16px

container Padding24px

Responsive — real breakpoints

23 media-query stops read from the live CSS

400px

425px

426px

510px

550px

600px

640px

661px

719px

720px

767px

768px

896px

1023px

1024px

1080px

1279px

1280px

1296px

1366px

1919px

1920px

1937px

Do's & Don'ts

18 enforceable rules pulled verbatim from the spec

Use Near-Black (`#191919`) for text — not pure black, it's warmer and more readable

Use Helvetica Neue as the primary typeface — it defines the brand personality

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use #024ad8 (`#024ad8`) as the primary accent — it's the brand's signature interactive color

Maintain nav height at 48px — consistent vertical space for the navigation bar

Respect the 2px–32px spacing range — the design uses a wide scale for visual breathing room

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Each card includes a none image — imagery is part of the card identity, not optional

Don't

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't invent new shadow values — use only the extracted shadow levels

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Don't put a CTA button in the nav — this design uses links only at the top

Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the hp.com design system. Canvas #ffffff · ink #191919 · accent #024ad8. Type: Roboto — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add hp

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press