Design system

Hundreds of applications and thousands of screens coexisted across two technology stacks: legacy software in Java Swing and new web applications in Angular. No shared source of truth existed. Every team rebuilt its own components, the two worlds drifted apart visually, and the handoff from design to development was paid for on every project.

I ran a large-scale UI audit: an inventory of components, a survey of duplicated colours and text styles, then a map of what Swing and Angular can each do — and what they cannot do the same way. Interviews with designers, developers and product managers completed the picture.

• what was genuinely reused from one project to the next;
• what was rebuilt because it could not be found;
• the constraints each technology places on design.

The architecture follows atomic design, driven by technology-agnostic design tokens: a design decision is made once and resolves in both Swing and Angular. In Figma that becomes a shared library — auto layout components, variants and component properties, then variables with modes for theme and density. WCAG accessibility sits in the foundations rather than being added afterwards.

Several dozen components and patterns are documented on zeroheight: anatomy, states, usage guidelines, do and don't, and handoff specs. It is the shared reference for designers and developers — the place where a question gets settled without a meeting.

A design system nobody tends soon becomes a dead library. I set up a contribution process, library versioning and a changelog. The most demanding patterns — dense data tables, complex forms — were reworked continuously from team feedback.