getrelay 0.1.0

package/design-md/hashicorp/DESIGN.md

@@ -0,0 +1,575 @@
+---
+version: alpha
+name: HashiCorp
+description: "An enterprise-infrastructure marketing canvas built around a near-black ground (#000000) and a system of per-product accent colors — Terraform purple, Vault yellow, Consul pink, Waypoint cyan, Vagrant blue — that act as identity tokens rather than decorative palette. Display type is hashicorpSans set in 600/700 with tight 1.17–1.21 line-heights; body type runs the same family at 500 weight with relaxed 1.50–1.71 line-heights. Cards live as charcoal surfaces with 1px translucent gray borders; product showcase cards lift into per-product chromatic gradients. The system reads as confident, technical, and intentionally multi-product — every section quietly signals which HashiCorp tool it represents."
+
+colors:
+  primary: "#000000"
+  on-primary: "#ffffff"
+  accent-blue: "#2b89ff"
+  ink: "#ffffff"
+  ink-muted: "#b2b6bd"
+  ink-subtle: "#656a76"
+  canvas: "#000000"
+  surface-1: "#15181e"
+  surface-2: "#1f232b"
+  surface-3: "#3b3d45"
+  hairline: "#3b3d45"
+  hairline-soft: "#252830"
+  inverse-canvas: "#ffffff"
+  inverse-ink: "#000000"
+  product-terraform: "#7b42bc"
+  product-terraform-bright: "#911ced"
+  product-vault: "#ffcf25"
+  product-consul: "#e62b1e"
+  product-waypoint: "#14c6cb"
+  product-waypoint-deep: "#12b6bb"
+  product-vagrant: "#1868f2"
+  product-nomad: "#00ca8e"
+  product-boundary: "#f24c53"
+  amber-100: "#fbeabf"
+  amber-200: "#bb5a00"
+  blue-7: "#101a59"
+  semantic-success: "#00ca8e"
+  semantic-warning: "#ffcf25"
+  semantic-error: "#e62b1e"
+  semantic-visited: "#a737ff"
+
+typography:
+  display-xl:
+    fontFamily: hashicorpSans
+    fontSize: 80px
+    fontWeight: 700
+    lineHeight: 1.17
+    letterSpacing: -2.5px
+  display-lg:
+    fontFamily: hashicorpSans
+    fontSize: 56px
+    fontWeight: 700
+    lineHeight: 1.18
+    letterSpacing: -1.6px
+  display-md:
+    fontFamily: hashicorpSans
+    fontSize: 40px
+    fontWeight: 600
+    lineHeight: 1.19
+    letterSpacing: -1.0px
+  headline:
+    fontFamily: hashicorpSans
+    fontSize: 28px
+    fontWeight: 600
+    lineHeight: 1.21
+    letterSpacing: -0.6px
+  card-title:
+    fontFamily: hashicorpSans
+    fontSize: 22px
+    fontWeight: 600
+    lineHeight: 1.18
+    letterSpacing: -0.4px
+  subhead:
+    fontFamily: hashicorpSans
+    fontSize: 20px
+    fontWeight: 600
+    lineHeight: 1.35
+    letterSpacing: -0.2px
+  body-lg:
+    fontFamily: hashicorpSans
+    fontSize: 18px
+    fontWeight: 500
+    lineHeight: 1.69
+    letterSpacing: 0
+  body:
+    fontFamily: hashicorpSans
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.50
+    letterSpacing: 0
+  body-sm:
+    fontFamily: hashicorpSans
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.71
+    letterSpacing: 0
+  caption:
+    fontFamily: hashicorpSans
+    fontSize: 13px
+    fontWeight: 500
+    lineHeight: 1.38
+    letterSpacing: 0.2px
+  button:
+    fontFamily: hashicorpSans
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 1.29
+    letterSpacing: 0
+  eyebrow:
+    fontFamily: hashicorpSans
+    fontSize: 12px
+    fontWeight: 600
+    lineHeight: 1.23
+    letterSpacing: 0.6px
+
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  xxl: 24px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  hair: 1px
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+  section: 96px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.inverse-canvas}"
+    textColor: "{colors.inverse-ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+  button-primary-pressed:
+    backgroundColor: "{colors.inverse-canvas}"
+    textColor: "{colors.inverse-ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+  button-secondary:
+    backgroundColor: "{colors.surface-2}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+  button-tertiary:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+  button-product-terraform:
+    backgroundColor: "{colors.product-terraform}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+  button-product-vault:
+    backgroundColor: "{colors.product-vault}"
+    textColor: "{colors.inverse-ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+  button-product-waypoint:
+    backgroundColor: "{colors.product-waypoint}"
+    textColor: "{colors.inverse-ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.md}"
+    padding: 10px 18px
+  product-card:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  product-card-terraform:
+    backgroundColor: "{colors.product-terraform}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  product-card-vault:
+    backgroundColor: "{colors.product-vault}"
+    textColor: "{colors.inverse-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  product-card-waypoint:
+    backgroundColor: "{colors.product-waypoint}"
+    textColor: "{colors.inverse-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  feature-card:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: 24px
+  pricing-card:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  pricing-card-featured:
+    backgroundColor: "{colors.surface-2}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  resource-card:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.lg}"
+    padding: 16px
+  text-input:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.md}"
+    padding: 10px 14px
+  text-input-focused:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.md}"
+    padding: 10px 14px
+  product-pill:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "{colors.ink-muted}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.pill}"
+    padding: 4px 10px
+  top-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.xs}"
+    height: 64px
+  comparison-row:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink-muted}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.xs}"
+  cta-banner:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "{colors.ink}"
+    typography: "{typography.subhead}"
+    rounded: "{rounded.xxl}"
+    padding: 48px
+  footer:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink-muted}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.xs}"
+    padding: 64px 32px
+---
+
+## 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.

package/design-md/hashicorp/README.md

@@ -0,0 +1,5 @@
+# HashiCorp Inspired Design System
+
+Design system details have been moved to: https://getdesign.md/hashicorp/design-md
+
+You can also view previews, dark mode examples, and download options on getdesign.md.