Helios

# Helios — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by HashiCorp. "Helios" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Helios
**Owner:** HashiCorp
**Official documentation:** https://helios.hashicorp.design/
**Visual character:** Infrastructure-operator sobriety: product-branded accents (Terraform purple, Vault yellow) over a strict neutral operator console.

---

## Summary

Enterprise-infrastructure design system tuned for long-running operational surfaces.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue 200 / Action | `#1060ff` | `--token-color-palette-blue-200` | Primary actions and focus |
| Foreground Primary | `#3b3d45` | `--token-color-foreground-primary` | Body text on light |
| Foreground Strong | `#0c0c0e` | `--token-color-foreground-strong` | Headings; default dark canvas |
| Page Faint | `#fafafa` | `--token-color-page-faint` | Default canvas (light) |
| Surface | `#ffffff` | `--token-color-page-primary` | Surfaces |
| Border | `#dedfe3` | `--token-color-border-primary` | Borders |
| Critical Red | `#c00005` | `--token-color-palette-red-200` | Errors |
| Success Green | `#008a22` | `--token-color-palette-green-200` | Success |
| Warning Amber | `#bb5a00` | `--token-color-palette-amber-200` | Warnings |
| Terraform Purple | `#7b42bc` | `--token-color-terraform-brand` | Terraform product accent |

## Typography

- **Body:** Helios Sans / system — weights 400, 500, 600, 700 — `-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif`
- **Mono:** Helios Mono — weights 400 — `ui-monospace, Menlo, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display-500 | `30px` | `38px` |
| display-400 | `24px` | `32px` |
| display-300 | `18px` | `24px` |
| body-300 | `16px` | `24px` |
| body-200 | `14px` | `20px` |
| body-100 | `13px` | `18px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `5px` |
| medium | `6px` |
| large | `8px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| surface-mid | `0 2px 3px rgba(101,106,118,0.1), 0 8px 16px -10px rgba(101,106,118,0.05)` |

## Motion

| Name | Value |
| --- | --- |
| default | `150ms ease` |

## Quick start (CSS)

```css
/* Helios — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://helios.hashicorp.design/ */

:root {
  /* Color */
  --token-color-palette-blue-200: #1060ff; /* Primary actions and focus */
  --token-color-foreground-primary: #3b3d45; /* Body text on light */
  --token-color-foreground-strong: #0c0c0e; /* Headings; default dark canvas */
  --token-color-page-faint: #fafafa; /* Default canvas (light) */
  --token-color-page-primary: #ffffff; /* Surfaces */
  --token-color-border-primary: #dedfe3; /* Borders */
  --token-color-palette-red-200: #c00005; /* Errors */
  --token-color-palette-green-200: #008a22; /* Success */
  --token-color-palette-amber-200: #bb5a00; /* Warnings */
  --token-color-terraform-brand: #7b42bc; /* Terraform product accent */

  /* Typography */
  --font-body: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Type scale */
  --text-display-500: 30px /* line-height 38px */;
  --text-display-400: 24px /* line-height 32px */;
  --text-display-300: 18px /* line-height 24px */;
  --text-body-300: 16px /* line-height 24px */;
  --text-body-200: 14px /* line-height 20px */;
  --text-body-100: 13px /* line-height 18px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-small: 5px;
  --radius-medium: 6px;
  --radius-large: 8px;

  /* Elevation */
  --shadow-surface-mid: 0 2px 3px rgba(101,106,118,0.1), 0 8px 16px -10px rgba(101,106,118,0.05);

  /* Motion */
  --motion-default: 150ms ease;
}
```

## Origin

Helios is HashiCorp's design system for the cloud-infrastructure product portfolio — Terraform, Vault, Consul, Nomad, Boundary. It crystallized publicly around 2022 after years of internal use, codifying patterns that appeared across HashiCorp's growing product surface.

## Governance

Centralized design-systems team owns Helios; product teams contribute through a public RFC process documented on the Helios docs site. Components ship as Ember Octane add-ons today, with React versions in development. Strong release-note discipline and explicit deprecation paths.

## Known for

- Operational density — the system is built for surfaces where users monitor, configure, and recover from real infrastructure problems.
- Documentation rigor — every component lists accessibility expectations, content guidelines, and integration patterns, not just visual specs.
- First-class dark mode — the canonical surface for infrastructure tooling is the dark variant, treated as primary not afterthought.

## Underrated

- The form patterns include real treatments for long-running operations: progressive disclosure, async validation, partial-save recovery — the kind of forms infra UI demands.
- Color tokens are HashiCorp-product-aware: each product family (Terraform purple, Vault yellow, Consul magenta) ships as a documented sub-theme, not a fork.

## Watch out for

- Heavy on Ember-specific ergonomics today; React adopters need to track the parallel implementation roadmap.
- Patterns assume infrastructure operators as the user — long sessions, expert knowledge, complex state. Lifting them onto consumer tools imports those assumptions.

## Components worth studying

- **Application State** — Empty / loading / error patterns specifically tuned for long-running operations and partial data states.
- **Side Nav** — Multi-product navigation with project-switcher and persistent contextual sub-nav, designed for operators who pivot across HashiCorp products in a session.
- **Form Validation** — Inline + summary validation with explicit recovery affordances, async server-validation handling, and progressive disclosure for long forms.

## When to choose Helios

Pick Helios as a study reference if you're building enterprise infrastructure, observability, or operational tooling. The Ember dependency limits direct reuse; the value is in the documented patterns.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Helios by HashiCorp — Enterprise-infrastructure design system tuned for long-running operational surfaces. Character: Infrastructure-operator sobriety: product-branded accents (Terraform purple, Vault yellow) over a strict neutral operator console. Use a primary colour near #1060ff, the typeface "Helios Sans / system" (or a close equivalent), corner radius around 5px, a spacing rhythm on a 4px base. Lean into what it's known for: Operational density — the system is built for surfaces where users monitor, configure, and recover from real infrastructure problems. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Helios docs](https://helios.hashicorp.design/)
- [Helios on GitHub](https://github.com/hashicorp/design-system)
- [HashiCorp brand](https://www.hashicorp.com/brand)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/hashicorp-helios) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._