---
name: Hashicorp
colors:
  primary: '#1060ff'
  primary-border: '#0c56e9'
  primary-bright: '#2b89ff'
  canvas: '#ffffff'
  surface: '#fafafa'
  surface-muted: '#f1f2f3'
  surface-dark: '#15181e'
  surface-deep: '#0d0e12'
  foreground: '#3b3d45'
  foreground-dark: '#d5d7db'
  on-primary: '#ffffff'
  on-dark: '#efeff1'
  muted: '#656a76'
  hairline: '#b2b6bd'
  terraform: '#7b42bc'
  boundary: '#f24c53'
typography:
  display-hero:
    fontSize: 82px
    fontWeight: 600
    lineHeight: 1.17
    use: Loaded HashiCorp Sans H1 on captured public surfaces
  heading:
    fontSize: 52px
    fontWeight: 600
    lineHeight: 1.19
    use: Loaded HashiCorp Sans H2 on captured public surfaces
  body:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.63
    use: Computed system-ui reading text
  button:
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.69
    use: Computed system-ui primary and secondary control label
  label:
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.69
    letterSpacing: 1.3px
    use: Loaded HashiCorp Sans eyebrow observed on Boundary
rounded:
  square: 0px
  sm: 2px
  nav: 4px
  control: 5px
  card: 6px
spacing:
  xs: 4
  sm: 8
  md: 12
  base: 16
  lg: 24
  xl: 32
  xxl: 48
components:
  card:
    type: card
    backgroundColor: '#ffffff'
    textColor: '#3b3d45'
    rounded: 6px
    use: Home content card with a 1px rgba(101,104,118,0.2) outline shadow
fonts:
  roles:
    ui: system-ui
    display: HashiCorp Sans
---

# Design System Inspiration of HashiCorp

## Overview

### Visual Theme & Atmosphere

HashiCorp, now an IBM company, builds infrastructure and security software for multi-cloud and hybrid environments. Its current public expression puts a sober operational interface around that mission: white and near-white information surfaces sit beside deep charcoal sections, with blue as the shared action color and named product routes able to introduce their own accent. The 2024 Infrastructure Cloud brand launch also introduced HashiCorp Sans, a custom display typeface that ties the logotype and headlines together. In the captured public routes, that mix produces a clear division of labor: HashiCorp Sans carries large headings and eyebrow labels; system stacks carry reading text, navigation, controls, and cards.

The raw capture covers three public-facing domains within the company site, not a signed-in application: `/ko` is corporate marketing, `/ko/pricing` is commercial/pricing marketing, and `/ko/products/boundary` is a Boundary product-marketing route. No developer documentation chrome or authenticated product UI was captured, so this reference does not promote those domains into the shared token set. Helios is documented separately by HashiCorp as the public product design system.

**Key Characteristics:**
- White, near-white, deep-charcoal, and near-black surfaces are all observed in the capture
- Shared actions use `#1060ff`; a Terraform-labelled control and a Boundary-labelled control use their observed route-specific colors
- Loaded HashiCorp Sans appears in headings and a Boundary eyebrow; system-ui dominates visible UI text
- Controls use small 4–5px corners; the captured home card uses 6px

### Primary tasks

- Read up on one named product before trying it.
- Pick a product from the pricing page and start it.
- Submit an email address through the shared marketing form.
- Weigh the open-source route against a commercial plan.

### Brand Narrative

Mitchell Hashimoto and Armon Dadgar met at the University of Washington in 2008 while working on a research project to make public-cloud technologies available to scientists. Hashimoto started HashiCorp in November 2012 and Dadgar joined as co-founder in 2013. Their early view was that organizations using multiple clouds would need a consistent, reliable set of automation tools for combinations of cloud and on-premises environments.

The present company describes itself as an IBM company that helps organizations automate and secure multi-cloud and hybrid environments through The Infrastructure Cloud. In April 2024 it introduced that brand chapter and HashiCorp Sans; in February 2025 it officially joined IBM. These facts describe the corporate/brand domain and should not be read as a claim about the captured public UI’s runtime tokens.

### Principles

