The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Overview

Learn about the Helios Design System, why it exists, and the strategy behind the system.

What is a design system

A design system is a set of guidelines, standards, assets, and processes to help organizations design, build, and deploy products rapidly and consistently.

Design systems are often equated with a UI kit or component library. In reality, an effective design system spans the entire lifecycle of a product, from ideation to iteration and everything in between.

What is Helios

Helios is the design system built by the HashiCorp Design System Team. It’s commonly referred to as HDS.

Helios is available and recommended for all HashiCorp product teams using Ember.js. We also support teams using alternative frameworks or libraries, such as React, on a case-by-case basis via our design assets, tokens, and best practice guidance.

Using Helios ensures the different product lines share a common design language. We work closely with these teams on integration and implementation while collecting feedback to understand consumer needs and inform our roadmap.

For more information on how to use the design system, visit our getting started guides for designers and for engineers or visit our public GitHub repository.

When to use Helios

Customer-facing products

Helios was specifically created for customer-facing products.

All HashiCorp product teams have adopted Helios as the single source of truth for the design language, components, and patterns used to build the UIs of their consumer-facing products.

Internal products

Helios is not meant to be used as a general-purpose UI library.

If you intend to use Helios for internal products or tools in HashiCorp contact the Design Systems Team before starting so we can discuss if Helios is a good fit for your team and how this might affect system overhead (changes, maintenance, support, etc).

External products

Helios is not meant to be used outside of HashiCorp.

If you’re not a HashiCorp employee, you’re more than welcome to use the Helios design system as a reference, but we don’t provide support if you use it to build your product or UIs. At any moment, we may introduce changes to our assets or components that could potentially break your product or UIs.

Benefits of using Helios

While increasing visual and functional consistency across products is the most visibly notable result of design system adoption, other benefits include:

Helios architecture

While the scale of a design system largely depends on the needs of those consuming it, the fundamental structure and architecture remain largely the same across systems.

In Helios, we offer the following:

We structure our components, icons, and design tokens in a monorepo using yarn workspaces and publish a collection of libraries in Figma.

Resources

Design system inspiration

These design systems inspire us and have paved the way for the greater design system community.