Working closely with our engineers, I developed a design system rooted in Tailwind CSS, that improved visual consistency, reduced build time for new features by ~20% and allowed the product to grow sustainably.

✨ Project Overview

💭 Problem

<aside>

As CultureAI’s B2B SaaS platform matured, speed of delivery started causing problems. I was designing faster than I could organise, meaning styles were duplicated, components weren’t reused, and engineers often had to guess or rebuild UI from scratch. The result was inconsistent experiences for users and wasted time for the team.

I needed to create shared language between design and engineering that was scalable, flexible, and integrated with how we already worked.

</aside>

🎯 Alignment

I began by embedding myself in how engineers worked day to day. Tailwind was already our styling backbone, so I designed tokens and components that mirrored its logic, making the system feel familiar. This involved a lot of back and forth with the team to align on naming conventions and what made the most sense to them.

<aside>

• 💬 Daily conversations with the engineering team </aside>

🧑‍💻 Design Process

I then re-structured or created new components in Figma to include:

<aside>

• Token-driven styling using tailwinds values for spacing, typography, color, and radii </aside>

<aside>

• Semantic naming conventions → intent-based labels that made sense to the engineering team. These were the users of the system so clarity for them was key </aside>

<aside>

• 250+ variants, states and variables to speed up design </aside>

<aside>

• Documentation → not just the “how,” but the “why,” explaining when to use (and when not to use) each element </aside>

<aside>

• Prototyping to better understand interaction details </aside>