/ Evolving in Place
Token architecture
Integration strategy
Stakeholder alignment
Component lifecycle
Documentation
Engineering coordination
Yahoo Finance / Principal Product Designer / Multi-year work
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 token architecture and retrofitting components. We didn't have to. I'd built Neo's color tokens to support multiple modes from the start, knowing dark mode was coming. That decision, made quietly and early, is what made a one-quarter ship possible.
Years later, new leadership brought in an outside agency to redirect Yahoo Finance's visual language. Most teams would have rebuilt from scratch. We didn't have to do that either. The system was built to absorb change.
/ Evolving in Place
Token architecture
Integration strategy
Stakeholder alignment
Component lifecycle
Documentation
Engineering coordination
Yahoo Finance / Principal Product Designer / Multi-year work
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 token architecture and retrofitting components. We didn't have to. I'd built Neo's color tokens to support multiple modes from the start, knowing dark mode was coming. That decision, made quietly and early, is what made a one-quarter ship possible.
Years later, new leadership brought in an outside agency to redirect Yahoo Finance's visual language. Most teams would have rebuilt from scratch. We didn't have to do that either. The system was built to absorb change.
/ Evolving in Place
Token architecture
Integration strategy
Stakeholder alignment
Component lifecycle
Documentation
Engineering coordination
Yahoo Finance / Principal Product Designer / Multi-year work
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 token architecture and retrofitting components. We didn't have to. I'd built Neo's color tokens to support multiple modes from the start, knowing dark mode was coming. That decision, made quietly and early, is what made a one-quarter ship possible.
Years later, new leadership brought in an outside agency to redirect Yahoo Finance's visual language. Most teams would have rebuilt from scratch. We didn't have to do that either. The system was built to absorb change.
/ Evolving in Place
Token architecture
Integration strategy
Stakeholder alignment
Component lifecycle
Documentation
Engineering coordination
Yahoo Finance / Principal Product Designer / Multi-year work
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 token architecture and retrofitting components. We didn't have to. I'd built Neo's color tokens to support multiple modes from the start, knowing dark mode was coming. That decision, made quietly and early, is what made a one-quarter ship possible.
Years later, new leadership brought in an outside agency to redirect Yahoo Finance's visual language. Most teams would have rebuilt from scratch. We didn't have to do that either. The system was built to absorb change.
How the token system worked
A semantic color token layer sat between raw values and components. Instead of referencing hex values, components referenced tokens like surface-1, surface-2, surface-3. Swap the token values for a new mode and the change cascaded across every component using them.
Web and native handled elevation in opposite directions, and dark mode added its own logic on top. The token system had to map all four combinations: web light, web dark, native light, native dark. Getting that right was the core design work. The rest followed.
Flow from primitive to semantic colors (in both light and dark modes)
How the token system worked
A semantic color token layer sat between raw values and components. Instead of referencing hex values, components referenced tokens like surface-1, surface-2, surface-3. Swap the token values for a new mode and the change cascaded across every component using them.
Web and native handled elevation in opposite directions, and dark mode added its own logic on top. The token system had to map all four combinations: web light, web dark, native light, native dark. Getting that right was the core design work. The rest followed.
Flow from primitive to semantic colors (in both light and dark modes)
How the token system worked
A semantic color token layer sat between raw values and components. Instead of referencing hex values, components referenced tokens like surface-1, surface-2, surface-3. Swap the token values for a new mode and the change cascaded across every component using them.
Web and native handled elevation in opposite directions, and dark mode added its own logic on top. The token system had to map all four combinations: web light, web dark, native light, native dark. Getting that right was the core design work. The rest followed.
Flow from primitive to semantic colors (in both light and dark modes)
Web vs native, without forking
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.
Web vs native, without forking
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.
Web vs native, without forking
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.
Shipping dark mode in a single quarter
With the infrastructure in place, the work was alignment on three things: onboarding, user control (defaulting to OS preference, account override for logged-in users), and a bug bash to find hard-coded color values that would break in dark mode.
The list of hard-coded values turned out short. That was the real proof the token work had been done right.
Yahoo Finance became the first Yahoo property to ship dark mode. One quarter, web and native, full product surface. Not the result of a heroic push. The result of infrastructure that was ready before anyone asked for it.
Shipping dark mode in a single quarter
With the infrastructure in place, the work was alignment on three things: onboarding, user control (defaulting to OS preference, account override for logged-in users), and a bug bash to find hard-coded color values that would break in dark mode.
The list of hard-coded values turned out short. That was the real proof the token work had been done right.
Yahoo Finance became the first Yahoo property to ship dark mode. One quarter, web and native, full product surface. Not the result of a heroic push. The result of infrastructure that was ready before anyone asked for it.
Years later, a new test
At the end of 2025, new leadership came in and brought an outside agency to redefine Yahoo Finance's visual direction. The work was strong. The question was how to bring it into a living system without breaking everything that already worked.
A naming problem was in the way. The redesign initiative had been called Neo. The design system was also called Neo. Leadership conflated the two, so when they wanted a philosophical break from the redesign era, they instinctively wanted to replace the design system too. Making that distinction clearly and repeatedly was part of the job.
Neo the redesign was over. Neo the design system was infrastructure. Six squads depended on it. Starting over wasn't a creative decision, it was an expensive one, and the cost would have fallen on teams who had nothing to do with the agency engagement.
At the end of 2025, new leadership came in and brought an outside agency to redefine Yahoo Finance's visual direction. The work was strong. The question was how to bring it into a living system without breaking everything that already worked.
A naming problem was in the way. The redesign initiative had been called Neo. The design system was also called Neo. Leadership conflated the two, so when they wanted a philosophical break from the redesign era, they instinctively wanted to replace the design system too. Making that distinction clearly and repeatedly was part of the job.
Neo the redesign was over. Neo the design system was infrastructure. Six squads depended on it. Starting over wasn't a creative decision, it was an expensive one, and the cost would have fallen on teams who had nothing to do with the agency engagement.
At the end of 2025, new leadership came in and brought an outside agency to redefine Yahoo Finance's visual direction. The work was strong. The question was how to bring it into a living system without breaking everything that already worked.
A naming problem was in the way. The redesign initiative had been called Neo. The design system was also called Neo. Leadership conflated the two, so when they wanted a philosophical break from the redesign era, they instinctively wanted to replace the design system too. Making that distinction clearly and repeatedly was part of the job.
Neo the redesign was over. Neo the design system was infrastructure. Six squads depended on it. Starting over wasn't a creative decision, it was an expensive one, and the cost would have fallen on teams who had nothing to do with the agency engagement.
From the deck, "Evolving the Design System"
From the deck, "Evolving the Design System"
From the deck, "Evolving the Design System"
Pilots, not migrations
We agreed on a strategy built around pilots and incremental absorption. The agency's files were the creative direction, not the source of truth. Our job was to translate that direction into something scalable and consistent with how Neo worked.
Two surfaces became pilots: Homepage and Crypto Hub. They'd use new components first. Everything else stayed on Neo. New components moved into the core library only once they were validated in real product, documented, and built to the same standard as the rest. No parallel system. No fork. No moment where a designer had to wonder which library was current.
Agency files (🚫 Do not use)
Neo sandbox (🔵 For approved pilots only)
Storybook code repository (🟢 Code source of truth)
Neo core (🟢 Design source of truth)
Pilots, not migrations
We agreed on a strategy built around pilots and incremental absorption. The agency's files were the creative direction, not the source of truth. Our job was to translate that direction into something scalable and consistent with how Neo worked.
Two surfaces became pilots: Homepage and Crypto Hub. They'd use new components first. Everything else stayed on Neo. New components moved into the core library only once they were validated in real product, documented, and built to the same standard as the rest. No parallel system. No fork. No moment where a designer had to wonder which library was current.
Agency files (🚫 Do not use)
Neo sandbox (🔵 For approved pilots only)
Storybook code repository (🟢 Code source of truth)
Neo core (🟢 Design source of truth)
Pilots, not migrations
We agreed on a strategy built around pilots and incremental absorption. The agency's files were the creative direction, not the source of truth. Our job was to translate that direction into something scalable and consistent with how Neo worked.
Two surfaces became pilots: Homepage and Crypto Hub. They'd use new components first. Everything else stayed on Neo. New components moved into the core library only once they were validated in real product, documented, and built to the same standard as the rest. No parallel system. No fork. No moment where a designer had to wonder which library was current.
Agency files (🚫 Do not use)
Neo sandbox (🔵 For approved pilots only)
Storybook code repository (🟢 Code source of truth)
Neo core (🟢 Design source of truth)
A lifecycle teams could trust
For the incremental approach to work, everyone needed to know how a component traveled from early exploration to something teams could safely use in production. I documented a four-step lifecycle and built it into a stakeholder deck so engineers, designers, and PMs all worked from the same mental model. Design in the sandbox. Build in code. Move into Neo core. Communicate and stabilize.
Status was baked into component names in Figma. Button – Stable. Divider – Deprecated. Toast – Legacy. Card V2 – Experimental. No hunting. No ambiguity. The status was visible the moment you selected a component.
A lifecycle teams could trust
For the incremental approach to work, everyone needed to know how a component traveled from early exploration to something teams could safely use in production. I documented a four-step lifecycle and built it into a stakeholder deck so engineers, designers, and PMs all worked from the same mental model. Design in the sandbox. Build in code. Move into Neo core. Communicate and stabilize.
Status was baked into component names in Figma. Button – Stable. Divider – Deprecated. Toast – Legacy. Card V2 – Experimental. No hunting. No ambiguity. The status was visible the moment you selected a component.
A lifecycle teams could trust
For the incremental approach to work, everyone needed to know how a component traveled from early exploration to something teams could safely use in production. I documented a four-step lifecycle and built it into a stakeholder deck so engineers, designers, and PMs all worked from the same mental model. Design in the sandbox. Build in code. Move into Neo core. Communicate and stabilize.
Status was baked into component names in Figma. Button – Stable. Divider – Deprecated. Toast – Legacy. Card V2 – Experimental. No hunting. No ambiguity. The status was visible the moment you selected a component.
Example pages from a "Sprint in review" deck
Where it stood when I left
The pilots were underway. Components moved through exploration and into Neo core as they were validated. The system was absorbing the new visual direction the way it was always designed to: incrementally, without fragmentation, without stopping anyone from shipping.
The work was in progress. The hardest part was done: making the case that evolution was smarter than replacement, building the process to execute it, and aligning every discipline on the same mental model. That's the work that keeps a system from fracturing when pressure is highest.
Reconfigurable nested structure for a lead story component
Where it stood when I left
The pilots were underway. Components moved through exploration and into Neo core as they were validated. The system was absorbing the new visual direction the way it was always designed to: incrementally, without fragmentation, without stopping anyone from shipping.
The work was in progress. The hardest part was done: making the case that evolution was smarter than replacement, building the process to execute it, and aligning every discipline on the same mental model. That's the work that keeps a system from fracturing when pressure is highest.
Reconfigurable nested structure for a lead story component
Where it stood when I left
The pilots were underway. Components moved through exploration and into Neo core as they were validated. The system was absorbing the new visual direction the way it was always designed to: incrementally, without fragmentation, without stopping anyone from shipping.
The work was in progress. The hardest part was done: making the case that evolution was smarter than replacement, building the process to execute it, and aligning every discipline on the same mental model. That's the work that keeps a system from fracturing when pressure is highest.
Reconfigurable nested structure for a lead story component
Making use of the new List component to create a page section
Making use of the new List component to create a page section
Making use of the new List component to create a page section
Related
The system that absorbed both stress tests was built years earlier with exactly this kind of evolution in mind.
Related
The system that absorbed both stress tests was built years earlier with exactly this kind of evolution in mind.
Related
The system that absorbed both stress tests was built years earlier with exactly this kind of evolution in mind.
Related
The system that absorbed both stress tests was built years earlier with exactly this kind of evolution in mind.
©2026 Drew Marshall. Site designed and built by yours truly (+ Claude)
Type set in Monument, 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 Monument, 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 Monument, 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 Monument, 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
.