United Nations (UN) Brand Design System Deep Dive

1. Brand Overview

The United Nations is not a commercial brand. It's a diplomatic, humanitarian, and governance entity with global reach. Its design language has to reflect neutrality, authority, and accessibility for a diverse audience spanning every country, culture, and language. This is not about selling — it's about trust. Every pixel needs to communicate credibility and inclusivity.

When you land on the UN website, the vibe is institutional yet approachable. The blue is unmistakable — the same hue you see on UN flags, peacekeeper helmets, and official documents. It’s a symbol of peace and stability. The typography is utilitarian: Roboto, a sans-serif workhorse chosen for clarity and modernity. The layout is straightforward, with Bootstrap’s grid keeping everything responsive and predictable. No fancy micro-interactions or heavy gradients — the design is flat, functional, and focused on delivering information.

The audience here is everyone: diplomats, journalists, NGOs, students, and civilians. That means the design has to work for people with varying levels of digital literacy. Buttons are high-contrast, language selectors are clear, and hover/focus states are distinct. Accessibility isn't a side note — it's baked into the system.

The philosophy? Minimal ornamentation. Consistent use of brand blue for links and accents. Neutral grays for text and surfaces. White for clarity. The UN can't afford ambiguity in its visual language. The site is not trying to be trendy — it’s trying to be timeless and universally readable.

2. Color System

2.1 Primary Colors

The heartbeat of the UN’s palette is #337ab7 — a medium blue that’s instantly recognizable as “UN blue.” It’s used for links, accents, and interactive elements. Blue in color psychology is about trust, calmness, and reliability. No surprise here — the UN leans heavily on it to project stability.

Competitor comparison: NGOs and intergovernmental organizations often use blues (UNICEF, NATO) but the UN’s shade is slightly deeper than UNICEF’s sky blue, giving it more gravitas.

2.2 Complete Palette

Here's every color extracted from the site:

2.3 Color Relationships

