HashiCorp

Overview

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.

Colors

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

Typography

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.

Layout

Spacing System

• **Base unit**: 8px (the primary increments are 4 / 8 / 12 / 16 / 24 / 32 / 48).
• **Tokens (front matter)**: `{spacing.hair}` 1px · `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• Card interior padding: `{spacing.lg}` 24px on product cards; `{spacing.xl}` 32px on pricing cards; `{spacing.xxl}` 48px on CTA banners.
• Button padding: 10px vertical · 18px horizontal on `{components.button-primary}`.
• Universal rhythm constant: `{spacing.section}` (96px) vertical gap between major sections.

Grid & Container

• Max content width sits around 1280px with side gutters scaling from `{spacing.xxl}` on desktop down to `{spacing.lg}` on mobile.
• Product card grids are 3-up on desktop, 2-up at tablet, 1-up on mobile.
• Pricing tier grid is 3-up across desktop; comparison table beneath uses fixed-width left column.
• Resource directory (PDF library) uses 4-up dense thumbnail grid.

Whitespace Philosophy

The dark canvas IS the whitespace. Sections separate by surface lift (canvas → surface-1) rather than by gaps in white. Within a section, generous `{spacing.xl}` 32px gaps separate cards; `{spacing.lg}` 24px separates rows.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow, no border | Canvas-mounted display type, hero, footer |

| 1 (charcoal lift) | `{colors.surface-1}` background + 1px `rgba(178,182,189,0.1)` border | Default cards, resource tiles, pricing cards |

| 2 (surface-2 lift) | `{colors.surface-2}` background + 1px `{colors.hairline}` border | Featured pricing card, hovered cards, sub-nav |

| 3 (product chromatic) | Per-product accent color background — Terraform purple, Vault yellow, Waypoint cyan | Product showcase cards |

The product chromatic level isn't a "modal lift" — it's an identity device. A Terraform card sits at the same z-plane as a feature-card; the difference is meaning, not depth.

Decorative Depth

• **3D product visuals** — isometric purple cubes (Terraform), translucent yellow safes (Vault), and similar product-tinted illustrations sit in the right column of hero sections.
• **1px translucent gray hairlines** are the dominant edge — borders are visible without competing.
• **No drop shadows on dark.** Cards lift via surface change, never shadow.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Small chips / badges |

| `{rounded.sm}` | 6px | Inline tag |

| `{rounded.md}` | 8px | All CTA buttons, form inputs, list items |

| `{rounded.lg}` | 12px | Feature cards, product cards, pricing cards |

| `{rounded.xl}` | 16px | Large illustrative tiles |

| `{rounded.xxl}` | 24px | CTA banner panels |

| `{rounded.pill}` | 9999px | Eyebrow-style product pills (small chips) |

| `{rounded.full}` | 9999px | Avatar circles (rare on marketing) |

Photography & Illustration Geometry

• Product 3D illustrations use full-bleed within their container — no rounded inner mask.
• Logo chips in the customer marquee sit on `{rounded.sm}` 6px tiles with 1px hairline.
• Resource thumbnails use `{rounded.lg}` 12px corners.

Components

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.

Footer

**`footer`** — Dense link grid on `{colors.canvas}` with the wordmark at left and 5–6 columns of caption-sized links.

• Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, padding 64px 32px.

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.

Responsive Behavior

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.

Iteration Guide

1. Focus on ONE component at a time and reference it by its `components:` token name.

2. When introducing a new section, decide first whether it's a generic feature (surface-1) or a product-identity section (product-* color).

3. Default body to `{typography.body}` at 500 weight; reach for `{typography.subhead}` only inside CTA banners and feature cards.

4. Run `npx @google/design.md lint DESIGN.md` after edits.

5. Add new product variants as separate component entries (`product-card-nomad`, `button-product-consul`, etc.).

6. Treat the per-product palette as identity tokens, not decoration. If you reach for a product color outside its product context, the brand is drifting.

7. Eyebrow type is mandatory above every section — skipping it makes sections read as floating.

Known Gaps

• The exact product-color hex values come from the `--mds-color-*` CSS variable set extracted directly; they are HashiCorp's canonical brand spec.
• Shadow tokens are not extensively documented because the dark surface system uses surface lift instead of shadow elevation.
• Form-field error and validation styling is not visible on the inspected pages.
• Dark mode is the only marketing mode — light-mode adaptation is not documented.
• Product-card variants for Consul, Nomad, Vagrant, and Boundary follow the documented Terraform / Vault / Waypoint pattern but are referenced in prose only; if they need formal entries they can be added as `product-card-consul`, `product-card-nomad`, etc.

개요

HashiCorp의 마케팅 캔버스는 결코 일반적인 느낌 없이 다양한 제품 포트폴리오를 제공하는 거의 암울한 환경입니다. 주요 표면은 `{colors.surface-1}` 목탄 카드와 1px 반투명 회색 헤어라인으로 구성된 `{colors.canvas}`(순수 검정색)입니다. 크롬은 단색(흰색 알약 모양의 버튼(`{comComponents.button-primary}`), 흰색 유형, 회색 보조 유형)이지만 시스템은 특정 섹션이 어떤 HashiCorp 도구에 속하는지 나타내는 **제품별 강조 색상 팔레트**(Terraform 보라색, Vault 노란색, Consul 빨간색, Waypoint 청록색, Vagrant 파란색, Nomad 녹색, 경계 산호)로 함께 유지됩니다.

디스플레이 유형은 가중치가 600/700이고 선 높이가 빡빡한(1.17–1.21) **hashicorpSans**입니다. 체형은 의도적으로 편안한 라인 높이(1.50–1.71)를 가진 500 체중의 동일한 제품군입니다. 대비는 엔터프라이즈 템플릿이 아닌 편집적인 느낌입니다. CTA는 알약 대신 작은 `{rounded.md}` 8px 모서리를 사용하여 시스템이 소비자용이 아닌 개발자용으로 읽히도록 합니다.

시그니처 장치는 **제품 카드** 제품군입니다. 각 HashiCorp 제품은 홈 및 인프라 페이지에 고유한 색상의 카드 변형이 있어 Terraform을 보라색 바탕으로, Vault를 노란색으로, Waypoint를 청록색으로 끌어올립니다. 이는 장식적인 그라디언트가 아니라 식별 표면입니다. 페이지를 스크롤하는 독자는 곁눈질로 해당 섹션이 어떤 제품에 관한 것인지 알 수 있습니다.

**주요 특징:**

• 블랙 캔버스 마케팅 시스템: `{colors.canvas}`는 영웅, 본문, 가격, 비교 테이블 및 바닥글의 표면입니다.
• **제품별 색상 ID**: Terraform `{colors.product-terraform}`, Vault `{colors.product-vault}`, Waypoint `{colors.product-waypoint}`, Vagrant `{colors.product-vagrant}`, Consul `{colors.product-consul}`, Nomad `{colors.product-nomad}`, 경계 `{colors.product-boundary}` — 각각 자체 버튼이 있음 + 카드 변형.
• 디스플레이 헤드라인은 줄 높이가 1.17~1.21(촘촘함)인 hashicorpSans 600/700을 실행합니다. body는 1.50~1.71(완화)로 500에서 동일한 제품군을 운영합니다. 비례적인 격차는 브랜드의 목소리입니다.
• CTA 모양은 `{rounded.md}` 8px입니다(알약이 아님). 시스템이 소비자 앱이 아닌 개발자 도구로 읽히도록 유지합니다.
• 그림자 중심의 엘리베이션 대신 목탄 표면 리프트(캔버스 → 표면-1 → 표면-2).
• 1px 반투명 회색 가는선(`rgba(178,182,189,0.1)`)은 카드와 구분선을 정의합니다. 테두리는 보이는 것보다 더 느껴집니다.
• 눈썹 타이포그래피(12~13px, 600 두께, 0.6px 포지티브 트래킹, 대문자)는 모든 섹션을 카테고리 라벨로 표시합니다.

색상

> 소스 페이지: hashicorp.com/en(홈), /en/infrastructure-cloud, /en/products/terraform, /en/pricing, /en/resources?contentType=PDF.

브랜드 및 액센트

• **검은색** ({colors.primary}): 시스템 기본 표면입니다. 캔버스, 바닥글, 비교표, 히어로 — 모두 검정색입니다.
• **흰색** ({colors.on-primary}): 검정색 바탕에 텍스트 반전; `버튼 기본`의 캔버스.
• **Accent Blue** ({colors.accent-blue}): 마케팅 표면 전반의 하이퍼링크입니다.
• **Visited Purple** ({colors.semantic-visited}): 방문한 링크 상태입니다.

표면

• **캔버스** ({colors.canvas}): 기본 페이지 배경입니다.
• **표면 1**({colors.surface-1}): 캔버스 위의 차콜색 — 기능 카드, 가격 카드, 리소스 타일.
• **Surface 2** ({colors.surface-2}): 위의 두 단계 — 추천 가격 카드, 보조 버튼, 마우스 오버된 제품 크롬.
• **Surface 3** ({colors.surface-3}): 위의 3단계 — 작은 칩, 배지, 하위 탐색 배경.
• **헤어라인**({colors.hairline}): 카드 및 구분선의 1px 테두리입니다.
• **Hairline Soft** ({colors.hairline-soft}): 미묘한 구분선 — 비교 테이블 행.
• **역 캔버스** ({colors.inverse-canvas}): 순백색 — `button-primary` 표면으로만 사용됩니다.

텍스트

• **잉크**({colors.ink}): 모든 헤드라인과 강조된 본문 유형 — 순백색입니다.
• **잉크 음소거** ({colors.ink-muted}): #b2b6bd의 보조 유형 — 메타 정보, 바닥글 열.
• **Ink Subtle** ({colors.ink-subtle}): #656a76의 3차 유형 — 양식 도우미 텍스트, 타임스탬프, 각주.

제품별 신원(서명)

HashiCorp의 마케팅은 단일 강조 색상으로 결합되지 않습니다. 각 섹션이 어떤 도구를 나타내는지 표시하는 데 사용되는 제품별 강조 색상 시스템으로 결합됩니다.

• **Terraform Purple** ({colors.product-terraform}): Terraform 섹션, Terraform CTA, 홈 히어로의 보라색 3D 큐브.
• **Terraform Bright** ({colors.product-terraform-bright}): 채도 높은 강조 표시 — Terraform 페이지의 링크 강조.
• **Vault Yellow** ({colors.product-vault}): Vault 섹션 및 CTA.
• **Consul Red** ({colors.product-consul}): Consul 섹션.
• **Waypoint Cyan** ({colors.product-waypoint}): 웨이포인트 섹션, hover/active에 대한 심층 변형 `{colors.product-waypoint-deep}`.
• **Vagrant Blue** ({colors.product-vagrant}): Vagrant 섹션입니다.
• **노마드 그린** ({colors.product-nomad}): 노마드 섹션.
• **경계산호** ({colors.product-b

概要

HashiCorp のマーケティング キャンバスは、汎用性を感じさせずに複数の製品ポートフォリオを提供するほぼ黒地です。主要なサーフェスは、`{colors.canvas}` (純粋な黒) で、これに `{colors.surface-1}` 木炭カードと 1 ピクセルの半透明のグレーのヘアラインが重ねられています。クロムはモノクロです — 白い錠剤の丸いボタン (`{components.button-primary}`)、白のタイプ、灰色のセカンダリ タイプ — しかし、システムは、特定のセクションがどの HashiCorp ツールに属しているかを示す **製品ごとのアクセント カラーのパレット**によってまとめられています: Terraform パープル、Vault イエロー、Consul レッド、ウェイポイント シアン、Vagrant ブルー、Nomad グリーン、Boundary Coral。

表示タイプは **bashicorpSans** で、重みは 600/700、線の高さはタイト (1.17 ～ 1.21) です。ボディタイプはウェイト 500 の同じファミリーで、ラインの高さは意図的に緩和されています (1.50 ～ 1.71)。このコントラストは企業向けのテンプレートではなく、編集的なもののように感じられます。 CTA は錠剤ではなく小さな `{rounded.md}` 8 ピクセルの角を使用するため、システムは消費者向けではなく開発者向けとして読み取られます。

署名デバイスは **product-card** ファミリです。各 HashiCorp 製品には、ホーム ページとインフラストラクチャ ページに独自のカラー カード バリアントがあり、Terraform を紫色の地面に、Vault を黄色に、Waypoint をシアン色に持ち上げます。これらは装飾的なグラデーションではなく、アイデンティティ サーフェスです。ページをスクロールしている読者は、そのセクションがどの製品に関するものであるかを目の端で知ることができます。

**主な特徴:**

• ブラック キャンバス マーケティング システム: `{colors.canvas}` は、ヒーロー、本体、価格設定、比較表、フッターなどの表面です。
• **製品ごとのカラー ID**: 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}` — それぞれに独自のボタンとカードのバリエーションがあります。
• 表示見出しは、行の高さ 1.17 ～ 1.21 (タイト) の hach​​icorpSans 600/700 で実行されます。ボディは、500 で 1.50 ～ 1.71 (リラックス) の同じファミリーを実行します。比例的なギャップがブランドの声です。
• CTA の形状は `{rounded.md}` 8px で、錠剤ではありません。システムは消費者アプリではなく開発者ツールとして認識されます。
• シャドウ駆動の標高ではなく、木炭のサーフェス リフト (キャンバス → サーフェス 1 → サーフェス 2)。
• 1 ピクセルの半透明のグレーのヘアライン (「rgba(178,182,189,0.1)」) がカードと仕切りを定義します。境界線は目に見えるというよりも感じられます。
• 眉毛タイポグラフィ (12 ～ 13 ピクセル、600 ウェイト、0.6 ピクセル ポジティブ トラッキング、大文字) は、すべてのセクションをカテゴリ ラベルとしてマークします。

