/ Dark Mode at Yahoo Finance
Yahoo Finance / Principal Product Designer / 3+ years
Stakeholder alignment
Component design
Documentation
Library structure
Token architecture
Engineering coordination
The best systems work happens before the ask
Yahoo Finance users had been asking for dark mode for a long time. When leadership finally prioritized it, most teams would have spent months figuring out the token architecture, mapping colors, and retrofitting components.
We didn't have to. The infrastructure was already in place.
When I set up Neo's color token system, I built it to support multiple modes from the start. Not because dark mode was on the roadmap, but because I knew it was coming and wanted the work to be ready when it was. That decision, made quietly and early, is what made a one-quarter ship possible.
/ Dark Mode at Yahoo Finance
Yahoo Finance / Principal Product Designer / 3+ years
Stakeholder alignment
Component design
Documentation
Library structure
Token architecture
Engineering coordination
The best systems work happens before the ask
Yahoo Finance users had been asking for dark mode for a long time. When leadership finally prioritized it, most teams would have spent months figuring out the token architecture, mapping colors, and retrofitting components.
We didn't have to. The infrastructure was already in place.
When I set up Neo's color token system, I built it to support multiple modes from the start. Not because dark mode was on the roadmap, but because I knew it was coming and wanted the work to be ready when it was. That decision, made quietly and early, is what made a one-quarter ship possible.
/ Dark Mode at Yahoo Finance
Yahoo Finance / Principal Product Designer / 3+ years
Stakeholder alignment
Component design
Documentation
Library structure
Token architecture
Engineering coordination
The best systems work happens before the ask
Yahoo Finance users had been asking for dark mode for a long time. When leadership finally prioritized it, most teams would have spent months figuring out the token architecture, mapping colors, and retrofitting components.
We didn't have to. The infrastructure was already in place.
When I set up Neo's color token system, I built it to support multiple modes from the start. Not because dark mode was on the roadmap, but because I knew it was coming and wanted the work to be ready when it was. That decision, made quietly and early, is what made a one-quarter ship possible.
/ Dark Mode at Yahoo Finance
Yahoo Finance / Principal Product Designer / 3+ years
Stakeholder alignment
Component design
Documentation
Library structure
Token architecture
Engineering coordination
The best systems work happens before the ask
Yahoo Finance users had been asking for dark mode for a long time. When leadership finally prioritized it, most teams would have spent months figuring out the token architecture, mapping colors, and retrofitting components.
We didn't have to. The infrastructure was already in place.
When I set up Neo's color token system, I built it to support multiple modes from the start. Not because dark mode was on the roadmap, but because I knew it was coming and wanted the work to be ready when it was. That decision, made quietly and early, is what made a one-quarter ship possible.
How the token system worked
The foundation was a semantic color token layer sitting between raw color values and components. Instead of components referencing specific hex values, they referenced tokens like surface-1, surface-2, and surface-3. Swapping those token values for a new mode (light to dark) cascaded automatically across every component that used them.
Web and native handled elevation differently. In web light mode, surface-1 sits at the bottom and surface-3 recedes. In native, the order inverts. Dark mode introduced its own logic for both platforms. The token system had to account for all four combinations: web light, web dark, native light, native dark.
Getting that mapping right was the core design work. Once it was right, the rest followed.
Flow from primitive to semantic colors (in both light and dark modes)
How the token system worked
The foundation was a semantic color token layer sitting between raw color values and components. Instead of components referencing specific hex values, they referenced tokens like surface-1, surface-2, and surface-3. Swapping those token values for a new mode (light to dark) cascaded automatically across every component that used them.
Web and native handled elevation differently. In web light mode, surface-1 sits at the bottom and surface-3 recedes. In native, the order inverts. Dark mode introduced its own logic for both platforms. The token system had to account for all four combinations: web light, web dark, native light, native dark.
Getting that mapping right was the core design work. Once it was right, the rest followed.
Flow from primitive to semantic colors (in both light and dark modes)
The part that almost forked the system
Web and native handled surfaces differently, and dark mode introduced its own logic on top of that. Native engineering was already building independently from web, not pulling from Storybook.
The easy answer was to fork the Figma file too. We didn't. We built a native mode instead, so both platforms stayed in the same library, working from the same color tokens and the same documentation. Engineering was split by necessity. Design didn't have to be.
Aligning our surface colors in both light and dark mode between web and native was tricky but allowed us to move forward without forking the system.
The part that almost forked the system
Web and native handled surfaces differently, and dark mode introduced its own logic on top of that. Native engineering was already building independently from web, not pulling from Storybook.
The easy answer was to fork the Figma file too. We didn't. We built a native mode instead, so both platforms stayed in the same library, working from the same color tokens and the same documentation. Engineering was split by necessity. Design didn't have to be.
Aligning our surface colors in both light and dark mode between web and native was tricky but allowed us to move forward without forking the system.
What execution actually looked like
With the token infrastructure in place, the main work was alignment on three things: the onboarding experience for users encountering dark mode for the first time, the user control (defaulting to OS-level preference, with account settings override for logged-in users), and a thorough bug bash to find hard-coded color values that hadn't been tokenized and would break in dark mode.
When the bug bash was done, the list of hard-coded values was short. That was the real proof that the token architecture had been done right. A system with good bones doesn't produce many surprises when you put it under pressure. This one didn't.
Shipped in a single quarter
Yahoo Finance became the first Yahoo property to ship dark mode. One quarter from prioritization to launch, across web and native, covering the full product surface.
That timeline wasn't the result of a heroic push. It was the result of infrastructure that was ready before anyone asked for it.
Shipped in a single quarter
Yahoo Finance became the first Yahoo property to ship dark mode. One quarter from prioritization to launch, across web and native, covering the full product surface.
That timeline wasn't the result of a heroic push. It was the result of infrastructure that was ready before anyone asked for it.
Related
Neo's foundation helped pave the path for dark mode and, later, evolving our visual language. These case studies show how.
Related
Neo's foundation helped pave the path for dark mode and, later, evolving our visual language. These case studies show how.
Related
Neo's foundation helped pave the path for dark mode and, later, evolving our visual language. These case studies show how.
Related
Neo's foundation helped pave the path for dark mode and, later, evolving our visual language. These case studies show how.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Mori and Fraktion by Mat Desjardins and Pangram Pangram,
Slow Death by Ayyara Letterindo, IM Fell English by Igino Marini
Grid lines
Dark mode
Metal mode
.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Mori and Fraktion by Mat Desjardins and Pangram Pangram,
Slow Death by Ayyara Letterindo, IM Fell English by Igino Marini
Grid lines
Dark mode
Metal mode
.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Mori and Fraktion by Mat Desjardins and Pangram Pangram,
Slow Death by Ayyara Letterindo, IM Fell English by Igino Marini
Grid lines
Dark mode
Metal mode
.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Mori and Fraktion by Mat Desjardins and Pangram Pangram,
Slow Death by Ayyara Letterindo, IM Fell English by Igino Marini
Grid lines
Dark mode
Metal mode
.