Consistency and cost reduction are two of the key benefits of developing a design system. Having a multi-platform design system that serves a wide range of applications, the web team needed specific components using the foundations of our system.

A system within the system

Holaluz Design System is composed of two artifacts: Watt, our Figma library, and Margarita, our VueJS component repository. Both artifacts influence each other with continuous syncronizations between the Frontend Crew and the Product Design Crew. This dynamic allowed us to speed up both the design and frontend work. But something was feeling odd in our public website. Although we have a well-documented system, we found several components with different designs for the same purpose. We discovered two issues:

• Some Figma files and web pages were designer prior to our design system and kept some legacy components.
• Despite having a complete set of guidelines, it was still possible to build the same component in different ways that were compliant with the system. We needed more detailed restrictions for some use cases.

To address this issue, we needed a component library specific for our web. This is part of a process where all the teams have defined specific components for their applications.

Holaluz platform gravitating our Design System. The System brings all the foundations and those are used when building platform-specific components.

Creating the components

In order to have a complete bundle of components that serve most of our purposes, we followed this process:

• Web audit. We listed redundant and non-compliant components.
• Consolidating. We selected or redesigned one final component, with its variants if necessary.
• Rebuild pages. With our new components, we could create our existing pages consistently. This approach allows us to change one component across all the site at once in the future.

Some component examples for Holaluz web

Page examples using Holaluz web component library.