1. **Workflows, not technologies.** The company frames its offering around real-world operator workflows. *UI implication:* lead with the task or outcome before product mechanics.
2. **Multi-cloud and hybrid operations.** The public mission is to automate and secure these environments. *UI implication:* avoid implying that a single provider is the default context.
3. **Open source at the core.** HashiCorp describes source-available projects and a practitioner community as foundational. *UI implication:* make technical learning and implementation paths legible alongside commercial paths.
4. **Pragmatic beauty.** The font announcement links “beauty works better” with pragmatism. *UI implication:* use distinctive display typography deliberately while keeping functional UI plain and readable.

### Personas

The official company material identifies technical and business teams, IT operators, practitioners, users, customers, and partners as stakeholders. This reference does not invent named or demographic personas; use those verified stakeholder groups as the starting point for task research.

## Colors

### Shared live surfaces
- **Shared primary** (`#1060ff`): blue primary CTA background, with observed border `#0c56e9`
- **Bright blue** (`#2b89ff`): selected pricing-tab foreground
- **Canvas** (`#ffffff`): navigation and light card background
- **Secondary surface** (`#fafafa`): secondary CTA background
- **Muted surface** (`#f1f2f3`): observed badge and alert background
- **Deep surfaces** (`#15181e`, `#0d0e12`): dark toggle and dark pricing-card/input backgrounds
- **Light foreground** (`#3b3d45`): secondary CTA, navigation, and light-card text
- **Dark-surface foreground** (`#d5d7db`, `#efeff1`): dark-route text and dark input text
- **Muted text** (`#656a76`) and **hairline** (`#b2b6bd`): observed supporting text and borders

### Route-specific live variants
- **Terraform** (`#7b42bc`): one `color-terraform` CTA observed on `/ko/pricing`
- **Boundary** (`#f24c53`): one `color-boundary` CTA observed on `/ko/products/boundary`

No other product-color variant is included: it was not present in the supplied capture.

## Typography

### Evidence classes

- **Official brand/product use:** HashiCorp’s 2024 font announcement describes HashiCorp Sans as a display typeface used across corporate and product logos and headlines. Its brand typography guidance directs HashiCorp Sans to headlines, sub-headlines, and titles; it separately names Metro Sans Book for brand-material body copy. That guidance is not evidence that Metro Sans is loaded on the captured Korean marketing routes.
- **Live computed and loaded:** the capture records `__hashicorpSans_96f0ca` on 21 visible heading/eyebrow nodes and a site-hosted WOFF2 source (`d29050812a1756cf-s.p.woff2`). The family is therefore represented as **HashiCorp Sans** for display use, not as the UI family.
- **Live system use:** `system-ui` is the computed high-confidence family on 713 visible body, button, card, tab, and badge nodes. Arial appears only on the captured embedded marketing form controls.
- **Declared-only assets:** `__dejavuSansMono_7cac6c` and `dejavu-sans-mono-web` have declared sources but no visible usage in this capture; they are not a UI or code token.
- **License boundary:** the official typography guidance directs access requests to the Brand Studio, while the site terms say no license to proprietary interests is implied. Neither source grants reusable webfont distribution or substitution rights; do not treat the captured WOFF2 source as such permission.

### Observed hierarchy

| Role | Family / evidence | Size | Weight | Line height | Captured use |
|------|-------------------|------|--------|-------------|--------------|
| Display hero | HashiCorp Sans, loaded | 82px | 600 | 96px | H1 |
| Heading | HashiCorp Sans, loaded | 52px | 600 | 62px | H2 |
| Heading variant | HashiCorp Sans, loaded | 42px | 700 | 50px | H2 |
| Eyebrow | HashiCorp Sans, loaded | 13px | 600 | 22px | Boundary label, 1.3px tracking |
| Body / card | system-ui | 16px | 400 | 26px | visible reading and card text |
| Controls | system-ui | 16px | 500 | 26–27px | shared CTAs and tabs |
| Navigation | system-ui | 15.008px | 500 | 24.013px | top navigation trigger |

## Layout

