White paper and electric blue give HP its enterprise-consumer catalog voice: a pure white canvas alternates with #f7f7f7 cloud bands, while the lone action color (#024ad8) appears only on primary CTAs, links, and the angular blue chevrons borrowed from the wordmark's slashes. Forma DJR Micro holds headlines at weight 500 with 1.0 line-height, buttons stay at a sharp 4px radius with uppercase 0.7px-tracked labels, and 16px corners are reserved for product cards and photo frames. Near-black slabs close testimonial and footer sections, pacing the long catalog across white, fog, and ink surfaces.
HPConsumer
Prompt Template
Base Template
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).
Variant Prompts
📱 Mobile
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.
📊 Dashboard
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.
📄 Landing Page
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.
Usage Examples
HP Laptop Catalog
WebBuild an HP-style laptop catalog with white and #f7f7f7 bands, 16px product cards, and uppercase #024ad8 CTAs.
HP Print Plan Console
DashboardCreate an HP-style print plan console with dense spec tables, 4px controls, and a single #024ad8 action per view.
✅ Best For
- Laptop and printer catalogs
- Enterprise procurement landing pages
- Customer-story and support hubs
❌ Avoid For
- Cinematic single-product launches
- Handcrafted artisan brands
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.