WHO Brand Design System Deep Dive

1. Brand Overview

The World Health Organization’s digital brand language is an exercise in authority and clarity. This is a site built to communicate critical information to a global audience — doctors, policymakers, researchers, and the public. The design has to work across cultures, languages, and devices. It can’t be flashy for the sake of it, and it can’t be vague. Every style choice here serves the mission: global health information, accessible and trustworthy.

The vibe: institutional, grounded, and serious without being cold. The color palette leans heavily on deep blues and muted grays — colors associated with trust, stability, and professionalism. There’s no pastel fluff, no playful gradients. Typography is clean and utilitarian: Noto Sans in multiple weights, a Google font chosen for its global script coverage and neutrality. Layouts obey a strict grid with an 8px scale, which keeps spacing consistent across a sprawling content ecosystem.

WHO’s brand philosophy online seems simple: remove distractions, keep the focus on the content, and ensure everything is legible. But when you look closer, there’s nuance — hover colors that shift from deep blue to warm gold, carefully tuned line-heights for multilingual readability, and subtle border radii that give components just enough softness to feel approachable.

This isn’t a “design for design’s sake” outfit. The site’s visual language exists to support the mission and enhance credibility. It’s designed for speed in comprehension: you can scan, find, and trust what you read. For developers, this means sticking to the rules — the wrong shade of blue or inconsistent line-height isn’t just a style violation, it’s a hit to brand trust.

2. Color System

2.1 Primary Colors

