惠普 HP

version: alpha name: HP-design-analysis description: An inspired interpretation of HP's design language — a white-paper enterprise-consumer system anchored by HP Electric Blue (#024ad8) as the lone signal CTA, near-black ink (#1a1a1a) for headlines, geometric Forma-DJR sans throughout, and angular blue-chevron decorations that nod to the HP wordmark's slashes. Cards round at 8–16px, photos sit in soft 16px frames, and dark navy slabs anchor the customer-story and "how can we help" closing bands.

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" paper: "#ffffff" cloud: "#f7f7f7" fog: "#e8e8e8" steel: "#c2c2c2" graphite: "#636363" charcoal: "#3d3d3d" hairline: "#e8e8e8" hairline-strong: "#c2c2c2" link: "#024ad8" link-pressed: "#0e3191" bloom-coral: "#ff5050" bloom-rose: "#f9d4d2" bloom-deep: "#b3262b" bloom-wine: "#5a1313" storm-mist: "#8ebdce" storm-sea: "#7fadbe" storm-deep: "#356373" error: "#b3262b"

typography: display-xxl: fontFamily: Forma DJR Micro fontSize: 72px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 display-xl: fontFamily: Forma DJR Micro fontSize: 56px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 display-lg: fontFamily: Forma DJR Micro fontSize: 44px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 display-md: fontFamily: Forma DJR Micro fontSize: 32px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 display-sm: fontFamily: Forma DJR Micro fontSize: 24px fontWeight: 500 lineHeight: 1.17 letterSpacing: 0 display-xs: fontFamily: Forma DJR Micro fontSize: 20px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 body-lg: fontFamily: Forma DJR Micro fontSize: 18px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 body-md: fontFamily: Forma DJR Micro fontSize: 16px fontWeight: 400 lineHeight: 1.38 letterSpacing: 0 body-emphasis: fontFamily: Forma DJR Micro fontSize: 16px fontWeight: 500 lineHeight: 1.38 letterSpacing: 0 caption-md: fontFamily: Forma DJR Micro fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption-sm: fontFamily: Forma DJR Micro fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 caption-bold: fontFamily: Forma DJR Micro fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0 link-md: fontFamily: Forma DJR Micro fontSize: 16px fontWeight: 500 lineHeight: 1.38 letterSpacing: 0 button-md: fontFamily: Forma DJR Micro fontSize: 14px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.7px textTransform: uppercase button-sm: fontFamily: Forma DJR Micro fontSize: 12.6px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.126px price-md: fontFamily: Forma DJR Micro fontSize: 24px fontWeight: 500 lineHeight: 1.17 letterSpacing: 0

rounded: none: 0px xs: 2px sm: 3px md: 4px lg: 8px xl: 16px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 20px xl: 24px xxl: 32px section: 80px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 24px height: 44px button-primary-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" button-primary-disabled: backgroundColor: "{colors.steel}" textColor: "{colors.on-primary}" button-ink: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 24px height: 44px button-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 24px height: 44px button-outline-ink: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 12px 24px height: 44px button-text-link: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.link-md}" padding: 4px 0 badge-pill-ink: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 6px 12px badge-pill-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 6px 12px badge-sale-coral: backgroundColor: "{colors.bloom-coral}" textColor: "{colors.on-primary}" typography: "{typography.caption-bold}" rounded: "{rounded.sm}" padding: 4px 8px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" text-input-search: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 40px card-product: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px card-product-feature: backgroundColor: "{colors.cloud}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 32px card-pricing-tier: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px card-pricing-tier-featured: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px card-customer-story: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 16px card-article-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 16px card-category-icon: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-emphasis}" rounded: "{rounded.lg}" padding: 16px promo-strip-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 48px hero-promo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 32px utility-strip: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.caption-md}" height: 36px padding: 0 24px nav-bar-top: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" height: 64px padding: 0 32px nav-link: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: 8px 16px category-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-emphasis}" rounded: "{rounded.pill}" padding: 8px 20px category-tab-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" faq-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-emphasis}" rounded: "{rounded.lg}" padding: 20px 24px chevron-decoration: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.none}" help-band-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" padding: 64px 32px footer-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" padding: 64px 32px

