Reviewing, stabilizing, and future-proofing a growing product foundation

Summary

When I joined Greenbone, the design system had grown organically alongside the product. The existing system worked, but only if you already knew how it worked.

Components were partially documented, colors were inconsistent, and dark mode required a lot of manual adjustments. Developers relied on the Mantine framework, while design files followed slightly different logic. That gap slowed implementation and created small but recurring inconsistencies across the products.

There wasn’t time for a big redesign. The task was to improve what we had, following already existing team conventions and processes.

What changed

From visual inconsistency to semantic structure

The first step was creating clarity at the foundation level.

I established a lightweight semantic token system for color, spacing, typography, and radii, aligned with the variables used in Mantine. I created a total of 60+ design tokens, that while still left room for edge cases, covered all we needed for a first phase. This meant:

What changed

Standarized components aligned with implementation

I audited core components and aligned them consistently to the new token structure. Interaction states, spacing, and typography scales were standardized and aligned with Mantine’s implementation logic. This led to:

What changed

Maintainable documentation with integrated accessibility

I implemented review checklists, structured Figma documentation templates, and changelog practices within the team. This led to:

Result

The design system shifted from something the team had to “work around” to something they could rely on. It became a stable product infrastructure, improving efficiency, consistency, and collaboration both within the design team and with development colleagues.