HashiCorp

Difficulty:
Company
hashicorp

Effect Preview

Style Description

Infrastructure automation. Enterprise-grade simplicity, black-and-white palette

Tags

HashiCorpBackend

Prompt Template

Base Template
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.

Variant Prompts

📱 Mobile
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.
📊 Dashboard
Design a dashboard with HashiCorp design language. Use HashiCorp color identity with #000000 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with HashiCorp visual identity. Use HashiCorp color identity with #000000 accents. Compelling, conversion-focused.

Usage Examples

HashiCorp App

Web App
Build a web app with HashiCorp design language and brand color system.

HashiCorp Dashboard

Dashboard
Create a dashboard using HashiCorp style with data visualization and __hashicorpSans_96f0ca typography.

✅ Best For

  • Backend
  • Brand-consistent interfaces
  • Modern web applications

✅ Avoid For

  • Unrelated design aesthetics
  • Different brand guidelines