概览

HP 读起来像一份长存的消费电子产品目录与一份企业软件产品页的结合。整个系统坐落在纯白（{colors.canvas} — #ffffff）之上，用细灰色面板（{colors.cloud} / {colors.fog}）做交替的段落带。这里有一种彩色动作色——HP 电光蓝（{colors.primary} — #024ad8）——以及一种墨色（{colors.ink} — #1a1a1a）；两者承担了 90% 的工作。字体是覆盖所有表面的单一字族：Forma DJR Micro，HP 定制的几何 grotesque，展示型字重 500，正文字重 400——干净、中性、略带机械感。

标志性的手法是棱角分明的蓝色人字纹——源自 HP 字标的两道平行斜线、被切到 0 圆角的利落斜切——它锚定着首页英雄区、笔记本页英雄区和打印机价格页。它们出现在主横幅卡片的左右边缘，叠在产品摄影之后。除了这些装饰性斜线之外，所有其他表面都是直线式的，卡片采用柔和的 8–16px 圆角，按钮则是 4px 圆角。

系统分为三种语调模式：用于产品浏览的白色商业体（卡片、类别图标、价格档位）；用于证言带、收尾的"How can we help?"页脚前奏以及页脚的深海军板块（{colors.ink} 接近黑）；以及用于对比条、FAQ 手风琴等实用性段落的浅雾带（{colors.cloud} / {colors.fog}）。蓝色点缀仅出现在实心 CTA、链接文字、人字纹装饰以及推荐档位上的活跃价签——绝不作为段落背景。

关键特征：

• 纯白画布（{colors.canvas}），所有正文表面用深墨色（{colors.ink}），浅雾带（{colors.cloud}、{colors.fog}）做段落节奏的交替
• HP 电光蓝（{colors.primary}）是唯一的 CTA 实心与链接色；每个视口至多出现两次
• 定制的 Forma DJR Micro 覆盖所有表面——展示、正文、按钮、说明——字重 400 / 500 / 600 / 700
• 卡片圆角 {rounded.xl}（16px）用于产品/价格瓦片；按钮位于 {rounded.md}（4px），标签为大写
• 几何蓝色人字纹（{colors.primary} 矩形以 45° 斜切）框住英雄摄影，强化字标
• 深海军板块（{colors.ink}）收束每一页节奏——证言带、"how can we help?" 前奏以及页脚
• 段落节奏：工具栏 → 顶导 → 白色正文 → 云带 → 墨色板块 → 云带 → 墨色页脚

配色

无 Interaction 子节。悬浮颜色被静默过滤。允许的子节：品牌与点缀、表面、文字、语义。

品牌与点缀

• HP 电光蓝（{colors.primary} — #024ad8）：系统中唯一的信号——主 CTA 实心、链接色、人字纹装饰实心、激活的子导航指示。保留使用。
• 亮蓝（{colors.primary-bright} — #296ef9）：略浅的变体，用于深色板块内（证言卡按钮、深带 CTA 链接），此处较深的蓝会变浊。
• 深海军（{colors.primary-deep} — #0e3191）：主 CTA 的按下状态与已访问链接色。
• 柔蓝（{colors.primary-soft} — #c9e0fc）：浅蓝表面，用于客户故事卡内与选中芯片。

表面

• 画布（{colors.canvas} — #ffffff）：通用页面背景。白色、全不透明。
• 纸面（{colors.paper} — #ffffff）：卡片表面——与画布同白，通过细线边框或阴影制造抬升。
• 云（{colors.cloud} — #f7f7f7）：最浅的灰色段落带，用于交替行背景与产品特性卡组。
• 雾（{colors.fog} — #e8e8e8）：略深的灰色表面带，用于 FAQ 外层与"Trending laptops"顶部条带。
• 钢灰（{colors.steel} — #c2c2c2）：用于带更强强调的描边元素（聚焦状态、激活筛选）的细线边框。
• Bloom 珊瑚 / Bloom 玫瑰（{colors.bloom-coral} / {colors.bloom-rose} — #ff5050、#f9d4d2）："Get 25% off" 促销标签芯片 + 促销英雄区的柔和粉色生活点缀。
• Storm 雾 / 海 / 深（{colors.storm-mist}、{colors.storm-sea}、{colors.storm-deep} — #8ebdce、#7fadbe、#356373）：留给打印机计划插画背景与配套信息图点缀的蓝绿风暴色。

