<aside> 🐣

Bringing a design system back to life

When I joined PayFit, the existing design system was outdated, fragmented, and largely unused. My challenge wasn’t just to rebuild it — it was to rethink everything from the ground up: the foundations, the library, the documentation, and above all, the adoption strategy.

</aside>

🧠 Foundations

Bring sense to the brand

The first step was to bring back clarity and consistency to the system’s core foundations.

We conducted a full audit of brand elements — colors, typography, iconography, elevation, spacing, radius — and defined precise usage rules for each.

Example of the primary color usage defined to ensure consistency in its application

Define brand flexibility

To manage visual consistency across different types of projects, we introduced a brand flexibility model, categorizing experiences based on how strictly they should follow the brand or not.

Establish a scalable design tokens architecture

We also established a clear, scalable design token architecture based on four layers:

• UI Element (surface, content, border, etc.)
• Role (primary, neutral, success, etc.)
• Emphasis (low, high, etc.)
• State (hover, disabled, etc.)

This structure helped us make tokens both developer-friendly and designer-meaningful.

Example of how a design token can be applied on a hover effect element