Alpiq source of truth
Product designer, Zürich 2021
Alpiq is a leading company in the European energy sector specifically in energy trading, asset management, and electricity transmission, to support the operations they need to create many different applications, internal and customer-oriented.
To help them to speed the design and development process, visualize their ideas and create consistency in their applications I have created a design system.
- A set of guidelines to build the UI published in zero height: https://zeroheight.com/259757baf/p/97db68-alpiq-design-system (Guide for internal library)
- A UI Kit made with components in Figma: https://www.figma.com/file/5850O9ctnm43rg6rpv1kHK/alpiq-design-system?node-id=0%3A1
- And UI library is written in HTML and Sass
- Design tokens for (Colors, Margin, Padding, Typography)
- White labeling capabilities
One of the particular requirements of the design system is that needs to have white-labeling capabilities, the company has the need in some applications to change the brand to the client's brand, so each component must be white labeled.
The library is divided into three different sets of styles, Internal applications mainly admin dashboards, Customer-oriented, and trading dashboards, the main difference between the 3 are the margins, the paddings, and the size of the inputs the size of the typography, and menus.