UNESCO Design System Deep Dive

1. Brand Overview

UNESCO’s digital design language feels exactly how you’d expect a global cultural and educational authority to look—formal, trustworthy, but not stiff. The first impression: clean blue-and-white minimalism, anchored by a strong institutional emblem. The site’s visual tone is diplomatic—designed to work across languages, cultures, and device types without looking provincial or trend-chasing.

The vibe is classic international organization: blue as the primary anchor (the same psychological play the UN and WHO use—calm, trust, authority). The typography is modern and sans-serif, built around Inter, a rational, neutral typeface that won’t distract from content. No flamboyant flourishes. No gradients. The design is functional, almost document-like. But there’s enough polish—rounded pill buttons, generous white space—that it doesn’t feel bureaucratic.

Who is this design for? Stakeholders and visitors worldwide. That means the design system has to be adaptable for multilingual content, accessible on low-bandwidth devices, and legible in contexts ranging from policy papers to tourism information. The consistency here is key: every element feels like it belongs to the same visual family. You could screenshot a subpage and still instantly know it’s UNESCO.

Philosophically, this is a “clarity-first” system. The colors are restrained, the spacing grid is predictable (8px base), and the components are conventional Bootstrap/Vuetify structures dressed in UNESCO’s palette. This isn’t a playground for experimental UI—it’s a framework to present serious information without losing approachability. The design rules here clearly prioritize accessibility, neutrality, and cross-cultural recognizability.

2. Color System

2.1 Primary Colors

The main brand color is Primary Blue — rgb(0, 119, 212) → #0077d4. This is the hero color: it’s on the logo, primary buttons, focus states, and links. It’s bright enough to stand out against white backgrounds but still readable for text and icons.

Secondary is Deep Blue — rgb(17, 90, 158) → #115a9e. This is the hover state for primary buttons and sometimes used as a secondary action color.

Psychology: Blue signals trust, stability, and authority—exactly the vibe UNESCO needs. It’s also culturally neutral (no strong political associations in most regions). Compared to a tech brand’s electric blue, this is more grounded.

Competitor comparison: The UN uses a softer sky blue. UNESCO’s blue is deeper, slightly more saturated, making it more visible on digital screens.

2.2 Complete Palette

2.3 Color Relationships

