Atrias Design System

Atrias is the key information provider for the energy sector in Belgium, which needed to streamline their design process. The Atrias Design System (ADS) was designed to be the common design language for all digital experiences with Atrias.

The Atrias Design System is the foundation that helps create great new experiences & interfaces for all new and existing Atrias projects. The ADS includes design guidelines, a Figma component library, and a React package to kickstart new projects within Atrias.






8 months


UX/UI Designer

Components from the Atrias design system

The ADS is designed and developed for 3 different audiences at Atrias:

For designers

The ADS provides guidelines for creating new interfaces and digital experiences that are consistent and in line with the Atrias product portfolio.

For developers

The ADS contains ready-to-use UI components offered as a React package and is complete with code and styling, as well as examples on how to apply them directly.

For everybody else

The ADS has resources for logos, Atrias stock images, a bespoke icon set, and different MS Word and PowerPoint templates.

The ADS is internally available as a SharePoint, which is accessible to all employees and the primary means of documentation within Atrias. This also means everybody internally has access to the ADS and that it is easy to share, update and expand the ADS by anyone in the future. No technical expertise is necessary to update the ADS.

A screenshot of the Atrias Design System on SharePoint

The structure of the ADS and how it is available to the organization:  design guidelines & specific components

The ADS is not limited to guidelines on user interfaces (UI), it also contains guidelines and resources related to the Atrias logo & branding and document templates. It contains a set of overarching design principles, constraints, code libraries and best practices as input for consistent designs and user experiences.

The guidelines of the ADS are explained by simple do's and don'ts to illustrate how to apply the principle.

Do's and don'ts taken from the Atrias Design System

Practical do's & don'ts of color usage in Atrias UI design

The ADS is based on several principles of Google Material Design, but is developed to be stylistically different. The ADS reflects the Atrias brand and goal. To make sure guidelines are respected and make the design process more fluent, a Figma library has been created with standard Atrias components.

A screenshot of Figma, showing the different components of the design system of Atrias

ADS structure inside of Figma

Together with the development team, we also developed a React component library to ensure common components such as Typography, Colors, Buttons, and Input Fields are ready-to-use. This maintains consistency in design, ensures a single source of truth, as well as drastically speed up development time. 

Components from the Atrias design system

Component examples in Figma that also have a React counterpart

Atrias has a very specific set of functional domains, which required custom icons to be used in official documentations. These icons are energy sector specific and several examples can be found below; including Infeed, Billing, Reconciliation, and Allocation.

Icon designs, created for Atrias, showing different business concepts for the energy market.

Custom domain specific icons, designed for Atrias

Icon designs, created for Atrias, showing different technical concepts for the energy market.

Custom technology specific icons; designed for Atrias

Finally, the ADS was developed in parallel with the redesign of the Atrias public website. This allowed for a variety of test cases and to see if the ADS could handle them. Additionally, with the public website in place, there is now a live example in place of the ADS.

The Atrias website, on an ipad

The Atrias Design System in practice for the Atrias public practice