Weforum Brand Design System Deep Dive

1. Brand Overview

The World Economic Forum (Weforum) has a clear visual language: authoritative, global, and restrained. The design is built for an audience that expects precision and credibility—policy makers, industry leaders, academics. It’s not trying to wow with flashy gradients or playful UI. Instead, it uses a sober palette and a typographic system that reads as “modern Swiss” — functional, clean, and direct.

You’ll see a lot of AkkuratLLWeb—a corporate sans-serif with sharp geometry and minimal flourish. It’s paired with subtle color accents, mostly blues, greys, and functional greens and reds. This is a site where blue is not just “on brand,” it’s the primary signal for interactivity. The primary blue (#1e69ee and the slightly darker #0065f2) appears on CTAs, links, and focus states. Neutral greys provide the scaffolding—grids, dividers, and background surfaces—while white is used liberally for content clarity.

The design leans heavily on Chakra UI components, which means a lot of token-based consistency across spacing, colors, and typography. The spacing system reveals a base 8px mindset (with some irregulars like 7px and 21px showing up—more on that later). The buttons are pill-rounded (999px radius) or soft-rounded (32px), reinforcing an approachable but professional tone.

There’s restraint in shadows and depth. Most elements are flat, relying on borders and subtle dividers rather than heavy drop shadows. Where shadows do exist, they’re light (rgba(0, 0, 0, 0.08) at 4px blur) or used sparingly for overlays.

My read: this design system is about trust. Every pixel is in service of legibility and a sense of institutional stability. It’s not a “start-up blue” vibe—it’s “conference blue,” the kind you wear in Davos.

2. Color System

2.1 Primary Colors

The main brand color is a saturated blue: #1e69ee (rgb(30, 105, 238)). This is the clickable signal. You’ll also see #0065f2 in button borders and states. Blue in this hue range signals reliability and authority—common in finance, governance, and tech policy spaces.

Compared to competitors (think UN, IMF), WEF’s blue is slightly more vivid, less navy. It’s energetic without being playful. This works because it stands out against a mostly neutral interface while still feeling serious.

2.2 Complete Palette

Below is every extracted color, normalized to HEX, with my take on role and usage:

2.3 Color Relationships

Contrast is high across the board. White text on primary blue passes WCAG AA easily. The dark greys on white backgrounds are safe. The brand uses lighter blues for hover/focus (e.g., #cce0fc) to maintain accessibility while signaling interaction.

Dark mode variants exist in tokens (Neutral-95, Negative-95), but the main site is light mode first.

2.4 Usage Guide

• Good combos: Primary Blue + White (CTA), Dark Grey + White background (body copy), Success Green + White (status badges)
• Avoid: Primary Blue + Lighter Blue for text—it kills contrast.
• Functional colors are clearly separated—don’t mix error reds with warning yellows.
• Accent purples and teals are rare—use them deliberately for thematic events or external platform references.

3. Typography

3.1 Font Families

Two main families: AkkuratLLWeb (custom corporate font) and Akkurat (likely a standard licensed font). No Google or Adobe Fonts here—it’s all custom-hosted.

AkkuratLLWeb is used for headings, links, and UI labels. Akkurat appears in captions and certain buttons. Both are geometric sans-serifs with minimal stroke contrast.

3.2 Type Scale

Here’s the extracted type scale:

3.3 Hierarchy

Hierarchy is clear and consistent: heavy weights (900) for headings, medium (600–700) for links and UI, light (400) for body copy. The large jumps—40px down to 32px—signal clear sections. Small sizes (14px, 12px, 11.2px, 8px) are for captions and meta info.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, but with some irregulars. Common values:

The odd 7px and 21px values are everywhere—likely Chakra UI’s default spacing tokens.

4.2 Layout

Breakpoints range from 400px to 1510px. Mobile-first, scaling up to large desktop. There’s a lot of intermediate breakpoints (600, 768, 1024, 1280, 1440), indicating fine-tuned responsive adjustments.

5. Visual Elements

Border Radius

Values range from sharp (0px) to full pills (999px). Common:

• 7px — list items, card edges
• 12px — videos, cards
• 14px — div containers
• 32px — nav items, buttons
• 56px — spans, badges
• 999px — buttons, badges
• 9999px — extreme pill (locale switcher)

Shadows

Two shadows found:

• rgba(0,0,0,0.08) 0px 4px 12px, rgba(0,0,0,0.04) 0px 1px 2px — soft elevation
• rgba(0,0,0,0.3) 0px 30px 70px — heavy overlay

Mostly flat design, shadows are minimal.

Borders

Common: 1px solid #d6d6d6 for dividers, 1px 0px 0px for top borders. Some functional borders (error red, accent blue).

6. Components

6.1 Buttons

Multiple variants:

Primary (Blue)

Default: bg #0065f2, white text, 32px radius, 1px border same blue, no shadow.

Hover: bg #0051c2, text #cce0fc, 2px border #cce0fc, slight shadow, translateX(5px), opacity 0.85.

Active: bg #66a3f7, border #99c1fa, text #99c1fa.

Focus: 2px outline #3384f5.

Secondary (White)

Default: bg white, text #141414, 32px radius, black border.

Hover/Active similar to primary.

Transparent Pill

Default: bg rgba(255,255,255,0.75), text #333, radius 999px.

Hover: scale(1.07), bg #0051c2, text #cce0fc.

Outline White

Default: transparent bg, white text, 999px radius, 1px border rgba(255,255,255,0.3).

Hover: bg #0051c2.

Grey Pill

Default: bg rgba(128,128,128,0.11), text #333, radius 999px.

Hover similar to transparent pill.

6.2 Links

Variants: dark grey, white, black, blue, light grey. All text-decoration: none default, underline on hover, hover color #0089eb.

6.3 Forms

No extracted inputs—probably Chakra defaults.

6.4 Cards

No explicit card component extracted, but border radii (14px, 12px) and shadows suggest soft edges, minimal depth.

7. Design Tokens

:root {
  /* Colors */
  --color-neutral-light: #d6d6d6;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary-blue: #1e69ee;
  --color-dark-grey: #333333;
  --color-uplink-brown-alpha-30: rgba(136,64,1,0.3);
  /* ... include all colors from table above ... */

  /* Typography */
  --font-heading: "AkkuratLLWeb";
  --font-body: "Akkurat";
  --font-size-h1: 40px;
  --line-height-h1: 1.2;
  /* ... all type scale values ... */

  /* Spacing */
  --space-2: 2px;
  --space-2-8: 2.8px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  /* ... all spacing values ... */

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-xxl: 32px;
  --radius-xxxl: 56px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.08) 0px 4px 12px, rgba(0,0,0,0.04) 0px 1px 2px;
  --shadow-heavy: rgba(0,0,0,0.3) 0px 30px 70px;
}

8. AI Coding Assistant Prompt

# Weforum Design System Specification

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

## Brand Context
Weforum's visual language is precise, institutional, and authority-driven. It uses a restrained color palette, geometric sans-serif typography, and minimal shadows. Blue signals interactivity, neutrals provide structure, and functional colors handle states.

## Color Palette
- Primary Blue: #1e69ee — CTAs, links, primary buttons
- Darker Blue: #0065f2 — Button borders, active states
- Hover Blue: #0051c2 — Button hover
- Light Blue: #cce0fc — Hover backgrounds, focus outlines
- Neutral Light Grey: #d6d6d6 — Borders, dividers
- White: #ffffff — Backgrounds, text on dark
- Black: #000000 — Text, icons
- Dark Grey: #333333 — Secondary text
- Success Green: #23bf6a — Success states
- Error Red: #f32a2a — Error states
- Warning Yellow: #f2b253 — Warnings
- Disabled Grey: #cccccc — Disabled icons
- ... (include all extracted colors as above)

## Typography
- Headings: "AkkuratLLWeb"
- Body/Captions: "Akkurat"
- Size/Weight/Line-height:
  | H1 | 40px | 900 | 1.20 |
  | H2 | 32px | 900 | 1.20 |
  | Link Large | 32px | 900 | 1.20 |
  | H3 | 24px | 900 | 1.33 |
  | ... include all type scale rows ...

Use heavy weights for headings (900), medium (600–700) for UI, light (400) for body.

## Spacing & Grid
Base: 8px grid with irregulars (7px, 21px).
Scale: 2px, 2.8px, 3.5px, 7px, 8px, 10px, 12px, 14px, 15.75px, 16px, 21px, 24px, 26.25px, 27px, 28px, 32px, 40px, 48px, 52.5px, 64px.

## Border Radius
- none: 0px — tables
- sm: 4px — small inputs
- md: 7px — cards
- lg: 12px — videos, modals
- xl: 14px — sections
- pill: 32px — buttons
- full: 999px — pill buttons, badges

## Shadows & Depth
- Soft: rgba(0,0,0,0.08) 0px 4px 12px, rgba(0,0,0,0.04) 0px 1px 2px
- Heavy: rgba(0,0,0,0.3) 0px 30px 70px (overlays)
Minimal use—prefer borders.

## Components

### Primary Button
Default: bg #0065f2, color #ffffff, border 1px solid #0065f2, radius 32px.
Hover: bg #0051c2, color #cce0fc, border 2px solid #cce0fc, shadow rgba(0,0,0,0.1) 0px 2px 4px, translateX(5px), opacity 0.85.
Active: bg #66a3f7, border 2px solid #99c1fa, color #99c1fa.
Focus: outline none, shadow #3384f5 0px 0px 0px 2px.

### Secondary Button
Default: bg #ffffff, color #141414, border 1px solid #000000, radius 32px.
Hover/Active same as primary.

### Outline White Button
Default: transparent bg, color #ffffff, border 1px solid rgba(255,255,255,0.3), radius 999px.

### Transparent Pill Button
Default: bg rgba(255,255,255,0.75), color #333333, border 2px solid transparent, radius 999px.

## Layout & Responsive Rules
Breakpoints: 400px, 480px, 599px, 600px, 601px, 668px, 767px, 768px, 879px, 880px, 903px, 904px, 940px, 1024px, 1124px, 1140px, 1280px, 1439px, 1440px, 1510px.

## Interaction Rules
- Transition: 150ms ease for hover/focus/active
- Focus indicators: 2px solid accent color
- No motion beyond scale/translate for hover

## DO
- Use only palette colors
- Maintain 8px grid (allow 7px/21px tokens)
- Heavy weights for headings
- Keep shadows minimal

## DON'T
- Invent new blues
- Mix sharp and pill corners arbitrarily
- Overuse accent purples/teals
- Add drop shadows to text

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0065f2;
  color: #ffffff;
  border: 1px solid #0065f2;
  border-radius: 32px;
  font-weight: 400;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #0051c2;
  color: #cce0fc;
  border: 2px solid #cce0fc;
  box-shadow: rgba(0,0,0,0.1) 0px 2px 4px;
  transform: translateX(5px);
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d6d6d6;
  padding: 21px;
}
```

Form Input:
```css
.input {
  border: 1px solid #d6d6d6;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 14px;
}
.input:focus {
  border-color: #0065f2;
  outline: none;
}
```

9. Summary

TL;DR — Weforum's design system is restrained, institutional, and precise. Blue is the signal color, AkkuratLLWeb carries the typographic voice, and the 8px grid keeps everything aligned. Minimal shadows, clear hierarchy, and functional color tokens make it easy to keep the UI consistent.

Brand Keywords:

• institutional-clarity
• swiss-precision
• blue-authority
• functional-minimalism