Contrast: Primary blue (#0077d4) on white easily passes WCAG AA for regular text. Deep blue (#115a9e) also passes. White text on primary blue passes AAA for large text. Neutral grey (#7f888f) on white is borderline for body text—safe for secondary labels but not main content.

Dark mode: No evidence of a dark theme. The palette is clearly optimized for light backgrounds.

2.4 Usage Guide

• Primary Blue + White: Default CTA combination. Works everywhere.
• Deep Blue + White: Good for secondary buttons or hover states.
• Neutral Grey + White: Avoid for body text—use for disabled states, secondary links.
• Highlight BG + Highlight Color: Use sparingly for emphasis.

Avoid:

• Grey text on light grey backgrounds (low contrast).
• Using Primary Blue for non-interactive decorative elements—it dilutes the brand's action language.

3. Typography

3.1 Font Families

Main font: Inter. No fallbacks listed, but Inter is a Google Fonts staple. It’s geometric, clean, highly legible in UI contexts. Weight variety (400–800) gives flexibility without switching typefaces. There’s also a mysterious unesco font family at 16px/500 weight—probably a custom icon or emblem font.

3.2 Type Scale

3.3 Hierarchy

Biggest headings (60px/800) are rare—probably only homepage hero titles. The 36px variants (800 or 600 weight) are the workhorse for section titles. Body text seems to live in the 16–18px range. The generous line heights (1.4+ for smaller sizes) keep multilingual text readable. Links often inherit heading weights for emphasis—interesting choice for keeping navigation visible.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. All common spacings are multiples of 4 or 8. This keeps layout predictable.

4.2 Layout

Frameworks: Bootstrap + Vuetify. Breakpoints are standard plus odd ones (98px, 415px) — likely for specific components. Key breakpoints: 576px (sm), 768px (md), 992px (lg), 1200px (xl), 1400px (xxl).

5. Visual Elements

Border Radius:

• 8px — cards, divs
• 16px — small buttons, badges
• 24px — primary buttons
• 32px — large buttons
• 80px — inputs
• 84px — search bar
• 50% — avatars, circular elements

Shadows: None. Flat design. Depth comes from borders and color shifts.

Borders:

• 1px solid white @ 20% opacity — dividers on dark backgrounds
• 1px solid #d5dadd — light dividers
• 1px solid primary/secondary blue — button outlines

6. Components

6.1 Buttons

Primary (btn-primary):

• Default: bg #0077d4, white text, padding 14px 24px, radius 32px, border 1px solid #0077d4
• Hover: bg #115a9e, text grey (#7f888f)
• Active: bg #f1f4f6, text grey
• Focus: bg #115a9e, white text, box-shadow #b2d6f2 0 0 0 0.125rem

Search Close (unesco-search--close):

• Default: white bg, grey text, radius 24px
• Hover/Focus: dark blue bg (#0e4280), grey text
• Active: transparent bg, white text

Secondary Outline (btn-outline-grey):

• Default: transparent bg, grey text, 1px solid #7f888f, radius 16px
• Hover/Focus: dark blue bg (#0e4280), grey text

6.2 Links

• Primary link: #0077d4 → hover #212121
• White link: #ffffff → hover #212121
• Underlined link: #212121 → hover remove underline
• Grey link: #7f888f → hover #212121
• Accent link: #d8552c → hover #212121

6.3 Forms

Text input:

• Default: white bg, dark text (#212121), border 1px solid #d5dadd, radius 80px, padding 14px 24px
• Focus: bg #0062ae, border-color #0077d4

6.4 Cards

Light grey bg (#f1f4f6), 8px radius, 1px border in #d5dadd. No shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-grey-neutral: #7f888f;
  --color-primary-blue: #0077d4;
  --color-light-grey-bg: #f1f4f6;
  --color-deep-blue: #115a9e;
  --color-border-grey: #d5dadd;
  --color-link-hover-blue: #005faa;
  --color-warning-bg-subtle: #faedd4;
  --color-danger-text-emphasis: #562212;
  --color-info-text-emphasis: #123e47;
  --color-code-pink: #e83e8c;
  --color-primary-text-emphasis: #003055;
  --color-primary-bg-subtle: #cce4f6;
  --color-dark-text-emphasis: #495057;
  --color-success-text-emphasis: #20473b;
  --color-success-bg-subtle: #dcf0e9;
  --color-secondary-bg-subtle: #e5e7e9;
  --color-secondary-text-emphasis: #333639;
  --color-carousel-caption: #ffffff;
  --color-info-bg-subtle: #d5ebef;
  --color-form-invalid: #e4a429;
  --color-form-valid: #4fb293;
  --color-highlight: #212121;
  --color-highlight-bg: #fff278;

  /* Typography */
  --font-family-primary: "Inter";
  --font-family-unesco: "unesco";

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-56: 56px;
  --space-96: 96px;

  /* Border Radius */
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-80: 80px;
  --radius-84: 84px;
  --radius-full: 50%;

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

8. AI Coding Assistant Prompt

# UNESCO Design System Specification

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

## Brand Context
UNESCO's design is formal, neutral, and globally accessible. It uses a restrained blue-and-white palette, modern sans-serif typography, and an 8px grid. Depth comes from borders, not shadows.

## Color Palette
- Primary Blue: #0077d4 — CTAs, logo, primary buttons, links
- Deep Blue: #115a9e — Hover state for primary buttons, secondary actions
- White: #ffffff — Backgrounds, text on dark surfaces
- Neutral Grey: #7f888f — Secondary text, icons, disabled states
- Light Grey BG: #f1f4f6 — Card backgrounds
- Border Grey: #d5dadd — Dividers, input borders
- Link Hover Blue: #005faa — Link hover/focus
- Warning BG Subtle: #faedd4 — Alert backgrounds
- Danger Text Emphasis: #562212 — Error text
- Info Text Emphasis: #123e47 — Informational text
- Code Pink: #e83e8c — Code snippets
- Primary Text Emphasis: #003055 — Headlines
- Primary BG Subtle: #cce4f6 — Info highlights
- Dark Text Emphasis: #495057 — Body copy
- Success Text Emphasis: #20473b — Success messages
- Success BG Subtle: #dcf0e9 — Success backgrounds
- Secondary BG Subtle: #e5e7e9 — Secondary backgrounds
- Secondary Text Emphasis: #333639 — Subheadings
- Carousel Caption: #ffffff — Text over images
- Info BG Subtle: #d5ebef — Info backgrounds
- Form Invalid Color: #e4a429 — Field errors
- Form Valid Color: #4fb293 — Field success
- Highlight Color: #212121 — Emphasis text
- Highlight BG: #fff278 — Marked text

## Typography
Font family: "Inter", sans-serif
Special: "unesco" for emblem text

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 60px | 800 | 1.17 | Hero titles |
| H2 | 36px | 800 | 1.40 | Section titles |
| H2-alt | 36px | 600 | 1.17 | Subsection titles |
| Body-lg | 18px | 400 | 1.78 | Body text large |
| Body | 16px | 400 | 1.40 | Default body |
| Link-lg | 24.8px | 400 | 1.29 | Navigation links |
| Button | 14px | 600 | 1.40 | Action buttons |
| Caption | 14px | 400 | 1.57 | Small text |

## Spacing & Grid
Base: 8px grid
Scale: 4px, 6px, 8px, 10px, 14px, 16px, 20px, 24px, 32px, 48px, 56px, 96px
Map: 14px/24px padding for buttons, 32px section gaps, 8px card padding

## Border Radius
- sm: 8px — cards, small elements
- md: 16px — badges, small buttons
- lg: 24px — primary buttons
- xl: 32px — large buttons
- input: 80px — rounded fields
- search: 84px — search bars
- full: 50% — avatars, circles

## Shadows & Depth
Flat design—use borders, not shadows

## Components

### Primary Button
Default: bg #0077d4; color #ffffff; padding 14px 24px; radius 32px; border 1px solid #0077d4; font 14px/600
Hover: bg #115a9e; color #7f888f
Active: bg #f1f4f6; color #7f888f
Focus: bg #115a9e; color #ffffff; box-shadow #b2d6f2 0 0 0 0.125rem

### Secondary Outline Button
Default: transparent bg; color #7f888f; border 1px solid #7f888f; radius 16px
Hover: bg #0e4280; color #7f888f

### Input Field
Default: bg #ffffff; color #212121; border 1px solid #d5dadd; radius 80px; padding 14px 24px
Focus: bg #0062ae; border-color #0077d4

### Card
bg #f1f4f6; radius 8px; border 1px solid #d5dadd; padding 24px

## Layout & Responsive Rules
Breakpoints: 576px, 768px, 992px, 1200px, 1400px
Container max-widths follow Bootstrap defaults

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus: colored box-shadows in primary hue
- Disabled: reduced opacity

## DO
- Use only palette colors
- Maintain 8px grid
- Keep text weights consistent with spec
- Use white text on blue backgrounds
- Reserve primary blue for interactive elements

## DON'T
- Add drop shadows
- Mix sharp and rounded corners
- Use arbitrary border radii
- Use grey for primary text

## Code Examples

```css
.btn-primary {
  background: #0077d4;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 32px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #0077d4;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #115a9e; color: #7f888f; }
.btn-primary:focus { box-shadow: #b2d6f2 0 0 0 0.125rem; }

.input-text {
  background: #ffffff;
  border: 1px solid #d5dadd;
  border-radius: 80px;
  padding: 14px 24px;
}
.input-text:focus { background: #0062ae; border-color: #0077d4; }

.card {
  background: #f1f4f6;
  border-radius: 8px;
  border: 1px solid #d5dadd;
  padding: 24px;
}
```

9. Summary

TL;DR — UNESCO’s site is a clean, blue-and-white, flat system built for clarity and trust. The 8px grid and restrained palette make it predictable and accessible. Buttons are bold, rounded, and border-heavy; typography is modern and neutral.

Brand Keywords:

• institutional-trust
• global-neutral
• clarity-first
• flat-minimal