HashiCorp Infra Dual
HashiCorp-inspired infrastructure landing page. Ideal for infraestrutura cloud, devops, automação de infraestrutura, plataformas multi-produto. AI-ready template.
Use case: Infraestrutura cloud, DevOps, Automação de infraestrutura, Plataformas multi-produto
Historical Context
HashiCorp didn't arrive at dual-mode theming through aesthetic preference — it was an operational necessity. When your users are staring at terminal output and infrastructure graphs for twelve-hour incident responses, the interface needs to disappear. Their design language evolved from the practical reality that DevOps engineers work across wildly different ambient conditions: bright office floors during planning, dark war rooms during outages, and everything between. The infrastructure vertical has a specific relationship with light and dark modes that consumer apps never developed. Tools like Terraform, Vault, and Consul needed interfaces that could sit alongside terminal windows without creating jarring contrast shifts. HashiCorp's approach treats the two modes not as a toggle between inverted palettes, but as two complete tonal systems — each with its own contrast ratios, elevation cues, and information hierarchy. The dark mode isn't just 'flip the background'; the entire spatial language recalibrates. This dual-system thinking influenced the broader infrastructure tooling space. Datadog, Grafana, and PagerDuty all eventually adopted similar philosophies, but HashiCorp's Helios design system codified the pattern earliest with genuine rigor around semantic color tokens that maintain meaning across both modes.
When to Use
Reach for this pattern when building tools that live in split-screen workflows alongside terminals, code editors, or monitoring dashboards. It's essential for anything infrastructure-adjacent where users have strong mode preferences tied to working context rather than personal taste. Enterprise developer platforms, observability tools, CI/CD interfaces, and cloud management consoles all benefit from this approach. Skip it for marketing sites or content-heavy products where a single well-crafted theme serves better.
Design Principles
- Semantic tokens over raw values — every color decision references intent, not hex codes, so mode switching is a context change rather than a find-and-replace operation
- Equal citizenship for both modes — dark isn't an afterthought bolted onto a light-first system; both are designed simultaneously with independent elevation and contrast hierarchies
- Reduced saturation in dark contexts — infrastructure data is dense, and saturated colors in dark mode create visual fatigue during extended monitoring sessions
- Consistent spatial hierarchy across modes — shadows and borders trade roles between themes, but the perceived depth and grouping relationships remain identical
- Terminal-adjacent contrast calibration — UI surfaces are tuned to sit comfortably beside monospace terminal output without competing for attention or creating eye strain at boundaries
Technical Specs
Colors
Primary
Secondary
Effects
Dual-mode: seções brancas limpas + hero/produto em dark (#15181e). Font customizada com weight 600-700 e kern habilitado. Sistema de cores multi-produto (Terraform roxo, Vault amarelo, Waypoint teal, Vagrant azul). Micro-sombras dual-layer (rgba(97,104,117,0.05)). Labels uppercase 13px weight 600 com 1.3px letter-spacing. Border-radius tight (2-8px). Profundidade via layering de cor, não sombras. Body text relaxado (line-height 1.63-1.69).
Light/Dark
✓ Full / ✓ Full
Related
Last synced: 4/1/2026