Scalable Design System

Scalable Design System

Scalable Design System

Scalable Design System

Company

Company

Cello

Cello

Introduction

Introduction

Cello is a B2B2C mobility platform serving 300,000 monthly users for parking and urban transportation solutions

Cello is a B2B2C mobility platform serving 300,000 monthly users for parking and urban transportation solutions

Outcome

Outcome

NPS improvement target arrived to 3% increase within 3 months post-launch
Ongoing efficiency gains - every future feature benefits from the systematic foundation

NPS improvement target arrived to 3% increase within 3 months post-launch
Ongoing efficiency gains - every future feature benefits from the systematic foundation

Service

Service

UX/UI Design, Design System, Cross-team Collaboration

UX/UI Design, Design System, Cross-team Collaboration

challenge

challenge

Upon beginning our engagement, we discovered a complex design landscape that required immediate strategic attention. The client's Figma workspace contained 130 screens—primarily screenshots from their live product—with no established design system or standardized components.

When tasked with implementing dark mode across all touch points, we recognized this request revealed a deeper organizational need. Creating a cohesive dark theme from fragmented screenshots would be technically unfeasible and strategically counterproductive.

SOLUTION

SOLUTION

Rather than proceeding with the original 2-month dark mode timeline, we proposed a foundational approach. We identified that scaling product design without proper infrastructure would continue generating technical debt and operational inefficiencies.

We recommended establishing a comprehensive design system first—transforming the screenshot collection into a scalable, maintainable design framework. This foundational work would not only enable the dark mode implementation but also position the organization for sustainable design growth and reduced long-term development costs.

Our approach prioritized long-term design maturity over short-term feature delivery, ensuring our client's investment would compound rather than create ongoing maintenance challenges.


Immediate Impact

  • Dark mode delivered in half a day instead of the projected 2+ months

  • 130 screens transformed from screenshot chaos to systematic, scalable design

  • Zero UI inconsistencies across the dark mode implementation

  • Developer workflow revolutionized - no more building from screenshots

System-Wide Benefits

  • Atomic component library with 95% reuse rate across new features

  • Design-to-development handoff time reduced by 70%

  • Bug reduction - UI inconsistency issues dropped to near zero

  • Feature velocity increase - new features shipped 3x faster using existing components

Business Results

  • NPS improvement target arrived to 3% increase within 3 months post-launch

  • Ongoing efficiency gains - every future feature benefits from the systematic foundation

The Bigger Win

This project proved that saying "no" to the brief and proposing a better solution creates exponentially more value. Instead of just solving dark mode, we solved the fundamental scalability challenge that would have cost them months of work on every future project.

design

design

With developer buy-in secured, we mapped out a systematic approach that would deliver both the immediate dark mode need and long-term scalability.

Phase 1: Atomic Component Library

We started by creating foundational elements - buttons, inputs, typography, spacing, and color systems - but designed each component to work seamlessly in both light and dark modes from day one. Every component was built with theme flexibility and modularity in mind, following atomic design principles.

Phase 2: Design Tokens Architecture

The key innovation was implementing design tokens - JSON files that stored all design decisions as theme-agnostic variables. Instead of hardcoding colors, we used semantic tokens like "background-primary" and "text-secondary" that could map to different values in light and dark themes.

Phase 3: Developers Integration

Working closely with the development team, we mapped the design tokens into their codebase. They cleaned up years of duplicated CSS, replacing it with references to our semantic token system that automatically supported theme switching.

Phase 4: The Magic Moment

With components designed for dual themes from the start, implementing dark mode was just activating the dark token set - half a day instead of 2+ months.

See full case study

See full case study

See full case study

See full case study

other projects