文字

• 墨色（{colors.ink} — #1a1a1a）：白色表面的通用文字色——标题、正文、按钮标签、导航。
• 深墨（{colors.ink-deep} — #000000）：用于字标以及徽标外缘 1px 细线描边的纯黑。
• 柔墨（{colors.ink-soft} — #292929）：深海军板块内使用的另一种接近黑，作为微妙质感切换。
• 墨上色（{colors.on-ink} — #ffffff）：每个深海军板块上标题与正文使用的纯白。
• 炭灰（{colors.charcoal} — #3d3d3d）：白色表面上的弱化正文色——次级描述、细则免责。
• 石墨（{colors.graphite} — #636363）：更小的字号颜色，用于法律行和时间戳元数据。

语义

• Bloom 深（{colors.bloom-deep} — #b3262b）+ Bloom 酒红（{colors.bloom-wine} — #5a1313）：错误与折扣强调色。这种深砖红色根据位置可读作"促销"或"破坏性"。
• Storm 深（{colors.storm-deep} — #356373）：用作中性状态点缀（例如打印机计划档位"Versatile"档位色）。

字体排版

字体族

声音是单一字族：Forma DJR Micro（HP 定制几何 grotesque，回退 Arial），覆盖所有表面——展示、正文、按钮、说明。Forma DJR Micro 是一种宽幅、略圆润的 grotesque，在小光学尺寸上设计，以确保 UI 框架尺度下仍清晰可读。HP 以 400 字重用于正文，500 字重用于展示标题，600/700 字重用于强调与按钮标签。

16/14/12 px 的说明级承载目录的元信息——型号、规格行、细则——以 400 字重、行高 1.4–1.5 呈现。按钮标签提升到 600/700 字重，正向 0.5–1.1px 字距并大写——这是系统中唯一加字距的地方。

层级

原则

值得标记的字体决策：HP 在所有展示尺寸下都用 500 字重，包括最大的 72px 英雄标题。大多数编辑系统在英雄尺度会跳到 600/700；HP 不会。结果是开放、平易近人，而非强令——适合一个在同一目录中横跨消费、中小企业和企业受众的品牌。

Forma DJR Micro 的圆润 grotesque 形体感负责大部分温度。系统中没有斜体，仅在法律免责中出现；强调通过字重（500 → body-emphasis，700 → caption-bold）承担。

字体替代说明

Forma DJR Micro 是专有字体（Commercial Type / Mark Caneso）。最接近的开源替代：

• Inter 字重 400 / 500 / 600 / 700——比 Forma DJR Micro 略窄；字号上调约 3% 以补偿
• Manrope 字重 400 / 500 / 600 / 700——比例更接近，曲线更柔和；直接使用无需度量调整
• Roboto 字重 400 / 500 / 700——字符更扁平；作为最后备选

替换时，把正文字高显式设为 1.4、展示字高设为 1.0——Forma DJR Micro 的行高数字偏紧，而多数替代默认较松。

布局

间距体系

• 基础单位：8px。较小半步为 4px。刻度温和——多数卡片内边距落在 16px 或 24px；段落间距 80px。
• Token（前言中）：{spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.section} 80px
• 段落内边距：桌面主要段带垂直 {spacing.section}（80px）；移动端收缩到 ~48px。
• 卡片内边距：产品卡 {spacing.xl}（24px）；促销条与特性卡 {spacing.xxl}（32px）；紧凑文章瓦片 {spacing.md}（16px）。
• 列间距：桌面列间距 {spacing.xl}（24px）；平板/移动端 {spacing.md}（16px）。

