Design System
& Dark Mode

Design System
& Dark Mode

Design System
& Dark Mode

SMART MOBILITY | B2B2C

SMART MOBILITY | B2B2C

Background

Background

Background

Cello is a B2B2C mobility platform serving 300,000 monthly users for parking and urban transportation solutions.
Figma workspace revealed around 130 screens - most screenshots pulled from the live product.

Cello is a B2B2C mobility platform serving 300,000 monthly users for parking and urban transportation solutions.
Figma workspace revealed around 130 screens - most screenshots pulled from the live product.

This wasn't a “Dark Mode“ project - it was an intervention. We had to scale product design with no foundation, creating technical debt with every decision. The 2-month timeline for dark mode would mean manually recreating every screen, perpetuating the chaos instead of solving it.

This wasn't a “Dark Mode“ project - it was an intervention. We had to scale product design with no foundation, creating technical debt with every decision. The 2-month timeline for dark mode would mean manually recreating every screen, perpetuating the chaos instead of solving it.

Pain Points

Pain Points

Pain Points

Customer Pain Points

Based on user feedback, we discovered that users frequently activate parking in dark conditions. We wanted to drive innovation and decided to implement dark mode to improve the user experience during nighttime usage

Company Pain Points

No design system. When we were asked to "add dark mode", we realized the impossible position we put project in.
How to create a cohesive dark theme from a collection of screenshots?

Customer Pain Points

Based on user feedback, we discovered that users frequently activate parking in dark conditions. We wanted to drive innovation and decided to implement dark mode to improve the user experience during nighttime usage

Company Pain Points

No design system. When we were asked to "add dark mode", we realized the impossible position we put project in.
How to create a cohesive dark theme from a collection of screenshots?

Main goal

Main goal

Main goal

Increase NPS by 5% while positioning Cello as an innovation leader and aligning with competitor offerings in the mobility space.

Increase NPS by 5% while positioning Cello as an innovation leader and aligning with competitor offerings in the mobility space.

Impact

Impact

Impact

Product Impact

NPS improvement

3%

within 3 months

Ongoing efficiency gains

1:1

design–engineering parity

System-Wide Impact

]The results exceeded everyone's expectations, delivering both immediate wins and long-term strategic value.

Atomic componens

95%

reuse rate

Design-to-dev

70%

time to handoff

Feature velocity

3

times faster

UI inconsistency

0

dropped to almost zero levels

The Magic Moment

The Magic Moment

The Magic Moment

What started as a simple dark mode request became a complete organizational design system creation. By refusing to accept the status quo and proposing a systematic solution, we delivered exponentially more value than originally requested.

What started as a simple dark mode request became a complete organizational design system creation. By refusing to accept the status quo and proposing a systematic solution, we delivered exponentially more value than originally requested.

This project established Cello's design infrastructure for sustainable growth. Instead of solving one problem, we solved the fundamental scalability challenge that would affect every future design decision. The atomic design system continues to accelerate development and ensure consistency across all new features.

Two years later, this foundation continues generating value. Every new feature benefits from the component library, every design decision leverages the token system, and every developer onboarding is simplified by the systematic approach.

This project established Cello's design infrastructure for sustainable growth. Instead of solving one problem, we solved the fundamental scalability challenge that would affect every future design decision. The atomic design system continues to accelerate development and ensure consistency across all new features.

Two years later, this foundation continues generating value. Every new feature benefits from the component library, every design decision leverages the token system, and every developer onboarding is simplified by the systematic approach.

Building the Foundation: Atomic Design System + Design Tokens

Building the Foundation: Atomic Design System + Design Tokens

Building the Foundation: Atomic Design System + Design Tokens

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

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, 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 1: Atomic Component Library

We started by creating foundational elements, 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. Еvery design decision across 130+ screens was documented, standardized, and made scalable.

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. Еvery design decision across 130+ screens was documented, standardized, and made scalable.

Phase 3: Developer Integration

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

Phase 3: Developer Integration

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

We Can't Build Dark Mode on Screenshots

We Can't Build Dark Mode on Screenshots

We Can't Build Dark Mode on Screenshots

I presented a different approach: "Before we can build dark mode, we need to build the foundation that makes dark mode possible - and sustainable."

Creating dark mode from 130 screenshots would mean:

I presented a different approach: "Before we can build dark mode, we need to build the foundation that makes dark mode possible - and sustainable."

Creating dark mode from 130 screenshots would mean:

2+ months of manual recreation work

Inconsistent dark theme implementation

No scalability for future features

Technical debt that would compound with every update

But building an atomic design system first would mean:

But building an atomic design system first would mean:

Dark mode implementation in half a day (just swapping design tokens)

Scalable foundation for all future features

Consistent user experience across the platform

Massive time savings for ongoing development

Getting Buy-In: The Developer Alliance
When I explained this to the development team, their reaction was enthusiastic. They understood exactly what I was talking about - they'd been living with the pain of implementing inconsistent designs from screenshots.

Product was initially confused, but the developers became my champions. Product agreed because they could see how this would solve their daily workflow problems, not just the immediate dark mode request.

Getting Buy-In: The Developer Alliance
When I explained this to the development team, their reaction was enthusiastic. They understood exactly what I was talking about - they'd been living with the pain of implementing inconsistent designs from screenshots.

Product was initially confused, but the developers became my champions. Product agreed because they could see how this would solve their daily workflow problems, not just the immediate dark mode request.

My journey

My journey

My journey

This experience taught we that senior-level thinking means seeing beyond the immediate task to the underlying system problems. The confidence to say "no" to a brief and propose a better approach - backed by technical understanding and stakeholder education - defines strategic design leadership.

This experience taught we that senior-level thinking means seeing beyond the immediate task to the underlying system problems. The confidence to say "no" to a brief and propose a better approach - backed by technical understanding and stakeholder education - defines strategic design leadership.