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

text-input · default
text-input · focused
text-input · disabled
textarea
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

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 accordion; nav hamburger
Mobile | 480px | Single-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.