色

> ソース ページ: bashicorp.com/en (ホーム)、/en/infrastructure-cloud、/en/products/terraform、/en/pricing、/en/resources?contentType=PDF。

ブランドとアクセント

• **黒** ({colors.primary}): システムのプライマリ サーフェス。キャンバス、フッター、比較テーブル、ヒーロー - すべて黒。
• **白** ({colors.on-primary}): 黒の反転テキスト。 `button-primary` のキャンバス。
• **アクセント ブルー** ({colors.accent-blue}): マーケティング画面全体のハイパーリンク。
• **訪問済み紫** ({colors.semantic-visited}): 訪問済みリンクの状態。

表面

• **キャンバス** ({colors.canvas}): デフォルトのページの背景。
• **Surface 1** ({colors.surface-1}): キャンバスの 1 つ上のチャコール — フィーチャー カード、価格設定カード、リソース タイル。
• **Surface 2** ({colors.surface-2}): 上の 2 つのステップ - 注目の価格カード、セカンダリ ボタン、ホバーされた製品クローム。
• **Surface 3** ({colors.surface-3}): 3 つ上のステップ — 小さなチップ、バッジ、サブナビゲーションの背景。
• **ヘアライン** ({colors.hairline}): カードと仕切りの 1 ピクセルの境界線。
• **Hairline Soft** ({colors.hairline-soft}): 微妙な区切り線 — 比較表の行。
• **反転キャンバス** ({colors.inverse-canvas}): 純白 — `button-primary` の表面としてのみ使用されます。

