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의 마케팅 캔버스는 결코 일반적인 느낌 없이 여러 제품 포트폴리오를 제공하는 거의 암흑지대입니다. 주요 표면은 `` 목탄 카드와 1px 반투명 회색 헤어라인으로 구성된 ``(순수 검정색)입니다. 크롬은 단색(흰색 알약 둥근 버튼(``), 흰색 유형, 회색 보조 유형)이지만 시스템은 특정 섹션이 HashiCorp 도구에 속하는 것을 나타내는 **제품별 강조 색상 팔레트**(Terraform 보라색, Vault 노란색, Consul 빨간색, Waypoint 청록색, Vagrant 파란색, Nomad 녹색, 경계 산호색)로 함께 유지됩니다.
디스플레이 유형은 600/700의 가중치와 좁은 선 높이(1.17~1.21)의 **hashicorpSans**입니다. 체형은 의도적으로 편안한 라인 높이(1.50–1.71)를 가진 500 체중의 동일한 제품군입니다. 대비는 엔터프라이즈 템플릿이 아닌 편집적인 느낌입니다. CTA는 알약 대신 작은 `` 8픽셀 모서리를 사용하므로 시스템이 소비자용이 아닌 개발자용으로 읽힙니다.
시그니처 장치는 **제품 카드** 제품군입니다. 각 HashiCorp 제품은 홈 및 인프라 페이지에 고유한 색상의 카드 변형이 있어 Terraform을 보라색 바탕으로, Vault를 노란색으로, Waypoint를 청록색으로 바꿉니다. 이는 장식적인 그라디언트가 아니라 식별 표면입니다. 페이지를 스크롤하는 독자는 곁눈질로 해당 섹션이 어떤 제품에 관한 것인지 알 수 있습니다.
**주요 특성:**
- 블랙 캔버스 마케팅 시스템: ``은 영웅, 본문, 가격, 비교표 및 바닥글을 모두 표시하는 표면입니다.
- **제품별 색상 ID**: Terraform ``, Vault ``, Waypoint ``, Vagrant ``, Consul ``, Nomad ``, Boundary `` — 각각 고유한 버튼 + 카드 변형이 있습니다.
- 디스플레이 헤드라인은 줄 높이가 1.17~1.21(촘촘함)인 hashicorpSans 600/700을 실행합니다. body는 1.50~1.71(완화)로 500에서 동일한 제품군을 운영합니다. 비례적인 차이는 브랜드의 목소리입니다.
- CTA 모양은 알약이 아닌 `` 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}): 검정색 바탕에 텍스트 반전; `button-primary`.
의 캔버스
- **액센트 블루**({colors.accent-blue}): 마케팅 전반에 걸친 하이퍼링크.
- **방문한 보라색**({colors.semantic-visited}): 방문한 링크 상태.
표면
- **캔버스** ({colors.canvas}): 기본 페이지 배경.
- **표면 1**({colors.surface-1}): 캔버스 한 단계 위의 차콜 — 기능 카드, 가격 카드, 리소스 타일.
- **표면 2**({colors.surface-2}): 위의 두 단계 — 추천 가격 카드, 보조 버튼, 마우스로 가리킨 제품 크롬.
- **표면 3**({colors.surface-3}): 위의 3단계 — 작은 칩, 배지, 하위 탐색 배경.
- **가는 선**({colors.hairline}): 카드 및 구분선의 1px 테두리.
- **헤어라인 소프트**({colors.hairline-soft}): 미묘한 구분선 — 비교 테이블 행.
- **역 캔버스** ({colors.inverse-canvas}): 순백색 — `button-primary`의 표면으로만 사용됩니다.
텍스트
- **잉크** ({colors.ink}): 모든 헤드라인과 강조된 본문 유형 — 순백색.
- **잉크 음소거**({colors.ink-muted}): #b2b6bd의 보조 유형 — 메타 정보, 바닥글 열.
- **잉크 미묘함** ({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}): 영사 섹션.
- **웨이포인트 청록색**({colors.product-waypoint}): 웨이포인트 섹션, 호버/활성에 대한 심층 변형 ``.
- **방랑 블루** ({colors.product-vagrant}): 방랑 섹션.
- **노마드 그린**({colors.product-nomad}): 노마드 섹션.
- **경계 산호** ({colors.product-boundary}): 경계 섹션.
의미
- **성공**({colors.semantic-success}): 긍정적인 상태(Nomad 녹색으로도 재사용됨).
- **경고**({colors.semantic-warning}): 경고 상태(Vault 노란색도 있음).
- **오류** ({colors.semantic-error}): 오류 상태(Consul red라고도 함).
- **앰버 100** ({colors.amber-100}): 부드럽고 따뜻한 하이라이트 — 추출되었지만 드물게 사용됨.
- **호박색 200**({colors.amber-200}): 주의 배지용 포화 호박색.
- **블루 7** ({colors.blue-7}): 통합 코어 그래디언트에 사용되는 딥 네이비.
타이포그래피
글꼴군
- **hashicorpSans** — HashiCorp의 독점 마케팅 서체입니다. 기하학적이고 깨끗하며 약간 휴머니즘적입니다. 대체 스택 `__hashicorpSans_Fallback_96f0ca`(시스템 글꼴), 그 다음 `-apple-system, BlinkMacSystemFont, Segoe UI, helvetica, arial`.
동일한 제품군에는 디스플레이, 본문, 버튼 및 캡션이 포함되며 별도의 디스플레이 + 본문 페어링이 없습니다. 계층 구조는 가중치(본문 500 / 강조 600 / 디스플레이 700)와 의도적인 줄 높이 대비(디스플레이에서는 단단하고 본문에서는 느슨함)에 의해 전달됩니다.
계층
| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |
사용
|---|---|---|---|---|---|
| _`` | 80px | 700 | 1.17 | -2.5px | 가장 큰 영웅 헤드라인 |
| _`` | 56px | 700 | 1.18 | -1.6px | 섹션 오프너 헤드라인 |
| _`` | 40px | 600 | 1.19 | -1.0px | 하위 섹션 헤드라인 |
| _`` | 28px | 600 | 1.21 | -0.6px | 가격 등급 제목, CTA 배너 제목 |
| _`` | 22px | 600 | 1.18 | -0.4px | 기능 카드 제목 |
| _`` | 20픽셀 | 600 | 1.35 | -0.2px | 긴 형식의 소개 단락 |
| _`` | 18px | 500 | 1.69 | 0 | 영웅 부제목, 본문 |
| _`` | 16px | 500 | 1.50 | 0 | 기본 본문 |
| _`` | 14px | 500 | 1.71 | 0 | 카드 본문, 바닥글 열 |
| _`` | 13px | 500 | 1.38 | 0.2px | 메타, 비교 셀 라벨 |
| _`` | 14px | 600 | 1.29 | 0 | 알약/사각형 CTA 버튼 |
| _`` | 12px | 600 | 1.23 | 0.6px | 대문자 부분 눈썹 |
원칙
- **디스플레이는 딱 맞고 본체는 편안합니다.** 디스플레이는 줄 높이 1.17~1.21에 위치합니다. 신체 리프트는 1.50–1.71입니다. 크기 + 줄 높이 대비는 계층 구조를 전달합니다.
- **가중치 계층 구조가 작습니다.** 본문 500 / 강조 600 / 표시 700입니다. 밝음/검은색 극단 없음 — 브랜드는 엔지니어링된 것으로 읽혀집니다.
- **눈썹 포지티브 추적 대문자 12px가 섹션 헤더입니다.** 모든 의미 있는 섹션은 헤드라인 위에 하나가 있습니다.
- **모노 없음.** 개발자 도구 브랜드임에도 불구하고 마케팅 표면에서는 고정 폭 문자를 사용하지 않습니다. 코드 음성은 제품 내 표면용으로 예약되어 있습니다.
글꼴 대체에 대한 참고사항
hashicorpSans 없이 구현하는 경우 적합한 오픈 소스 대체품으로는 **Inter**(가장 가까운 기하학적 문자 집합), **Geist Sans** 또는 **IBM Plex Sans**가 있습니다. 가중치 500/600/700의 Inter는 hashicorpSans의 비율과 매우 유사합니다. 일치하도록 줄 높이를 ~0.02까지 수동으로 조정해야 합니다.
레이아웃
간격 시스템
- **기본 단위**: 8px(기본 증분은 4/8/12/16/24/32/48).
- **토큰(머리말)**: `` 1px · `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
- 카드 내부 패딩: `` 제품 카드의 24px; `` 가격 카드의 32px; `` CTA 배너의 48px.
- 버튼 패딩: ``에서 세로 10px · 가로 18px.
- 범용 리듬 상수: ``(96px) 주요 섹션 사이의 수직 간격.
그리드 및 컨테이너
- 최대 콘텐츠 너비는 데스크톱의 ``에서 모바일의 ``까지 측면 여백 크기가 조정되는 약 1280픽셀입니다.
- 제품 카드 그리드는 데스크톱의 경우 3-up, 태블릿의 경우 2-up, 모바일의 경우 1-up입니다.
- 가격 등급 표는 데스크톱 전체에 걸쳐 3단계입니다. 아래 비교표는 고정 너비 왼쪽 열을 사용합니다.
- 리소스 디렉터리(PDF 라이브러리)는 4개의 조밀한 썸네일 그리드를 사용합니다.
공백 철학
어두운 캔버스는 공백입니다. 흰색의 간격이 아닌 표면 리프트(캔버스 → 표면-1)로 섹션이 분리됩니다. 섹션 내에는 넉넉한 `` 32px 간격의 별도 카드가 있습니다. `` 24px는 행을 구분합니다.
고도 및 깊이
| 레벨 | 치료 | |
사용
|---|---|---|
| 0(플랫) | 그림자 없음, 테두리 없음 | 캔버스 장착 디스플레이 유형, 영웅, 바닥글 |
| 1(숯 리프트) | `` 배경 + 1px `rgba(178,182,189,0.1)` 테두리 | 기본 카드, 리소스 타일, 가격 카드 |
| 2(표면-2 리프트) | _`` 배경 + 1px `` 테두리 | 추천 가격 카드, 마우스 오버 카드, 하위 탐색 |
| 3(제품 반음계) | 제품별 강조 색상 배경 — Terraform 보라색, Vault 노란색, Waypoint 청록색 | 제품 쇼케이스 카드 |
제품 색채 수준은 "모달 리프트"가 아니라 식별 장치입니다. Terraform 카드는 기능 카드와 동일한 z 평면에 위치합니다. 차이점은 깊이가 아니라 의미입니다.
장식적 깊이
- **3D 제품 시각적 요소** — 아이소메트릭 보라색 큐브(Terraform), 반투명 노란색 금고(Vault) 및 유사한 제품 색조 일러스트레이션이 히어로 섹션의 오른쪽 열에 있습니다.
- **1px 반투명 회색 가는선**이 주요 가장자리입니다. 경쟁 없이 테두리가 보입니다.
- **어두운 곳에서는 그림자가 없습니다.** 카드는 표면 변화를 통해 들어올려지며 그림자가 생기지 않습니다.
도형
경계 반경 배율
| 토큰 | 가치 | |
사용
|---|---|---|
| _`` | 4픽셀 | 작은 칩/배지 |
| _`` | 6픽셀 | 인라인 태그 |
| _`` | 8픽셀 | 모든 CTA 버튼, 양식 입력, 목록 항목 |
| _`` | 12px | 기능 카드, 제품 카드, 가격 카드 |
| _`` | 16px | 대형 일러스트 타일 |
| _`` | 24px | CTA 배너 패널 |
| _`` | 9999px | 눈썹형 제품 알약(작은 칩) |
| _`` | 9999px | 아바타 서클(마케팅에서는 드물다) |
사진 및 일러스트레이션 기하학
- 제품 3D 일러스트레이션은 컨테이너 내에서 풀 블리드를 사용하며 둥근 내부 마스크가 없습니다.
- 고객 윤곽의 로고 칩은 `` 1픽셀 헤어라인이 있는 6픽셀 타일에 있습니다.
- 리소스 축소판은 `` 12픽셀 모서리를 사용합니다.
구성요소
버튼
**`button-primary`** — 흰색 둥근 직사각형 CTA. 모든 페이지에서 기본 CTA로 사용됩니다.
- 배경 ``, 텍스트 ``, 유형 ``, 패딩 10px 18px, 반올림 ``.
- 눌린 상태는 `button-primary-pressed`.
에 있습니다.
**`button-secondary`** — 차콜색 둥근 직사각형. 보조 CTA, '문서 읽기'/'영업팀에 문의'.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 18px.
**`button-tertiary`** — 텍스트만 처리된 캔버스의 고스트 버튼만 표시됩니다.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 18px.
**`button-product-terraform`** — Terraform 페이지의 Terraform 색상 CTA.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 18px.
**`button-product-vault`** — 노란색 볼트 CTA.
- 배경 ``, 텍스트 ``(노란색에는 어두운 텍스트 필요), 유형 ``, 반올림 ``, 패딩 10px 18px.
**`button-product-waypoint`** — 웨이포인트 청록색 CTA.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 18px.
(Vagrant blue, Nomad green, Consul red, Boundary coral은 각각의 `` 토큰과 동일한 패턴을 따릅니다.)
카드 및 용기
**`product-card`** — 기본 제품 쇼케이스 카드 — 표면-1 목탄.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.
**`product-card-terraform`** — Terraform 보라색 바탕이 있는 제품 카드(모달 고도가 아닌 식별 표면으로 사용됨)
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.
**`product-card-vault`** — 둥근 노란색 땅.
- 배경 ``, 텍스트 ``, 그 외에는 동일한 구조.
**`product-card-waypoint`** — 웨이포인트-청록색 지면.
- 배경 ``, 텍스트 ``, 그 외에는 동일한 구조.
(다른 제품 변형은 해당 제품 토큰과 동일한 모양을 따릅니다.)
**`feature-card`** — 표면-1의 일반 기능 강조 표시.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.
**`pricing-card`** — `/en/pricing`.
의 가격 등급
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 32px.
**`pricing-card-featured`** — 권장 계층(표면 리프트를 통해 시각적으로 강조됨).
**`resource-card`** — 리소스 디렉토리의 PDF/백서/가이드 타일.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 16px.
입력 및 양식
**`text-input`** + **`text-input-focused`** — 좌석 수 가격 책정 및 문의 양식에 대한 양식 필드.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 14px.
- 초점 상태는 동일한 표면을 유지합니다. 포커스 링은 1px `` 윤곽선입니다.
알약 및 칩
**`product-pill`** — 주요 헤드라인 위와 리소스 카드에 사용되는 작은 제품 이름 칩으로 콘텐츠가 속한 제품에 라벨을 붙입니다.
- 배경 ``, 텍스트 ___CODEBCK_831_ __, 유형 ``, 반올림 ``, 패딩 4px 10px.
비교표
**`comparison-row`** — 가격 비교표 내의 단일 행.
- 배경 ``, 텍스트 ``, 유형 ``. 행 구분 기호는 ``.
입니다.
CTA 배너
**`cta-banner`** — 닫는 CTA가 있는 긴 형식 페이지의 하단에 사용되는 크고 둥근 패널입니다.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 48px.
탐색
**`top-nav`** — 왼쪽에 HashiCorp 로고 마크가 있고 기본 탐색 링크가 중앙에 있고 오른쪽에 `button-primary`("가입") + `button-secondary`("로그인") 쌍이 있는 끈적끈적한 검정색 막대.
- 배경 ``, 텍스트 ``, 유형 ``, 높이 64px.
- 모바일: 기본 링크를 햄버거로 축소합니다. 기본 CTA는 계속 표시됩니다.
바닥글
_**`footer`** — 왼쪽에 워드마크가 있고 5~6열의 캡션 크기 링크가 있는 ``의 밀집 링크 그리드입니다.
- 배경 ``, 텍스트 ``, 유형 ``, 패딩 64px 32px.
해야 할 일과 하지 말아야 할 일
하라
- ``(검은색) 및 ``(숯)을 시스템의 두 앵커 표면으로 예약합니다. 페이지의 모든 밴드는 둘 중 하나입니다.
- 특정 HashiCorp 제품에 대한 섹션을 소개할 때 섹션 알약, CTA 버튼 및 (해당하는 경우) 쇼케이스 카드 배경에 해당 제품의 `` 토큰을 일관되게 사용하세요.
- CTA 버튼에 `` 8px를 사용하세요. HashiCorp의 브랜드는 소비자가 아닌 엔지니어링으로 읽혀집니다.
- 좁은 디스플레이 라인 높이(1.17~1.21)와 편안한 바디 라인 높이(1.50~1.71)를 결합합니다. 대조는 브랜드 목소리입니다.
- 의미 있는 모든 섹션 위에 눈썹 타이포그래피(``, 대문자, 0.6px 자간)를 사용하세요.
- 어두운 곳에 계층을 표현하려면 표면 리프트(캔버스 → 표면-1 → 표면-2)를 사용하세요.
- 제품 식별을 위해 제품 크로매틱 카드를 예약하세요. ``.
에 일반 기능 카드를 보관하세요.
하지 마세요
- 라이트 모드 마케팅 페이지를 제공하지 마세요. HashiCorp의 마케팅 브랜드는 IS dark입니다.
- 문서화된 `ink` / `ink-muted` / `ink-subtle` 세트 외부에 중간톤 회색 텍스트를 삽입하지 마십시오.
- CTA 모서리를 정사각형으로 만들지 마세요. 0px가 아닌 `` 8px를 사용하세요.
- 해당 제품에 관한 페이지가 아닌 경우 CTA에 제품 강조 색상을 사용하지 마세요. Vault 페이지의 Terraform 보라색은 브랜드 위반입니다.
- 동일한 뷰포트에 여러 제품 액센트를 결합하지 마십시오. 시스템에서 "이 섹션은 이 도구에 관한 것입니다"라고 말하고 액센트를 혼합하면 해당 신호가 끊어집니다.
- 어두운 곳에 그림자를 추가하지 마세요. 표면 리프트는 고도를 전달합니다.
- `hashicorpSans`을 헤드라인의 표시 전용 산세와 본문의 다른 계열로 바꾸지 마세요. 브랜드는 전체 계층 구조에 걸쳐 하나의 가족으로 묶여 있습니다.
반응적 행동
중단점
| 이름 | 폭 | 주요 변경 사항 |
|---|---|---|
| 데스크탑-XL | 1440px | 기본 데스크탑 레이아웃 |
| 데스크탑 | 1280px | 가격 3업 그리드 유지 |
| 태블릿 | 1024px | 제품 카드 그리드 3업 → 2업 |
| 모바일LG | 768px | 가격 비교는 계층별 아코디언이 됩니다. nav가 햄버거가 됩니다 |
| 모바일 | 480px | 단일 열의 모든 것; display-xl은 80px → ~36px |
크기를 조정합니다.
터치 대상
- CTA 버튼(`button-primary`, `button-secondary`)은 뷰포트 전체에서 ≥40px 탭 높이를 유지합니다.
- 제품 알약의 높이는 데스크톱에서 24픽셀이고 터치 뷰포트에서는 28픽셀까지 늘어납니다.
- 양식 입력은 터치 뷰포트에서 ≥44px 탭 대상을 유지합니다.
축소 전략
- **Nav**: 오른쪽에 고정된 CTA가 있는 가로 탐색은 768px 아래의 햄버거 오버레이로 축소됩니다. 기본 CTA는 막대에 계속 표시됩니다.
- **제품 카드 그리드**: 3업 → 1024px에서 2업 → 768px 미만 1업
- **가격 비교표**: 가로 스크롤을 피하기 위해 768px 미만의 계층별 아코디언으로 축소됩니다.
- **디스플레이 유형**: `` 80px는 음수 추적 비율을 유지하면서 모바일에서 `` 40px로 조정됩니다.
이미지 동작
- 3D 제품 일러스트레이션(큐브, 금고 등)은 가로 세로 비율을 유지하고 자르지 않습니다. 768px 미만에서는 리플로우가 아닌 축소됩니다.
- 고객 로고 윤곽선은 수평으로 크기가 조정되며 좁은 너비에서 두 번째 행으로 줄바꿈될 수 있습니다.
반복 가이드
1. 한 번에 하나의 구성 요소에 집중하고 `components:` 토큰 이름으로 참조하세요.
2. 새 섹션을 도입할 때 먼저 일반 기능(표면-1)인지 제품 ID 섹션(제품-* 색상)인지 결정하세요.
3. 기본 몸체는 500 가중치에서 ``입니다. CTA 배너 및 기능 카드 내에서만 ``에 도달하세요.
4. 편집 후 _`npx @google/design.md lint DESIGN.md`을 실행합니다.
5. 새 제품 변형을 별도의 구성 요소 항목(`product-card-nomad`, `button-product-consul` 등)으로 추가합니다.
6. 제품별 팔레트를 장식이 아닌 ID 토큰으로 취급하십시오. 제품 맥락 밖에서 제품 색상에 도달하면 브랜드는 표류하고 있는 것입니다.
7. 눈썹 유형은 모든 섹션 위에 필수입니다. 이를 건너뛰면 섹션이 떠 있는 것으로 읽혀집니다.
알려진 격차
- 정확한 제품 색상 16진수 값은 직접 추출된 `--mds-color-*` CSS 변수 세트에서 나옵니다. HashiCorp의 표준 브랜드 사양입니다.
- 어두운 표면 시스템은 그림자 표고 대신 표면 양력을 사용하기 때문에 그림자 토큰은 광범위하게 문서화되지 않습니다.
- 양식 필드 오류 및 유효성 검사 스타일이 검사된 페이지에 표시되지 않습니다.
- 다크 모드는 유일한 마케팅 모드입니다. 라이트 모드 적응은 문서화되어 있지 않습니다.
- Consul, Nomad, Vagrant 및 Boundary의 제품 카드 변형은 문서화된 Terraform/Vault/Waypoint 패턴을 따르지만 산문에서만 참조됩니다. 공식적인 항목이 필요한 경우 `product-card-consul`, `product-card-nomad` 등으로 추가할 수 있습니다.
概要
HashiCorp のマーケティング キャンバスは、汎用性を感じさせずに複数の製品ポートフォリオを提供するほぼ黒地です。主な表面は、__CODEBCK_693___ (ピュア ブラック) で、__CODEBCK_694___ のチャコール カードと 1 ピクセルの半透明のグレーのヘアラインが重ねられています。クロムはモノクロです — 白い丸薬ボタン (``)、白色タイプ、灰色のセカンダリ タイプ — しかし、システムは、特定のセクションがどの HashiCorp ツールに属しているかを示す **製品ごとのアクセント カラーのパレット** によってまとめられています: Terraform パープル、Vault イエロー、Consul レッド、ウェイポイント シアン、Vagrant ブルー、Nomad グリーン、境界コーラル。
表示タイプは **bashicorpSans** で、重みは 600/700、行の高さはタイト (1.17 ～ 1.21) です。ボディタイプはウェイト 500 の同じファミリーで、ラインの高さは意図的に緩和されています (1.50 ～ 1.71)。このコントラストは企業向けのテンプレートではなく、編集的なもののように感じられます。 CTA は錠剤ではなく小さな `` 8 ピクセルのコーナーを使用し、システムの読み取りを消費者向けではなく開発者向けに保ちます。
署名デバイスは **product-card** ファミリです。各 HashiCorp 製品には、ホーム ページとインフラストラクチャ ページに独自の色のカード バリアントがあり、Terraform を紫色の地面に、Vault を黄色に、Waypoint をシアン色に持ち上げます。これらは装飾的なグラデーションではなく、アイデンティティ サーフェスです。ページをスクロールしている読者は、そのセクションがどの製品に関するものであるかを目の端で判断できます。
_**主な特徴:**
- ブラック キャンバスのマーケティング システム: `` は、ヒーロー、本文、価格設定、比較表、フッターなどの表面です。
- _**製品ごとの色の識別**: Terraform ``、Vault ``、ウェイポイント ``、Vagrant ``、Consul ``、Nomad ``、境界`` — それぞれに独自のボタンとカードのバリエーションがあります。
- 表示見出しは、行の高さ 1.17 ～ 1.21 (タイト) の hachicorpSans 600/700 を実行します。ボディは 500 と 1.50 ～ 1.71 (リラックス) で同じファミリーを実行します。比例的なギャップがブランドの声です。
- CTA の形状は `` 8 ピクセルです。錠剤ではありません。システムはコンシューマー アプリではなく開発者ツールとして認識されます。
- シャドウ駆動の標高ではなく、木炭のサーフェス リフト (キャンバス → サーフェス 1 → サーフェス 2)。
- 1px の半透明のグレーのヘアライン (`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}): デフォルトのページの背景。
- **サーフェス 1** ({colors.surface-1}): キャンバスの 1 つ上の木炭 — フィーチャー カード、価格設定カード、リソース タイル。
- **Surface 2** ({colors.surface-2}): 上の 2 つのステップ — 注目の価格カード、セカンダリ ボタン、ホバーされた製品クロム。
- **Surface 3** ({colors.surface-3}): 上の 3 つのステップ — 小さなチップ、バッジ、サブナビゲーションの背景。
- **ヘアライン** ({colors.hairline}): カードと仕切りの 1 ピクセルの境界線。
- **ヘアライン ソフト** ({colors.hairline-soft}): 微妙な区切り線 — 比較表の行。
- **反転キャンバス** ({colors.inverse-canvas}): 純白 — `button-primary` の表面としてのみ使用されます。
テキスト
- **インク** ({colors.ink}): すべての見出しと強調された本文タイプ - 純白。
- **インクミュート** ({colors.ink-muted}): #b2b6bd のセカンダリ タイプ — メタ情報、フッター列。
- **インク微妙** ({colors.ink-subtle}): #656a76 の第 3 タイプ — フォーム ヘルパー テキスト、タイムスタンプ、脚注。
製品ごとの ID (署名)
HashiCorp のマーケティングは、単一のアクセント カラーによってまとめられているのではなく、製品固有のアクセントのシステムによってまとめられており、各アクセントはセクションがどのツールを表すかを示すために使用されます。
- **Terraform パープル** ({colors.product-terraform}): Terraform セクション、Terraform CTA、ホーム ヒーロー上の紫色の 3D キューブ。
- **Terraform Bright** ({colors.product-terraform-bright}): 飽和ハイライト — Terraform ページのリンク強調。
- **Vault Yellow** ({colors.product-vault}): Vault セクションと CTA。
- **レッド領事** ({colors.product-consul}): 領事セクション。
- **ウェイポイント シアン** ({colors.product-waypoint}): ウェイポイント セクション、ホバー/アクティブ用のディープ バリアント ``。
- **Vagrant Blue** ({colors.product-vagrant}): Vagrant セクション。
- **Nomad Green** ({colors.product-nomad}): Nomad セクション。
- **境界コーラル** ({colors.product-boundary}): 境界セクション。
セマンティック
- **成功** ({colors.semantic-success}): ポジティブな状態 (ノマド グリーンとしても再利用)。
- **警告** ({colors.semantic-warning}): 警告状態 (Vault も黄色)。
- **エラー** ({colors.semantic-error}): エラー状態 (領事館も赤色)。
- **アンバー 100** ({colors.amber-100}): ソフトで温かみのあるハイライト — 抽出されていますが、控えめに使用されています。
- **アンバー 200** ({colors.amber-200}): 注意バッジ用の飽和したアンバー。
- **ブルー 7** ({colors.blue-7}): 統合コア グラデーションで使用される深いネイビー。
タイポグラフィ
フォント ファミリー
- **hachicorpSans** — HashiCorp 独自のマーケティング書体。幾何学的で、クリーンで、少しヒューマニスト。フォールバック スタック `__hashicorpSans_Fallback_96f0ca` (システム フォント)、次に `-apple-system, BlinkMacSystemFont, Segoe UI, helvetica, arial`.
_同じファミリーにはディスプレイ、本文、ボタン、キャプションが含まれます。個別のディスプレイと本文の組み合わせはありません。 階層は、重み (本文 500 / 強調 600 / 表示 700) と、意図的な行の高さのコントラスト (表示ではタイト、本文ではリラックス) によって決まります。
階層_
|トークン |サイズ |重量 |行の高さ |文字間隔 | |
を使用します
|---|---|---|---|---|---|
| `` | 80ピクセル | 700 | 1.17 | -2.5ピクセル |最大のヒーローの見出し |
| `` | 56ピクセル | 700 | 1.18 | -1.6ピクセル |セクション冒頭の見出し |
| `` | 40ピクセル | 600 | 1.19 | -1.0ピクセル |サブセクションの見出し |
| `` | 28ピクセル | 600 | 1.21 | -0.6ピクセル |価格帯のタイトル、CTA バナーの見出し |
| `` | 22ピクセル | 600 | 1.18 | -0.4ピクセル |フィーチャー カードのタイトル |
| `` | 20ピクセル | 600 | 1.35 | -0.2ピクセル |長い形式の導入段落 |
| `` | 18ピクセル | 500 | 1.69 | 0 |ヒーローの小見出し、本文 |
| `` | 16ピクセル | 500 | 1.50 | 0 |デフォルトの本文 |
| `` | 14ピクセル | 500 | 1.71 | 0 |カード本文、フッター列 |
| `` | 13ピクセル | 500 | 1.38 | 0.2ピクセル |メタ、比較セル ラベル |
| `` | 14ピクセル | 600 | 1.29 | 0 |ピル/四角形の CTA ボタン |
| `` | 12ピクセル | 600 | 1.23 | 0.6ピクセル |大文字セクションの眉毛 |
原則
- **ディスプレイではタイト、ボディではリラックス。** ディスプレイの行高さは 1.17 ～ 1.21 です。ボディリフトは 1.50 ～ 1.71 です。サイズと行の高さのコントラストによって階層が決まります。
- **重み階層は小さいです。** 本文 500 / 強調 600 / 表示 700。極端な光/黒はありません - ブランドは設計どおりに読み取れます。
- **アイブロウ ポジティブ トラッキングされた大文字の 12 ピクセルがセクション ヘッダーです。** 意味のあるセクションにはすべて、見出しの上に 1 つあります。
- **モノラルは使用しません。** 開発者ツールのブランドであるにもかかわらず、マーケティング サーフェイスには等幅のフェイスは使用されていません。コード ボイスは製品内のサーフェイス用に予約されています。
フォントの代替に関する注意
hachicorpSans を使用せずに実装する場合、適切なオープンソースの代替には **Inter** (最も近い幾何学的文字セット)、**Geist Sans**、または **IBM Plex Sans** が含まれます。ウェイト 500 / 600 / 700 の Inter は、hachicorpSans のプロポーションに非常に近似しています。行の高さを手動で ~0.02 下げて調整する必要があります。
レイアウト
間隔システム
- **基本単位**: 8px (主な増分は 4 / 8 / 12 / 16 / 24 / 32 / 48)。
- _**トークン (前付)**: `` 1px · `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
- カード内部のパディング: `` 製品カードでは 24 ピクセル。 `` 価格カードでは 32 ピクセル。 `` CTA バナーでは 48 ピクセル。
- ボタンのパディング: ``.
で縦 10 ピクセル、横 18 ピクセル
- ユニバーサル リズム定数: `` (96 ピクセル) 主要セクション間の垂直方向のギャップ。
グリッドとコンテナ
- コンテンツの最大幅は約 1280 ピクセルで、サイドガターはデスクトップの `` からモバイルの `` まで拡大します。
- 商品カード グリッドは、デスクトップでは 3 つ、タブレットでは 2 つ、モバイルでは 1 つです。
- 価格階層グリッドはデスクトップ全体で 3 つずつあります。以下の比較表は固定幅の左列を使用しています。
- リソース ディレクトリ (PDF ライブラリ) は 4 アップの高密度サムネイル グリッドを使用します。
ホワイトスペースの哲学
_暗いキャンバスは空白です。セクションは、白のギャップではなく、サーフェス リフト (キャンバス → サーフェス 1) によって分離されます。 セクション内では、十分な `` 32 ピクセルのギャップがカードを分割します。 `` 行は 24 ピクセルで区切られます。
標高と深度
|レベル |治療 | |
を使用します
|---|---|---|
| 0 (フラット) |影も境界線もありません |キャンバスにマウントされた表示タイプ、ヒーロー、フッター |
| 1 (チャコールリフト) | `` 背景 + 1px `rgba(178,182,189,0.1)` 境界線 |デフォルトのカード、リソース タイル、価格設定カード |
| 2 (表面 2 リフト) | `` 背景 + 1px `` 境界線 |注目の価格設定カード、ホバー カード、サブナビゲーション |
| 3 (製品クロマチック) |製品ごとのアクセント カラーの背景 - Terraform パープル、Vault イエロー、ウェイポイント シアン |製品ショーケース カード |
_商品の色彩レベルは「モーダルリフト」ではなく、アイデンティティデバイスです。 Terraform カードは、フィーチャー カードと同じ Z 平面に配置されます。違いは深さではなく意味です。
装飾の深さ
- **3D 製品ビジュアル** - 等角投影の紫色の立方体 (Terraform)、半透明の黄色の金庫 (Vault)、および同様の製品に似た色のイラストが、ヒーロー セクションの右側の列に配置されています。
- **1 ピクセルの半透明のグレーのヘアライン** が優勢なエッジです。境界線は競合することなく表示されます。
- **暗い場所ではドロップ シャドウはありません。** カードは表面の変化によって浮き上がります。影は付きません。
図形
境界線の半径スケール
|トークン |値 | |
を使用します
|---|---|---|
| `` | 4ピクセル |小さなチップ / バッジ |
| `` | 6ピクセル |インライン タグ |
| `` | 8ピクセル |すべての CTA ボタン、フォーム入力、リスト項目 |
| `` | 12ピクセル |フィーチャー カード、製品カード、価格カード |
| `` | 16ピクセル |大きなイラストタイル |
| `` | 24ピクセル | CTA バナー パネル |
| `` | 9999ピクセル |眉毛スタイルの製品の錠剤 (小さなチップ) |
| `` | 9999ピクセル |アバター サークル (マーケティングでは珍しい) |
写真とイラストの幾何学
- 製品の 3D イラストでは、コンテナ内でフルブリードが使用されており、丸い内側マスクは使用されていません。
- 顧客マーキーのロゴ チップは、__CODEBCK_754___ 1 ピクセルのヘアラインを持つ 6 ピクセルのタイル上に配置されます。
- リソースのサムネイルは__CODEBCK_755___ 12ピクセルのコーナーを使用します。
コンポーネント
ボタン
_**`button-primary`** — 白い角丸長方形の CTA。すべてのページでプライマリ CTA として使用されます。
- 背景__CODEBCK_757___、テキスト__CODEBCK_758___、入力__CODEBCK_759___、パディング10ピクセル18ピクセル、丸め__CODEBCK_760___.
- 押された状態は__CODEBCK_761___にあります。
**`button-secondary`** — 木炭の角丸長方形。 セカンダリ CTA、「ドキュメントを読む」/「営業担当者に相談する」。
- 背景__CODEBCK_763___、テキスト__CODEBCK_764___、入力__CODEBCK_765___、丸め__CODEBCK_766___、パディング10ピクセル18ピクセル。
**`button-tertiary`** — テキストのみを扱うキャンバス上の裸のゴースト ボタン。
- 背景__CODEBCK_768___、テキスト__CODEBCK_769___、入力__CODEBCK_770___、丸め__CODEBCK_771___、パディング10ピクセル18ピクセル。
_**`button-product-terraform`** — Terraform ページ上の Terraform 色付きの CTA。
- 背景__CODEBCK_773___、テキスト__CODEBCK_774___、入力__CODEBCK_775___、丸め__CODEBCK_776___、パディング10ピクセル18ピクセル。
**`button-product-vault`** — Vault 黄色の CTA。
- 背景__CODEBCK_778___、テキスト__CODEBCK_779___ (黄色には濃い色のテキストが必要)、入力__CODEBCK_780___、丸め__CODEBCK_781___、パディング10ピクセル18ピクセル。
**`button-product-waypoint`** — ウェイポイント-シアン CTA.
- 背景__CODEBCK_783___、テキスト__CODEBCK_784___、入力__CODEBCK_785___、丸め__CODEBCK_786___、パディング10ピクセル18ピクセル。
(ベイグラント ブルー、ノマド グリーン、領事レッド、境界コーラルは、それぞれの__CODEBCK_787___ トークンで同じパターンに従います。)
カードとコンテナ
**`product-card`** — デフォルトの製品ショーケース カード — 表面 1 木炭。
- 背景__CODEBCK_789___、テキスト__CODEBCK_790___、入力__CODEBCK_791___、丸め__CODEBCK_792___、パディング24ピクセル。
**`product-card-terraform`** — Terraform 紫色の地面を持つ製品カード (モーダル標高ではなく、アイデンティティ サーフェスとして使用)。
- 背景__CODEBCK_794___、テキスト__CODEBCK_795___、入力__CODEBCK_796___、丸め__CODEBCK_797___、パディング24ピクセル
**`product-card-vault`** — ボールトの黄色の地面。
- 背景__CODEBCK_799___、テキスト__CODEBCK_800___、それ以外は同一の構造。
**`product-card-waypoint`** — ウェイポイント - シアンの地面。
- 背景__CODEBCK_802___、テキスト__CODEBCK_803___、それ以外は同一の構造。
(他の製品バリアントは、それぞれの製品トークンと同じ形状に従います。)
**`feature-card`** — サーフェス 1 の一般的なフィーチャのハイライト。
- 背景__CODEBCK_805___、テキスト__CODEBCK_806___、入力__CODEBCK_807___、丸め__CODEBCK_808___、パディング24ピクセル
**`pricing-card`** — `/en/pricing`.
の価格帯
- 背景__CODEBCK_811___、テキスト__CODEBCK_812___、入力__CODEBCK_813___、丸め__CODEBCK_814___、パディング32ピクセル。
_**`pricing-card-featured`** — 推奨レベル (表面リフトにより視覚的に強調)。
- 背景__CODEBCK_816___、それ以外は同一構造
**`resource-card`** — リソース ディレクトリ内の PDF/ホワイトペーパー/ガイド タイル。
- 背景__CODEBCK_818___、テキスト__CODEBCK_819___、入力__CODEBCK_820___、丸め__CODEBCK_821___、パディング16ピクセル。
入力とフォーム
**`text-input`** + **`text-input-focused`** — シート数の価格設定およびお問い合わせフォームのフォーム フィールド。
- 背景__CODEBCK_824___、テキスト__CODEBCK_825___、入力__CODEBCK_826___、丸め__CODEBCK_827___、パディング10ピクセル14ピクセル。
- フォーカスされた状態は同じ表面を保持します。フォーカス リングは 1 ピクセル `` のアウトラインです。
ピルとチップス
_**`product-pill`** — コンテンツがどの製品に属しているかを示すために、ヒーローの見出しの上やリソース カード上で使用される小さな製品名チップ。
- 背景__CODEBCK_830___、テキスト__CODEBCK_831_ __、タイプ ``、丸め ``、パディング 4px 10px.
比較表
**`comparison-row`** — 価格比較表内の 1 行。
- 背景__CODEBCK_835___、テキスト__CODEBCK_836___、入力__CODEBCK_837___。 行区切り文字は ``.
です
CTA バナー
**`cta-banner`** — 終了 CTA を持つ長い形式のページの下部に使用される大きな丸いパネル。
- 背景__CODEBCK_840___、テキスト__CODEBCK_841___、入力__CODEBCK_842___、丸め__CODEBCK_843___、パディング48ピクセル。
ナビゲーション
**`top-nav`** — 左側に HashiCorp のロゴマーク、プライマリ ナビゲーション リンクが中央にあり、右側に `button-primary` (「サインアップ」) + `button-secondary` (「サインイン」) のペアが付いた黒いバーです。
- 背景__CODEBCK_847___、テキスト__CODEBCK_848___、タイプ__CODEBCK_849___、高さ64ピクセル
- モバイル: プライマリ リンクをハンバーガーに折りたたむ。プライマリ CTA は表示されたままになります。
フッター
**`footer`** — `` 上の高密度リンク グリッド。左側にワードマークがあり、キャプション サイズのリンクが 5 ～ 6 列あります。
- 背景__CODEBCK_852___、テキスト__CODEBCK_853___、入力__CODEBCK_854___、パディング64ピクセル32ピクセル。
推奨事項と禁止事項
実行
- __CODEBCK_855___ (黒) と `` (木炭) をシステムの 2 つのアンカー サーフェスとして予約します。ページのすべてのバンドはいずれか一方です。
- 特定の HashiCorp 製品に関するセクションを導入する場合は、セクション ピル、CTA ボタン、および (該当する場合) ショーケース カードの背景に、その製品の `` トークンを一貫して使用してください。
- CTA ボタンで `` 8 ピクセルを使用します。 HashiCorp のブランドは、消費者向けではなく、開発されたものとして読み取れます。
- タイトなディスプレイの行の高さ (1.17 ～ 1.21) とリラックスしたボディの行の高さ (1.50 ～ 1.71) を組み合わせます。コントラストはブランドの声です。
- すべての意味のあるセクションの上に眉毛タイポグラフィ (``、大文字、0.6 ピクセルの追跡) を使用します。
- サーフェス リフト (キャンバス → サーフェス 1 → サーフェス 2) を使用して、暗部の階層を表現します。
- _製品の識別用に製品の彩色カードを予約します。一般的な機能カードを ``.
に保持します
しないでください
- ライトモードのマーケティング ページを配布しないでください。 HashiCorp のマーケティング ブランドは暗いです。
- 文書化された__CODEBCK_861___ / `ink-muted` / `ink-subtle` セットの外に中間調のグレーのテキストを導入しないでください。
- CTA の角を直角にしないでください。`` 0 ピクセルではなく 8 ピクセルを使用してください。
- その商品に関するものではないページの CTA に商品のアクセント カラーを使用しないでください。 Vault ページの Terraform の紫色はブランド違反です。
- 同じビューポート内で複数の製品アクセントを組み合わせないでください。システムは「このセクションはこのツールに関するものです」と表示し、アクセントを混合するとその信号が壊れます。
- 暗い場所にドロップ シャドウを追加しないでください。表面揚力は高度をもたらします。
- __CODEBCK_865___ を、見出しについては表示のみを含まないもの、本文については別のファミリーに置き換えないでください。 ブランドは、階層全体にわたって 1 つのファミリーによってまとめられています。
応答動作
ブレークポイント_
|名前 |幅 |主な変更点 |
|---|---|---|
|デスクトップXL | 1440ピクセル |デフォルトのデスクトップ レイアウト |
|デスクトップ | 1280ピクセル |価格設定 3 アップ グリッドを維持 |
|タブレット | 1024ピクセル |製品カード グリッド 3 アップ → 2 アップ |
|モバイルLG | 768ピクセル |価格比較は階層アコーディオンごとになります。ナビがハンバーガーになります |
|モバイル | 480ピクセル |すべてを単一列にします。 display-xl は 80px → ~36px にスケールします |
タッチターゲット
- CTA ボタン (`button-primary`、__CODEBCK_867___) は、ビューポート全体で 40 ピクセル以上のタップ高さを維持します。
- 製品の錠剤はデスクトップでは高さ 24 ピクセルですが、タッチ ビューポートでは 28 ピクセルまで拡大されます。
- フォーム入力はタッチ ビューポートで 44 ピクセル以上のタップ ターゲットを保持します。
戦略の崩壊
- **ナビゲーション**: 右アンカーの CTA を含む水平ナビゲーションは、768 ピクセル未満でハンバーガー オーバーレイに折りたたまれます。プライマリ CTA はバーに表示されたままになります。
- **商品カード グリッド**: 3 アップ → 1024 ピクセルで 2 アップ → 768 ピクセル未満で 1 アップ。
- **価格比較表**: 水平スクロールを避けるため、768 ピクセル未満では階層ごとのアコーディオンに折りたたまれます。
- **表示タイプ**: `` 80 ピクセルは、ネガティブ トラッキングのパーセンテージを維持しながら、モバイルでは `` 40 ピクセルに向かって拡大縮小します。
画像の動作
- 3D 製品イラスト (立方体、金庫など) はアスペクト比を維持し、トリミングされません。 768 ピクセル未満では、リフローではなく縮小されます。
- 顧客のロゴ マーキーは水平方向に拡大縮小され、狭い幅では 2 行目に折り返される場合があります。
反復ガイド
1.一度に 1 つのコンポーネントに注目し、__CODEBCK_870___ トークン名で参照します。
2.新しいセクションを導入するときは、まずそれが汎用機能 (表面-1) であるか製品アイデンティティ セクション (製品-* カラー) であるかを決定します。
3.デフォルトのボディはウェイト 500 で `` です。 CTA バナーとフィーチャー カード内でのみ `` にリーチします。
4.編集後に__CODEBCK_873___を実行します。
5.新しい製品バリアントを個別のコンポーネント エントリとして追加します (`product-card-nomad`、__CODEBCK_875___ など)。
6.製品ごとのパレットを装飾ではなく ID トークンとして扱います。製品の文脈から外れた製品の色に手を伸ばすと、ブランドは漂流してしまいます。
7。すべてのセクションの上に眉毛タイプは必須です。これをスキップすると、セクションがフローティングとして読み取られます。
既知のギャップ
- 正確な製品色の 16 進値は、直接抽出された `--mds-color-*` CSS 変数セットから取得されます。これらは HashiCorp の正規のブランド仕様です。
- ダーク サーフェス システムではシャドウの標高ではなく表面リフトが使用されるため、シャドウ トークンについては詳しく文書化されていません。
- フォーム フィールド エラーと検証スタイルが検査されたページに表示されません。
- ダーク モードが唯一のマーケティング モードです。ライト モードへの適応については文書化されていません。
- Consul、Nomad、Vagrant、および Boundary のプロダクト カードのバリアントは、文書化された Terraform / Vault / Waypoint パターンに従っていますが、散文でのみ参照されています。正式なエントリが必要な場合は、__CODEBCK_877___、__CODEBCK_878___ など
として追加できます。