Wikimedia Design System Deep-Dive

1. Brand Overview

The Wikimedia visual language is exactly what you’d expect from the organisation behind Wikipedia: functional, accessible, and stripped of unnecessary ornament. They’re designing for billions of readers, editors, and contributors, across hundreds of languages and cultures. This is a utilitarian aesthetic — no gradients, no drop shadows, no quirky flourishes. The tone is democratic: anyone should be able to read, understand, and interact with it.

The site’s design philosophy leans on clarity and trust. The primary blue (#3366cc) is instantly recognisable — it’s been part of Wikipedia’s DNA for years. It’s calm enough to not distract, but saturated enough to stand out in calls to action. They don’t chase trends like neumorphism or glassmorphism; the system is flat, with borders and subtle background colours to define space.

There’s a reason this works: Wikimedia has global users with varying bandwidth and device capabilities. Fancy visuals can slow down load times or complicate accessibility. Their design system is built to scale from low-end mobile phones to large desktop screens without breaking.

Typography is purely sans-serif — no custom webfonts loaded from Google or Adobe. This is a conscious choice. It’s faster, lighter, and respects local font rendering. You don’t see Helvetica as a fixed choice here; instead, the browser picks the system sans-serif, ensuring familiarity across regions.

Spacing is consistent. The 8px grid is present but flexible — they use 4px increments for tighter UI, and larger jumps (24px, 32px, 64px) for macro layout spacing. The breakpoints (320px, 480px, 768px) show a mobile-first approach.

In short: this is a no-nonsense, functional design system optimised for clarity, speed, and universality. It’s not about “standing out” visually — it’s about being an invisible enabler of information.

2. Color System

2.1 Primary Colors

Primary Blue: #3366cc (rgb(51, 102, 204))
This is the workhorse. It’s used for links, primary buttons, and key interactive elements. The hue sits between cobalt and royal blue — bright enough for visibility, but not neon or aggressive. Psychologically, blue communicates trust, stability, and reliability — perfect for an organisation whose credibility is everything.

Comparison:

• Wikipedia Blue is softer than Twitter’s #1DA1F2, less saturated than Facebook’s #1877F2.
• Closer to the blue used in older IBM branding — restrained, professional.

2.2 Complete Palette

That’s an unusually large palette for such a minimalistic design. Most of these are functional states — hover, active, visited, diff states for content changes. This makes sense for Wikimedia, which has interactive editing tools baked into the site.

2.3 Color Relationships

Contrast is strong across the board. Primary blue on white passes WCAG AA easily (contrast ratio ~6.8:1). Dark neutrals (#404244, #54595d) on white are >7:1. Even the visited link purple (#6a60b0) maintains accessibility.

They avoid low-contrast pastel-on-pastel combinations for core UI. Pastels like #fdf2d5 (warning background) are paired with darker text (#886425) for legibility.

Dark mode isn’t evident in this dataset — everything points to light backgrounds as the default.

2.4 Usage Guide

• Use #3366cc for links, primary buttons, and active states.
• Avoid pairing #3366cc with #6a60b0 — too close in luminance, not enough distinction.
• For warnings: #fdf2d5 background + #886425 text is the safe combo.
• Errors: #ffe9e5 background + #bf3c2c or #9f3526 text.
• Diff content styling: #a3d3ff for added, #ffe49c for removed, with corresponding text colors.

Don’t invent new hues — this palette covers every functional state.

3. Typography

3.1 Font Families

Everything is sans-serif. No Google Fonts, no Adobe Fonts, no variable fonts. This is a system font stack approach — letting the OS/browser choose the default sans-serif.

Advantages:

• Faster load times.
• Native rendering per platform.
• Global compatibility for languages/scripts.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is subtle. H1 at 24px is not huge — they don’t scream headlines at you. This keeps the reading experience consistent. Smaller sizes (14–16px) cover captions, links, and body text.

Weight is the main differentiator: 700 for emphasis, 400 for regular content. They reuse sizes across roles (16px can be heading or link), which keeps the visual rhythm even.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. They sometimes halve it (4px) for tight fits.

4.2 Layout

Breakpoints:

• 320px — mobile baseline
• 480px — small tablet / large phone
• 768px — tablet / desktop crossover

No evidence of fixed container widths — likely fluid layouts with these breakpoints controlling stacking and column behaviour.

5. Visual Elements

Border Radius

None. Every button here has border-radius: 0px. This is a sharp-cornered system — consistent with the flat, utilitarian aesthetic.

Shadow System

None for components. Only rgba(0,0,0,0.06) appears — extremely subtle, likely for focus rings or minimal depth cues.

Borders and Dividers

The only explicit border style:

• 0px 0px 1px solid #808080 for <hr> (low confidence).
  Most borders use color tokens like --border-color-subtle (#c8ccd1) for UI separation.

6. Components

6.1 Buttons

Primary Button (pure-button-primary-progressive donate-button)

Default:

• Background: #3366cc
• Text: #ffffff
• Padding: 5px 11px
• Border-radius: 0px
• Border: 0px none #6485d1
• Font-weight: 700
• Font-size: 14px

Hover:

• Outline: 0px (no visual change except possible background change via CSS variable)

Active:

• Text color: var(--color-inverted)
• Background: var(--background-color-progressive--active)
• No shadow

Focus:

• Text color: var(--color-error)
• Outline: 1px solid var(--outline-color-progressive--focus)
• Box-shadows: var(--box-shadow-inset-small) var(--box-shadow-color-progressive--focus), var(--box-shadow-inset-medium) var(--box-shadow-color-inverted)

Disabled: not explicitly defined here, but likely opacity reduction.

6.2 Links

Variant 1:

• Default: #3366cc, no underline
• Hover: underline

Variant 2 (inverse):

• Default: #ffffff, bold
• Hover: underline

6.3 Forms

No explicit input styling in dataset — likely native browser defaults with token-based overrides.

6.4 Cards

No card-specific data — likely flat white backgrounds with subtle borders.

7. Design Tokens

/* Colors */
:root {
  --primary: #3366cc;
  --neutral-dark-1: #404244;
  --neutral-dark-2: #54595d;
  --white: #ffffff;
  --neutral-grey: #808080;
  --hover-blue: #3056a9;
  --border-subtle: #c8ccd1;
  --border-progressive-active: #233566;
  --visited-link: #6a60b0;
  --border-emphasized: #202122;
  --placeholder-text: #72777d;
  --notice-bg: #eaecf0;
  --border-destructive: #f54739;
  --warning-bg: #fdf2d5;
  --warning-icon: #ab7f2a;
  --accent-base: #3366cc;
  --interactive-active: #dadde3;
  --destructive-active: #612419;
  --error-hover: #9f3526;
  --destructive-hover-bg: #ffdad3;
  --content-removed-border: #ffe49c;
  --border-progressive: #6485d1;
  --content-removed-text: #8b0000;
  --content-added-bg: #a3d3ff;
  --visited-hover: #534fa3;
  --link-visited-active: #353262;
  --shadow-alpha-base: rgba(0,0,0,0.06);
  --link-red: #bf3c2c;
  --success-bg: #dff2eb;
  --error-bg-hover: #d74032;
  --destructive-active-bg: #ffc8bd;
  --button-quiet-hover-bg: rgba(0,24,73,0.027);
  --transparent: transparent;
  --warning-border-active: #453217;
  --destructive-visited: #9f5555;
  --backdrop-light: hsla(0,0%,100%,0.65);
  --progressive-subtle-bg: #f1f4fd;
  --warning-border-hover: #735421;
  --error-subtle-bg: #ffe9e5;
  --border-interactive-hover: #27292d;
  --border-success: #099979;
  --progressive-subtle-active-bg: #b6d4fb;
  --content-added-text: #006400;
  --warning-text: #886425;
  --progressive-subtle-hover-bg: #d9e2ff;
  --success-text: #177860;
  --print-visited: #552200;
}

/* Typography */
:root {
  --font-family: sans-serif;
  --h1-size-lg: 24px;
  --h1-size-md: 20px;
  --h1-size-sm: 16px;
  --body-size: 16px;
  --caption-size: 14px;
  --line-height: 1.5;
  --font-weight-bold: 700;
  --font-weight-regular: 400;
}

/* Spacing */
:root {
  --space-4: 4px;
  --space-4-16: 4.16px;
  --space-5: 5px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-50: 50px;
  --space-64: 64px;
  --space-100: 100px;
}

/* Radius */
:root {
  --radius-none: 0px;
}

/* Shadows */
:root {
  --shadow-color-alpha-base: rgba(0,0,0,0.06);
}

8. AI Coding Assistant Prompt

# Wikimedia Design System Specification

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

## Brand Context
Wikimedia’s design is functional, accessible, and globally compatible. The system prioritises clarity, speed, and universality. It uses a flat aesthetic with no ornamental shadows or rounded corners.

## Color Palette
- Primary Blue: #3366cc — Links, primary buttons, CTAs
- Dark Neutral 1: #404244 — Secondary text, icons
- Dark Neutral 2: #54595d — Captions, metadata
- White: #ffffff — Background, button text
- Grey Neutral: #808080 — Dividers
- Hover Blue: #3056a9 — Button hover background
- Border Subtle: #c8ccd1 — Light borders
- Border Progressive Active: #233566 — Active button border
- Visited Link: #6a60b0 — Clicked links
- Placeholder Text: #72777d — Input placeholders
- Notice Background: #eaecf0 — Info banners
- Border Destructive: #f54739 — Error borders
- Warning Background: #fdf2d5 — Alert backgrounds
- Warning Icon: #ab7f2a — Warning icons
- Interactive Active: #dadde3 — Active UI background
- Destructive Active: #612419 — Active destructive buttons
- Error Hover: #9f3526 — Hovering error states
- Content Removed Border: #ffe49c — Diff removed border
- Border Progressive: #6485d1 — Progressive state borders
- Content Removed Text: #8b0000 — Removed diff text
- Content Added BG: #a3d3ff — Added content background
- Link Red: #bf3c2c — Missing page links
- Success BG: #dff2eb — Success backgrounds
- Error Subtle BG: #ffe9e5 — Subtle error background
- Border Success: #099979 — Success borders
- Content Added Text: #006400 — Added diff text
- Warning Text: #886425 — Warning text
- Success Text: #177860 — Success text

## Typography
- Font family: sans-serif (system stack)
- Sizes:
  - H1: 24px, 700, 1.5
  - H1 alt: 24px, 400, 1.5
  - H1 md: 20px, 700, 1.5
  - Body: 16px, 400, 1.5
  - Body bold: 16px, 700, 1.5
  - Caption: 14px, 400, 1.5
  - Caption bold: 14px, 700, 1.5
- Use H1 for page titles, 16px for body text, 14px for captions.

## Spacing & Grid
Base: 8px grid. Values: 4px, 4.16px, 5px, 8px, 12px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 100px.
Map: 
- Button padding: 5px vertical, 11px horizontal
- Card padding: multiples of 16px
- Section gaps: 24px–64px

## Border Radius
- none: 0px — all components

## Shadows & Depth
Flat design — use borders instead of shadows. Only subtle rgba(0,0,0,0.06) for minimal depth.

## Component Specifications

### Primary Button
Default:
- background: #3366cc
- color: #ffffff
- padding: 5px 11px
- border-radius: 0px
- border: none
- font-weight: 700
- font-size: 14px
Hover: outline: 0px
Active: background: var(--background-color-progressive--active), color: var(--color-inverted)
Focus: outline: 1px solid var(--outline-color-progressive--focus)

### Link
Default: color #3366cc, no underline
Hover: underline
Inverse link: color #ffffff, bold, underline on hover

### Input Field
Use native styles with placeholder color #72777d

## Layout & Responsive Rules
Breakpoints:
- Mobile: 320px
- Small tablet: 480px
- Tablet/Desktop: 768px
Fluid layout with stacking at smaller breakpoints.

## Interaction Rules
- 150ms ease transitions for state changes
- Clear focus indicators via outlines
- No hover-only states for critical actions — must also work on focus

## DO
- Use only palette colors
- Maintain 8px grid
- Keep corners sharp (0px radius)
- Respect typography scale
- Ensure WCAG AA contrast ratios

## DON'T
- Add drop shadows
- Round corners
- Invent new colors
- Use custom fonts

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #3366cc;
  color: #ffffff;
  padding: 5px 11px;
  border-radius: 0px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { text-decoration: none; }
.btn-primary:focus { outline: 1px solid #233566; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Link:
```css
a {
  color: #3366cc;
  text-decoration: none;
}
a:hover { text-decoration: underline; }
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #c8ccd1;
  border-radius: 0px;
  padding: 16px;
}
```

9. Summary

TL;DR — Wikimedia’s design is flat, functional, and globally accessible. Primary blue drives interaction, sans-serif typography keeps content readable, and an 8px grid maintains spatial rhythm. No rounded corners, no heavy shadows — just clarity.

Brand Keywords: utilitarian-global, trust-first, flat-accessible, content-priority