Emitwise Design System

When I joined, the team was using scattered style guides and UI packs. There was no clear direction on which files to trust or which guidelines to follow. The signal that forced action: new features were being developed over screenshots of the product. Engineers were eyeballing pixel values from static images instead of using components. That was the straw that broke the camel's back.

We started by auditing all existing screens — product, marketing website, and brand assets. The gap was immediately clear: the product wasn't keeping pace with the brand, and consistency across both was fragile. We took the findings to Engineering. Together, we agreed that building a design system from scratch was not viable given our resources. The right move was to adopt an existing system and make it ours.

Before building anything, we defined three principles that would guide every decision: FAST — it needs to save time building the product. SIMPLE — easy to use, recognise, and not overcomplicate. SHARED KNOWLEDGE — easy to access and document. These mapped directly to our goals: increase Design and Engineering speed, manage consistent components across the product, and eliminate duplicate work through a shared language.

We named our design system Molecule. Starting from IBM Carbon's Figma file, we updated all colours and text styles to match our branding — instantly giving us a production-ready design system that was consistent with our visual identity. We created a phased rollout: most-used components first, then less frequent ones. In parallel, Engineering adapted the Carbon codebase for our stack.

Selling a design system in a resource-constrained startup is hard. No one sees the benefits until it's fully adopted. The project started through volunteered time, and was regularly questioned by teams who didn't see the value yet. My advice: be patient, advocate everywhere, and keep reminding people of the goals. Eventually they become advocates themselves.

Once live, Molecule revealed its own issues. Carbon components in Figma were outdated — Auto Layout and Variants weren't supported. We established rituals: regular design team reviews to surface issues and propose fixes. When Engineering hit gaps in the documentation, they joined our sessions. What started as a design-only project became a cross-disciplinary ceremony. That's when we knew it was working.

This is not a side project: everyone must know the time commitment before it starts. Don't do it in the dark. Advocate always: a design system needs constant promotion. Its benefits only become visible once it's truly adopted. Involve Engineering from day one: without a champion on the engineering side, the system will live in Figma and die there. Deep research matters: validate the system you're adopting end-to-end before committing. Surprises after adoption are expensive.