Yahoo Brand Design System Deep Dive

1. Brand Overview

Yahoo’s current design language is a mix of legacy brand recognition and modern UI conventions. The site presents itself as a content hub — news, finance, sports, lifestyle — but the visual system tries to unify these under one recognizable umbrella. The vibe is pragmatic but with pockets of playful color. This isn’t a pure minimalist tech aesthetic; it’s a functional, media-heavy layout with bits of brand personality injected through color accents and typography choices.

What’s clear: Yahoo is leaning into its purple heritage without drowning the interface in it. The signature purple is present in certain interactive states and branded components, but much of the UI leans on neutrals (white, dark greys) and functional blues. That makes sense for a site where the content is the hero — you don’t want the chrome to overpower the articles, videos, and feeds.

Typography uses two main families: a custom “yahooSans” and “centra,” both sans-serif with slightly different personalities. YahooSans is utilitarian with clean curves, while Centra is a bit more geometric and condensed in spots. They mix them in ways that might surprise you — headings swap between the two depending on context.

The spacing system is an 8px base grid, but the data shows they’re not religious about it — there are oddball values like 4.8px and 146.422px. This suggests legacy components or one-off designs creeping into the system.

Border radii range from sharp 0px to fully pill-shaped 9999px, and they’re not shy about using extremes. You’ll see 26px pills for buttons, 100px rounds for search bars, and 8px–12px for cards.

Overall, Yahoo’s design philosophy here: functional first, brand second. Content readability and interaction clarity dominate. The brand shows up in accent colors, certain link hovers, and font weights. It’s an interface built for browsing and scanning, not aesthetic contemplation — but it still nods to Yahoo’s identity where it matters.

2. Color System

2.1 Primary Colors

