Yahoo Design System

After 20 years as one of the internet’s most iconic brands, Yahoo had drifted into a set of products that no longer felt fully connected. Consistency and efficiency mattered, but they weren’t enough. The bigger opportunity was a system that could bring the products back together while still giving each one room to develop its own voice.
The goal was unity, not uniformity.

Fixing a fractured brand

Over time, Yahoo's products evolved independently, each developing its own structure, behaviors, and personality. That diversity was a strength, not a flaw. The challenge wasn't to erase those differences, but to create a shared foundation that allowed every product to feel distinct while remaining unmistakably Yahoo.
Great systems don't eliminate variation. They decide where it belongs.

Harmony over consistency

Healthy ecosystems thrive on difference. Product ecosystems are no different.

Consistency is the easier argument because sameness is easier to manage. Harmony is the harder ambition because it asks differences to strengthen one another. Consistency creates order. Harmony creates meaning.

Fixed

The score

Shared foundations users never have to relearn and teams never have to debate. When this is right, nobody notices. That's the point.

grid / icons / buttons / color / cards / rows / navigation models / interaction patterns / design principles / well-established user mental models

Flexible

The arrangement

One component, multiple expressions. Each product finds its own rhythm and personality. This is where the product becomes a brand.

typography families & styles / section layouts / spacing / color use & emphasis / iIllustration styles

Free

The improvisation

Good ideas shouldn't need the system's permission to exist. This is the place preserved for dissent.

emerging patterns / unproven ideas / exceptions / opportunities not yet accounted for by the system

The goal was never more rules. It was more room.

Typography is voice

Nothing in the product is seen more than type.
Not the logo. Not the colors. Type.

In partnership with Commercial Type, I led the creation of Yahoo Sans and Yahoo Serif, custom typefaces designed around two core principles: split-second screen legibility and unmistakable Yahoo expression.

Layout is rhythm

Layout is felt before it's read. The same grid can feel dense or spacious, urgent or calm, editorial or utilitarian.

Different audiences, stories, and moments call for different rhythms.

Homepage

The system was built to allow range, and the homepage became the place where that range converged. As one of the most visited pages on the internet, it demanded a framework capable of balancing content, utility, and editorial expression. Every decision was about earning attention over time, creating more reasons to stay and more reasons to return.

News

The system was built to allow range, and News demonstrates the quieter, more neutral end of that range without sacrificing warmth. Through greater density, stronger hierarchy, and editorial restraint, the experience was designed to convey objectivity, trust, and credibility. The goal was not excitement, but authority.

Sports

The system was built to allow range, and Sports demonstrates how far that range could extend. The same foundations that make every product feel unmistakably Yahoo also gave Sports permission to celebrate the emotion and enthusiasm of fandom. The energy is the point, and the system makes space for it.