80px 段落间距是通用节奏常量——出现在首页每个主要区带之间、打印机计划页英雄区与对比表之间、笔记本商城页特性行之间。

网格与容器

• 桌面最大宽度：1366px 内容容器，段落背景可在画布上铺满。
• 英雄区：单条全宽图片卡片（首页与笔记本中心英雄区），标题叠加位于左上或右上。
• 产品系列网格：>1200px 时 4 列，1024–1199px 时 3 列，768–1023px 时 2 列，768px 以下 1 列。
• 价格档位：>1024px 时 4 列，768–1023px 时 2×2 网格，768px 以下单列手风琴。
• 页脚：>1024px 时 5 列链接网格，移动端折叠为 2 列再到手风琴。

留白哲学

留白是商业干净——英雄摄影周围慷慨，目录规格行周围紧凑。产品卡在图片上下都留出呼吸空间（≥32px），让笔记本或打印机读起来是英雄镜头而非缩略图。细则免责区域（法律、脚注行）把行高压到 1.3，字号压到 11–12px，让大部分细则保持紧凑。

层次与深度

系统大体平面——深度靠色彩对比（云带 vs 同带上的白卡）而非阴影层次传达。柔抬升是目录的主力——每个产品瓦片和价格列都使用它；其他则不使用。模态悬浮很少，仅用于临时覆盖层。

装饰性深度

系统最具特色的深度手势是 HP 蓝色人字纹对——两道棱角分明的 {colors.primary} 斜切（无圆角、无阴影），位于首页英雄卡片和笔记本商城英雄的左右两侧。它们不是装饰噪音；它们是 HP 字标两道平行斜切在建筑尺度上的字面回响。把它们视为品牌图腾，而非通用几何装饰。

首页和笔记本商城页的摄影把产品图框在 {rounded.xl}（16px）容器中，配以柔和的 1px 细线。证言、"HP 如何为你工作"等生活摄影在深海军板块中全幅展示，无需圆角。

形状

圆角体系

系统维持清晰的两档哲学：按钮保持锐利（4px，近似直线），而卡片与相框保持柔和（16px）。这种分裂是视觉签名——锐利的交互元素映衬更柔和的容器表面。

摄影几何

英雄摄影位于 {rounded.xl}（16px）框中，无边框。笔记本网格中的产品系列缩略图为 1:1（正方形），位于 {colors.canvas} 背景上，内边距让笔记本占据约 70% 的画幅。客户故事摄影在同一个 {rounded.xl} 框内使用 16:9。没有铺满的圆形头像；证言头像为 4px 圆角的方形。

组件

未文档化悬浮状态。下面每个组件规格仅文档化默认与激活/按下状态。变体作为独立的前言条目存在。

按钮

button-primary —— 唯一的 HP 电光蓝 CTA

• 背景 {colors.primary}，文字 {colors.on-primary}，字体 {typography.button-md}（大写、0.7px 字距），内边距 {spacing.sm} {spacing.xl}（12 × 24），高度 44px，圆角 {rounded.md}
• 按下状态 button-primary-pressed —— 背景 {colors.primary-deep}，文字相同
• 禁用状态 button-primary-disabled —— 背景 {colors.steel}，白色文字
• 用于："Buy now"、"Shop now"、"Get a printer"、主表单提交

button-ink —— 黑色实心 CTA

• 背景 {colors.ink}，文字 {colors.on-primary}，内边距 {spacing.sm} {spacing.xl}，高度 44px，圆角 {rounded.md}，字体 {typography.button-md}
• 用于：深色图片覆盖上的"Buy now"、蓝色会与图像冲突时的次级主操作

button-outline —— 蓝字描边 CTA

• 背景 {colors.canvas}，文字 {colors.primary}，1px {colors.primary} 边框，内边距 {spacing.sm} {spacing.xl}，高度 44px，圆角 {rounded.md}
• 用于："Compare"、"Customize"、"Learn more"——白色表面的次级操作

button-outline-ink —— 黑字描边 CTA

