HashiCorp Design System

---

version: alpha

name: HashiCorp-design-analysis

description: "An enterprise-infrastructure marketing canvas built around a near-black ground (#000000) and a system of per-product accent colors — Terraform purple, Vault yellow, Consul pink, Waypoint cyan, Vagrant blue — that act as identity tokens rather than decorative palette. Display type is hashicorpSans set in 600/700 with tight 1.17–1.21 line-heights; body type runs the same family at 500 weight with relaxed 1.50–1.71 line-heights. Cards live as charcoal surfaces with 1px translucent gray borders; product showcase cards lift into per-product chromatic gradients. The system reads as confident, technical, and intentionally multi-product — every section quietly signals which HashiCorp tool it represents."

colors:

primary: "#000000"

on-primary: "#ffffff"

accent-blue: "#2b89ff"

ink: "#ffffff"

ink-muted: "#b2b6bd"

ink-subtle: "#656a76"

canvas: "#000000"

surface-1: "#15181e"

surface-2: "#1f232b"

surface-3: "#3b3d45"

hairline: "#3b3d45"

hairline-soft: "#252830"

inverse-canvas: "#ffffff"

inverse-ink: "#000000"

product-terraform: "#7b42bc"

product-terraform-bright: "#911ced"

product-vault: "#ffcf25"

product-consul: "#e62b1e"

product-waypoint: "#14c6cb"

product-waypoint-deep: "#12b6bb"

product-vagrant: "#1868f2"

product-nomad: "#00ca8e"

product-boundary: "#f24c53"

amber-100: "#fbeabf"

amber-200: "#bb5a00"

blue-7: "#101a59"

semantic-success: "#00ca8e"

semantic-warning: "#ffcf25"

semantic-error: "#e62b1e"

semantic-visited: "#a737ff"

typography:

display-xl:

fontFamily: hashicorpSans

fontSize: 80px

fontWeight: 700

lineHeight: 1.17

letterSpacing: -2.5px

display-lg:

fontFamily: hashicorpSans

fontSize: 56px

fontWeight: 700

lineHeight: 1.18

letterSpacing: -1.6px

display-md:

fontFamily: hashicorpSans

fontSize: 40px

fontWeight: 600

lineHeight: 1.19

letterSpacing: -1.0px

headline:

fontFamily: hashicorpSans

fontSize: 28px

fontWeight: 600

lineHeight: 1.21

letterSpacing: -0.6px

card-title:

fontFamily: hashicorpSans

fontSize: 22px

fontWeight: 600

lineHeight: 1.18

letterSpacing: -0.4px

subhead:

fontFamily: hashicorpSans

fontSize: 20px

fontWeight: 600

lineHeight: 1.35

letterSpacing: -0.2px

body-lg:

fontFamily: hashicorpSans

fontSize: 18px

fontWeight: 500

lineHeight: 1.69

letterSpacing: 0

body:

fontFamily: hashicorpSans

fontSize: 16px

fontWeight: 500

lineHeight: 1.50

letterSpacing: 0

body-sm:

fontFamily: hashicorpSans

fontSize: 14px

fontWeight: 500

lineHeight: 1.71

letterSpacing: 0

caption:

fontFamily: hashicorpSans

fontSize: 13px

fontWeight: 500

lineHeight: 1.38

letterSpacing: 0.2px

button:

fontFamily: hashicorpSans

fontSize: 14px

fontWeight: 600

lineHeight: 1.29

letterSpacing: 0

eyebrow:

fontFamily: hashicorpSans

fontSize: 12px

fontWeight: 600

lineHeight: 1.23

letterSpacing: 0.6px

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 24px

pill: 9999px

full: 9999px

spacing:

hair: 1px

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

button-primary:

backgroundColor: "{colors.inverse-canvas}"

textColor: "{colors.inverse-ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

button-primary-pressed:

backgroundColor: "{colors.inverse-canvas}"

textColor: "{colors.inverse-ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

button-secondary:

backgroundColor: "{colors.surface-2}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

button-tertiary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

button-product-terraform:

backgroundColor: "{colors.product-terraform}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

button-product-vault:

backgroundColor: "{colors.product-vault}"

textColor: "{colors.inverse-ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

button-product-waypoint:

backgroundColor: "{colors.product-waypoint}"

textColor: "{colors.inverse-ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

product-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

product-card-terraform:

backgroundColor: "{colors.product-terraform}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

product-card-vault:

