Hashicorp Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

11type steps

6radius steps

1pxspacing base

Hashicorp, in one page

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.

Do's and don'ts

Do

Reserve {colors.canvas} (black) and {colors.surface-1} (charcoal) as the system's two anchor surfaces. Every band of the page is one or the other.
When introducing a section about a specific HashiCorp product, use that product's {colors.product-*} token consistently — for the section pill, the CTA button, and (where appropriate) the showcase card background.
Use {rounded.md} 8px on CTA buttons; HashiCorp's brand reads as engineered, not consumer.
Pair tight display line-heights (1.17–1.21) with relaxed body line-heights (1.50–1.71). The contrast IS the brand voice.
Use the eyebrow typography ({typography.eyebrow}, uppercase, 0.6px tracking) above every meaningful section.
Use surface lift (canvas → surface-1 → surface-2) to express hierarchy on dark.
Reserve product-chromatic cards for product identity; keep generic feature cards on {colors.surface-1}.

Don't

Don't ship a light-mode marketing page. HashiCorp's marketing brand IS dark.
Don't introduce mid-tone gray text outside the documented ink / ink-muted / ink-subtle set.
Don't square off CTA corners — use {rounded.md} 8px, not 0px.
Don't use a product accent color for a CTA on a page that isn't about that product. Terraform purple on the Vault page is a brand violation.
Don't combine multiple product accents in the same viewport — the system says "this section is about THIS tool", and mixing accents breaks that signal.
Don't add drop shadows on dark; surface lift carries elevation.
Don't replace hashicorpSans with a display-only sans for headlines and a different family for body. The brand is held together by one family across the full hierarchy.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Hashicorp design language. Follow the measured tokens below — do not substitute your own palette.

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

Type:
- families: hashicorpSans, Inter, Geist Sans, IBM Plex Sans
- scale: 12, 13, 14, 16, 18, 20, 22, 28, 40
- weights: 500, 600, 700

Shape:
- radius: 4, 6, 8, 12, 16, 24
- elevation: No drop shadows on dark. Cards lift via surface change, never shadow.

Spacing: 1, 4, 8, 10, 12, 16, 24, 32, 48, 64

Rules:
- Reserve `{colors.canvas}` (black) and `{colors.surface-1}` (charcoal) as the system's two anchor surfaces. Every band of the page is one or the other.
- When introducing a section about a specific HashiCorp product, use that product's `{colors.product-*}` token consistently — for the section pill, the CTA button…
- Use `{rounded.md}` 8px on CTA buttons; HashiCorp's brand reads as engineered, not consumer.
- Pair tight display line-heights (1.17–1.21) with relaxed body line-heights (1.50–1.71). The contrast IS the brand voice.
- Use the eyebrow typography (`{typography.eyebrow}`, uppercase, 0.6px tracking) above every meaningful section.
- Use surface lift (canvas → surface-1 → surface-2) to express hierarchy on dark.

Avoid:
- Don't ship a light-mode marketing page. HashiCorp's marketing brand IS dark.
- Don't introduce mid-tone gray text outside the documented `ink` / `ink-muted` / `ink-subtle` set.
- Don't square off CTA corners — use `{rounded.md}` 8px, not 0px.
- Don't use a product accent color for a CTA on a page that isn't about that product. Terraform purple on the Vault page is a brand violation.
- Don't combine multiple product accents in the same viewport — the system says "this section is about THIS tool", and mixing accents breaks that signal.
- Don't add drop shadows on dark; surface lift carries elevation.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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

Brand & Accent

Black ({colors.primary}): The system primary surface. Canvas, footer, comparison tables, hero — all black.
White ({colors.on-primary}): Inverse text on black; canvas of button-primary.
Accent Blue ({colors.accent-blue}): Hyperlinks across the marketing surface.
Visited Purple ({colors.semantic-visited}): Visited-link state.

Surface

Canvas ({colors.canvas}): Default page background.
Surface 1 ({colors.surface-1}): Charcoal one step above canvas — feature cards, pricing cards, resource tiles.
Surface 2 ({colors.surface-2}): Two steps above — featured pricing card, secondary buttons, hovered product chrome.
Surface 3 ({colors.surface-3}): Three steps above — small chips, badges, sub-nav backgrounds.
Hairline ({colors.hairline}): 1px borders on cards and dividers.
Hairline Soft ({colors.hairline-soft}): Subtler dividers — comparison-table rows.
Inverse Canvas ({colors.inverse-canvas}): Pure white — used as the surface of button-primary only.

Text

Ink ({colors.ink}): All headline and emphasized body type — pure white.
Ink Muted ({colors.ink-muted}): Secondary type at #b2b6bd — meta info, footer columns.
Ink Subtle ({colors.ink-subtle}): Tertiary type at #656a76 — form helper text, timestamps, footnotes.

Per-Product Identity (signature)

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.

Terraform Purple ({colors.product-terraform}): Terraform sections, terraform CTAs, the violet 3D cube on the home hero.
Terraform Bright ({colors.product-terraform-bright}): Saturated highlight — link emphasis on Terraform pages.
Vault Yellow ({colors.product-vault}): Vault sections and CTAs.
Consul Red ({colors.product-consul}): Consul sections.
Waypoint Cyan ({colors.product-waypoint}): Waypoint sections, deep variant {colors.product-waypoint-deep} for hover/active.
Vagrant Blue ({colors.product-vagrant}): Vagrant sections.
Nomad Green ({colors.product-nomad}): Nomad sections.
Boundary Coral ({colors.product-boundary}): Boundary sections.

Semantic