• 背景 {colors.canvas}，文字 {colors.ink}，1px {colors.ink} 边框，内边距 {spacing.sm} {spacing.xl}，高度 44px，圆角 {rounded.md}
• 用于：产品系列卡网格内的"View"按钮——对蓝色主色保持中性

button-text-link —— 带下划线的行内蓝色链接

• 背景 {colors.canvas}，文字 {colors.primary}，字体 {typography.link-md}，内边距 {spacing.xxs} 0
• 用于：卡内与免责行内的"See details"、"Read more"

卡片与容器

card-product —— 主力产品瓦片

• 背景 {colors.canvas}，圆角 {rounded.xl}（16px），内边距 {spacing.xl}（24px），柔抬升阴影
• 布局：顶部为英雄图（1:1 比例），标题用 {typography.display-xs}，规格行用 {typography.caption-md}，价格用 {typography.price-md}，CTA 钉在底部
• 用于：笔记本目录卡、台式机目录卡

card-product-feature —— 带图片+副本的全宽特性卡

• 背景 {colors.cloud}，圆角 {rounded.xl}，内边距 {spacing.xxl}（32px）
• 布局：左侧图片（50% 宽），右侧副本（段引标 + 标题 + 正文 + CTA 组合）
• 用于："Trending laptops" 特性行、"Shop these must haves"

card-pricing-tier + card-pricing-tier-featured

• 背景 {colors.canvas}，圆角 {rounded.xl}，内边距 {spacing.xl}，柔抬升阴影
• 档位名用 {typography.display-sm}，月费用用 {typography.display-md} 配 {typography.caption-md} 节奏，页数说明，完整特性列表，主 CTA
• 推荐档位在价签上用 {colors.primary} 文字点缀 + {colors.primary} 细顶边，而非彩色卡片背景——永不反转为深色

card-customer-story —— 三列证言瓦片

• 背景 {colors.canvas}，圆角 {rounded.xl}，内边距 {spacing.md}（16px），柔抬升阴影
• 顶部 16:9 图片位于 {rounded.xl} 框中，引用摘要用 {typography.body-md}，署名行位于底部
• 用于首页"See what our customers say"段落

card-article-tile —— 四列"Latest from HP"瓦片

• 背景 {colors.canvas}，圆角 {rounded.xl}，内边距 {spacing.md}，柔抬升阴影
• 顶部 16:9 缩略图，日期引标用 {typography.caption-sm}，标题用 {typography.body-emphasis}，"Read more" 链接

card-category-icon —— 首页"Our Products"行的小图标加标签卡

• 背景 {colors.canvas}，圆角 {rounded.lg}（8px），内边距 {spacing.md}
• 顶部 48px 图标，下方标签用 {typography.body-emphasis}
• 用于：Laptops、Desktops、Printers、Computer Tools、Accessories、Enterprise Solutions

hero-promo-card —— 带人字纹装饰的首页英雄卡

• 背景 {colors.canvas}，圆角 {rounded.xl}，内边距 {spacing.xxl}（32px）
• 摄影占据左半；副本块（引标 + 标题 + 价签 + CTA 组合）占据右半
• 在卡片包围框的左右两侧外挂 chevron-decoration 蓝色斜切

promo-strip-dark —— 行内深海军促销块

• 背景 {colors.ink}，文字 {colors.on-ink}，圆角 {rounded.xl}，内边距 {spacing.xxl} 48px
• 用于：页内促销"When did work start getting in the way of work?"、SMB 证言板块

输入与表单

text-input + text-input-focused

• 背景 {colors.canvas}，文字 {colors.ink}，圆角 {rounded.md}，内边距 {spacing.sm} {spacing.md}，高度 44px
• 默认 1px {colors.steel} 边框；聚焦时获得 1px {colors.ink} 边框（无光晕）

text-input-search —— 顶导中的胶囊搜索

• 背景 {colors.canvas}，圆角 {rounded.md}，内边距 {spacing.sm} {spacing.md}，高度 40px，1px {colors.steel} 边框，右侧放大镜图标

badge-pill-ink —— 实心标签胶囊

