白紙與電光藍構成 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 程式設計工具使用。