Yahoo Design System
Yahoo’s products had never truly felt like they belonged together. From Fantasy Sports to Finance to Celebrity, each served a different audience — but that wasn’t the problem. Beneath it all, there was no shared foundation. No common language. Nothing that quietly said: this is Yahoo. The challenge was never unification. It was coherence.
One company.
Dozens of products.
Zero shared foundation.
Before:
no shared foundation. No common language.
Typography
Nothing in the product is seen more than type.
Not the logo. Not the colors. Type.
Fixed
Most of Yahoo's product experience is typography and imagery — and because publishers control the imagery, typography becomes the most powerful design lever we have. The question wasn't whether type could carry the brand, but how to make it legible enough to keep people engaged long enough to actually experience it — not just glimpse it. That meant readability without sacrificing expression. The result: Yahoo Sans and Yahoo Serif — a multi-weight system built on humanist letterforms chosen for their natural proportions and open shapes that stay readable at any size, in any context, while still carrying a distinct point of view.
Grotesque sans is the default because it signals modernity. But optimizing for voice at the expense of legibility means people work harder to read — and the moment reading feels like work, the brand disappears. Humanist letterforms solve both sides of that problem. Yahoo Sans and Yahoo Serif were built on open apertures, tall x-heights, and two-story forms that stay readable at any size — without sanding off the character that makes them distinctly Yahoo.
Legibility without losing voice
Approach
Product Adaptation
Component collection prioritizes coherent design and flexible use over pixel-perfect uniformity.
Flexible
Lead story modules
News stream
Category modules
Type styles & weights
Free
Channel Expression
Where products connect with their audience. This is where identity, tone, and emotion come to life.
Illustration
Podcast and video art
Photography direction
Motion and on-air graphics
Editorial storytelling
Every element in Yahoo's design system falls into one of three categories — each with a distinct role, and a deliberate amount of freedom.
Fixed
Trust & Recognition
These are the elements that make Yahoo instantly recognizable
Icons
Grid
Color system
Core typeface
Buttons
Interaction patterns
