Spark Mail
Scaling Dark Mode across a cross-platform email product
Client
Type
Year
Role
Deliverables
Design Strategy
Color Tokens
30+ Main App Screens
Design Documentation
Team Onboarding
OVERVIEW
Spark was rebuilding its desktop application as part of Spark 3.0. While the new product introduced a modern interface, one important capability was missing: Dark Mode.
Adding Dark Mode, however, wasn't simply a visual redesign.
The existing production workflow required designers to manually recreate every screen, developers maintained inconsistent color tokens, and each new feature doubled implementation effort.
Instead of treating Dark Mode as another UI project, I approached it as both a customer experience problem and a design system challenge.
CHALLENGE
The project had two equally important dimensions:
Customer Experience
Users expected the same readability, hierarchy and usability they already had in Light Mode.
Poor Dark Modes often reduce contrast, flatten visual hierarchy and increase eye strain.For an email application—where users spend hours reading text—this becomes a usability issue rather than simply a visual preference.
Production
Dark Mode production across the company relied heavily on manual work.
Problems included:
inconsistent color naming
duplicated color tokens
opacity-based colors
manual recreation of every new feature
additional communication between designers and developers
Every future release effectively required designing the product twice.
STRATEGY
Instead of designing Dark Mode screen-by-screen, I divided the work into 3 parallel tracks:
1.Designing the Experience
Accessibility
Since reading email is Spark's primary use case, typography became the highest priority.Every text style was validated against WCAG AA and AAA contrast standards using accessibility testing tools.Instead of maximizing contrast everywhere, I carefully balanced readability with long-session comfort to reduce visual fatigue.
Rebuilding visual hierarchy
Traditional shadows become ineffective on dark surfaces.To preserve depth, menus, floating windows and compose panels, I introduced an elevation system based on layered surfaces rather than shadows.
2.Solving the Production Problem
This became the most valuable part of the project.
During research I discovered that Dark Mode automation could eliminate most repetitive design work—but only if the design system followed strict token parity.
Unfortunately, Spark's existing palette couldn't support automation.
So I redesigned the color architecture itself:
standardized semantic color tokens
removed redundant colors
aligned Light and Dark palettes one-to-one
replaced inconsistent elevation styles
cleaned naming conventions
worked with engineering to align design tokens with the codebase
Once both palettes became structurally identical, Dark Mode could be generated automatically using the Swapper plugin instead of being recreated manually.
Instead of designing every screen twice, designers could switch themes almost instantly and spend their time validating edge cases rather than rebuilding interfaces.
3.Improving Cross-Functional Collaboration
Because this changed how multiple teams worked, implementation required close collaboration with engineering.
Together we reviewed the desktop color library, removed redundant values and aligned implementation with the design system. To support adoption across the design organization, I also created documentation, recorded walkthroughs and onboarded each designer individually to the new workflow.
This ensured the process could continue without depending on a single designer.
IMPACT
User Experience
Accessible Dark Mode meeting AAA contrast standards
Clear hierarchy using an elevation system
Comfortable long-form reading experience
Positive validation from beta users (10 of 11 preferred the new Dark Mode)
Design Operations
Reduced project delivery from an estimated 8–10 weeks to 6 weeks
Approximately 20% reduction in production effort before release
Automated Dark Mode generation for future features, eliminating nearly all repetitive design work
Standardized design tokens between design and engineering
Reduced communication overhead between designers and developers
This project fundamentally changed how I think about design systems.
The interface users see is only part of the product. The systems designers and engineers use every day often have a much larger impact on delivery speed and product quality.
That's the story behind this project.
Curious what else I've worked on?