backgroundColor: "{colors.product-vault}"

textColor: "{colors.inverse-ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

product-card-waypoint:

backgroundColor: "{colors.product-waypoint}"

textColor: "{colors.inverse-ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

feature-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 24px

pricing-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 32px

pricing-card-featured:

backgroundColor: "{colors.surface-2}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.lg}"

padding: 32px

resource-card:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.lg}"

padding: 16px

text-input:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 10px 14px

text-input-focused:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.body}"

rounded: "{rounded.md}"

padding: 10px 14px

product-pill:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink-muted}"

typography: "{typography.caption}"

rounded: "{rounded.pill}"

padding: 4px 10px

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.xs}"

height: 64px

comparison-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-muted}"

typography: "{typography.body-sm}"

rounded: "{rounded.xs}"

cta-banner:

backgroundColor: "{colors.surface-1}"

textColor: "{colors.ink}"

typography: "{typography.subhead}"

rounded: "{rounded.xxl}"

padding: 48px

footer:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink-muted}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 64px 32px

---

HashiCorp's marketing canvas is a near-black ground that serves a multi-product portfolio without ever feeling generic. The dominant surface is `{colors.canvas}` (pure black) layered with `{colors.surface-1}` charcoal cards and 1px translucent gray hairlines. The chrome is monochrome — white pill-rounded buttons (`{components.button-primary}`), white type, gray secondary type — but the system is held together by a **palette of per-product accent colors** that signal which HashiCorp tool a given section belongs to: Terraform purple, Vault yellow, Consul red, Waypoint cyan, Vagrant blue, Nomad green, Boundary coral.

Display type is **hashicorpSans** at weights 600/700 with tight line-heights (1.17–1.21); body type is the same family at 500 weight with deliberately relaxed line-heights (1.50–1.71) — the contrast feels editorial, not enterprise-templated. CTAs use small `{rounded.md}` 8px corners rather than pills, which keeps the system reading as developer-facing rather than consumer-y.

The signature device is the **product-card** family — each HashiCorp product gets its own colored card variant on the home and infrastructure pages, lifting Terraform into a violet ground, Vault into yellow, Waypoint into cyan. These aren't decorative gradients — they're identity surfaces. A reader scrolling the page can tell which product a section is about from the corner of their eye.

**Key Characteristics:**

> Source pages: hashicorp.com/en (home), /en/infrastructure-cloud, /en/products/terraform, /en/pricing, /en/resources?contentType=PDF.

HashiCorp's marketing isn't held together by a single accent color — it's held together by a system of product-specific accents, each used to mark which tool a section represents.

The same family carries display, body, button, and caption — no separate display + body pairing. Hierarchy is carried by weight (500 body / 600 emphasis / 700 display) and by a deliberate line-height contrast (tight on display, relaxed on body).

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 80px | 700 | 1.17 | -2.5px | Largest hero headline |

| `{typography.display-lg}` | 56px | 700 | 1.18 | -1.6px | Section opener headlines |

| `{typography.display-md}` | 40px | 600 | 1.19 | -1.0px | Sub-section headlines |

| `{typography.headline}` | 28px | 600 | 1.21 | -0.6px | Pricing tier titles, CTA banner heading |

| `{typography.card-title}` | 22px | 600 | 1.18 | -0.4px | Feature card title |

| `{typography.subhead}` | 20px | 600 | 1.35 | -0.2px | Long-form intro paragraphs |

| `{typography.body-lg}` | 18px | 500 | 1.69 | 0 | Hero subhead, lead body |

| `{typography.body}` | 16px | 500 | 1.50 | 0 | Default body |

| `{typography.body-sm}` | 14px | 500 | 1.71 | 0 | Card body, footer columns |

| `{typography.caption}` | 13px | 500 | 1.38 | 0.2px | Meta, comparison cell labels |

| `{typography.button}` | 14px | 600 | 1.29 | 0 | Pill / square CTA buttons |

| `{typography.eyebrow}` | 12px | 600 | 1.23 | 0.6px | Uppercase section eyebrows |

If implementing without hashicorpSans, suitable open-source substitutes include **Inter** (closest geometric character set), **Geist Sans**, or **IBM Plex Sans**. Inter at weights 500 / 600 / 700 closely approximates hashicorpSans's proportions; expect to manually adjust line-heights down by ~0.02 to match.

