Design System inspired by HashiCorp

Infrastructure tools. Black and white, multi-product brand architecture.

Usage

npx getdesign@latest add hashicorp

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official HashiCorp design system. A curated starting point for building HashiCorp-like UIs with your AI coding agent.

Infrastructure tools. Black and white, multi-product brand architecture.

Preview

hashicorp.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF HASHICORP

Infrastructure tools. Black and white, multi-product brand architecture.

Explore the system View tokens

Color Palette

Infrastructure tools. Black and white, multi-product brand architecture.

Primary

Black

#000000

Brand color

White

#ffffff

Brand color

Consul Pink

#f0407b

Brand color

Terraform Purple

#844fba

Brand color

Vault Yellow

#ffcf25

Brand color

Nomad Green

#06d092

Brand color

Boundary Red

#f24c53

Brand color

Gray

#6b7280

Brand color

Typography

A type system inspired by HashiCorp.

Gilmer

Gilmer, Gilmer

Metro Sans

Metro Sans, Gilmer

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by HashiCorp.

Not detected on this URL

Components

Other component primitives mapped from the HashiCorp spec.

Not detected on this URL

Design System Inspired by HashiCorp

1. Visual Theme & Atmosphere

Infrastructure tools. Black and white, multi-product brand architecture.

Key Characteristics:

Multi-product color architecture (each tool gets a color)

Black and white base with product-specific accents

Infrastructure-as-code technical aesthetic

Clean documentation with terminal examples

Enterprise trust signals throughout

2. Color Palette & Roles

Primary

Black (#000000): Brand color
White (#FFFFFF): Brand color
Consul Pink (#F0407B): Brand color
Terraform Purple (#844FBA): Brand color
Vault Yellow (#FFCF25): Brand color
Nomad Green (#06D092): Brand color
Boundary Red (#F24C53): Brand color
Gray (#6B7280): Brand color

3. Typography Rules

Font Family

Display & UI: Gilmer, Metro Sans

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth communicated through background color shifts, subtle shadows, or border treatments.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Black: #000000
White: #FFFFFF
Consul Pink: #F0407B
Terraform Purple: #844FBA
Vault Yellow: #FFCF25
Nomad Green: #06D092

Typography

Font: Gilmer, Metro Sans