Success ({colors.semantic-success}): Positive states (also reused as Nomad green).
Warning ({colors.semantic-warning}): Warning states (also Vault yellow).
Error ({colors.semantic-error}): Error states (also Consul red).
Amber 100 ({colors.amber-100}): Soft warm highlight — extracted but used sparingly.
Amber 200 ({colors.amber-200}): Saturated amber for caution badges.
Blue 7 ({colors.blue-7}): Deep navy used in unified-core gradients.

Type scaleRead the full spec

Font Family

hashicorpSans — HashiCorp's proprietary marketing typeface. Geometric, clean, slightly humanist. Fallback stack __hashicorpSans_Fallback_96f0ca (system font), then -apple-system, BlinkMacSystemFont, Segoe UI, helvetica, arial.

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).

Hierarchy

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

Principles

Tight on display, relaxed on body. Display sits at line-height 1.17–1.21; body lifts to 1.50–1.71. The size + line-height contrast carries hierarchy.
Weight hierarchy is small. 500 body / 600 emphasis / 700 display. No light / black extremes — the brand reads as engineered.
Eyebrow positive-tracked uppercase 12px is the section header. Every meaningful section has one above the headline.
No mono. Despite being a developer-tools brand, the marketing surface uses no monospace face — code voice is reserved for in-product surfaces.

Note on Font Substitutes

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.

Components and layoutRead the full spec

Buttons

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

Background {colors.inverse-canvas}, text {colors.inverse-ink}, type {typography.button}, padding 10px 18px, rounded {rounded.md}.
Pressed state lives in button-primary-pressed.

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

Background {colors.surface-2}, text {colors.ink}, type {typography.button}, rounded {rounded.md}, padding 10px 18px.

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

Background {colors.canvas}, text {colors.ink}, type {typography.button}, rounded {rounded.md}, padding 10px 18px.

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

Background {colors.product-terraform}, text {colors.ink}, type {typography.button}, rounded {rounded.md}, padding 10px 18px.

button-product-vault — Vault-yellow CTA.

Background {colors.product-vault}, text {colors.inverse-ink} (yellow needs dark text), type {typography.button}, rounded {rounded.md}, padding 10px 18px.

button-product-waypoint — Waypoint-cyan CTA.

Background {colors.product-waypoint}, text {colors.inverse-ink}, type {typography.button}, rounded {rounded.md}, padding 10px 18px.

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

Cards & Containers

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

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 24px.

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

Background {colors.product-terraform}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 24px.

product-card-vault — Vault-yellow ground.

Background {colors.product-vault}, text {colors.inverse-ink}, otherwise identical structure.

product-card-waypoint — Waypoint-cyan ground.

Background {colors.product-waypoint}, text {colors.inverse-ink}, otherwise identical structure.

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

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

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 24px.

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

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 32px.

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

Background {colors.surface-2}, otherwise identical structure.

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

Background {colors.surface-1}, text {colors.ink}, type {typography.body-sm}, rounded {rounded.lg}, padding 16px.

Inputs & Forms

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

Background {colors.surface-1}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding 10px 14px.
Focused state retains the same surface; the focus ring is a 1px {colors.accent-blue} outline.

Pills & Chips

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

Background {colors.surface-1}, text {colors.ink-muted}, type {typography.caption}, rounded {rounded.pill}, padding 4px 10px.

Comparison Table

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

Background {colors.canvas}, text {colors.ink-muted}, type {typography.body-sm}. Row separator is {colors.hairline-soft}.

CTA Banner

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

Background {colors.surface-1}, text {colors.ink}, type {typography.subhead}, rounded {rounded.xxl}, padding 48px.

Navigation

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.

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}, height 64px.
Mobile: collapses primary links into a hamburger; the primary CTA remains visible.

Responsive behaviourRead the full spec

Breakpoints

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

Touch Targets

CTA buttons (button-primary, button-secondary) maintain ≥40px tap height across viewports.
Product pills are 24px tall on desktop and grow to 28px on touch viewports.
Form inputs hold ≥44px tap target on touch viewports.

Collapsing Strategy

Nav: horizontal nav with right-anchored CTAs collapses to a hamburger overlay below 768px. The primary CTA stays visible on the bar.
Product card grid: 3-up → 2-up at 1024px → 1-up below 768px.
Pricing comparison table: collapses into per-tier accordions below 768px to avoid horizontal scroll.
Display type: {typography.display-xl} 80px scales toward {typography.display-md} 40px on mobile while preserving the negative-tracking percentage.

Image Behavior

3D product illustrations (cubes, safes, etc.) maintain aspect ratio and never crop; below 768px they shrink rather than reflow.
Customer logo marquee scales horizontally and may wrap to a second row at narrow widths.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-hashicorp {--page-bg: #000000;
  --page-bg-gradient: none;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --link-color: #2b89ff;
  --link-hover-color: #006ef7;
  --border-color: #2e2e2e;
  --card-bg: #000000;
  --card-shadow: 0 1px 2px rgba(255,255,255,0.06);
  --card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
  --header-bg: #141414;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #000000;
  --footer-text-color: #a6a6a6;
  --button-bg: #0068ee;
  --button-text-color: #ffffff;
  --button-hover-bg: #0052bb;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #0f0f0f;
  --button-secondary-text-color: #ffffff;
  --button-secondary-hover-bg: #1f1f1f;
  --button-secondary-border: 1px solid #2e2e2e;
  --prompt-bg: #0d0d0d;
  --prompt-text-color: #ffffff;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-inter);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

resend 78.1%
minimax 75.5%
notion 75.3%
mintlify 74.5%
raycast 73.8%

Where this came from

Source document: volt/design-md/hashicorp/DESIGN.md · 27.2 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.