• 背景 {colors.ink}，文字 {colors.on-primary}，圆角 {rounded.lg}，内边距 6px 12px，字体 {typography.body-md}
• 用于产品标题旁的"New"或推荐指示

badge-pill-outline —— 描边标签胶囊

• 背景 {colors.canvas}，文字 {colors.ink}，1px {colors.ink} 边框，圆角 {rounded.lg}，内边距 6px 12px

badge-sale-coral —— 促销价签

• 背景 {colors.bloom-coral}，文字 {colors.on-primary}，圆角 {rounded.sm}，内边距 {spacing.xxs} {spacing.xs}，字体 {typography.caption-bold}
• 用于：英雄促销卡上的"Save $200"、"25% off"叠加标签

导航

utility-strip —— 页面顶部工具栏

• 背景 {colors.ink}，文字 {colors.on-primary}，高度 36px，内边距 0 {spacing.xl}，字体 {typography.caption-md}
• 承载：国家/地区选择器、"For Business / For Home" 切换、"Sign in" 链接、购物车链接

nav-bar-top —— 桌面顶部导航（位于工具栏下方）

• 背景 {colors.canvas}，高度 64px，内边距 0 32px
• 布局：HP 字标 logo 左对齐 → 中间类别列表（Laptops / Desktops / Printers / Accessories / Solutions / Support）→ 右侧槽位：搜索字段、登录链接、购物车图标
• 1px {colors.hairline} 底边框分隔导航与页面

nav-link

• 背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-md}，内边距 {spacing.xs} {spacing.md}
• 激活页面在文字基线下方绘制 2px {colors.primary} 下划线

顶部导航（移动）

• 同样高度，汉堡图标取代中间类别列表，搜索与购物车保持可见
• 抽屉展开为全画布页，配 {typography.body-lg} 链接列表，底部固定 Sign-in CTA

category-tab + category-tab-active —— 胶囊子导航

• 默认：背景 {colors.canvas}，文字 {colors.ink}，字体 {typography.body-emphasis}，圆角 {rounded.pill}，内边距 {spacing.xs} {spacing.lg}
• 激活：背景 {colors.ink}，文字 {colors.on-primary}，同样圆角
• 用于笔记本商城页的"All / Trending / On Sale"筛选，以及首页"How can we help?"收尾带

标志性组件

chevron-decoration —— 几何蓝色斜切母题

• 背景 {colors.primary}，圆角 {rounded.none}，无阴影
• 渲染为约 60° 角度的锐利平行四边形，尺寸与所框住的英雄卡高度一致
• 保留给英雄带与全页横幅——绝不作为卡内的装饰噪音

faq-row —— 打印机计划 FAQ 的手风琴行

• 背景 {colors.canvas}，圆角 {rounded.lg}，内边距 {spacing.lg} {spacing.xl}，字体 {typography.body-emphasis}
• 行间 1px {colors.hairline} 分隔线；折叠时右侧 chevron-down 图标，展开时为 chevron-up
• 正文答案在展开后用 {typography.body-md} 渲染在同一行容器内

help-band-dark —— 收尾的"How can we help?"前奏带

• 背景 {colors.ink}，文字 {colors.on-primary}，内边距 64px {spacing.xl}
• 布局：作为带背景的大幅生活摄影（低透明度），居中放置芯片式类别标签：Browse Topics / Live Chat / Contact / Diagnose / Order Status

footer-dark

• 背景 {colors.ink}，文字 {colors.on-primary}，字体 {typography.body-md}，内边距 64px {spacing.xl}
• 5 列链接网格（Company / Shop / Support / Resources / Connect），头部用 {typography.body-emphasis}，链接行用 {typography.caption-md}
• 底部条带承载社交图标、语言选择器与法律行 {typography.caption-sm} 弱化为 {colors.steel}

推荐与避免

推荐

