HashiCorp Design System

Overview

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:

• Black-canvas marketing system: {colors.canvas} is the surface for hero, body, pricing, comparison tables, and footer alike.
• Per-product color identity: Terraform {colors.product-terraform}, Vault {colors.product-vault}, Waypoint {colors.product-waypoint}, Vagrant {colors.product-vagrant}, Consul {colors.product-consul}, Nomad {colors.product-nomad}, Boundary {colors.product-boundary} — each with its own button + card variant.
• Display headlines run hashicorpSans 600/700 with line-height 1.17–1.21 (tight); body runs the same family at 500 with 1.50–1.71 (relaxed) — the proportional gap is the brand's voice.
• CTA shape is {rounded.md} 8px — not a pill — keeping the system reading as developer-tool rather than consumer-app.
• Charcoal surface lift (canvas → surface-1 → surface-2) instead of shadow-driven elevation.
• 1px translucent gray hairlines (rgba(178,182,189,0.1)) define cards and dividers — the borders are felt more than seen.
• Eyebrow typography (12–13px, 600 weight, 0.6px positive tracking, uppercase) marks every section as a category label.

Known Gaps

• The exact product-color hex values come from the --mds-color-* CSS variable set extracted directly; they are HashiCorp's canonical brand spec.
• Shadow tokens are not extensively documented because the dark surface system uses surface lift instead of shadow elevation.
• Form-field error and validation styling is not visible on the inspected pages.
• Dark mode is the only marketing mode — light-mode adaptation is not documented.
• Product-card variants for Consul, Nomad, Vagrant, and Boundary follow the documented Terraform / Vault / Waypoint pattern but are referenced in prose only; if they need formal entries they can be added as product-card-consul, product-card-nomad, etc.