### HashiCorp - Infrastructure automation. - Enterprise-clean, black and white - description: "An enterprise-infrastructure marketing canvas built around a n…
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
version alpha
name HashiCorp
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:
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.
Source pages: hashicorp.com/en (home), /en/infrastructure-cloud, /en/products/terraform, /en/pricing, /en/resources?contentType=PDF.
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.
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.
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.
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.
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.
The same famil
proprietary
Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx
1,500+ AI skills, agents & workflows. Install in 30 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.