The capture records a recurring 4/8/12/16/24/32/48px spacing rhythm. Its high-frequency visible corners are 0px, 4px, 5px, and 6px; the only captured 8px radius is not promoted as the card standard. No responsive breakpoint, container-width, or grid behavior was measured in this packet.

### Responsive Behavior

No responsive observations were collected in this packet. Do not infer breakpoint values or mobile transformations from the desktop-route evidence.

## Elevation & Depth

- **Control shadow:** the primary, secondary, Terraform, and Boundary CTAs use a two-layer 5% shadow, with the exact values recorded in §4.
- **Light-card outline:** home cards use `rgba(101, 106, 118, 0.2) 0px 0px 0px 1px`.
- **Dark-input inset:** the captured email field uses `rgba(97, 104, 117, 0.1) 0px 1px 2px 1px inset`.

### Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

- `shadow.control`: `rgba(101,104,118,0.05) 0px 1px 1px, rgba(101,104,118,0.05) 0px 2px 2px`

## Motion & Easing

No motion duration, easing value, or reduced-motion behavior was measured in this packet. Keep motion tokens unresolved.

---

## Components

All values below are raw computed values from the supplied 2026-07-13 capture. Selector and route provenance are retained in `.verification.md`. The capture reports zero interaction events, so hover, focus, pressed, modal, menu, and error variants are intentionally omitted.

### Buttons

**Shared Primary CTA**
- Background: `#1060ff`
- Text: `#ffffff`
- Border: `1px solid #0c56e9`
- Radius: `5px`
- Padding: `9px 15px`
- Shadow: `rgba(101, 106, 118, 0.05) 0px 1px 1px, rgba(101, 106, 118, 0.05) 0px 2px 2px`
- Font: `16px / 500 / system-ui`
- Use: `.button__gOWvd.color-primary__rWbwp` on home, pricing, and Boundary routes
- Disabled: one icon-only primary instance used `#fafafa` background, `#8c909c` text, and `rgba(101, 106, 118, 0.2)` border

**Shared Secondary CTA — medium**
- Background: `#fafafa`
- Text: `#3b3d45`
- Border: `1px solid rgba(59, 61, 69, 0.4)`
- Radius: `5px`
- Padding: `9px 15px`
- Shadow: `rgba(101, 106, 118, 0.05) 0px 1px 1px, rgba(101, 106, 118, 0.05) 0px 2px 2px`
- Font: `16px / 500 / system-ui`
- Use: `.button__gOWvd.size-medium__HxMcm.color-secondary-white__AseI0` on all three routes

**Shared Secondary CTA — large**
- Background: `#fafafa`
- Text: `#3b3d45`
- Border: `1px solid rgba(59, 61, 69, 0.4)`
- Radius: `5px`
- Padding: `11px 19px`
- Shadow: `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`
- Font: `16px / 500 / system-ui`
- Use: `.button__gOWvd.size-large__MEpK3.color-secondary-high-contrast__3bxg3` on all three routes

**Terraform-labelled CTA**
- Background: `#7b42bc`
- Text: `#ffffff`
- Border: `1px solid rgba(178, 182, 189, 0.2)`
- Radius: `5px`
- Padding: `9px 15px`
- Shadow: `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`
- Font: `16px / 500 / system-ui`
- Use: `.button__gOWvd.color-terraform__DQMD5` on pricing; only this Terraform-labelled variant was captured

**Boundary-labelled CTA**
- Background: `#f24c53`
- Text: `#0c0c0e`
- Border: `1px solid rgba(178, 182, 189, 0.2)`
- Radius: `5px`
- Padding: `11px 19px`
- Shadow: `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`
- Font: `16px / 500 / system-ui`
- Use: `.button__gOWvd.color-boundary__xJtzy` on the Boundary route; only this Boundary-labelled variant was captured

### Navigation and tabs

**Top navigation trigger**
- Background: `#ffffff`
- Text: `#3b3d45`
- Radius: `4px`
- Padding: `8px 12px`
- Font: `15.008px / 500 / system-ui`
- Use: `.style_navItemTrigger__65Jsv` on all three routes

