WebMD Design System Reverse-Engineering

1. Brand Overview

WebMD’s design language is exactly what you’d expect from a medical information giant: clean, authoritative, and built for trust. But it’s not sterile in the way some healthcare brands end up — there’s just enough color to make it feel approachable without sliding into playfulness. The vibe is "professional but human."

The audience is broad — everyone from anxious patients Googling symptoms to health professionals looking up drug interactions. That breadth means the design system has to work for quick skimming and deep reading alike. Accessibility is non‑negotiable: legible fonts, high contrast, predictable interactions.

What stands out is the restraint. Colors are functional, typography is consistent, spacing is disciplined. There’s no wild animation or clever microinteractions. This works because health content shouldn’t distract — the system prioritizes clarity over flair.

WebMD’s design philosophy feels like a hybrid between old‑school publisher layouts and modern web UI. You’ve got the legacy of article-heavy pages, but wrapped in a responsive framework with a strict 8px spacing scale. The primary blue is an anchor — it’s used for action elements and links, but you’ll never see it sprayed around for decoration. Neutral grays do the heavy lifting in text and dividers.

In short: WebMD designs for trust. No surprises, no odd UI experiments. You know where to click, you know what’s interactive, and you can read comfortably. They nailed the “content-first” principle and stuck to it.

2. Color System

2.1 Primary Colors

The main brand color is a deep, saturated blue: #0000ee (rgb(0, 0, 238)). It’s a “web blue” in the literal sense — almost retro HTML link blue. This is unusual in 2025 when most brands opt for softened or desaturated primaries. But for WebMD, this works: it’s instantly recognizable, screams "clickable," and signals trustworthiness through association with traditional hyperlink color.

