Design system

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.

Colors
Typography

Parts of the 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 

Buttons
Inputs
Controls

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.

Table
alpiq-whitelabeling-alpiq
alpiq-whitelabeling-mercedez

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.

coustoer-portal
Search-Assets-2
backbutton

Interested in working together? Get in touch!

ernex24@gmail.com