The main brand color is rgb(9, 40, 98) (#092862). It’s a deep navy with a hint of saturation, far from muted black. This works because navy is universally associated with authority and trust — think UN flags, corporate boards, naval uniforms. Compared to other health organizations (like CDC’s brighter blues), WHO’s navy feels heavier, more formal. It signals “global governance” rather than “consumer health app.”

Secondary semantic primary is rgb(60, 66, 69) (#3c4245), a dark grey that acts as a text and neutral UI color.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong: deep navy (#092862) on off-white (#f9fafb) easily passes WCAG AAA for normal text. White text on navy also passes AAA — essential for buttons and headers. Gold hover (#f3b80e) against navy border is high contrast and draws attention without breaking the brand feel.

Dark grey neutrals (#3c4245, #131c20) ensure text is readable on light backgrounds without the starkness of pure black.

Transparent azure and royal blue hover/focus states add subtle interaction cues without creating jarring transitions — they’re low opacity overlays or slightly lighter/darker shifts of the brand blues.

2.4 Usage Guide

• Primary navy (#092862): Use for main navigation, headings, and key brand elements. Avoid using it for large text blocks — it’s too dark and heavy at scale.
• Bright cyan (#009ade): Sparingly for links or icons. Too much cyan can dilute the seriousness of the brand.
• Gold hover (#f3b80e): Reserved for interactive hover states on buttons. Don’t use it as a static background or highlight — it’s meant to indicate “action about to happen.”
• Neutrals (#3c4245, #131c20): Safe for text, borders, and containers. Mix them to create depth without shadows.
• White (#fff): For text on dark backgrounds only. Avoid white backgrounds unless paired with strong borders — otherwise the UI loses definition.

3. Typography

3.1 Font Families

Everything runs on Noto Sans, with fallbacks to Arial and Helvetica. This is a strategic choice — Noto Sans has unmatched script coverage (important for WHO’s multilingual mission) and a neutral, sans-serif style that doesn’t distract. Google Fonts source, with variable font support enabled — meaning weights and styles can be tuned without loading separate files.

3.2 Type Scale

3.3 Hierarchy

Headings jump from 50px to 26px — a big drop that makes H1s stand out clearly. Links often share sizes with headings, which keeps navigation elements feeling substantial. Smaller headings (18px, 16px) maintain bold weights for clarity. Body text sits at 16px 400 weight, with generous line-heights (2.00 for links, 1.50 for buttons). Captions at 14px keep the grid tight.

The hierarchy is blunt but effective. Big titles, bold section headers, readable body. No fancy display fonts — the focus is on legibility across devices.

4. Spacing & Layout

4.1 Spacing Scale

WHO uses an 8px base grid, with some odd fractional values (2.4px, 8.8px) — likely from legacy or specific component tweaks.

Common values and frequency:

4.2 Layout

Breakpoints are numerous — WHO clearly tunes layouts for many device widths. Notable ones: 320px, 375px (phones), 768px (tablet), 1024px, 1440px, 1600px, 2560px (large desktops). This suggests responsive design that’s heavily optimized for different content types.

5. Visual Elements

Border Radius System

Values:

• 2px — rare, spans
• 4px — common, buttons and list items
• 4px 4px 0px 0px — top corners rounded only
• 4px 0px 0px 4px — left corners rounded only

The 4px radius is the standard — gives slight softness without losing the institutional feel.

Shadow System

Only two shadows detected, both minimal:

• Navy overlays: rgba(0, 32, 92, 0.85) 16px 0px 0px 0px, ...
• Subtle black overlays with zero spread — essentially flat.

WHO runs close to flat design, using borders more than shadows for separation.

Borders & Dividers

Many border combinations, often 1px solid in dark grey (#131c20) or white (#fff) for inverse UI. Borders are used as separators, not decorative outlines.

6. Components

6.1 Buttons

Primary button (.button-blue-background):

Default:

• Background: #00205c
• Text color: #fff
• Padding: 0px
• Radius: 4px
• Border: 2px solid transparent
• Font: 16px, weight 700

Hover:

• Background: #f3b80e
• Text: #fff
• Border: 2px solid #00205c

Active:

• Background: var(--l1-accentFillActive)
• Text: var(--l1-accentForegroundCut)

Focus:

• Background: #00205c
• Text: #fff
• Outline: transparent solid 2px
• Border: none

Odd choice: padding is set to 0px — probably handled by inner spans.

6.2 Links

Four link color variants:

• White (#fff) default → dark grey hover (#20313b)
• Navy (#092862) default → dark grey hover
• Dark blue (#00205c) default → dark grey hover
• Slate (#3c4245) default → dark grey hover

No underlines, even on hover — brand relies on color change for interaction cues.

6.3 Forms

Search input:

• Default: transparent bg, white text, no border
• Focus: var(--d-l4-accentFillHover) bg, subtle box-shadow, dark text

Select dropdown:

• Default: bg #274375, white text, no border radius
• Focus: var(--l1-accentFillHover) bg, dark text

6.4 Cards

Minimal border usage, occasional 2px solid pale grey (#f5f5f5). No heavy shadows — depth is implied via spacing and border contrast.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #092862;
  --color-dark-charcoal: #131c20;
  --color-slate-grey: #3c4245;
  --color-muted-blue-grey: #3a5666;
  --color-bright-cyan: #009ade;
  --color-off-white: #f9fafb;
  --color-steel-blue: #37507f;
  --color-transparent-azure: #0078d4;
  --color-royal-blue: #005fcc;
  --color-button-blue: #00205c;
  --color-gold-hover: #f3b80e;
  --color-white: #ffffff;
  --color-warm-grey: #767676;
  --color-pale-grey: #f5f5f5;

  /* Typography */
  --font-family-primary: "Noto Sans", Arial, Helvetica;
  --font-size-h1: 50px;
  --font-size-h1-small: 26px;
  --font-size-link-lg: 26px;
  --font-size-link-md: 24px;
  --font-size-link-sm: 22.4px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-weight-bold: 700;
  --font-weight-regular: 400;
  --line-height-tight: 1.00;
  --line-height-regular: 1.50;
  --line-height-loose: 2.00;

  /* Spacing */
  --space-1: 1px;
  --space-2_4: 2.4px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-8_8: 8.8px;
  --space-10: 10px;
  --space-10_4: 10.4px;
  --space-11: 11px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-23: 23px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-top-md: 4px 4px 0px 0px;
  --radius-left-md: 4px 0px 0px 4px;

  /* Shadows */
  --shadow-navy-overlay: rgba(0, 32, 92, 0.85) 16px 0px 0px 0px, rgba(0, 32, 92, 0.85) -16px 0px 0px 0px;
  --shadow-subtle-black: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
}

8. AI Coding Assistant Prompt

# WHO Design System Specification

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

## Brand Context
The World Health Organization's digital style is authoritative, clear, and globally accessible. It uses deep blues, muted grays, and gold accents for interaction cues. Typography is utilitarian (Noto Sans) and supports multiple scripts.

## Color Palette
- Primary Navy: #092862 — Logo, navigation, headings
- Dark Charcoal: #131c20 — Dividers, text, UI chrome
- Slate Grey: #3c4245 — Headers, body text
- Muted Blue-Grey: #3a5666 — Background sections
- Bright Cyan: #009ade — Links, accents
- Off White: #f9fafb — Backgrounds
- Steel Blue: #37507f — Borders, highlights
- Transparent Azure: #0078d4 — Hover/focus overlays
- Royal Blue: #005fcc — Focus states
- Button Blue: #00205c — Primary buttons
- Gold Hover: #f3b80e — Button hover
- White: #ffffff — Text on dark
- Warm Grey: #767676 — Form borders
- Pale Grey: #f5f5f5 — Card borders

## Typography
Font: "Noto Sans", Arial, Helvetica (Google Fonts, variable)
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 50px | 700 | 1.60 | Page titles |
| H1-sm | 26px | 700 | 2.00 | Section titles |
| Link-lg | 26px | 700 | 2.00 | Nav links |
| Link-md | 24px | 700 | 2.00 | Buttons |
| Link-sm | 22.4px | 700 | 0.71 | Inline links |
| Body | 16px | 400 | 2.00 | Paragraphs |
| Button | 16px | 400 | 1.50 | Button text |
| Caption | 14px | 400/700 | 1.50 | Small labels |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2.4px, 4px, 5px, 6px, 8px, 8.8px, 10px, 10.4px, 11px, 15px, 16px, 18px, 20px, 23px, 24px, 30px, 40px, 50px, 60px
Use for padding, margins, gaps — always multiples of base.

## Border Radius
- sm: 2px — spans
- md: 4px — buttons, inputs
- top-md: 4px 4px 0 0 — top-only rounding
- left-md: 4px 0 0 4px — left-only rounding

## Shadows & Depth
Minimal shadows:
- Navy overlay: rgba(0, 32, 92, 0.85) 16px horizontal
- Subtle black: rgba(0,0,0,0.2) with zero spread
Prefer borders over shadows.

## Component Specifications

### Primary Button
Default:
- bg: #00205c
- color: #fff
- radius: 4px
- border: 2px solid transparent
- font: 16px, weight 700
Hover:
- bg: #f3b80e
- border: 2px solid #00205c
Active:
- bg: var(--l1-accentFillActive)
Focus:
- bg: #00205c
- outline: 2px solid transparent

### Navigation Links
No underline. Color change on hover to #20313b.

### Input Fields
Search:
- bg: transparent
- color: #fff
- focus: bg var(--d-l4-accentFillHover), box-shadow rgba(0,0,0,0.1) 0 1px 4px

Select:
- bg: #274375
- color: #fff
- padding: 10.4px 24px 8.8px 8px

## Layout & Responsive Rules
Breakpoints: 320px, 375px, 768px, 1024px, 1440px, 1600px, 2560px
Max content width: fluid — adapt at breakpoints

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus: outline 2px solid transparent or brand color
- Hover: color or bg change only

## DO List
- Use only palette colors
- Maintain 8px grid
- Keep link hover underline off
- Use Noto Sans everywhere
- Keep borders 1px solid for dividers

## DON'T List
- Add heavy shadows
- Use rounded corners > 4px
- Invent new colors
- Use underlines on links

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #00205c;
  color: #fff;
  border-radius: 4px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #f3b80e;
  border-color: #00205c;
}
```

Card:
```css
.card {
  background: #f9fafb;
  border: 2px solid #f5f5f5;
  border-radius: 4px;
  padding: 24px;
}
```

Input:
```css
.input-search {
  background: transparent;
  color: #fff;
  padding: 0 24px;
  border: none;
}
.input-search:focus {
  background: var(--d-l4-accentFillHover);
  box-shadow: rgba(0,0,0,0.1) 0px 1px 4px;
  color: #3c4245;
}
```

9. Summary

TL;DR — WHO’s design system is serious, clear, and globally readable. Deep blues, muted grays, and gold hover accents reinforce authority. Noto Sans keeps typography neutral and legible. Flat design with tight borders keeps focus on content.

Brand Keywords: institutional-authority, global-legibility, flat-functional, trust-first