Date: Aug 2025
AI Product, B2C
UI, Design Systems
When I joined Mirelo.AI, the company was experiencing the classic growing pains of a funded, fast-moving startup. While the engineering team had adopted Tailwind CSS for development efficiency, there was no centralized design source of truth. Design files were scattered, UI components were inconsistently implemented across the web app and marketing site, and every new feature required designers and engineers to rediscover or reinvent basic elements like buttons and typography. This inconsistency created a slow, error-prone workflow and risked diluting the product’s evolving brand identity.
The core problem: Our velocity and product cohesion were being bottlenecked by foundational design debt. We needed a single source of truth to align design and engineering, speed up iteration, and ensure a consistent user experience as we scaled.
I owned the end-to-end creation of Mirelo’s first design system to unify design and development.
Securing Buy-In: Presented a business case to founders, framing the system as critical infrastructure for speed and consistency, which unlocked the official Figma team.
Building Foundations: Audited all product UI to define and build core Figma tokens: Typography, Semantic Color Palette, Grid/Spacing, and Interactive Components (Buttons, Inputs).
Creating Primitives: Expanded the library into reusable, composable primitives (Icons, Form Elements, Feedback Indicators) using auto-layout and variant properties.
Documenting for Adoption: Built a central Notion hub with principles, component specs, and direct Tailwind CSS class mappings for engineers.
Establishing Governance: Instituted a lightweight process where new features trigger systematic updates, ensuring the system evolves with the product.
The implementation of the Mirelo Design System transformed our product development workflow from fragmented to streamlined.
⚡ 30% Faster Prototyping & Iteration: Designers (and later, new hires) could assemble high-fidelity, consistent mockups in hours instead of days by pulling from the trusted library.
👷♂️ Improved Developer Handoff by ~50%: Engineers no longer needed to pixel check or guess specifications. Handoffs became a conversation about logic and behavior, not visual corrections. The direct Tailwind class mapping eliminated translation errors.
🎯 Achieved Visual Consistency Across the Product Suite: The web app, landing pages, and internal tools began speaking the same visual language, strengthening brand recognition and user trust.
🏗️ Built a Scalable Foundation for Growth: The system was no longer a static project but a product itself. It provided a structured, low friction path for the team to introduce new features and for the company to scale the product team without sacrificing quality or velocity.
This project demonstrated that a design system’s greatest value is operational. By building the bridge between Figma and Tailwind and embedding the system into our process, I turned a tactical UI cleanup into a strategic asset that accelerated the entire product organisation.