# HashiCorp — Design System
> HashiCorp helps organizations automate hybrid cloud environments with a unified approach to Infrastructure and Security Lifecycle Management.
- **Canonical:** https://uiuxskills.com/library/hashicorp
- **Source:** https://www.hashicorp.com/en
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:18.086Z

---

---
version: alpha
name: HashiCorp
description: Infrastructure and security lifecycle management platform for hybrid cloud environments.
tone: Authoritative, technical, precise, and solution-oriented.
color-scheme: light
colors:
  primary: "#000000"
  secondary: "#FFFFFF"
  surface: "#F8F9FA"
  surface-container: "#E9ECEF"
  on-surface: "#212529"
  on-primary: "#FFFFFF"
  outline: "#DEE2E6"
  error: "#DC3545"
  success: "#198754"
  focus-ring: "#0D6EFD"
typography:
  display-lg:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Helvetica, Arial, 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.secondary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.secondary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#555555"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#F8D7DA"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
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’s visual identity is defined by a professional, enterprise-grade aesthetic that prioritizes technical clarity and reliability. The design language is clean, functional, and highly structured, utilizing a high-contrast palette to communicate complex infrastructure concepts effectively to engineering and DevOps audiences.

## Colors

The color strategy relies on a high-contrast, monochromatic foundation to ensure readability and focus, with specific semantic colors used sparingly to highlight critical information.

*   Primary (#000000): The core brand color for text, primary buttons, and high-impact UI elements.
*   Secondary (#FFFFFF): The base background color providing maximum contrast.
*   Surface (inferred) (#F8F9FA): A light gray used to differentiate content sections and provide visual breathing room.
*   Surface-container (inferred) (#E9ECEF): A neutral gray for containers and modules.
*   On-surface (#212529): The primary text color for body content on light surfaces.
*   Outline (inferred) (#DEE2E6): The standard color for borders and subtle content dividers.
*   Focus-ring (inferred) (#0D6EFD): A high-visibility blue used exclusively for focus states.
*   Error (inferred) (#DC3545): A semantic red for critical alerts and error states.
*   Success (inferred) (#198754): A semantic green for positive status indicators.

## Typography

Typography is strictly utilitarian, employing a clean, sans-serif stack to maintain a professional and legible technical interface.

*   Display-lg (inferred): Used for hero headlines to establish immediate visual hierarchy.
*   Headline-lg (inferred): Reserved for main section titles.
*   Body-md (inferred): The standard weight and size for all primary documentation and descriptive paragraphs.
*   Label-md (inferred): Used for button labels and interactive UI text.

## Layout

The site utilizes a structured grid system with a consistent 16px gutter, ensuring that content blocks remain aligned and scannable. The page pattern follows a logical flow: nav, hero, social-proof, features, solutions, resources, and footer. The hero composition features a centered headline and subhead with a primary CTA, paired with a large product-focused image. The layout is fully responsive, designed to stack content blocks and collapse navigation elements on mobile devices.

## Elevation & Depth

Depth is conveyed through subtle, flat-style shadows that maintain a clean, enterprise-software aesthetic. The elevation levels are inferred from standard UI patterns to provide subtle visual separation.

*   Elevation.sm: Used for subtle card lift.
*   Elevation.md: Used for standard cards and interactive module containers.
*   Elevation.lg: Reserved for modal or drawer overlays to indicate higher focus.

## Shapes

The brand employs a conservative approach to corner radius, favoring sharp or slightly rounded edges to maintain an engineering-focused, professional look. The scale ranges from 2px for minor UI inputs to 8px for standard cards, avoiding overly rounded or "soft" shapes that might undermine the authoritative tone.

## 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`


### Button Primary
These are the primary action drivers, featuring a `{colors.primary}` background and `{colors.secondary}` text. Use these for the most important action in any given section, such as "Try HCP" or "Get the white paper."

### Card
The standard container for grouping related information, utilizing `{rounded.md}` and a subtle `{colors.outline}` border. Use these to organize features or resource links into digestible, visually distinct blocks.

### Badge
Small, subtle indicators using `{colors.surface-container}` for background. Use these to label content types or status, ensuring they remain secondary to the main content.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs | Use `{colors.error}` for non-critical UI |
| Apply `{typography.headline-lg}` for section titles | Mix font families outside Helvetica/Arial |
| Use `{rounded.md}` for consistent card styling | Use `{typography.body-sm}` for primary CTAs |
| Use `{colors.primary}` for all accessible links | Use excessive `{elevation.lg}` shadows |
| Use `{spacing.md}` for internal component padding | Use rounded corners larger than `{rounded.xl}` |
| Apply `{colors.outline}` for content dividers | Use low-contrast text on `{colors.surface}` |
| Use `{colors.focus-ring}` for keyboard navigation | Use decorative elements that lack function |
| Keep layout spacing consistent with `{spacing.lg}` | Ignore the 16px gutter grid standard |

## Content Style

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

Headings are direct and benefit-driven, designed to address specific infrastructure challenges rather than using abstract marketing language.

Copy density is optimized for scannability, featuring professional, concise paragraphs paired with clear headings and bulleted lists to maintain a high information-to-noise ratio.

## Imagery & Icons

The imagery style is mixed, combining clean vector illustrations for product concepts with high-quality photography for reports and social proof. Icons are flat, minimalist, and functional, designed to support technical documentation without distracting from the core content.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for HashiCorp, a minimal enterprise infrastructure platform. Match its authoritative, technical tone — direct, precise, no decorative excess. 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 font names.
2. Use only component variants defined under `components:`. Do not invent variants (e.g., a "button-ghost" or "card-flush") that the spec does not list.
3. Follow the Layout narrative: 16px gutter grid, logical page flow (nav → hero → features → footer), mobile-first stacking. If the spec doesn't define a breakpoint, use one at 768px.
4. Apply elevation tokens (`{elevation.sm}`, `{elevation.md}`, `{elevation.lg}`) per their defined roles — `{elevation.lg}` is reserved for modals/drawers only.
5. Treat the Do's and Don'ts table as authoritative. Surface any conflict with a user's request before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every component and layout decision.
- Include hover, focus, and disabled states for interactive components where the spec defines them (e.g., `button-primary-hover`, `input-field-focus`).
- Apply `{colors.focus-ring}` to all keyboard-navigable elements.
- Use `{spacing.md}` for internal component padding; `{spacing.lg}` for section-level gaps.
- Render CTAs in `{typography.label-md}` with imperative verbs matching the Content Style section.

**Must NOT:**
- Invent colors, radii, font sizes, or shadows outside the spec.
- Use generic utility defaults when a brand token exists.
- Apply `{rounded.xl}` or larger on standard components; the brand favors conservative radii.
- Add emoji, decorative elements, or filler copy.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- Ask the user before introducing any token or variant the spec does not define.
- Prefer composing existing components over creating new ones.
- For ambiguous backgrounds, default to `{colors.surface}`; for text on those surfaces, use `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (Storybook, theme file) is available, it overrides the spec.
- If a user request conflicts with the Do's and Don'ts table, surface the conflict explicitly before generating.