HashiCorp Design System
Light · Generated 15/04/2026 · 44 colors · 39 type tokens · 21 spacing steps · 30 breakpoints · 7 motion tokens
MDS v1.0
Color Palette
Background Colors
Black
#000000
Dark BG
#0D0E12
Dark BG 2
#15181E
Dark Blue
#2B303C
White 2
#FAFAFA
White
#FFFFFF
Blue 4
#2B89FF
Blue 5
#1060FF
Blue 11
#7948FF
Orange
#FF6423
Dark Purple
#42225B
Text Colors
Dark Gray
#3B3D45
Dark Gray 2
#0C0C0E
Light Gray
#D5D7DB
Light Gray 2
#EFEFF1
Light Gray 3
#B2B6BD
Blue (link)
#2264D6
Blue 2
#656A76
Mid Gray
#808080
Dark Gray 6
#333333
Brand & Product Colors
Terraform
#7B42BC
Vault
#FFCF25
Consul
#E03875
Nomad
#06D092
Packer
#02A8EF
Boundary
#F24C53
Vagrant
#1868F2
Waypoint
#14C6CB
Gradient & Accent Colors
Light Blue
#6C81FF
Light Purple
#C08DFF
Light Blue 2
#A8B5FF
Lt Purple 2
#CFA9FC
Light Red
#FF8791
Lt Orange
#F9B571
Light Red 2
#FDAFB5
Lt Orange 2
#FFD1A2
Blue 10
#5990FF
Purple 2
#B457FF
Typography
Primary · HashiCorpSans / Inter
HashiCorp Sans
The world's most widely used open source infrastructure tooling — trusted by developers, operators, and security teams.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Mono · ui-monospace / Menlo
DejaVu Sans Mono
terraform apply -auto-approve
Regular · 400
Infrastructure
font-size-82px · 82px · Bold · letter-spacing: −0.42px · line-height: 95.9974px
Provision & Secure
font-size-52px · 52px · Bold · letter-spacing: −0.42px · line-height: 61.9996px
Multi-Cloud Networking
font-size-6xl · 42px · Bold · letter-spacing: −0.42px · line-height: 49.9968px
Terraform · Vault · Consul
font-size-4xl · 26px · Semibold · letter-spacing: −0.42px · line-height: 30.9998px
Provision, secure, connect, and run any infrastructure for any application.
font-size-lg · 16px · Regular · letter-spacing: 0.175px · line-height: 26px
HashiCorp is an IBM Company providing infrastructure automation solutions.
font-size-sm · 14px · Regular · letter-spacing: 0.175px · line-height: 22.9995px
PRODUCTS · SOLUTIONS · PRICING
Label · 13px · Semibold · UPPERCASE · letter-spacing: 1.3px (--letter-spacing-wide)
Line Heights
tight
14px
snug
16px
normal
18px
relaxed
20px
loose
21.9px
lh-6
23px
lh-7
24px
lh-8
26px
lh-9
27px
lh-10
30px
lh-12
40px
lh-14
62px
lh-15
96px
Letter Spacing
Display Hero
letter-spacing-tight
−0.42px · headlines, display text
Body Copy
letter-spacing-normal
0.175px · body text default
PRODUCT LABEL
letter-spacing-wide
1.3px · uppercase labels, badges
Spacing
Spacing Scale
21 tokens — 3px → 128px
3
4
6
7
8
9
11
12
15
16
19
20
24
32
40
48
56
64
88
96
128
Borders
Border Radii
SM
2px
MD
3px
LG
4px
XL
5px
2XL
6px
Full
8px
R7
50%
Border Widths
Hairline
1px — standard UI borders throughout MDS
Thin
2px — focus rings, emphasis borders
Shadows / Elevation
Shadow Tokens
6 levels — MDS elevation system
shadow-sm
Low elevation
Double 5% layered shadow at 1px and 2px — standard card elevation
shadow-md
Mid elevation
Paired 5% shadows — slightly larger spread for dropdowns and panels
shadow-lg
Inset
10% inset top shadow — inputs, concave surfaces, form fields
shadow-xl
Focus ring
Blue 3px focus ring + double elevation — keyboard accessibility indicator
shadow-5
Surface
1px ring + 2px base + 16px extended bottom — card-on-surface elevation
shadow-6
Floating
rgba(1,1,63,.1) 2px 19px -4px — deep navy tinted floating panel shadow
Z-Index
LayerValueUsage
z-1 · Base1Default stacking context, base content layer
z-2 · Raised2Slightly elevated elements, stacked cards
z-3 · Tertiary3Third-level stacked elements
z-4 · Navigation10Sticky navigation, persistent headers
z-5 · Critical9999Critical overlays, modals, dialogs, toasts
z-6 · System A666666667High-priority system layer A — chat widgets, live support
z-7 · System B666666668High-priority system layer B — always above layer A
z-8 · Max2147483642Near-max browser integer — absolute top priority (−5 from int32 max)
The sequential values 666666667 and 666666668 are a deliberate pair — chosen to be distinctive enough for third-party scripts (such as live chat or support overlays) to always stack reliably in order without conflicting with the int32 max boundary.
Breakpoints
📱
breakpoint-xs → bp-9
326–600px
Mobile range — 9 breakpoints from 326px to 600px for dense per-device targeting
📱
bp-10 → bp-15
650–768px
Large phone to tablet — 6 breakpoints including the standard 767/768 boundary
💻
bp-16 → bp-21
800–925px
Tablet to small desktop — 6 breakpoints for layout transitions at 800, 850, 860, 900, 924, 925
💻
bp-22 → bp-25
975–1024px
Standard desktop — covering 991/992 and 1023/1024 paired boundaries
🖥️
bp-26 → bp-28
1119–1150px
Wide desktop — the 1119/1120 pair and 1150 for large layout adjustments
🖥️
bp-29 → bp-30
1556–1600px
Ultra-wide — 1556px and 1600px for cinematic/4K viewport optimizations
Opacity
Opacity Tokens
No opacity tokens defined — HashiCorp uses CSS alpha values directly
The HashiCorp design system does not define named opacity tokens. Transparency is expressed directly through RGBA color values in the token set (e.g. rgba(101, 106, 118, 0.05) for shadows, rgba(178, 182, 189, 0.1) for borders). This is a deliberate pattern — opacity semantics are baked into the named color tokens rather than separated into standalone opacity values.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray--color-black1.94:1Fail
--color-dark-gray--color-white10.83:1AAA
--color-dark-gray--color-blue-43.16:1AA Large
--color-dark-gray--color-blue-52.13:1Fail
--color-dark-gray--color-dark-gray-31.78:1Fail
--color-light-gray--color-black14.57:1AAA
--color-light-gray--color-white1.44:1Fail
--color-light-gray--color-blue-42.38:1Fail
--color-light-gray--color-blue-53.52:1AA Large
--color-light-gray--color-dark-gray-313.39:1AAA
--color-blue--color-black3.86:1AA Large
--color-blue--color-white5.44:1AA
--color-blue--color-blue-41.59:1Fail
--color-blue--color-blue-51.07:1Fail
--color-blue--color-dark-gray-33.55:1AA Large
--color-light-gray-2--color-black18.29:1AAA
--color-light-gray-2--color-white1.15:1Fail
--color-light-gray-2--color-blue-54.42:1AA Large
--color-light-gray-2--color-dark-gray-316.8:1AAA
--color-light-gray-3--color-black10.32:1AAA
--color-light-gray-3--color-white2.04:1Fail
--color-light-gray-3--color-dark-gray-39.48:1AAA
CSS Variables Reference
Background Colors
Black--color-black#000000
Dark BG--color-dark-gray-3#0D0E12
Dark BG 2--color-dark-gray-5#15181E
Dark Blue--color-dark-blue#2B303C
White 2--color-white-2#FAFAFA
White--color-white#FFFFFF
Blue 4--color-blue-4#2B89FF
Blue 5--color-blue-5#1060FF
Blue 11 (violet)--color-blue-11#7948FF
Orange--color-orange#FF6423
Dark Purple--color-dark-purple#42225B
Terraform brand--terraform#7B42BC
Vault brand--vault#FFCF25
Consul brand--consul#E03875
Nomad brand--nomad#06D092
Packer brand--packer#02A8EF
Boundary brand--boundary#F24C53
Vagrant brand--vagrant#1868F2
Waypoint brand--waypoint#14C6CB
Text & Border Colors
Dark Gray 2 (strongest)--color-dark-gray-2#0C0C0E
Dark Gray (body)--color-dark-gray#3B3D45
Blue 2 (secondary)--color-blue-2#656A76
Blue (link)--color-blue#2264D6
Light Gray 2--color-light-gray-2#EFEFF1
Light Gray--color-light-gray#D5D7DB
Light Gray 3--color-light-gray-3#B2B6BD
Border faint--color-light-gray-4rgba(178,182,189,.1)
Border default--color-dark-gray-4rgba(59,61,69,.4)
Border strong--color-blue-6#616875
Border action--color-blue-8#0C56E9
Border highlight--color-blue-9#389AFF
Border purple--color-purple-2#B457FF
Typography
HashiCorpSans / Inter--font-family-basesystem-ui, Inter
Mono / Menlo--font-family-monoui-monospace
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2xs (13px)--font-size-2xs13px
sm (14px)--font-size-sm14px
lg (16px)--font-size-lg16px
xl (17px)--font-size-xl17px
2xl (19px)--font-size-2xl19px
3xl (20px)--font-size-3xl20px
4xl (26px)--font-size-4xl26px
5xl (34px)--font-size-5xl34px
6xl (42px)--font-size-6xl42px
52px--font-size-52px52px
82px (hero)--font-size-82px82px
tight (−0.42px)--letter-spacing-tight−0.42px
normal (0.175px)--letter-spacing-normal0.175px
wide (1.3px — labels)--letter-spacing-wide1.3px
Spacing
1 (3px)--space-13px
2 (4px)--space-24px
3 (6px)--space-36px
5 (8px)--space-58px
10 (12px)--space-1012px
16 (16px)--space-1616px
24 (20px)--space-2420px
32 (24px)--space-3224px
40 (32px)--space-4032px
48 (40px)--space-4840px
64 (48px)--space-6448px
80 (56px)--space-8056px
96 (64px)--space-9664px
128 (88px)--space-12888px
160 (96px)--space-16096px
192 (128px)--space-192128px
Borders & Radius
Hairline--border-width-hairline1px
Thin (focus)--border-width-thin2px
SM--radius-sm2px
MD--radius-md3px
LG--radius-lg4px
XL (form controls)--radius-xl5px
2XL (cards)--radius-2xl6px
Full (badges)--radius-full8px
Circle--radius-r750%
Motion, Layers & Breakpoints
Instant (default)--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal250ms
Slow--duration-slow300ms
Slower--duration-slower400ms
Duration 6--duration-6600ms
Ease In--easing-ease-inease-in
Base--z-11
Raised--z-22
Navigation--z-410
Critical overlay--z-59999
System A--z-6666666667
System B--z-7666666668
Maximum (int32-5)--z-82147483642
XS (326px)--breakpoint-xs326px
Tablet (768px)--breakpoint-bp-15768px
Desktop (1024px)--breakpoint-bp-251024px
Wide (1120px)--breakpoint-bp-271120px
Ultra-wide (1600px)--breakpoint-bp-301600px
DESIGN SYSTEM PREVIEW · HASHICORP (MDS) · GENERATED 15/04/2026 · 44 COLOR TOKENS · 13 FONT-SIZE · 4 FONT-FAMILY · 4 FONT-WEIGHT · 15 LINE-HEIGHT · 3 LETTER-SPACING · 21 SPACING · 7 RADIUS · 2 BORDER-WIDTH · 6 SHADOW · 6 DURATION · 1 EASING · 8 Z-INDEX · 30 BREAKPOINTS · NO OPACITY