HashiCorp Design System

HashiCorp's marketing brand is one of the most disciplined dark-canvas systems on the web. Every public page sits on pure black #000000, lifts to charcoal #15181e for cards, and uses a system of per-product accent colors — Terraform purple, Vault yellow, Consul red, Waypoint cyan, Vagrant blue, Nomad green, Boundary coral — to signal which tool a given section represents. The accents are identity tokens, not decoration: a Terraform card lifts onto a violet ground, a Vault card onto yellow, a Waypoint card onto cyan. A reader scrolling the homepage can tell which product a section belongs to from the corner of their eye, before reading a single word.

This page packages all of that into a single DESIGN.md file. Inside: 32 color tokens grouped into brand, surface, hairline, text, per-product identity, and semantic bands; 12 typography styles spanning an 80px display down to 12px eyebrow; 8 corner-radius tokens; 9 spacing values built on an 8px base; and 22 components covering buttons (white, charcoal, ghost, and per-product variants), cards (feature, pricing, resource, and chromatic product cards), inputs, pills, comparison rows, CTA banners, navigation, and footer. The format is the Google Labs DESIGN.md spec.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces HashiCorp's specific discipline — black canvas, surface lift instead of shadow, 8px engineered corners, per-product identity surfaces — instead of a generic dark theme. Reference the tokens directly for Tailwind config, CSS variables, or your own component library. The system is worth studying because it solves a hard problem: a multi-product portfolio that has to feel coherent without flattening into a single house color.