W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
HashiCorp
HashiCorp, Inc. is the company behind a family of infrastructure- automation tools — Terraform, Vault, Consul, Nomad, Boundary, Packer, Vagrant, and Waypoint — and the HashiCorp Cloud Platform (HCP) that hosts them. The corporate identity is anchored on a single signature yellow (#FFCD00) against a deep near-black canvas (#0E0E10), with each product carrying its own signature accent (Terraform Purple, Vault Yellow, Consul Magenta, Nomad Green, etc.). The voice is engineer-direct and operationally literate: declarative IaC, deliberate APIs, and a strong preference for the live `terraform apply` over the marketing abstraction.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/hashicorp/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/hashicorp/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
HashiCorp
HashiCorp, Inc. is the company behind a family of infrastructure- automation tools — Terraform, Vault, Consul, Nomad, Boundary, Packer, Vagrant, and Waypoint — and the HashiCorp Cloud Platform (HCP) that hosts them. The corporate identity is anchored on a single signature yellow (#FFCD00) against a deep near-black canvas (#0E0E10), with each product carrying its own signature accent (Terraform Purple, Vault Yellow, Consul Magenta, Nomad Green, etc.). The voice is engineer-direct and operationally literate: declarative IaC, deliberate APIs, and a strong preference for the live terraform apply over the marketing abstraction.
Tags: tech, hashicorp, devops, infrastructure-as-code, dark-canvas
Atoms
Palette
HashiCorp · [email protected] · Proprietary — All Rights Reserved
HashiCorp brand palette anchored on the corporate HashiCorp Yellow (#FFCD00) — the signature corporate accent used on the HashiCorp parent wordmark — paired with the product-family accents that identify each HashiCorp tool: Terraform Purple, Vault Yellow, Consul Magenta, Nomad Green, Boundary Pink, Packer Blue, Vagrant Blue, and Waypoint Sky. The corporate canvas is a deep near-black used on hashicorp.com and the developer.hashicorp.com chrome.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
hashicorp-yellow |
HashiCorp Yellow | #FFCD00 |
hashicorp-yellow-dark |
HashiCorp Yellow Dark | #D9AE00 |
hashicorp-black |
HashiCorp Black | #000000 |
hashicorp-canvas |
HashiCorp Canvas | #0E0E10 |
hashicorp-canvas-deep |
HashiCorp Canvas Deep | #050507 |
terraform-purple |
Terraform Purple | #7B42BC |
vault-yellow |
Vault Yellow | #FFEC6E |
consul-magenta |
Consul Magenta | #E03875 |
nomad-green |
Nomad Green | #00CA8E |
boundary-pink |
Boundary Pink | #F24C53 |
packer-blue |
Packer Blue | #1DAEFF |
waypoint-sky |
Waypoint Sky | #14C6CB |
hashicorp-ink |
HashiCorp Ink | #1B1B1F |
hashicorp-gray |
HashiCorp Gray | #6F7682 |
hashicorp-gray-light |
HashiCorp Gray Light | #9CA0A8 |
hashicorp-surface |
HashiCorp Surface | #F4F4F7 |
hashicorp-border |
HashiCorp Border | #DDDFE4 |
hashicorp-white |
HashiCorp White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
hashicorp-white |
#FFFFFF |
surface |
hashicorp-surface |
#F4F4F7 |
surface-elevated |
hashicorp-white |
#FFFFFF |
text-primary |
hashicorp-ink |
#1B1B1F |
text-secondary |
hashicorp-gray |
#6F7682 |
text-tertiary |
hashicorp-gray-light |
#9CA0A8 |
primary |
hashicorp-yellow |
#FFCD00 |
primary-hover |
hashicorp-yellow-dark |
#D9AE00 |
accent |
terraform-purple |
#7B42BC |
accent-hover |
consul-magenta |
#E03875 |
warning |
vault-yellow |
#FFEC6E |
warning-hover |
hashicorp-yellow-dark |
#D9AE00 |
error |
boundary-pink |
#F24C53 |
success |
nomad-green |
#00CA8E |
border |
hashicorp-border |
#DDDFE4 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
hashicorp-canvas-deep |
#050507 |
surface |
hashicorp-canvas |
#0E0E10 |
surface-elevated |
hashicorp-black |
#000000 |
text-primary |
hashicorp-white |
#FFFFFF |
text-secondary |
hashicorp-surface |
#F4F4F7 |
text-tertiary |
hashicorp-gray-light |
#9CA0A8 |
primary |
hashicorp-yellow |
#FFCD00 |
primary-hover |
hashicorp-yellow-dark |
#D9AE00 |
accent |
terraform-purple |
#7B42BC |
accent-hover |
consul-magenta |
#E03875 |
warning |
vault-yellow |
#FFEC6E |
warning-hover |
hashicorp-yellow-dark |
#D9AE00 |
error |
boundary-pink |
#F24C53 |
success |
nomad-green |
#00CA8E |
border |
hashicorp-canvas |
#0E0E10 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
hashicorp-canvas |
#0E0E10 |
on-identity |
hashicorp-yellow |
#FFCD00 |
primary |
hashicorp-yellow |
#FFCD00 |
primary-hover |
hashicorp-yellow-dark |
#D9AE00 |
accent |
terraform-purple |
#7B42BC |
accent-hover |
consul-magenta |
#E03875 |
background |
hashicorp-white |
#FFFFFF |
surface |
hashicorp-surface |
#F4F4F7 |
surface-elevated |
hashicorp-white |
#FFFFFF |
text-primary |
hashicorp-ink |
#1B1B1F |
text-secondary |
hashicorp-gray |
#6F7682 |
text-tertiary |
hashicorp-gray-light |
#9CA0A8 |
chrome |
hashicorp-canvas |
#0E0E10 |
chrome-deep |
hashicorp-canvas-deep |
#050507 |
product-terraform |
terraform-purple |
#7B42BC |
product-vault |
vault-yellow |
#FFEC6E |
product-consul |
consul-magenta |
#E03875 |
product-nomad |
nomad-green |
#00CA8E |
product-boundary |
boundary-pink |
#F24C53 |
product-packer |
packer-blue |
#1DAEFF |
product-waypoint |
waypoint-sky |
#14C6CB |
mark |
hashicorp-yellow |
#FFCD00 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (4)
colorChoice → logo.wordmark.fill
- allowed: hashicorp-black, hashicorp-white, hashicorp-yellow
- forbidden: terraform-purple, consul-magenta, nomad-green, boundary-pink
The HashiCorp corporate wordmark renders in black, reversed white, or the corporate yellow. The product-family accents identify specific products (Terraform, Consul, Nomad, Boundary) and must not stand in for the parent corporate mark.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, product-accent-on-corporate-wordmark, gradient-fill
HashiCorp's brand guidelines explicitly prohibit altering the proportions or color of the corporate wordmark and restrict per-product accent colors to their owning product surfaces (Terraform Purple on Terraform, not on the corporate wordmark).
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
HashiCorp Ink (#1B1B1F) on HashiCorp White gives ~17:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on hashicorp.com and the HCP console.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. HashiCorp's marketing and HCP console surfaces both target AA as the accessibility floor for developer tooling.
⚠️ warning (2)
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
HashiCorp Yellow on HashiCorp White is contrast-marginal — it does not clear AA for body-sized text and barely clears AA-large. Use the yellow as a CTA / heading accent against the dark canvas (where it clears ~14:1), not as body copy on white.
contextRestriction → roles.colors.product-terraform
- forbiddenContexts: corporate-marketing, parent-brand-surfaces
- allowedContexts: terraform, hcp-terraform, terraform-registry
Terraform Purple is the product accent for Terraform and Terraform-related surfaces. Using Terraform Purple on corporate / parent-brand surfaces undermines the product- family color system that lets readers identify which HashiCorp product a surface belongs to.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: hashicorp-canvas, hashicorp-canvas-deep, hashicorp-black
- doesNotPairWith: vault-yellow
The signature corporate yellow lives against the near-black canvas — the highest-contrast brand composition. Pairing corporate yellow with Vault Yellow on the same surface creates a two-yellow composition that reads as a brand- hierarchy error.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
HashiCorp's marketing surfaces use Inter for both heading and body. Keep headings at least 1.5× body to preserve hierarchy when one family does both jobs.
Provenance
- Source: https://www.hashicorp.com/brand
- License:
Proprietary — All Rights Reserved - Attribution: HashiCorp, the HashiCorp logo, Terraform, Vault, Consul, Nomad, Boundary, Packer, Vagrant, and Waypoint are trademarks of HashiCorp, Inc. Brand colors and identity guidance documented here are derived from hashicorp.com/brand and the product brand pages (terraform.io, vaultproject.io, consul.io, nomadproject.io, boundaryproject.io, packer.io, waypointproject.io).
- Imported:
2026-05-18 - Notes: Brand-atoms' read of HashiCorp's publicly available brand surface and the per-product brand pages. This file is not an official HashiCorp brand-guidelines document. HashiCorp leans dark in marketing (hashicorp.com hero canvas is near-black); the dark-canvas identity is encoded here. No asset files are bundled; HashiCorp's product logos are trademarked.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by HashiCorp
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
HashiCorp
A clear hierarchy in HashiCorp's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ terraform-purple #7B42BC accent-hover
→ consul-magenta #E03875 background
→ hashicorp-white #FFFFFF chrome
→ hashicorp-canvas #0E0E10 chrome-deep
→ hashicorp-canvas-deep #050507 identity
→ hashicorp-canvas #0E0E10 mark
→ hashicorp-yellow #FFCD00 on-identity
→ hashicorp-yellow #FFCD00 primary
→ hashicorp-yellow #FFCD00 primary-hover
→ hashicorp-yellow-dark #D9AE00 product-boundary
→ boundary-pink #F24C53 product-consul
→ consul-magenta #E03875 product-nomad
→ nomad-green #00CA8E product-packer
→ packer-blue #1DAEFF product-terraform
→ terraform-purple #7B42BC product-vault
→ vault-yellow #FFEC6E product-waypoint
→ waypoint-sky #14C6CB surface
→ hashicorp-surface #F4F4F7 surface-elevated
→ hashicorp-white #FFFFFF text-primary
→ hashicorp-ink #1B1B1F text-secondary
→ hashicorp-gray #6F7682 text-tertiary
→ hashicorp-gray-light #9CA0A8 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from hashicorp)
Light mode (15 roles)
accent
→ terraform-purple accent-hover
→ consul-magenta background
→ hashicorp-white border
→ hashicorp-border error
→ boundary-pink primary
→ hashicorp-yellow primary-hover
→ hashicorp-yellow-dark success
→ nomad-green surface
→ hashicorp-surface surface-elevated
→ hashicorp-white text-primary
→ hashicorp-ink text-secondary
→ hashicorp-gray text-tertiary
→ hashicorp-gray-light warning
→ vault-yellow warning-hover
→ hashicorp-yellow-dark Dark mode (15 roles)
accent
→ terraform-purple accent-hover
→ consul-magenta background
→ hashicorp-canvas-deep border
→ hashicorp-canvas error
→ boundary-pink primary
→ hashicorp-yellow primary-hover
→ hashicorp-yellow-dark success
→ nomad-green surface
→ hashicorp-canvas surface-elevated
→ hashicorp-black text-primary
→ hashicorp-white text-secondary
→ hashicorp-surface text-tertiary
→ hashicorp-gray-light warning
→ vault-yellow warning-hover
→ hashicorp-yellow-dark Rules (8 typed constraints)
error · 4 rules
colorChoice logo.wordmark.fill allowed hashicorp-black, hashicorp-white, hashicorp-yellow forbidden terraform-purple, consul-magenta, nomad-green, boundary-pink The HashiCorp corporate wordmark renders in black, reversed white, or the corporate yellow. The product-family accents identify specific products (Terraform, Consul, Nomad, Boundary) and must not stand in for the parent corporate mark.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, product-accent-on-corporate-wordmark, gradient-fill HashiCorp's brand guidelines explicitly prohibit altering the proportions or color of the corporate wordmark and restrict per-product accent colors to their owning product surfaces (Terraform Purple on Terraform, not on the corporate wordmark).
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA HashiCorp Ink (#1B1B1F) on HashiCorp White gives ~17:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on hashicorp.com and the HCP console.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. HashiCorp's marketing and HCP console surfaces both target AA as the accessibility floor for developer tooling.
warning · 2 rules
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large HashiCorp Yellow on HashiCorp White is contrast-marginal — it does not clear AA for body-sized text and barely clears AA-large. Use the yellow as a CTA / heading accent against the dark canvas (where it clears ~14:1), not as body copy on white.
contextRestriction roles.colors.product-terraform forbiddenContexts corporate-marketing, parent-brand-surfaces allowedContexts terraform, hcp-terraform, terraform-registry Terraform Purple is the product accent for Terraform and Terraform-related surfaces. Using Terraform Purple on corporate / parent-brand surfaces undermines the product- family color system that lets readers identify which HashiCorp product a surface belongs to.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith hashicorp-canvas, hashicorp-canvas-deep, hashicorp-black doesNotPairWith vault-yellow The signature corporate yellow lives against the near-black canvas — the highest-contrast brand composition. Pairing corporate yellow with Vault Yellow on the same surface creates a two-yellow composition that reads as a brand- hierarchy error.
fontPairing typography.heading requires body minSizeRatio 1.5 HashiCorp's marketing surfaces use Inter for both heading and body. Keep headings at least 1.5× body to preserve hierarchy when one family does both jobs.
Provenance
- Source
- https://www.hashicorp.com/brand
- License
Proprietary — All Rights Reserved- Attribution
- HashiCorp, the HashiCorp logo, Terraform, Vault, Consul, Nomad, Boundary, Packer, Vagrant, and Waypoint are trademarks of HashiCorp, Inc. Brand colors and identity guidance documented here are derived from hashicorp.com/brand and the product brand pages (terraform.io, vaultproject.io, consul.io, nomadproject.io, boundaryproject.io, packer.io, waypointproject.io).
- Imported
2026-05-18- Notes
- Brand-atoms' read of HashiCorp's publicly available brand surface and the per-product brand pages. This file is not an official HashiCorp brand-guidelines document. HashiCorp leans dark in marketing (hashicorp.com hero canvas is near-black); the dark-canvas identity is encoded here. No asset files are bundled; HashiCorp's product logos are trademarked.