01 — Color Palette

Palette

Brand & Accent
Black (canvas)
#000000
System primary surface — every page background.
White
#ffffff
Inverse text on black; surface of button-primary.
Accent Blue
#2b89ff
Hyperlinks across the marketing surface.
Surface
Surface 1
#15181e
Default cards, resource tiles, pricing cards.
Surface 2
#1f232b
Featured pricing card, secondary buttons.
Surface 3
#3b3d45
Small chips, badges, sub-nav backgrounds.
Hairline
rgba(178,182,189,0.12)
1px borders on cards and dividers.
Text
Ink
#ffffff
All headlines and emphasized body type.
Ink Muted
#b2b6bd
Secondary type — meta info, footer columns.
Ink Subtle
#656a76
Tertiary type — form helper text, footnotes.
Per-Product Identity (signature)
Terraform Purple
#7b42bc
Terraform sections, terraform CTAs.
Vault Yellow
#ffcf25
Vault sections and CTAs.
Consul Red
#e62b1e
Consul sections.
Waypoint Cyan
#14c6cb
Waypoint sections and CTAs.
Vagrant Blue
#1868f2
Vagrant sections.
Nomad Green
#00ca8e
Nomad sections.
Boundary Coral
#f24c53
Boundary sections.
Semantic
Success
#00ca8e
Positive states; reused as Nomad green.
Warning
#ffcf25
Warning states; reused as Vault yellow.
Error
#e62b1e
Error states; reused as Consul red.
02 — Typography Scale

Typography

display-xl80px · 700 · 1.17 · -2.5px · hashicorpSans
Do cloud right
display-lg56px · 700 · 1.18 · -1.6px
A smarter approach to infrastructure
display-md40px · 600 · 1.19 · -1.0px
Get started in minutes
headline28px · 600 · 1.21 · -0.6px
Pricing tier headline
card-title22px · 600 · 1.18 · -0.4px
Feature card title
subhead20px · 600 · 1.35 · -0.2px
Long-form intro paragraphs
body-lg18px · 500 · 1.69
Hero subhead and lead body — relaxed line-height intentional.
body16px · 500 · 1.50
Default body copy across feature cards and pricing descriptions.
body-sm14px · 500 · 1.71
Card body, footer columns, dense data.
caption13px · 500 · 1.38 · 0.2px
Meta and comparison-cell labels
button14px · 600 · 1.29
Sign up
eyebrow12px · 600 · 1.23 · 0.6px · UPPER
Section eyebrow label
03 — Button Variants

Buttons

button-primary
button-secondary
button-tertiary
button-product-terraform
button-product-vault
button-product-waypoint
button-product-vagrant
button-primary-pressed
04 — Product Identity Cards (signature)

Products

Each HashiCorp product has its own colored card variant. The color is identity, not decoration — a reader scrolling the page can tell which product a section is about from the corner of their eye.

product-card

Generic feature card

Default surface-1 charcoal — used when the section isn't tied to a specific product.

product-card-terraform

Terraform

Provision and manage any infrastructure as code.

product-card-vault

Vault

Secure, store, and tightly control access to secrets.

product-card-waypoint

Waypoint

A consistent workflow for application deployment.

product-card-vagrant

Vagrant

Build and manage portable development environments.

product-card-consul

Consul

Service networking across any cloud or runtime.

product-card-nomad

Nomad

A flexible, performant scheduler.

product-card-boundary

Boundary

Identity-driven access for distributed systems.

05 — Cards & Containers

Cards

pricing-card · Standard
Standard
$XX
  • Standard support
  • Per-resource pricing
  • Self-service onboarding
pricing-card-featured · Plus
Plus
$XX
  • Premium support
  • SSO & advanced auth
  • Audit logging
pricing-card · Enterprise
Enterprise
Talk to us
  • Custom volume pricing
  • White-glove support
  • Dedicated solutions architect
resource-card
Resource title
PDF · Whitepaper
Terraform
Tagged resource
cta-banner

Ready to do cloud right?

Get started in minutes with a free HashiCorp Cloud Platform account.

06 — Form Elements

Forms

07 — Spacing Scale

Spacing

hair · 1px
xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px
08 — Border Radius Scale

Radius

xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
xxl · 24px
pill · 9999
09 — Elevation & Depth

Elevation

Level 0 — flat
Level 1 — charcoal
Level 3 — Terraform
Level 3 — Vault
10 — Responsive Behavior

Responsive

NameWidthKey Changes
Desktop-XL1440pxDefault desktop layout
Desktop1280pxPricing 3-up grid maintained
Tablet1024pxProduct card grid 3-up → 2-up
Mobile-Lg768pxPricing comparison becomes accordion; nav hamburger
Mobile480pxSingle-column; display-xl scales 80px → ~36px
375
768
1024
1280
1440
Touch Targets
  • CTA buttons hold ≥40px tap height across viewports.
  • Product pills grow from 24px to 28px on touch viewports.
  • Form inputs hold ≥44px tap target on touch.
Collapsing Strategy
  • Nav: links collapse to hamburger below 768px; primary CTA stays.
  • Product card grid: 3-up → 2-up at 1024px → 1-up below 768px.
  • Pricing comparison table: per-tier accordion below 768px.