The palette is dominated by blues and grays. Blue for action and accent, gray for text and dividers, white and light gray for backgrounds. This is classic high-contrast UI design — dark text (#4d4d4d) on light gray or white backgrounds ensures readability. Blue links on white hit WCAG AA easily for normal text.

Dark mode? Not implemented here. This palette is optimized for light backgrounds. Switching to dark mode would require inverting neutrals and adjusting blues for luminance.

2.4 Usage Guide

• Primary combinations: #337ab7 (links) on #ffffff or #f2f2f2 backgrounds. Works well — high contrast.
• Buttons: Default button text (#f2f2f2) on dark gray (#4d4d4d) background. Hover swaps to dark text on light gray background.
• Avoid: Using light blues (#00adef, #09a2dd) for body text — too low contrast.
• Borders: Accent blues for hover/focus states pop against light backgrounds.
• Dividers: Use soft grays (#e0e0e0, #dbdbdb, #dadada) — they keep sections separated without visual noise.

3. Typography

3.1 Font Families

The UN site uses Roboto — sourced from Google Fonts. No Adobe Fonts. Variable fonts enabled. Roboto’s geometric yet friendly sans-serif design works for multi-language content, especially with Latin, Arabic, and Chinese scripts in the mix.

Fallbacks are not listed, but standard practice is Roboto, sans-serif.

3.2 Type Scale

3.3 Hierarchy

The scale is tight — only 14px and 16px in the extracted data. This suggests they rely on consistent size for UI elements, with headings probably styled separately outside the extracted dataset.

Readability: 14px for captions and links is on the lower bound for accessibility but acceptable given Roboto’s legibility. 16px for buttons is solid — large enough for tap targets and screen reading.

Hierarchy is subtle: links and captions share size but differ by color; buttons are slightly larger to signal action.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 4px. Every spacing value is a multiple or near-multiple of 4px, except 3px (used rarely).

4.2 Layout

Bootstrap grid in use. Breakpoints extracted:

• 450px
• 480px
• 700px
• 767px
• 768px
• 991px
• 992px
• 1024px
• 1199px
• 1200px
• 1600px

They clearly cater to both mobile and wide desktop layouts, with fine-grain breakpoints for tablets and mid-size desktops. Container widths adjust per breakpoint. Gutter spacing aligns with Bootstrap defaults.

5. Visual Elements

• Border Radius: Only 10px value found, used on div elements. Buttons are square (0px radius). This is a sharp-corner design with occasional rounded boxes.
• Shadows: None. Flat design. Depth is indicated with borders, not shadows.
• Borders:
  • 2px solid #4d4d4d — used on buttons.
  • 5px solid #00adef — accent borders on div.
  • 0px 0px 5px solid #333333 — bottom borders on certain divs.

6. Components

6.1 Buttons

One main variant extracted (language selector style):

Default:

• Background: #4d4d4d
• Text: #f2f2f2
• Padding: 6px 12px
• Border: 2px solid #4d4d4d
• Radius: 0px
• No shadow

Hover:

• Text: #4d4d4d
• Background: #f2f2f2
• Border: 2px solid #00adef

Active:

• Background: rgb(193, 46, 42) (red — possibly error or confirmation state)
• Text: #ffffff
• Inner shadow: rgba(0,0,0,0.125) inset

Focus:

• Outline: -webkit-focus-ring-color auto 5px
• Text: #4d4d4d
• Background: #f2f2f2
• Border: 2px solid #00adef

Disabled state not in data — likely opacity reduction.

6.2 Links

Default:

• Color: #337ab7
• No underline

Hover:

• Color: rgb(56, 56, 56)
• No underline

This is a bold move — removing underline requires color contrast to signal interactivity.

6.3 Forms

No input styles extracted — likely plain Bootstrap defaults.

6.4 Cards

No explicit card component extracted. Borders and padding suggest flat boxes with light gray backgrounds.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary-blue: #337ab7;
  --color-bg-light-gray: #f2f2f2;
  --color-text-dark-gray: #4d4d4d;
  --color-white: #ffffff;
  --color-accent-deep-navy: #23527c;
  --color-neutral-medium-gray: #5f5f5f;
  --color-divider-light-neutral: #e0e0e0;
  --color-accent-sky: #09a2dd;
  --color-accent-navy: #27568c;
  --color-accent-bright-cyan: #00adef;
  --color-neutral-mid-gray: #646464;
  --color-divider-soft: #dbdbdb;
  --color-accent-blue: #0b9fd8;
  --color-accent-deep-steel: #2f5682;
  --color-accent-bright-sky: #01aced;
  --color-neutral-gray: #656565;
  --color-divider-soft-gray: #dadada;
  --color-accent-navy-steel: #2f5683;
  --color-accent-cyan-bright: #01abec;
  --color-neutral-dim-gray: #626262;
  --color-divider-gray: #dddddd;
  --color-accent-aqua: #0aa1da;
  --color-accent-navy-tone: #2e5683;
  --color-accent-slate-blue: #33557d;
  --color-neutral-mid-neutral: #676767;
  --color-divider-pale-gray: #d8d8d8;
  --color-accent-aqua-bright: #0c9ed5;
  --color-accent-slate-accent: #33567e;
  --color-accent-cyan-tone: #02abec;

  /* Typography */
  --font-family-roboto: 'Roboto', sans-serif;
  --font-size-button: 16px;
  --font-size-caption: 14px;
  --font-size-link: 14px;
  --font-weight-normal: 400;
  --line-height-base: 1.43;

  /* Spacing */
  --space-3: 3px;
  --space-5: 5px;
  --space-6: 6px;
  --space-10: 10px;
  --space-14: 14px;
  --space-15: 15px;
  --space-20: 20px;
  --space-30: 30px;
  --space-42: 42px;

  /* Border Radius */
  --radius-10: 10px;
  --radius-none: 0px;

  /* Borders */
  --border-button: 2px solid #4d4d4d;
  --border-accent-div: 5px solid #00adef;
  --border-bottom-div: 0px 0px 5px solid #333333;

  /* Shadows */
  --shadow-none: none;
}

8. AI Coding Assistant Prompt

# UN Design System Specification

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

## Brand Context
The UN’s design system is institutional, neutral, and globally accessible. It uses a restrained palette dominated by UN blue and neutral grays, with flat design elements and clear typographic hierarchy. Accessibility and clarity are prioritized over decoration.

## Color Palette
- Primary Blue: #337ab7 — Links, accents, interactive elements
- Light Gray BG: #f2f2f2 — Page backgrounds
- Dark Gray Text: #4d4d4d — Primary text
- White: #ffffff — Backgrounds, text on dark surfaces
- Deep Navy: #23527c — Accent for hover/focus
- Medium Gray: #5f5f5f — Neutral hover/focus text
- Light Neutral: #e0e0e0 — Dividers
- Sky Accent: #09a2dd — Hover/focus borders
- Navy Accent: #27568c — Accent hover/focus
- Bright Cyan: #00adef — Hover/focus borders
- Mid Gray: #646464 — Neutral hover/focus text
- Soft Divider: #dbdbdb — Dividers
- Accent Blue: #0b9fd8 — Hover/focus borders
- Deep Steel: #2f5682 — Accent hover/focus
- Bright Sky: #01aced — Hover/focus borders
- Gray Neutral: #656565 — Hover/focus text
- Soft Gray: #dadada — Dividers
- Navy Steel: #2f5683 — Accent hover/focus
- Cyan Bright: #01abec — Hover/focus borders
- Dim Gray: #626262 — Hover/focus text
- Divider Gray: #dddddd — Dividers
- Accent Aqua: #0aa1da — Hover/focus borders
- Navy Tone: #2e5683 — Accent hover/focus
- Slate Blue: #33557d — Accent hover/focus
- Mid Neutral: #676767 — Neutral hover/focus text
- Pale Gray: #d8d8d8 — Dividers
- Aqua Accent: #0c9ed5 — Hover/focus borders
- Slate Accent: #33567e — Accent hover/focus
- Cyan Tone: #02abec — Hover/focus borders

## Typography
- Font Family: 'Roboto', sans-serif
- Button: 16px, weight 400, line height 1.43 — Action buttons
- Caption: 14px, weight 400, line height 1.43 — Secondary text
- Link: 14px, weight 400, line height 1.43 — Inline links

## Spacing & Grid
Base: 4px grid
Scale: 3px, 5px, 6px, 10px, 14px, 15px, 20px, 30px, 42px
Usage:
- Button padding: 6px vertical
- Section gaps: 20px+
- Hero spacing: 42px

## Border Radius
- none: 0px — Buttons
- md: 10px — Div containers

## Shadows & Depth
Flat design—use borders for depth, no shadows.

## Component Specifications

### Primary Button
Default:
- Background: #4d4d4d
- Color: #f2f2f2
- Padding: 6px 12px
- Border-radius: 0px
- Border: 2px solid #4d4d4d
Hover:
- Background: #f2f2f2
- Color: #4d4d4d
- Border: 2px solid #00adef
Focus:
- Outline: -webkit-focus-ring-color auto 5px
- Background: #f2f2f2
- Color: #4d4d4d
- Border: 2px solid #00adef
Active:
- Background: rgb(193, 46, 42)
- Color: #ffffff
- Box-shadow: rgba(0,0,0,0.125) 0px 3px 5px inset

### Navigation Links
Default: #337ab7, no underline
Hover: rgb(56,56,56), no underline

### Input Fields
Use Bootstrap defaults or match card div styles with 10px radius and neutral borders.

## Layout & Responsive Rules
Bootstrap grid
Breakpoints: 450px, 480px, 700px, 767px, 768px, 991px, 992px, 1024px, 1199px, 1200px, 1600px

## Interaction Rules
- State changes: 150ms ease
- Focus indicators: clear outline and border color change
- No animation for non-interactive elements

## DO List
- Use only colors from the palette
- Maintain 4px grid
- Keep buttons square unless specified
- Preserve text sizes exactly
- Respect breakpoints for responsiveness
- Keep link underline off, but maintain color contrast

## DON'T List
- Add shadows
- Round buttons unless specified
- Use colors outside palette
- Rely solely on color for state changes — always use border/outline
- Reduce contrast below WCAG AA

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #4d4d4d;
  color: #f2f2f2;
  padding: 6px 12px;
  border-radius: 0;
  border: 2px solid #4d4d4d;
  font-weight: 400;
  font-size: 16px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #f2f2f2;
  color: #4d4d4d;
  border: 2px solid #00adef;
}
.btn-primary:focus {
  outline: -webkit-focus-ring-color auto 5px;
  background: #f2f2f2;
  color: #4d4d4d;
  border: 2px solid #00adef;
}
.btn-primary:active {
  background: rgb(193, 46, 42);
  color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.125) 0px 3px 5px inset;
}
```

### Link
```css
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover {
  color: rgb(56, 56, 56);
  text-decoration: none;
}
```

### Card
```css
.card {
  border-radius: 10px;
  border: 5px solid #00adef;
  padding: 20px;
  background: #ffffff;
}
```

9. Summary

TL;DR — The UN’s web design is flat, blue-driven, and accessibility-focused. It's a restrained system built for trust and clarity, with Bootstrap under the hood and Roboto as the typographic backbone.

Brand Keywords:

• trust-first
• flat-neutral
• globally-accessible
• blue-authoritative