Competitors like Mayo Clinic use navy (#113551) or teal. WebMD’s choice is more direct. It says: this is a link, this is important, and you can trust it.

Secondary semantic color is pure white #ffffff, used for backgrounds and text on dark surfaces.

2.2 Complete Palette

Here’s the full extracted palette:

CSS variables present:

• --care-bg-darknavy: #000625
• --care-text-white: #fff

2.3 Color Relationships

Contrast is good across the board. Primary blue on white is high contrast (ratio ~8.6:1). White on bright blue meets WCAG AA for large text but just hits AA for normal text (ratio ~3:1 — borderline, so they wisely use it mostly for buttons with bold text).

Dark gray (#333132) on white is ~12:1 — plenty for body copy. Pale blue backgrounds (#e7f0fe) are paired with dark text to maintain readability.

There’s no explicit dark mode in the extracted data — the palette is geared for light backgrounds.

2.4 Usage Guide

• Use #0000ee only for links and interactive elements. Don’t flood UI with it — it loses impact.
• #3557ff is for secondary actions — think “next” buttons or optional links.
• #cccce7 works for subtle dividers and borders — avoid using it for text.
• #113551 and #00157c are hover/active states for links — keep them consistent.
• Avoid pairing pale blue backgrounds with pale gray text — contrast drops fast.
• Navy (#113551) + white is a safe header combo. Navy + pale blue feels washed out — don’t use.

3. Typography

3.1 Font Families

The entire system revolves around Source Sans Pro with fallbacks to Arial and Verdana where applicable. No Google Fonts or Adobe Fonts calls — likely self‑hosted.

Source Sans Pro’s humanist forms keep it readable in small sizes and approachable in large headings. Verdana appears in some button fallbacks — probably legacy code or OS default.

3.2 Type Scale

Full extracted type styles:

3.3 Hierarchy

They use size jumps of 2–4px to create hierarchy. H1s at 40px are bold and tight (line-height 1.20) — perfect for page titles. Smaller headings (24px, 20px) keep weight high (600–700) so they stand out even without huge size differences.

Body text sits around 16–18px with comfortable line heights (1.15–1.60). Links often use weight 600 — subtle but effective for scannability.

Verdict: readable, consistent, no decorative fonts — exactly what a medical brand should do.

4. Spacing & Layout

4.1 Spacing Scale

Strict 8px base grid. Common values:

Everything is a multiple of 4px. This works because it keeps rhythm across UI.

4.2 Layout

Breakpoints:

• 1px (reset)
• 767px (mobile max)
• 768px (tablet min)
• 812px (small tablet)
• 1023px (tablet max)
• 1024px/1025px (desktop min)

This is a typical mobile-first setup. Content likely maxes out around 1024px width.

5. Visual Elements

Border Radius

Values range from 0px to 200px (huge pills).

Common:

• 4px — inputs, images
• 5px — buttons, nav items
• 20px — list items
• 200px — pill-shaped elements

Rounded corners are used everywhere — no sharp-corner cards.

Shadows

Minimal use:

• rgba(0,0,0,0.3) 0px 1px 3px — subtle depth
• rgba(0,0,0,0.1) 0px 2px 12px — rare Mostly flat — borders do more work than shadows.

Borders

Heavy use of 1px solid in grays (#cccce7, #e4e7ed, etc.). Bottom borders define sections (0px 0px 1px solid black).

6. Components

6.1 Buttons

Secondary Button (webmd-button--secondary):

• Default: white bg, #3557ff text, 6px 10px padding, 5px radius, 1px solid #cccce7
• Hover: #3557ff bg, white text, border transparent
• Active: transparent bg, #00588c text
• Focus: 2px solid white outline

Primary Button (webmd-button--primary):

• Default: #b3b3b3 bg, #767674 text, 0px padding, radius 0px 5px 5px 0px
• Hover: #3557ff bg, white text
• Active: transparent bg, #00588c text
• Focus: 2px solid white outline

Notably, the primary variant here is styled more like a search submit button — the “secondary” is actually the standard CTA.

6.2 Links

Eight distinct link styles:

• Default colors: #0000ee, #1b1b1b, #3557ff, etc.
• Hover always shifts to #00157c and underlines.

Consistent hover behavior builds trust — no surprises.

6.3 Forms

Inputs:

• Default: white bg, dark gray text, 1px solid light gray border, radius 4–5px
• Focus: same text color, border lightens (#e9e9e9), box-shadow inset + blue glow.

6.4 Cards

No explicit card data, but given the border radius and shadows, cards likely use 4–5px radius, subtle border instead of shadow.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary-blue: #0000ee;
  --color-bright-blue: #3557ff;
  --color-navy: #113551;
  --color-dark-navy-hover: #00157c;
  --color-white: #ffffff;
  --color-dark-gray: #333132;
  --color-near-black: #1b1b1b;
  --color-light-lavender: #cccce7;
  --color-pale-blue: #e7f0fe;
  --color-medium-gray: #676767;
  --care-bg-darknavy: #000625;
  --care-text-white: #ffffff;

  /* Typography */
  --font-primary: "Source Sans Pro", Arial, sans-serif;
  --font-condensed: "Roboto Condensed", Verdana, sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 20px;
  --radius-pill: 200px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.3) 0px 1px 3px 0px;
  --shadow-md: rgba(0,0,0,0.1) 0px 2px 12px 0px;

  /* Breakpoints */
  --bp-mobile-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;
}

8. AI Coding Assistant Prompt

# WebMD Design System Specification

You are a WebMD design expert. Build UIs matching their visual language exactly.

## Brand Context
WebMD designs for trust and clarity. The system is content-first, with restrained color use, clean typography, and predictable interactions. Accessibility and readability are prioritized over decoration.

## Color Palette
- Primary Blue: #0000ee — Links, primary actions
- Bright Blue: #3557ff — Secondary CTAs, sub-header links
- Navy: #113551 — Link text in modules
- Deep Navy Hover: #00157c — Hover state for links
- White: #ffffff — Backgrounds, text on dark
- Dark Gray: #333132 — Body text
- Near Black: #1b1b1b — Headings
- Light Lavender Gray: #cccce7 — Borders, dividers
- Pale Blue: #e7f0fe — Background accents
- Medium Gray: #676767 — Inactive text

## Typography
Font families:
- Primary: "Source Sans Pro", Arial, sans-serif
- Condensed: "Roboto Condensed", Verdana, sans-serif

Type scale:

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 40px | 700 | 1.20 | Page title |
| H2 | 36px | 600 | 1.20 | Section title |
| H3 | 24px | 700 | 1.40 | Subsections |
| Body | 16px | 400 | 1.15–1.60 | Paragraphs |
| Button | 16–22px | 600–700 | 1.00–1.27 | CTAs |
| Caption | 12–14px | 400–500 | 1.40–1.50 | Metadata |

## Spacing & Grid
Base: 8px grid
Scale: 4px, 8px, 12px, 16px, 20px, 30px, 40px, 60px
Use multiples for all padding/margins.

## Border Radius
- none: 0 — tables
- sm: 4px — inputs, images
- md: 5px — buttons
- lg: 20px — list items
- pill: 200px — pill shapes

## Shadows & Depth
- shadow-sm: rgba(0,0,0,0.3) 0px 1px 3px
- shadow-md: rgba(0,0,0,0.1) 0px 2px 12px
Use sparingly — borders are primary separators.

## Component Specifications

### Primary Button
Default: bg #b3b3b3, text #767674, padding 0, radius 0px 5px 5px 0px, border none
Hover: bg #3557ff, text #ffffff
Active: bg transparent, text #00588c
Focus: outline 2px solid #ffffff

### Secondary Button
Default: bg #ffffff, text #3557ff, padding 6px 10px, radius 5px, border 1px solid #cccce7
Hover: bg #3557ff, text #ffffff
Active: bg transparent, text #00588c
Focus: outline 2px solid #ffffff

### Navigation Links
Default: various palette colors, no underline
Hover: underline, color #00157c

### Input Fields
Default: bg #ffffff, text #333132, border 1px solid #d4d4d4, radius 5px 0px 0px 5px
Focus: border-color #e9e9e9, box-shadow rgba(0,0,0,0.06) inset + rgba(21,106,149,0.7)

## Layout & Responsive Rules
Max width: ~1024px content
Mobile: <767px
Tablet: 768–1023px
Desktop: >1024px
Page padding scales by breakpoint.

## Interaction Rules
Transitions: 150ms ease on color/background changes
Focus indicators: visible outlines in brand colors
No motion-heavy interactions

## DO
- Use only palette colors
- Maintain 8px grid
- Keep link hover states consistent
- Use Source Sans Pro for all text
- Keep contrast WCAG AA+

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Apply heavy shadows
- Remove link underlines on hover
- Use decorative typefaces

## Code Examples

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #3557ff;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #cccce7;
  font-weight: 600;
  font-size: 16px;
}
.btn-secondary:hover {
  background: #3557ff;
  color: #ffffff;
}
```

### Input
```css
.input-text {
  background: #ffffff;
  color: #333132;
  border: 1px solid #d4d4d4;
  border-radius: 5px 0 0 5px;
  padding: 0 8px;
}
.input-text:focus {
  border: 1px solid #e9e9e9;
  box-shadow: rgba(0,0,0,0.06) 0px 1px 3px inset,
              rgba(21,106,149,0.7) 0px 0px 5px;
}
```

9. Summary

TL;DR: WebMD’s design system is purpose‑built for trust and readability. A strict 8px grid, restrained palette, and consistent typography make it predictable and accessible. Blue is for action, gray for text, white for space.

Brand Keywords: trust‑driven, content‑first, clarity‑obsessed, healthcare‑professional