World Bank Design System Deep-Dive

1. Brand Overview

The World Bank’s design system feels like international governance translated into pixels — serious, understated, and functional. No flashy gradients or gratuitous animations. The whole vibe is “trust me, we handle trillions, and we’re not here to entertain you.” This is aimed at policymakers, economists, NGOs, and journalists. The design reflects the gravitas of the institution: heavy use of blues, whites, and near-black tones, with a rigid typographic hierarchy in Open Sans, clean component edges, and restrained motion.

They lean hard on clarity over style. Buttons are clear, inputs are functional, and links differentiate clearly by color and underline. The color language is corporate blue plus neutrals to establish authority. Accent tones (orange for focus, lighter blues for hover) are used sparingly — almost as if they don’t entirely trust strong visual signals to carry meaning.

What’s interesting: they maintain a full 8px spacing system, but dip into oddball increments like 6px and 15px for certain tweaks. This tells me the design has evolved organically — some old breakpoints and layout patterns persisted, even as the system was formalized. The border radii are also very deliberate: 32px pills for buttons, 8px for cards, and full 50% for avatars/icons. It’s a mixture of sharp structural lines and soft, approachable curves.

Typography locks in a single family (Open Sans) across contexts, with occasional icon font (loopicon). No variable fonts, no crazy weights — just disciplined weights from 400 to 700. The hierarchy is readable but not overly dramatized. Font sizes cap at large-scale headings (48px) and shrink down through logical steps to 12px captions.

This is a design built for stability over innovation. Every element looks like it could survive a massive content migration without breaking. I like it because it’s no-nonsense. But it’s unforgiving — misuse of the palette or spacing grid will stand out immediately.

2. Color System

2.1 Primary Colors

Main brand tone: Deep blue #004370 (rgb(0, 67, 112)). This is the “primary actions” color: buttons, header tops, and key sections. Psychology-wise: blue is trust, stability, and professionalism. Compared to the IMF’s slightly brighter blues, the World Bank's is darker, lending more weight. They complement it with white (#ffffff) for clarity and near-black (#181f25) for headers and text anchors.

Accent colors enter only for functional states: orange #da570e for focus, light blue #066db1 for hover/focus feedback.

2.2 Complete Palette

2.3 Color Relationships

The dark blue #004370 contrasted on white background easily passes WCAG contrast ratios for large and normal text — the ratio is above 7:1. Near-black #181f25 over white is even stronger. Accent orange #da570e is bright enough against white but keep an eye on accessibility when used against blue backgrounds — may drop contrast.

Dark mode isn’t fully implemented but they have clear dark-surface text tokens. Accessibility is baked in via tokens like --text-on-primary-disabled and subdued variants for low-emphasis text.

2.4 Usage Guide

