Dark Mode
Design System Preview

Design System Inspired by HashiCorp

Enterprise infrastructure typography, product color systems, and whisper-level shadows — all distilled into a single-page design reference.

Get Started → View Documentation
Section 1

Color Palette

A multi-product color system using CSS custom properties. The parent brand is black-and-white with blue accents; each child product injects its own chromatic identity.

Brand Primary

Black
#000000
Primary brand, text on light
Dark Charcoal
#15181e
Dark mode backgrounds, hero
Near Black
#0d0e12
Deepest dark surface, inputs

Neutral Scale

Light Gray
#f1f2f3
Light backgrounds
Mid Gray
#d5d7db
Borders, dark button text
Cool Gray
#b2b6bd
Border accents (0.1-0.4 opacity)
Dark Gray
#656a76
Helper text, labels
Charcoal
#3b3d45
Secondary text on light
Near White
#efeff1
Primary text on dark

Product Brand Colors

Terraform Purple
#7b42bc
Terraform brand
Vault Yellow
#ffcf25
Vault brand
Waypoint Teal
#14c6cb
Waypoint brand
Vagrant Blue
#1868f2
Vagrant brand
Purple Accent
#911ced
Accent purple
Visited Purple
#a737ff
Visited links

Semantic Colors

Action Blue
#1060ff
Primary action on dark
Link Blue
#2264d6
Primary links on light
Bright Blue
#2b89ff
Active links, hover
Amber
#bb5a00
Warning states
Amber Light
#fbeabf
Warning backgrounds
Red
#731e25
Error states
Orange
#a9722e
Unified core orange
Navy
#101a59
Unified core blue
Section 2

Typography Scale

Brand headings use DM Sans (standing in for HashiCorp Sans) with tight line-heights and kern enabled. Body text uses the system-ui stack for maximum readability.

Display Hero
82px / 600 / 1.17
Infrastructure
Section Heading
52px / 600 / 1.19
Cloud at Scale
Feature Heading
42px / 700 / 1.19 / -0.42px
Automate Everything
Sub-heading
34px / 600 / 1.18
Provision and Manage
Card Title
26px / 700 / 1.19
Multi-Cloud Platform
Small Title
19px / 700 / 1.21
Zero Trust Security
Body Emphasis
17px / 600 / 1.35
HashiCorp provides infrastructure automation to provision, secure, connect, and run any infrastructure for any application.
Body Large
20px / 400 / 1.50
Automate your multi-cloud infrastructure provisioning workflows with declarative configuration files.
Body
16px / 400 / 1.63
Infrastructure as code lets you manage your infrastructure across multiple providers with one consistent workflow. Define infrastructure as code to increase operator productivity and transparency.
Nav Link
15px / 500 / 1.60
Products   Solutions   Partners   Resources   Pricing
Small Body
14px / 400 / 1.71
Learn how to deploy applications across cloud providers with a standardized workflow.
Caption
13px / 400 / 1.69
Updated 2 days ago · 5 min read · Infrastructure Automation
Uppercase Label
13px / 600 / 1.69 / 1.3px
Infrastructure Lifecycle
Section 3

Button Variants

Asymmetric padding (9px 9px 9px 15px) on primary buttons is intentional. Product-colored buttons follow the same structural pattern but inject their brand color.

Core Buttons
Product-Colored Buttons
Badges / Pills
New Feature Beta HCP
Section 4

Card Examples

Dark surface cards with 8px radius and subtle border separation. Product accent bars indicate chromatic ownership.

Terraform
Infrastructure as Code
Define and provision data center infrastructure using a declarative configuration language. Manage multi-cloud deployments with a single workflow.
Learn more →
Vault
Secrets Management
Centrally store, access, and deploy secrets across applications, systems, and infrastructure. Dynamic secrets, encryption, and identity-based access.
Learn more →
Waypoint
Application Delivery
Build, deploy, and release applications across any platform with a consistent workflow. Simplify the developer experience for Kubernetes and beyond.
Learn more →
Section 5

Form Elements

Dark mode inputs use #0d0e12 background with 5px radius. Focus rings are 3px solid with product-appropriate color.

Default Inputs

We'll never share your email with anyone.
Please enter a valid email address.

Textarea

Section 6

Spacing Scale

Base unit of 8px. The scale provides granular control for component spacing while maintaining rhythm across the layout.

2px
3px
4px
6px
8px
12px
16px
20px
24px
32px
40px
48px
Section 7

Border Radius Scale

Nothing pill-shaped or circular. Tight, minimal radii from 2px to 8px communicate structural precision. The system is deliberately restrained.

2px Minimal
3px Subtle
4px Standard
5px Comfortable
8px Card
Section 8

Elevation & Depth

Arguably the subtlest shadow system in modern web design. On dark surfaces, shadows shift to higher-opacity blacks to maintain the whisper effect against dark backgrounds.

Level 0 — Flat
Default surfaces, text blocks. No shadow applied.
box-shadow: none
Level 1 — Whisper
Cards, buttons, interactive surfaces. Barely visible micro-shadow.
rgba(0,0,0,0.15) 0px 1px 1px, rgba(0,0,0,0.15) 0px 2px 2px
Level 2 — Focus
Focus rings for keyboard navigation. 3px solid, color-matched to context.
outline: 3px solid var(--focus-color)