Case /01 · 2026
Pax Versicherung
A new identity needs more than a new homepage. I built the system behind it with Pax's UX/UI designer: one UI component library where the brand is a variable.
Given
A brand only holds if the hundredth button looks like the first.
It started with the customer portal at my.pax.ch: years of accretion underneath it, and an architecture that fought every change. Each new feature took longer than it should. The job was two things at once. A new UX/UI, and a refactor deep enough to cut the portal loose from the old architecture and make the code simple again. Then the brand refreshed, and the components built for that one portal became the seed of a shared library now running across several Pax products.
- /aThe same button has to look and behave identically on the marketing site and inside a staff tool, and stay that way after the next brand tweak.
- /bThe new look leans on two colours: a green primary and a deep-purple secondary. Wire those into a hundred hand-built components and every rebrand becomes a hunt through every file.
- /cThe public site and the internal apps don't share a runtime. One library had to render everywhere, server-rendered pages included, with no compiler shipped to the browser.
- /dA real product surface needs dozens of components. Each one at the same quality bar, or nobody trusts the system enough to use it instead of writing their own.
Proof
The brand is a variable. Components never name a colour. A button asks for --background-brand, an input asks for --border-focusring. Those semantic names resolve to the Pax green and the deep purple through a token pipeline fed from Figma. Swap the two brand values and the whole library reskins, light and dark, without a single component file being touched. That is the line between a component kit and a design system.
#8ccd0f primary#3c0078 secondary--background-brand resolves the rest
/02
Two brand colours, a whole semantic layer.
Green and deep purple are the only brand decisions. Surfaces, text, borders, focus rings and states all read from semantic tokens that resolve against those two. Design decides in Figma, code follows. Change the brand in one place and it propagates, because nothing below the token layer knows a hex string exists.
Brand primitives → semantic tokens → components
/03
Light and dark from one source.
A theme is just a second set of resolved values. Because components consume semantic tokens and never raw colours, dark mode isn't a parallel stylesheet anyone has to maintain. It falls out of the same mechanism: automatic by prefers-color-scheme, or forced with a data attribute.
Same component, two resolved themes
/04
How the library ships to every surface
The library is fully ahead-of-time compiled and safe to server-render, so the same 84 components power the public site and the internal apps from one package. Every component ships a Storybook story at ui.pax.ch. The system is a browsable catalogue.
One source, every surface
Rebuild
An unmaintainable portal, made fast to build on again.
The customer portal at my.pax.ch had grown for years into something that fought every change. Each new feature cost more than it should. The rebuild decoupled it from the old architecture and simplified it, to the point where features drop in fast again and the developer experience went from friction to flow. The component library grew inside that same rebuild, so every new primitive was proven in a real product the day it was written.
- Coupled to the old architecture
- Every feature took longer than it should
- Each change rippled through the code
- DX: friction
- Decoupled and maintainable
- Features drop in fast
- Library tested in a real product as it grew
- DX: flow
On the record
Nahezu eigenständig verantwortete er das Redesign unseres Kundenportals. Das Portal diente als Grundlage für eine gemeinsame Komponenten-Bibliothek, die heute produktiv in mehreren Applikationen eingesetzt wird.
Zu zweit haben wir ein Designsystem inklusive eigener Angular-UI-Library im Brand Refresh aufgebaut und erfolgreich auf mehrere digitale Produkte ausgerollt. Besonders geschätzt habe ich sein Mitdenken und seine proaktive Arbeitsweise.
Du hast einen wesentlichen Beitrag zur Entwicklung und Einführung unserer Pax UI Libraries geleistet und erfolgreich die Brücke zwischen Digital Sales und Software Engineering gebaut.
Q.E.D.
- /01 Two brand colours retheme the whole library, light and dark, no component touched. ↳ /b
- /02 One source of truth: Figma tokens flow to code, so design and engineering stop drifting. ↳ /a
- /03 Fully AOT-compiled and SSR-safe, so one package runs on every surface. ↳ /c
- /04 84 components, each documented and browsable at ui.pax.ch. ↳ /d
- /05 Powers the new pax.ch and Pax's internal applications from a single library. ↳ /a · /c
- /06 Cut loose from a legacy that fought every change, so features drop in fast and the DX turned to flow. ↳ Rebuild