白纸与电光蓝构成 HP 的商业目录气质：纯白画布上交替铺设 #f7f7f7 云灰段落，唯一的主色 #024ad8 只出现在主 CTA、链接和斜切蓝色双斜线里。Forma DJR Micro 以大标题 500 字重、行高 1.0 的克制姿态贯穿全站，按钮则用 4px 直角配大写字母与 0.7px 字距，16px 圆角留给产品卡与照片框。深墨色板块负责客户证言和页脚收束，让长长的产品目录在白、灰、墨三种表面之间保持节奏。
HP媒体与消费
提示词模板
基础模板
Design an HP-inspired interface. - White-paper canvas alternating with #f7f7f7 cloud bands and near-black (#1a1a1a) closing slabs; - One electric blue (#024ad8) reserved for primary CTAs, links, and the angular chevron slashes that echo the HP wordmark; - Forma DJR Micro throughout, headlines at weight 500 with 1.0 line-height, body at 400; - Sharp two-tier geometry: 4px buttons and inputs against 16px product cards and photo frames; - Uppercase button labels with 0.7px letter-spacing, the only tracked type in the system. Colors: #024ad8, #1a1a1a, #ffffff, #f7f7f7, #e8e8e8 with #024ad8 accent. Typography: Forma DJR Micro (fallback Arial).
变体提示词
📱 移动端
Design a mobile app with HP aesthetics. Use HP color identity with #024ad8 accents. White catalog surfaces, sharp 4px buttons, and readable spec rows.
💻 Web端
Design a web application with HP style. Use HP color identity with #024ad8 accents. White and cloud bands, 16px product cards, and uppercase CTAs.
📊 仪表板
Design a dashboard with HP design language. Use HP color identity with #024ad8 accents. Dense spec tables, 4px controls, and clear ink-on-white hierarchy.
📄 落地页
Design a landing page with HP visual identity. Use HP color identity with #024ad8 accents. Chevron-framed hero, product grid, and a dark closing band.
使用示例
HP 笔记本产品目录
Web 端Build an HP-style laptop catalog with white and #f7f7f7 bands, 16px product cards, and uppercase #024ad8 CTAs.
HP 打印方案控制台
仪表板Create an HP-style print plan console with dense spec tables, 4px controls, and a single #024ad8 action per view.
✅ 适合场景
- 笔记本电脑与打印机产品目录
- 企业采购落地页
- 客户案例与支持中心
❌ 不适合场景
- 单一产品的电影式发布页
- 手作与手工艺品牌
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。