**Pricing tab — selected**
- Text: `#2b89ff`
- Radius: `5px`
- Font: `16px / 500 / system-ui`
- Use: `.tab-button__qI9wt` with `aria-selected="true"` on pricing

**Pricing tab — unselected**
- Text: `#d5d7db`
- Radius: `5px`
- Font: `16px / 500 / system-ui`
- Use: `.tab-button__qI9wt` with `aria-selected="false"` on pricing

### Form control

**Dark email field**
- Background: `#0d0e12`
- Text: `#efeff1`
- Border: `1px solid #616875`
- Radius: `5px`
- Padding: `11px`
- Shadow: `rgba(97, 104, 117, 0.1) 0px 1px 2px 1px inset`
- Font: `16px / 400 / Arial`
- Use: `.mktoField.mktoEmailField.mktoRequired` in the shared marketing form on all three routes

### Cards and badge

**Light content card**
- Background: `#ffffff`
- Text: `#3b3d45`
- Radius: `6px`
- Shadow: `rgba(101, 106, 118, 0.2) 0px 0px 0px 1px`
- Font: `16px / 400 / system-ui`
- Use: `.card__HomZw` on home

**Neutral filled badge**
- Background: `#f1f2f3`
- Text: `#3b3d45`
- Border: `1px solid transparent`
- Radius: `5px`
- Padding: `3px 7px`
- Font: `16px / 400 / system-ui`
- Use: `.badge__zns82.type-filled__ZaWsu.color-neutral__6Csf4` on home

### Published component roster (37 published, none measured here)

Helios publishes **37 components**, read from its own component index at
 on 2026-09-19. No value, state or geometry below is
asserted by this reference.

Accordion, Advanced Table, Alert, App Footer, App Header, App Side Nav, Application State, Badge, Badge Count, Breadcrumb, Button, Button Set, Card, Code Block, Code Editor, Copy Snippet, Dropdown, Filter Bar, Flyout, Icon, Icon Tile, Modal, Page Header, Pagination, Reveal, Rich Tooltip, Segmented Group, Separator, Standalone Link, Stepper Nav, Tabs, Tag, Text, Time, Toast, Toggle, Tooltip

The list is flat because the index presents it flat, and names are given as it renders them.

### The one entry in §4 is the Helios home page's own card

This reference records a single component styling, described in its own `use:` string as a "home
content card with a 1px rgba(101,104,118,0.2) outline shadow" — a card on the Helios site's
landing page, not a reading of the published Card component. This file contains no occurrence of
the `hds-` prefix, which is how Helios names its published components in markup.

None of the 37 carries a measured value here, including Card.

### States

The supplied capture records one disabled icon-only primary button and selected/unselected pricing tabs. It records no interaction events, loading, error, success, empty, skeleton, dialog, or toast state transitions, so those treatments are intentionally unresolved.

## Do's and Don'ts

### Do
- Use HashiCorp Sans only where the official brand describes display/logo/headline use and where it can actually be loaded.
- Use system-ui for the captured body and control treatments.
- Keep shared primary, Terraform, and Boundary CTA treatments attached to the route/context in which they were observed.

### Don't
- Don't substitute a system font while labelling it HashiCorp Sans.
- Don't infer unobserved product colors, hover states, focus rings, or component variants from class names or adjacent routes.
- Don't treat declared DejaVu Sans Mono assets as a live code-font token.

## Voice & Tone

HashiCorp describes its work in operational, outcome-oriented terms: automate and secure multi-cloud and hybrid environments; focus on workflows rather than technologies; and keep source code freely available at the core of its offerings. The public marketing routes use short imperative actions.

**Voice samples**
- “Get started” — shared marketing CTA, captured on `/ko`
- “Contact us” — shared marketing CTA, captured on `/ko`
- “The Infrastructure Cloud” — official company positioning

## Agent Prompt Guide

Use the captured public-marketing pattern only: `#1060ff` shared primary CTA or `#fafafa` secondary CTA, 5px corners, 16px/500 system-ui labels, and the recorded low-opacity control shadow. Use the Terraform `#7b42bc` or Boundary `#f24c53` CTA only for those specifically observed route contexts. Treat all other product colors and states as unresolved.