Home
DESIGN.mdStar on GitHub

Terraform

Automate infrastructure on any cloud — provision, change, and version resources safely with infrastructure as code.

Providers Modules State HCL Registry Plan & Apply
Signature — Plan & Apply
acme-infra — terraform
Colors
Primary — Terraform purple
purple#7B42BCBrand, primary CTA
purple-hover#713DADHover
purple-active#65369APressed / active
purple-light#A067DADark-mode lift
Plan diff — semantic
create#23C05C+ resources to add
update#E5A000~ change in-place
destroy#E5484D- resources to destroy
hashicorp-blue#2E71E5Corporate link
Neutrals
ink#1B1D22Text, dark page
grey#656A76Secondary text
border#DADADDBorders
off-white#F9F9FBPage background
terminal#0A0A0CCLI background
Typography — Gilmer · Metro · DejaVu Sans Mono
display
Gilmer · 700
Terraform
54px700
h1
Gilmer · 700
Automate Infrastructure on Any Cloud
32px700
h2
Gilmer · 600
Infrastructure as code
22px600
body-lg
Metro · 400
Provision and manage resources across any cloud or service.
17px400
body-sm
Metro · 400
Preview changes before you apply them.
13px400
mono
DejaVu Sans Mono · 400
resource "aws_instance" "web" { ... }
12.5pxmono
Components
Buttons
Plan diff badges
+ add ~ change - destroy module
CLI
Radius
5px
6px
10px
Guardrails
DO
Use Terraform purple #7B42BC for primary actions and the mark — it is the brand
Color the plan diff semantically: green + add, amber ~ change, red - destroy
Keep the CLI in DejaVu Sans Mono on a near-black terminal in both themes
Set headings in Gilmer, body/UI in Metro — one role each
Lift purple to #8B52CC on dark so it stays legible
DON'T
Recolor the stacked-parallelogram mark — it is fixed Terraform purple
Use HashiCorp corporate blue #2E71E5 as Terraform's primary — purple owns Terraform
Set body or UI in Gilmer — it's display only; Metro owns the UI
Render a light terminal — the CLI is always dark
Fabricate plan output — use real resource types and a deterministic apply