The dark canvas IS the whitespace. Sections separate by surface lift (canvas → surface-1) rather than by gaps in white. Within a section, generous `{spacing.xl}` 32px gaps separate cards; `{spacing.lg}` 24px separates rows.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow, no border | Canvas-mounted display type, hero, footer |

| 1 (charcoal lift) | `{colors.surface-1}` background + 1px `rgba(178,182,189,0.1)` border | Default cards, resource tiles, pricing cards |

| 2 (surface-2 lift) | `{colors.surface-2}` background + 1px `{colors.hairline}` border | Featured pricing card, hovered cards, sub-nav |

| 3 (product chromatic) | Per-product accent color background — Terraform purple, Vault yellow, Waypoint cyan | Product showcase cards |

The product chromatic level isn't a "modal lift" — it's an identity device. A Terraform card sits at the same z-plane as a feature-card; the difference is meaning, not depth.

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Small chips / badges |

| `{rounded.sm}` | 6px | Inline tag |

| `{rounded.md}` | 8px | All CTA buttons, form inputs, list items |

| `{rounded.lg}` | 12px | Feature cards, product cards, pricing cards |

| `{rounded.xl}` | 16px | Large illustrative tiles |

| `{rounded.xxl}` | 24px | CTA banner panels |

| `{rounded.pill}` | 9999px | Eyebrow-style product pills (small chips) |

| `{rounded.full}` | 9999px | Avatar circles (rare on marketing) |

**`button-primary`** — White rounded-rect CTA. Used as primary CTA on all pages.

**`button-secondary`** — Charcoal rounded-rect. Secondary CTA, "Read docs" / "Talk to sales".

**`button-tertiary`** — Bare ghost button on canvas with text-only treatment.

**`button-product-terraform`** — Terraform-tinted CTA on Terraform pages.

**`button-product-vault`** — Vault-yellow CTA.

**`button-product-waypoint`** — Waypoint-cyan CTA.

(Vagrant blue, Nomad green, Consul red, Boundary coral follow the same pattern with their respective `{colors.product-*}` token.)

**`product-card`** — Default product showcase card — surface-1 charcoal.

**`product-card-terraform`** — Product card with Terraform purple ground (used as identity surface, not modal elevation).

**`product-card-vault`** — Vault-yellow ground.

**`product-card-waypoint`** — Waypoint-cyan ground.

(Other product variants follow the same shape with their respective product token.)

**`feature-card`** — Generic feature highlight on surface-1.

**`pricing-card`** — Pricing tier on `/en/pricing`.

**`pricing-card-featured`** — Recommended tier (visually emphasized via surface lift).

**`resource-card`** — PDF / whitepaper / guide tile in the resources directory.

**`text-input`** + **`text-input-focused`** — Form fields on pricing seat-count and contact forms.

**`product-pill`** — Small product-name chip used above hero headlines and on resource cards to label which product a piece of content belongs to.

**`comparison-row`** — Single row inside the pricing comparison table.

**`cta-banner`** — Large rounded panel used at the bottom of long-form pages with a closing CTA.

**`top-nav`** — Sticky black bar with HashiCorp logomark left, primary nav links centered, and a `button-primary` ("Sign up") + `button-secondary` ("Sign in") pair right.

**`footer`** — Dense link grid on `{colors.canvas}` with the wordmark at left and 5–6 columns of caption-sized links.

| Name | Width | Key Changes |

|---|---|---|

| Desktop-XL | 1440px | Default desktop layout |

| Desktop | 1280px | Pricing 3-up grid maintained |

| Tablet | 1024px | Product card grid 3-up → 2-up |

| Mobile-Lg | 768px | Pricing comparison becomes per-tier accordion; nav becomes hamburger |

| Mobile | 480px | Single-column everything; display-xl scales 80px → ~36px |

1. Focus on ONE component at a time and reference it by its `components:` token name.

2. When introducing a new section, decide first whether it's a generic feature (surface-1) or a product-identity section (product-* color).

3. Default body to `{typography.body}` at 500 weight; reach for `{typography.subhead}` only inside CTA banners and feature cards.

4. Run `npx @google/design.md lint DESIGN.md` after edits.

5. Add new product variants as separate component entries (`product-card-nomad`, `button-product-consul`, etc.).

6. Treat the per-product palette as identity tokens, not decoration. If you reach for a product color outside its product context, the brand is drifting.

7. Eyebrow type is mandatory above every section — skipping it makes sections read as floating.