HashiCorp はインフラ自動化分野のリーダーで、Terraform、Vault などのツールがクラウドリソースのプロビジョニング、セキュリティ、ガバナンスをカバーします。スタイルはクリーンな白のブロックとドラマチックなダーク（#15181e）のブロックを二態モードで切り替え、HashiCorp Sans がウェイト 600〜700 と kern 機能で見出しを支えます。複数プロダクトの色体系は --mds-color-* 変数で管理され（Terraform 紫、Vault 黄など）、大文字の小さな説明文には 1.3px のトラッキングを適用します。エンタープライズインフラとクラウドプラットフォームの UI に適しています。
HashiCorpバックエンドとデータ
プロンプトテンプレート
基本テンプレート
Design a HashiCorp-inspired interface. - Dual-mode: clean white sections + dramatic dark (#15181e) hero/product areas; - Custom HashiCorp Sans font with 600–700 weights and "kern" feature; - Multi-product color system via --mds-color-* CSS custom properties; - Product brand colors: Terraform purple, Vault yellow, Waypoint teal, Vagrant blue; - Uppercase letter-spaced captions (13px, weight 600, 1.3px letter-spacing). Colors: #000000, #15181e, #0d0e12, #f1f2f3. Typography: __hashicorpSans_96f0ca.
バリエーションプロンプト
📱 モバイル
Design a mobile app with HashiCorp aesthetics. Use HashiCorp color identity with #000000 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with HashiCorp style. Use HashiCorp color identity with #000000 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with HashiCorp design language. Use HashiCorp color identity with #000000 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with HashiCorp visual identity. Use HashiCorp color identity with #000000 accents. Compelling, conversion-focused.
使用例
HashiCorp アプリ
WebBuild a web app with HashiCorp design language and brand color system.
HashiCorp ダッシュボード
ダッシュボードCreate a dashboard using HashiCorp style with data visualization and __hashicorpSans_96f0ca typography.
✅ 適した用途
- バックエンドシステム
- インフラと DevOps ツール
- エンジニアリングチーム向けの技術サイト
❌ 適さない用途
- コンシューマー向けライフスタイルアプリ
- 子ども向けゲーム UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。