HP

難易度:
業界スタイル
HP プレビュー

プレビュー

デザイントークン

公式ブランド資料とこのスタイルのプロンプトから導出した主要トークン。コピーするか、下の DESIGN.md と合わせて利用できます。

カラー

  • primaryブランドカラー

    主要アクションとハイライト

  • on-primary推定

    プライマリ上のテキスト

  • secondary推定

    タグ、バッジ、副次的な強調

  • on-secondary推定

    セカンダリ上のテキスト

  • neutralプロンプト

    ページ背景

  • on-neutral推定

    背景上のテキスト

  • surface推定

    カード、パネル、オーバーレイ

  • on-surface推定

    サーフェス上のテキスト

  • border推定

    ボーダーと区切り線

角丸と形状

推定
sm · 4px
md · 8px
lg · 12px
full

スペーシング

推定
  • sm8px
  • md12px
  • lg24px

シャドウとエレベーション

推定

階層は細いボーダーとトーンの違いで表現します。

タイポグラフィ

推定
  • Ag

    見出し 32px · ボールド

    Inter

  • Ag

    本文 16px · レギュラー

    Inter

  • Ag

    ラベル 13px · ミディアム

    Inter

白い紙面とエレクトリックブルーが、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 ノート PC カタログ

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.

✅ 適した用途

  • ノート PC とプリンターの製品カタログ
  • 企業調達のランディングページ
  • 導入事例とサポートのハブ

❌ 適さない用途

  • 単一製品の映画的なローンチページ
  • 手仕事・工芸ブランド

DESIGN.md ファイル

design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。

ダウンロード