[$] Helium Design System v1.0

This is a reference design system primarily intended to serve as a framework. It is simple to adapt to your goals and adjust as needed.

It is also a wonderful starting point for learning how to make design systems. You can understand its parts and how they are made, and then utilize it to build your own system.

Full Preview in Figma

Design framework.

Making complex components is simple.

The system is built using slots and placeholders. Therefore, it is easy to make your own complex components.

Minimal style.

Easy to adapt to what you require.

Helium has a clean aesthetic and a sophisticated color scheme. All of this is simple to modify to match your needs in a couple of minutes.

Light / Dark components & styles.

The dark design theme is right out of the box.

Each component has a dark theme version. The color and style of the components have been carefully chosen to match accessibility and harmony.

Essential components.

There is everything you need.

There is nothing superfluous. However, a totally sufficient set of components to solve any design aims.

Typography system.

A well-thought-out and comprehensive system.

The only design system in the world where the typography works as expected. And it has exactly the styles you expect.

Annotation styles & tools.

Complementing and describing the design.

The good stuff is in the details. Everything you need to present and explain your design is included in the Helium design system. In addition to expanding the system.

• Fully accessible

100% compliant with WCAG 2.1 accessibility contrast ratios.

• Tested in practice

This is a system that works and has proven in real projects.

• High quality

Helium is the benchmark in the design systems industry.

Full Preview in Figma