テキスト

• **インク** ({colors.ink}): すべての見出しと強調された本文タイプ - 純白。
• **インクミュート** ({colors.ink-muted}): #b2b6bd のセカンダリ タイプ — メタ情報、フッター列。
• **Ink Subtle** ({colors.ink-subtle}): #656a76 の第 3 タイプ — フォーム ヘルパー テキスト、タイムスタンプ、脚注。

製品ごとの ID (署名)

HashiCorp のマーケティングは、単一のアクセント カラーによってまとめられているのではなく、製品固有のアクセントのシステムによってまとめられており、各アクセントはセクションがどのツールを表すかを示すために使用されます。

• **Terraform パープル** ({colors.product-terraform}): Terraform セクション、Terraform CTA、ホーム ヒーロー上の紫色の 3D キューブ。
• **Terraform Bright** ({colors.product-terraform-b​​right}): 飽和したハイライト — Terraform ページのリンクを強調します。
• **Vault Yellow** ({colors.product-vault}): Vault セクションと CTA。
• **領事レッド** ({colors.product-consul}): 領事セクション。
• **ウェイポイント シアン** ({colors.product-waypoint}): ウェイポイント セクション、ホバー/アクティブ用のディープ バリアント `{colors.product-waypoint-deep}`。
• **Vagrant Blue** ({colors.product-vagrant}): Vagrant セクション。
• **Nomad Green** ({colors.product-nomad}): Nomad セクション。
• **境界コーラル** ({colors.product-b)