# HashiCorp — Design System
> Infrastructure and Security Lifecycle Management platform for hybrid cloud automation.
- **Canonical:** https://uiuxskills.com/library/hashicorp-2
- **Source:** https://www.hashicorp.com
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:50.186Z

---

---
version: alpha
name: HashiCorp
description: Infrastructure and Security Lifecycle Management platform for hybrid cloud automation.
tone: >-
  Authoritative, clear, and technical. The voice is focused on enablement and operational
  excellence, avoiding marketing fluff in favor of concrete benefit statements.
color-scheme: light
colors:
  primary: "#000000"
  secondary: "#5731FD"
  surface: "#FFFFFF"
  surface-dim: "#F8F9FA"
  surface-container: "#F1F3F5"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#DEE2E6"
  error: "#D93025"
  success: "#188038"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.secondary}"
  link:
    textColor: "{colors.secondary}"
  link-hover:
    textColor: "#4020C0"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FCE8E6"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

HashiCorp maintains a professional, high-trust aesthetic that balances technical precision with enterprise reliability. The visual identity is clean, data-driven, and utilizes a structured grid system to manage complex product ecosystems, resulting in an authoritative and clear user experience.

## Colors

The color strategy focuses on high-contrast accessibility and clear functional differentiation, utilizing a monochromatic base with a singular, vibrant accent color for interaction.

*   Primary (#000000): Core brand color for primary actions and high-contrast text.
*   Secondary (inferred) (#5731FD): Accent color used for key product CTAs and highlights.
*   Surface (#FFFFFF): Main background color for the application and marketing site.
*   Surface-dim (inferred) (#F8F9FA): Subtle background for section differentiation.
*   Surface-container (inferred) (#F1F3F5): Container background for cards and modules.
*   On-surface (#1A1A1A): Primary text color for readability on light surfaces.
*   On-primary (inferred) (#FFFFFF): Text color for buttons and elements with primary background.
*   Outline (inferred) (#DEE2E6): Border color for dividers and input fields.
*   Error (inferred) (#D93025): Semantic color for errors and critical alerts.
*   Success (inferred) (#188038): Semantic color for success states and positive indicators.

## Typography

The typography uses the Inter font family exclusively to ensure a clean, modern, and highly readable technical interface across all viewport sizes.

*   Display-lg (inferred): Hero headlines for maximum impact.
*   Display-md (inferred): Secondary section headers.
*   Headline-lg (inferred): Primary section titles.
*   Headline-md (inferred): Sub-section titles.
*   Body-md (inferred): Standard paragraph text.
*   Label-md (inferred): Button labels and UI controls.
*   Label-sm (inferred): Small captions and metadata.

## Layout

The site utilizes a 7-column grid system for content alignment with a 16px base spacing unit. The section order follows a logical progression: nav, hero, social-proof, features, solutions, partners, resources, and footer. The hero composition features a centered headline and subhead with a primary CTA, paired with a large product-focused image. Responsive behaviour is mobile-first, with navigation collapsing into a hamburger menu on smaller viewports.

## Elevation & Depth

Depth is used sparingly to highlight interactive cards and navigation elements, relying on subtle single-layer shadows. The elevation scale (sm, md, lg) is inferred to maintain a clean, flat-design aesthetic.
*   `elevation.sm`: Subtle card lift.
*   `elevation.md`: Standard dropdown or popover depth.
*   `elevation.lg`: Modal or drawer overlay.

## Shapes

The brand employs a subtle rounding philosophy to maintain a professional, sharp look while softening the edges of interactive elements. The radius scale ranges from 2px for tight UI inputs to 8px for cards, and up to 9999px for fully rounded pill-shaped buttons.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Buttons
Primary buttons use `{colors.primary}` with `{typography.label-md}`, while secondary buttons use a transparent background with a `{colors.primary}` border. Use primary buttons for main conversion goals and secondary buttons for alternative actions.

### Cards
Cards utilize `{rounded.md}` and are distinguished from the page background using `{colors.surface-container}` or `{colors.surface-dim}`. Use these to group related technical content or feature highlights.

### Input Fields
Inputs feature a `{rounded.sm}` radius and a `{colors.outline}` border. On focus, the border transitions to `{colors.secondary}` to provide clear feedback to the user.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.primary}` for secondary or tertiary buttons. |
| Apply `{typography.headline-lg}` for main section headers. | Never apply `{typography.body-md}` for headers. |
| Use `{colors.surface-container}` for card backgrounds. | Avoid using high-elevation shadows on flat content sections. |
| Maintain consistent `{spacing.md}` between content blocks. | Do not use `{spacing.xs}` for primary layout gutters. |
| Use `{colors.secondary}` for all text-based links. | Never use `{colors.error}` for non-critical UI elements. |
| Apply `{rounded.md}` to all interactive cards. | Avoid mixing font families; stick to the primary sans-serif stack. |
| Use `{colors.outline}` for input field borders. | Do not use low-contrast colors for primary text. |
| Use `{badge-success}` for positive status indicators. | Avoid cluttering layouts with excessive shadow levels. |

## Content Style

CTA labels are action-oriented and imperative, using verbs like "Learn more" or "Try HCP" to drive user engagement.

Headings are direct, benefit-focused, and professional. They avoid marketing fluff in favor of concrete statements that explain the value of the infrastructure or security lifecycle management.

The copy density is moderate, utilizing short paragraphs and frequent bulleted lists to ensure technical documentation and marketing modules remain readable and scannable.

## Imagery & Icons

The imagery style is mixed, incorporating high-quality product screenshots, abstract vector illustrations, and partner logos. Icons are typically flat, single-color vectors that maintain the brand's minimal and enterprise-focused aesthetic. Avoid overly complex or decorative imagery that detracts from the technical clarity of the platform.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for HashiCorp, a minimal enterprise infrastructure platform. Match its authoritative, technically precise tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or raw font sizes.
2. Use only the component variants defined under `components:`. Do not invent new button styles, badge variants, or card treatments the spec does not list.
3. Follow the Layout section for grid, spacing rhythm, and responsive behavior: mobile-first, navigation collapses at smaller viewports, one breakpoint at 768px when the spec is silent.
4. Apply elevation tokens (`{elevation.sm}`, `{elevation.md}`, `{elevation.lg}`) only at the semantic levels described — card lift, dropdown/popover, modal overlay. Do not add shadow to flat content sections.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use token names for all colors, type scales, spacing, radii, and elevation.
- Render hover, focus, and disabled states for every interactive component when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{spacing.md}` as the base layout gutter; use `{spacing.xs}` through `{spacing.2xl}` for all paddings and gaps.
- Use `{rounded.sm}` for inputs, `{rounded.md}` for cards and interactive elements, per the Shapes narrative.
- Match CTA copy style — imperative verbs, no marketing fluff — per the Content Style section.

**Must NOT:**
- Invent colors, font families, or radius values outside the spec.
- Use generic system defaults (e.g., `gray-500`, `rounded-md` as a literal value) when a named token exists.
- Apply `{colors.error}` to non-critical UI elements.
- Add emoji, decorative imagery, or filler copy.
- Rewrite page copy, button labels, headings, or navigation items as a side effect of applying tokens.
- Alter page section order or information architecture.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For background roles, default to `{colors.surface-container}`; for text on light surfaces, use `{colors.on-surface}`; for primary actions, use `{colors.primary}`.
- Tokens marked "(inferred)" in the spec are visual approximations. If an authoritative source (Storybook, theme file, component metadata) exists, those values take precedence.
- For unspecified layout gaps, default to `{spacing.md}`.