HashiCorp

Difficulty:
Company
HashiCorp Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

HashiCorp leads in infrastructure automation — Terraform, Vault, and friends covering provisioning, security, and governance of cloud resources. Its style alternates clean white sections with dramatic dark (#15181e) hero areas, sets HashiCorp Sans at weights 600–700 with the kern feature, organizes product colors (Terraform purple, Vault yellow) through --mds-color-* tokens, and tracks uppercase 13px captions at 1.3px.

DeveloperMinimal

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
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
  • Infrastructure and DevOps tools
  • Technical sites for engineering teams

❌ Avoid For

  • Consumer lifestyle apps
  • Kids game UIs

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download