• 把 {colors.primary} 保留给主 CTA、链接色与 chevron-decoration 母题——每个视口至多两次
• 所有标题以 Forma DJR Micro 500 字重、行高 1.0 设置——克制在英雄尺度上提升字重的冲动
• 卡片与相框使用 {rounded.xl}（16px）；按钮与输入框使用 {rounded.md}（4px）——保持两档分裂的锐利
• 白色 {colors.canvas} 正文带与 {colors.cloud}（#f7f7f7）交替带配对；让灰色承担呼吸
• 用深海军 {colors.ink} 板块收束每一页节奏——"How can we help?" 前奏 + 页脚
• 按钮标签使用 {typography.button-md}（0.7px 字距）的大写——系统中唯一加字距的地方
• 柔抬升阴影专用于产品卡与价格档位——保持段带平面
• 产品摄影框在 {rounded.xl} 容器内；永不使用铺满的圆形遮罩

避免

• 不要引入 {colors.primary} 系列与 bloom-coral 促销标签和 storm 打印机计划点缀之外的次级饱和色
• 不要使用厚重的材质阴影——深度靠色彩对比（云 vs 白）与柔抬升即可
• 不要把按钮圆角超过 {rounded.md}（4px）；偏软的 8px+ 按钮读起来像另一个品牌
• 不要把 Forma DJR Micro 字号放在 12px 以下——小说明 11px 是下限
• 不要把人字纹装饰当作行内噪音使用；它是只属于英雄区的建筑元素，与字标绑定
• 不要靠降低墨色透明度来制造层级——切换表面或改为 {colors.charcoal} / {colors.graphite}
• 不要用通用无衬线锁定替换 HP 字标；字标是自定义标志，有自己的比例

响应式行为

断点

触摸目标

每个交互元素在移动端都通过 44×44px。button-primary 44px 高度 + 24px 水平内边距达到 WCAG-AAA 触摸目标。category-tab 8px 20px 内边距在触摸屏上提升到 12px 24px。Nav-link 点击区域在文字运行之外无形扩展到完整 44px 行高。顶导的固定购物车/登录图标在可见 24×24 字形周围使用 44×44 隐形命中框。

折叠策略

• 工具栏：每个断点都可见；下拉项在 768px 以下折叠为单一"Account"图标
• 顶导：1024px 以下中间类别列表折叠为汉堡抽屉；右侧搜索 + 登录 + 购物车保持可见
• 英雄：每个断点都保持单列；人字纹装饰在平板上缩小到约 60%，在移动端完全消失
• 产品系列网格：随断点缩小 4 → 3 → 2 → 1 列；卡片在各尺寸都保持 {rounded.xl} 圆角
• 价格对比表：桌面 4 列网格折叠为平板 2×2，再在移动端堆叠为单独的手风琴式卡片
• 页脚：5 列链接网格 → 平板 2 列 → 移动端单列手风琴；HP 字标保持左对齐

图片行为

英雄摄影在各断点使用 {rounded.xl} 容器。人字纹装饰在移动端消失；底层图片卡在视口中居中。证言与"how-can-we-help"带的生活摄影保持 16:9，移动端水平裁剪而非信箱化。桌面与移动端之间没有艺术指导裁剪切换——同一图片在各尺寸复用。

迭代指南

1. 一次只聚焦一个组件；克制一次重构整个段落的冲动
2. 直接引用组件名与 token（{colors.primary}、{typography.display-xxl}、{rounded.xl}、card-product）——不要在散文中改写成十六进制/像素
3. 编辑后运行 npx @google/design.md lint DESIGN.md——broken-ref、contrast-ratio 与 orphaned-tokens 警告会自动标记问题
4. 新增变体作为独立组件条目（-pressed、-disabled、-focused）；永不在散文中隐藏状态
5. 正文默认 {typography.body-md}；嵌入加粗用 {typography.body-emphasis}；展示字号留给真正的标题角色
6. 保持 {colors.primary} 稀缺——每个视口至多两个火焰元素（一个 CTA + 一个人字纹装饰）。一个视口三个火焰元素即为过度饱和
7. 引入新段带时，从 {colors.canvas} / {colors.cloud} / {colors.fog} / {colors.ink} 中选择——六种预设表面模式就是完整的表面词汇