Helaba Design System

Helaba Design System documentation front page

Given that Helaba uses multiple front-end frameworks internally the decision was made to build the design system using web components.

Another design system designed by denkwerk got implemented by building upon Shoelace. In the same time news came out of a refreshed Microsoft Web App Store, which also got build upon Shoelace.

These two signals, and the fact that Shoelace is a very solid web component based UI library, got us in the position to also fork Shoelace and extend it to implement the Helaba Design System.

Besides Shoelace we used Figma Token Studio to synchorize design tokens into our front-end. Chromatic for visual testing, Playwright for interaction and accessibility testing. And Storybook to document the tokens, components, and usage guidelines.

The complete pipeline:

I was involved in the technical decisions, technical set-up, and leading the development of the design system.