The semantic primary color in the data is rgb(255, 255, 255) (#ffffff). That’s unusual — most brands’ primary is a brand color, but Yahoo’s primary is literally white. That reinforces the content-first approach: the “primary” background is white, not purple or blue. The vibrant brand colors are relegated to accents.

The most recognizable brand hue here is rgb(125, 46, 255) (#7d2eff) and rgb(96, 1, 210) (#6001d2). These are deep purples used for buttons, links, and certain focus states. There’s also rgb(15, 105, 255) (#0f69ff) — a saturated blue for links and CTAs.

Against competitors like Google (blue primary for links) or MSN (flat greys), Yahoo’s purple accent stands out, but the heavy use of neutrals means it doesn’t overwhelm.

2.2 Complete Palette

2.3 Color Relationships

White (#ffffff) with dark grey (#1d2228) gives strong contrast — easily passes WCAG AA for text. Link blue (#0f69ff) on white is also safe. Purple (#7d2eff) on white is fine, but against dark grey, it can be borderline depending on weight and size — likely why hover colors shift to lighter purples (#7759ff) to maintain visibility.

Dark mode variants aren’t explicitly in the extracted data, but the palette includes deep greys and off-whites that could support it.

2.4 Usage Guide

• Best combinations: White background + dark grey text; Purple accents for interactive elements; Blue for links to differentiate from purple brand CTAs.
• Avoid: Purple text on dark purple backgrounds — contrast fails quickly.
• Links: Default blue (#0f69ff), hover to lighter purple (#7759ff) — keeps brand in play without sacrificing clarity.
• Borders: Use light greys (#dfdfdf, #e0e4e9) for subtle separation; avoid black borders unless deliberate emphasis.

3. Typography

3.1 Font Families

Two main families:

• yahooSans — Custom Yahoo typeface. Sans-serif. Clean, modern, slightly rounded.
• centra — Geometric sans-serif. More condensed, sharper edges. Fallbacks are “yahooSans Fallback” and “centra Fallback,” plus system fonts like Arial and Helvetica in one case.

No Google Fonts or Adobe Fonts — this is all custom/self-hosted.

3.2 Type Scale

3.3 Hierarchy

H1 at 30px with medium-bold weight (550) is a bit softer than the common 700 — friendly but still strong. Smaller headings mix Centra for variety and tighter line height. The multiple 13px caption styles show micro-typography attention — they tweak weights and line heights depending on context (labels vs metadata). The mix of families adds hierarchy without relying solely on size.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values: 4px, 8px, 12px, 16px, 20px.

4.2 Layout

Breakpoints range from mobile (320px) to large desktop (1536px). Notably, they have very granular breakpoints (95px, 468px, 700px) — possibly for specific component behavior.

5. Visual Elements

Border Radius

They use everything: hard corners (0px), subtle (3px, 4px), common (8px, 12px, 16px), large (24px, 26px), fully round (67px, 100px, 9999px).

9999px is for pills and round avatars. 26px for large pill buttons. 8px for cards. 12px for sections. 100px for search bars and mail check buttons.

Shadows

Mostly subtle: rgba(0,0,0,0.1) with small offsets (4px, 8px). Some heavier 0.5 alpha shadows for overlays. Not a shadow-heavy system — used sparingly.

Borders

Light greys dominate (#f5f5f5, #cdcdcd, #e0e4e9). Black borders exist but rare. 1px widths mostly. Dividers often use bottom-only borders.

6. Components

6.1 Buttons

Three main variants:

Primary Button
Default: bg #7d2eff, color #232a31, radius 26px, no shadow, no border.
Hover: semi-transparent white overlay, slight shadow.
Active: dark grey bg (#464e56).
Focus: text color shifts to light blue (#12a9ff).

Circular Icon Button
Default: bg rgba(0,0,0,0.35), radius 9999px.
Hover/Focus: same overlay/shadow pattern.

Outlined Pill Button
Default: transparent bg, dark grey text, 1px border #e0e4e9, radius 24px.
Hover/Focus: semi-transparent white overlay, shadow.

6.2 Links

Colors vary:

• Blue (#0f69ff) default, hover to lighter purple (#7759ff).
• White links (#ffffff) in dark contexts.
• Dark grey text links (#1d2228) for headlines.

No underlines anywhere — hover changes color only.

6.3 Forms

Search input: transparent bg, 0 border, focus border color rgba(149,126,252,0.5).
Select input: white bg, border radius 8px, no border by default.

6.4 Cards

Backgrounds are white or light grey. Radii 8px or 12px. Shadows minimal (0.1 alpha). Padding often 12px or 16px.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary-bg: #ffffff;
  --color-dark-grey: #1d2228;
  --color-link-blue: #0f69ff;
  --color-black: #000000;
  --color-light-grey: #dfdfdf;
  --color-medium-grey: #5b636a;
  --color-purple-deep: #5409b2;
  --color-purple-mid: #6001d2;
  --color-purple-mid-alpha: rgba(96, 1, 210, 0.5);
  --color-brand-secondary: #6001d2;
  --color-brand-primary: #7d2eff;
  --color-video-primary: #7e1fff;
  --color-video-secondary: #2f42d4;
  --color-bg-secondary: #ebe5ff;
  --color-bg-secondary-alt: #f4f3f0;
  --color-bg-neutral: #f0f3f5;
  --color-ring: rgba(59, 130, 246, 0.5);
  --color-divider-light: #f5f5f5;
  --color-divider-mid: #cdcdcd;
  --color-divider-dark: #232a31;
  --color-divider-neutral: #e0e4e9;
  --color-divider-slight: #c7cdd2;

  /* Typography */
  --font-yahooSans: "yahooSans", "yahooSans Fallback";
  --font-centra: "centra", "centra Fallback";
  --font-arial: Arial, Helvetica;
  --font-size-h1: 30px;
  --font-size-link-lg: 20px;
  --font-size-body: 16px;
  --font-size-caption: 13px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-4_8: 4.8px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-32: 32px;
  --space-56: 56px;
  --space-80: 80px;
  --space-100: 100px;
  --space-130: 130px;
  --space-146_422: 146.422px;
  --space-348_297: 348.297px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-xxl: 16px;
  --radius-24: 24px;
  --radius-26: 26px;
  --radius-67: 67px;
  --radius-100: 100px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.1) 0px 4px 8px 0px;
  --shadow-md: rgba(0,0,0,0.5) 0px 2px 8px 0px;
}

8. AI Coding Assistant Prompt

# Yahoo Design System Specification

System Prompt:
You are a Yahoo design expert. Build UIs matching their visual language exactly.

Brand Context:
Yahoo values functional clarity with subtle brand accents. The interface prioritizes content readability and uses purple and blue selectively for interactive states. Typography is clean and sans-serif, with a mix of custom YahooSans and Centra.

Color Palette:
- Primary Background: #ffffff — page background, cards
- Dark Grey: #1d2228 — headlines, UI text
- Link Blue: #0f69ff — hyperlinks, CTAs
- Black: #000000 — body text
- Light Grey: #dfdfdf — dividers, surfaces
- Medium Grey: #5b636a — secondary text
- Purple Deep: #5409b2 — hover/focus accents
- Purple Mid: #6001d2 — focus rings, highlights
- Purple Mid Alpha: rgba(96,1,210,0.5) — semi-transparent overlays
- Brand Primary: #7d2eff — primary buttons
- Video Primary: #7e1fff — video elements
- Video Secondary: #2f42d4 — secondary video accents
- Background Secondary: #ebe5ff — light brand surfaces
- Background Secondary Alt: #f4f3f0 — alt surfaces
- Background Neutral: #f0f3f5 — section backgrounds
- Ring Color: rgba(59,130,246,0.5) — focus outlines
- Divider Light: #f5f5f5 — list borders
- Divider Mid: #cdcdcd — component borders
- Divider Dark: #232a31 — dark mode borders
- Divider Neutral: #e0e4e9 — input borders
- Divider Slight: #c7cdd2 — subtle dividers

Typography:
- Headings: "yahooSans", "yahooSans Fallback"
- Secondary Headings: "centra", "centra Fallback"
- System backup: Arial, Helvetica
| Level | Size | Weight | Line Height | Use For |
| H1 | 30px | 550 | 1.20 | Page titles |
| Link Large | 20px | 600 | 1.30 | Key navigation |
| Body | 16px | 400 | 1.50 | Article text |
| Caption | 13px | 400–700 | 1.23–1.50 | Metadata |

Spacing & Grid:
Base: 8px. Scale includes 1px, 2px, 3px, 4px, 4.8px, 5px, 6px, 8px, 9px, 12px, 16px, 20px, 32px, 56px, 80px, 100px, 130px, 146.422px, 348.297px.
Button padding: multiples of 4px. Card padding: 12–16px.

Border Radius:
- none: 0px — tables
- sm: 3px — small UI
- md: 4px — inputs
- lg: 8px — cards
- xl: 12px — modals
- xxl: 16px — status badges
- pill: 24px–26px — large buttons
- full: 9999px — avatars

Shadows & Depth:
- Light: rgba(0,0,0,0.1) 0px 4px 8px
- Medium: rgba(0,0,0,0.5) 0px 2px 8px

Component Specifications:
Primary Button:
Default: bg #7d2eff; color #232a31; radius 26px; border none.
Hover: bg rgba(255,255,255,0.1); shadow rgba(0,0,0,0.1) 0px 6px 4px.
Active: bg #464e56; text #000000.
Focus: text #12a9ff.

Secondary Button:
Default: transparent; border 1px solid #e0e4e9; radius 24px.
Hover/Focus: semi-transparent overlay; shadow same as primary.

Navigation Links:
Default: blue #0f69ff; hover: purple #7759ff; no underline.

Input Fields:
Search: transparent; no border; focus border rgba(149,126,252,0.5).
Select: white bg; radius 8px; no border.

Layout & Responsive Rules:
Breakpoints: 320px, 425px, 768px, 1024px, 1280px, 1536px.
Page padding: 16px mobile, 20px desktop.

Interaction Rules:
Transition: 150ms ease for hover/focus.
Focus: use ring color rgba(59,130,246,0.5).

DO List:
- Use only palette colors.
- Maintain 8px grid where possible.
- Use YahooSans for headings, Centra for secondary.
- Keep link hover color consistent.
- Use full-radius for pills.

DON'T List:
- Mix sharp and rounded corners arbitrarily.
- Use custom colors.
- Add underlines to links.
- Overuse shadows.

Code Examples:
```css
.btn-primary {
  background: #7d2eff;
  color: #232a31;
  border-radius: 26px;
  font-size: 16px;
  font-weight: 400;
}
.btn-primary:hover {
  background: rgba(255,255,255,0.1);
  box-shadow: rgba(0,0,0,0.1) 0px 6px 4px;
}
.input-search {
  background: transparent;
  border: none;
}
.input-search:focus {
  border-color: rgba(149,126,252,0.5);
}
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.1) 0px 4px 8px;
}
```

9. Summary

TL;DR — Yahoo’s design system is content-first, brand-second. White dominates, with purple and blue accents for interactions. Typography mixes two sans-serif families for hierarchy. The 8px grid is the base but not strict. Border radii swing from sharp to full pills.

Brand Keywords

• content-centric
• purple-accented
• functional-modern
• headline-driven
• grid-flexible