# Hashicorp · Design system migration spec

> Source: https://www.hashicorp.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of a restrained, professional enterprise design that balances a modern dark mode aesthetic with clear, functional UI patterns for developer tools.

## 1. Identity DNA

HashiCorp's design system is built on the principle of professional restraint, much like a well-documented engineering schematic. Every element serves a functional purpose, signaling reliability and technical credibility through deliberate minimalism rather than ornamentation.

**One-liner:** A clean, authoritative platform for cloud infrastructure and security management
**Keywords:** Infrastructure · Cloud · Security · Developer · Reliable
**Analogy:** An industrial control panel for the cloud

## 2. Color

The color system is a disciplined monochrome palette anchored by a high-contrast foundation. A single, purposeful blue accent color provides functional emphasis without competing with the primary content hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0E12` | main background |
| `--bg-soft` | `#FAFAFA` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#3B3D45` | secondary text |
| `--muted` | `#B2B6BD` | placeholder |
| `--muted-soft` | `#D5D7DB` | weak hint |
| `--accent` | `#2264D6` | single accent |
| `--line` | `rgba(213, 215, 219, 1.0)` | divider |

**Color principle:** High contrast dark mode with a single dominant corporate blue accent

This approach ensures color never becomes decorative noise, but remains a clear signal for interactive elements and key information.

## 3. Typography

The typographic voice is defined by humanist-sans, chosen for its clarity and approachability within a technical context. Clear hierarchical contrast between headings and body text establishes an immediate information structure.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.1 | 600 | -0.42px | Main headlines |

**Type rules:**
- Use system-ui sans-serif for most body text
- Use a custom humanist sans for primary headings and branding
- Use mono for code snippets and technical labels

## 4. Spacing

Spacing follows a consistent 4px base grid, creating a predictable and harmonious rhythm across all components and layouts.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px base grid with generous whitespace between sections

## 5. Surfaces

Surfaces are defined by thin, low-contrast borders and minimal shadows, creating depth through suggestion rather than decoration. This establishes a clean, layered interface where content remains the primary focus.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - 0px 1px 1px 0px rgba(97, 104, 117, 0.05)
  - 0px 2px 2px 0px rgba(97, 104, 117, 0.05)
  - 0px 1px 2px 1px inset rgba(101, 106, 118, 0.05)
- **Borders:** 1px solid rgb(213, 215, 219)

## 6. Layout

The layout skeleton is centered and spacious, employing generous whitespace to create focused reading paths. This structural simplicity guides attention to core content and tools without visual competition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard centered container with flexible grid columns

## 7. Motion & Interaction

Motion is applied with surgical precision, using smooth transitions that provide feedback without drawing attention to themselves. The philosophy prioritizes usability and state clarity over flourish, ensuring animations serve a functional, not decorative, purpose.

- **Durations:** micro 150ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Quick color and background transitions on hover
  - Subtle opacity changes on focus and interaction

- **Hover:** Color and background-color changes within 0.15s ease-in
- **Click:** Immediate visual response with subtle scale or color shift
- **Transition:** Smooth color and border-color transitions across interactive elements
- **Keyboard:** Standard focus ring using box-shadow for accessibility

## 8. Voice & Don'ts

The editorial voice is professional, technical, and authoritative, matching the precision of the tools it describes. Direct statements about capabilities are preferred, supported by clear, action-oriented calls to action.

- **Tone:** Professional, authoritative, and technical
- **Headline style:** Short, punchy, and declarative (e.g., 'Do cloud right')
- **CTA style:** Action-oriented and direct (e.g., 'Meet The Infrastructure Cloud', 'Get started')
- **Avoid:** Overly casual or slang language / Flowery or overly descriptive adjectives / Aggressive or overly sales-y punctuation / Excessive exclamation marks

### Don'ts
- ❌ Don't use a complex grid layout — screenshot shows a simple centered container with generous whitespace
- ❌ Don't use a wide variety of colors — screenshot shows a palette dominated by white, black, and one primary blue accent
- ❌ Don't use decorative or script fonts — screenshot shows clean, professional sans-serif typography throughout
- ❌ Don't use harsh, thick borders — screenshot shows subtle 1px borders with very low opacity or color contrast
- ❌ Don't use heavy, dark shadows — screenshot shows almost no shadows, or very subtle ones for depth
- ❌ Don't use loud, bright accent colors everywhere — screenshot shows the blue accent used very sparingly for primary actions

The system deliberately avoids playful elements, decorative backgrounds, and multiple accent colors to maintain its enterprise-grade clarity.

## System Prompt (paste into AI tool)

```
This is a professional, enterprise-focused website for cloud infrastructure and security tools. The design is clean, restrained, and authoritative, using a dark mode hero with a mostly monochrome palette (black #0D0E12, white #FFFFFF, grays #D5D7DB, #B2B6BD) and a single primary corporate blue accent (#2264D6). Typography relies on a professional humanist sans-serif for headings and a standard system-ui sans-serif for body text, with a custom monospace for code elements. The layout is a standard centered container with generous whitespace. Critical design rules: Avoid decorative fonts, avoid complex multi-column grids, avoid loud multi-color palettes, avoid heavy drop shadows, avoid aggressive sales copy, and avoid excessive use of the primary blue accent color.
```
