---
name: Hashicorp
description: "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."
version: alpha

colors:
  background: "#0D0E12"
  primary: "#000000"
  secondary: "#3B3D45"
  tertiary: "#2264D6"
  neutral: "#B2B6BD"
  bg-soft: "#FAFAFA"
  bg-quiet: "#FFFFFF"
  muted-soft: "#D5D7DB"
  line: "rgba(213, 215, 219, 1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 52px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.42px"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A clean, authoritative platform for cloud infrastructure and security management

*An industrial control panel for the cloud*

## Colors

High contrast dark mode with a single dominant corporate blue accent

- **Background (`#0D0E12`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#3B3D45`)** — uses `ink-soft` token
- **Accent (`#2264D6`)** — uses `accent` token
- **Muted (`#B2B6BD`)** — uses `muted` token
- **Borders (`rgba(213, 215, 219, 1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

Standard centered container with flexible grid columns

*Rhythm:* Strict 4px base grid with generous whitespace between sections

## Elevation & Depth

- 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)

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Clean solid backgrounds with subtle 1px borders or 4px radius. Uses primary blue for 'Get started' and secondary white/black for other actions.
- **card:** Simple containers with subtle borders or shadows, often featuring gradient backgrounds for categorization.
- **chip:** Pill-shaped badges with light borders for status or labels.
- **input:** Standard form fields with 1px solid borders and subtle inner shadows on focus.
- **hero:** Full-width dark background with large typography and a prominent gradient mesh or abstract lighting effect.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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