Setting the foundation of a Design System

At Kulcs-Soft, a company specializing in business management and accounting software, I built the foundation of an advanced design system, with a primary focus on developing a token-based design library.

Responsibilities:
 UX design, UI design

My role:
 Product Designer

Project and background

The creation of a design system began as part of a redesign project. My role was to redesign the invoicing software, Kulcs Üzlet, with a focus on improving both its user interface and interaction design. The visual style had initially been defined by an external agency working on a separate project. However, the design materials I received were full of issues: inconsistent elements, unusual color usage, missing states, and poorly executed components. While I could use the agency’s overall visual direction as a starting point, I ultimately had to build an entirely new design library from scratch.

Why did we need a design library?

With two major projects already in progress — and a third on the horizon — it became clear that it was time to initiate a design system for Kulcs-Soft. There are also domain-specific areas of the user interface that require consistent and specialized design solutions, making a unified library even more essential.

How did I do it?

The scope

there are tons and tons of high end material available about design systems and how to create one, but the first step was identifying what we actually needed. Given the size of our company (one design team and one frontend team), I made a few key decisions:

  • Focus only on light mode.
  • Define base and semantic tokens, but skip component-level tokens for now.
  • List the essential components to build first.
  • Identify more complex UI patterns that required documentation, but not inclusion as reusable elements.

    • Technical Details

  • The plan was to establish Figma–Storybook sync for consistency between design and development — though this integration is still in progress.

    • Learnings

    Good

  • With strong support from our CTO, we had immediate buy-in from the company.
  • Setting the design foundation for a 30+ year-old company was a unique opportunity.

    • Not so good

  • A significant amount of time was spent defining a future-proof token structure and setting up the foundations for consistency and scalability. In retrospect, I underestimated the effort required.
  • Our frontend team initially lacked experience with design systems. Building components from scratch while maintaining their existing workload proved to be a bottleneck.
  • As a small team, we couldn't allocate enough resources to refine components with polished UI animations.
  • Looking back, starting entirely from scratch may not have been the best approach. It would have made more sense to use a mature framework as a staring point to accelerate development and achieve better results with fewer resources.