Introducing Helios, HashiCorp’s New Design System

Over the past 10 years, HashiCorp has become a leader in cloud infrastructure automation, with open source projects at the core of everything we do. Our community has generated more than 250 million open source software downloads and has attracted some 5,000 open source contributors. Today, we’re proud to extend this collaborative mindset to the design system used in our product UIs by open sourcing our new design system, called Helios.

Helios is a flexible, scalable design system that enables product teams at HashiCorp to build first-class user experiences and interfaces, all crafted on the principles of accessibility, beauty, and consistency. Since its internal launch 6 months ago, Helios has grown to support our full suite of cloud products and includes more than 25 Ember.js components and hundreds of icons.

»Helios Helps Make Beauty Work Better

At HashiCorp, we believe that Beauty Works Better. The public launch of Helios is an active choice to deliver beautiful user interfaces and experiences across the full range of our customer-facing touchpoints. By establishing a standardized design language, we aim to increase design quality with greater consistency across our product lines. And we hope Helios can help others do the same.

Built to be accessible from the ground up, Helios gives designers and engineers a centralized repository of components that they can use to build inclusive, beautiful, and consistent user experiences. Engineers can leverage code samples and expert guidance to save development time and reduce unnecessary customization.

We’re launching Helios alongside Hermes, HashiCorp’s new open source document management system. By using Helios, Hermes’ designers and engineers were able to more easily create a beautiful experience for our employees that matches the experiences we build for our customers in our products.

»What’s Next for Helios

While we are excited by the progress we’ve made thus far, Helios is still very early in its journey. Inspired by atomic design principles, we plan to continue to add atomic and molecular elements to our library in the form of new icons, foundational components, and patterns that serve the needs of our products. Helios offers a unique glimpse of how we address UI tasks, and who knows, if you’re a designer or frontend engineer, you might get to work with it at Hashicorp one day.

To learn more about Helios, you can find documentation on usage and patterns on the dedicated Helios website or explore Helios’ source code on GitHub.