• Use primary blue for interactive elements: buttons, key nav links.
• Use header dark (#181f25) for text anchors; avoid using pure black except for small text segments.
• Accent orange is only for focus outlines or critical hover states — don’t use for brand decoration.
• Keep high contrast: dark text on light, light text on dark — they provide tokens for both.
• Avoid mixing accent light blue #066db1 with primary blue — will look inconsistent.

3. Typography

3.1 Font Families

• Primary: "Open Sans", roboto, roboto-fallback
• Icon: "loopicon"
• Sources: Not from Google/Adobe; likely self-hosted. No variable font variants.

Open Sans dominates headings, links, body text, and buttons. Loopicon appears in small icon labels/captions.

3.2 Type Scale Table

3.3 Hierarchy

Hierarchy is mostly built on weight and size. Page titles: 48px/700. Subtitles: 40px variations. Smaller headings drop in logical increments: 36 → 28 → 24 → 20. Captions down to 12–14px. Everything keeps reasonable line heights (1.12–1.50) for readability. No absurdly tight or loose line spacing.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px, but they use micro steps (1px, 6px). Here's the list:

4.2 Layout

Breakpoints are extensive: from 320px mobile to 1400px desktop. They even include oddball 830px and 930px — suggests some legacy grids. Vuetify framework confirms a flex/grid-based responsive approach.

5. Visual Elements

• Border Radius:

  • 0px combos: ul, cards (bottom rounding)
  • 5px: images
  • 8px: cards, divs, imgs — standard soft corner
  • 32px: pills — buttons, search clears
  • 50%: avatars/icons
  • 100px: inputs — extreme pill shaping
  • 125px icons — large pill icons

• Shadows: None. Flat design using borders for depth.

• Borders: Used for dividers: 1px solid, primarily neutrals or low-opacity variants. Underlines for links (1px).

6. Components

6.1 Buttons

Primary (Blue)
Default: bg #004370, text white, padding 16px 32px, radius 32px, no shadow.
Hover: transparent bg, white text, border 2px accent blue, scale 1.1, opacity 0.7.
Focus: outline 2px orange, bg light accent, border accent blue, translateY(-50%).

Secondary (White bg)
Default: bg white, text primary blue, border transparent.
Hover: transparent bg, white text, border accent blue.

Control Button (Small)
Default: bg transparent, text white, padding 6px, radius 32px.
Hover: bg accent blue, border accent blue, opacity 0.7.

6.2 Links

Three variants:

• White text links — hover remains white.
• Blue underlined links — hover removes underline, turns white.
• Dark text links — hover turns white.

6.3 Forms

Inputs:

• Text/Email: white bg, dark navy text, border neutral, extreme pill radius — one side rounded.
• Focus: text turns grey.

6.4 Cards

Radius 8px, sometimes with bottom-only rounding. Borders for separation, no shadows.

7. Design Tokens

:root {
  /* Colors */
  --header-dark: #181f25;
  --white: #ffffff;
  --primary-blue: #004370;
  --navy-transparent: #000d1a;
  --deep-navy: #012740;
  --black: #000000;
  --accent-orange: #da570e;
  --accent-light-blue: #066db1;
  --brand-dark-blue: #002244;
  --brand-blue: #009fda;

  /* Typography */
  --font-primary: "Open Sans", roboto, roboto-fallback;
  --font-icon: "loopicon";

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-58: 58px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radius */
  --radius-0: 0px;
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-32: 32px;
  --radius-50pct: 50%;
  --radius-100: 100px;
  --radius-125: 125px;

  /* Borders */
  --border-underline: 1px solid #bdccdb;
}

8. AI Coding Assistant Prompt

# World Bank Design System Specification

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

## Brand Context
World Bank's design is disciplined, functional, and conservative. Colors are corporate blues, whites, and near-blacks, with accents only for focus and hover. Typography uses Open Sans exclusively, on a strict size/weight scale. Borders and radii are precise, with a flat design approach — no drop shadows.

## Color Palette
- Header Dark: #181f25 — Header wrapper text, primary headings
- White: #ffffff — Page background, cards, dropdowns
- Primary Blue: #004370 — Primary CTAs, buttons, header accents
- Navy Transparent: #000d1a — Overlay backgrounds
- Deep Navy: #012740 — Section backgrounds
- Black: #000000 — Miscellaneous text
- Accent Orange: #da570e — Focus outlines, hover emphasis
- Accent Light Blue: #066db1 — Hover/focus feedback
- Brand Dark Blue: #002244 — Brand accents
- Brand Blue: #009fda — Secondary brand highlight

## Typography
Font Families:
- "Open Sans", roboto, roboto-fallback — all text
- "loopicon" — icons

Type Sizes/Weights:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 700 | 1.21 | Page titles |
| H2 | 40px | 700 | 1.12 | Section headings |
| Body Lg | 28px | 400 | 1.40 | Paragraphs |
| Body Sm | 20px | 400 | 1.25 | Small text |
| Caption | 14px | 400 | 1.29 | Footnotes |

## Spacing & Grid
Base unit: 8px
Scale: 1px, 4px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px, 22px, 24px, 32px, 40px, 48px, 58px, 64px, 80px, 96px

## Border Radius
- none: 0px — data tables
- sm: 5px — small images
- md: 8px — cards
- lg: 32px — buttons
- full: 50% — avatars/icons
- extreme pill: 100px — inputs
- large icon pill: 125px — large icons

## Shadows & Depth
Flat design — use borders for separation.

## Component Specifications
### Primary Button
Default:
- Background: #004370
- Color: #ffffff
- Padding: 16px 32px
- Radius: 32px
- Border: 1px solid transparent
Hover:
- Background: transparent
- Color: #ffffff
- Border: 2px solid #004370
- Transform: scale(1.1)
Focus:
- Outline: 2px solid #da570e
- Background: #00437010
Active:
- Transparent background

### Secondary Button
Default:
- Background: #ffffff
- Color: #004370
- Radius: 32px
Hover identical to primary.

### Link
Primary link: #004370, underline
Hover: #ffffff, no underline

### Input Field
Background: #ffffff
Color: rgba(0,13,26,0.698)
Border: 1px solid rgba(0,57,107,0.24)
Radius: side-specific (100px extreme pill)
Padding: 22px 10px 10px 29px
Focus: text color #999999

## Layout & Responsive Rules
Breakpoints: 320px, 768px, 1024px, 1200px, 1400px
Use Vuetify grid structure.

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus: 2px orange outline
- Hover: opacity 0.7 for buttons

## DO List
- Use only defined palette
- Maintain 8px grid for spacing
- Use Open Sans for all text
- Apply correct border radius per component
- Use hover scale on buttons

## DON'T List
- Add drop shadows
- Mix sharp and rounded corners
- Use colors outside palette
- Apply gradients

## Code Examples
```css
.btn-primary {
  background: #004370;
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 32px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid transparent;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: transparent;
  color: #ffffff;
  border: 2px solid #004370;
  transform: scale(1.1);
  opacity: 0.7;
}
.btn-primary:focus {
  outline: 2px solid #da570e;
}
.input {
  background: #ffffff;
  color: rgba(0,13,26,0.698);
  border: 1px solid rgba(0,57,107,0.24);
  border-radius: 100px 0 0 100px;
  padding: 22px 10px 10px 29px;
}
```

9. Summary

TL;DR — This system is corporate blue discipline. Every element is on a grid, colors are locked to a strict token set, typography is all Open Sans, and no shadows — borders do the work. Perfect for austere, high-trust interfaces.

Brand Keywords: global-institutional, governance-serious, blue-authoritative, flat-trustworthy