Wikipedia Design System Deep-Dive

Reverse-engineered from https://www.wikipedia.org/

1. Brand Overview

Wikipedia’s design system is a paradox—simultaneously global and stripped down to the essentials. The site’s visual language is utilitarian, almost austere, but it carries enormous weight because of what it represents: free knowledge for everyone. There’s no fluff here. You won’t find decorative gradients, flamboyant typography, or gratuitous animations. Instead, the design is built for clarity, speed, and accessibility across hundreds of languages and cultures.

The vibe: academic, neutral, trustworthy. It’s very much a “content-first” philosophy. Everything about the UI feels like it’s trying to get out of the way so the information can take center stage. The core blue (#3366cc) is not flashy—it’s a workhorse link color that’s been on the internet since the early days, chosen for legibility and familiarity. It says “click here” without shouting.

Wikipedia’s design is for the widest possible audience: students in rural schools, researchers in labs, casual readers on mobile devices. That means the system needs to work on low-bandwidth connections, in old browsers, and in high-contrast modes. The visual decisions reflect that reality: minimal shadows, tiny border radii, simple hover states.

This site is a masterclass in functional minimalism. It’s not “minimalist” in the trendy design sense—it’s minimal because every pixel has to justify its existence. They’ve kept the brand consistent for decades, with the puzzle globe logo and serif “Wikipedia” wordmark anchoring the visual identity.

2. Color System

2.1 Primary Colors

The primary brand color is #3366cc (RGB 51, 102, 204). This is the blue you see on all links, CTAs, and progressive actions. It’s a safe choice—blue is universally associated with trust and reliability, and this particular tone is saturated enough to stand out but not so bright that it strains the eyes. Compared to competitors like Britannica (which leans darker navy) or Google Search (which spreads color across multiple accents), Wikipedia sticks to this one blue as the main interactive signal.

It works because it’s consistent—users know that blue means “clickable.”

2.2 Complete Palette

And from the CSS variables, we see functional colors:

• --border-color-subtle: #c8ccd1 — Dividers, subtle borders
• --color-visited: #6a60b0 — Link visited state
• --border-color-destructive: #f54739 — Error borders
• --color-link-red: #bf3c2c — Missing page links
• --color-success: #177860 — Success states
• --color-warning: #886425 — Warnings
• --background-color-success-subtle: #dff2eb — Success background

2.3 Color Relationships

Contrast is solid. Primary blue (#3366cc) on white passes WCAG AA easily. Dark text (#202122) on white is near-max contrast. Hover states shift hue without killing contrast: hover blue #3056a9 stays readable.

Dark mode isn’t in play here—the palette is optimized for light backgrounds. Accessibility is baked in: link colors have enough contrast for colorblind users, and visited links (#6a60b0) remain distinct.

2.4 Usage Guide

Works well:

• Primary blue + white for CTAs
• Dark gray (#54595d) body text with blue links
• Light gray (#eaecf0) backgrounds for subtle emphasis

Avoid:

• Mixing red (#bf3c2c) with blue for primary actions—it’s reserved for errors/missing pages
• Using hover gray (#404244) for text—it’s meant for hover states, not static text
• Overusing success green (#177860) outside success contexts—it breaks semantic meaning

3. Typography

3.1 Font Families

Two main families:

• Linux Libertine (serif) with fallbacks: Hoefler Text, Georgia, Times New Roman, Times. Used for the Wikipedia wordmark and some headings—adds scholarly gravitas.
• -apple-system (system UI sans) with fallbacks: system-ui, Segoe UI, Roboto, Inter, Helvetica, Arial. Used for UI elements, buttons, captions—neutral and readable.
• Montserrat (sans) for some headings—modern touch without breaking the classic feel.

No Google Fonts or Adobe Fonts—everything’s either system or open-source.

3.2 Type Scale

3.3 Hierarchy

H1s in Libertine set the academic tone. Montserrat adds occasional modernity in UI headings. System sans handles the rest—consistent across OS. The scale is tight; smallest body text at 13px is still readable thanks to high contrast. Line heights are functional—1.5 for body, tighter for headings.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px grid. Common values:

4.2 Layout

Breakpoints: 240px, 320px, 375px, 480px, 660px, 720px, 768px, 960px. That’s a mobile-first approach scaling up to desktop. No max-width in data—Wikipedia’s layouts are fluid, but content modules respect these breakpoints.

5. Visual Elements

• Border Radius: Mostly 2px—tiny rounding for subtle softness. Buttons sometimes use asymmetric radii (e.g., 0px 2px 2px 0px for search submit). Larger radii (10px, 21px, 24px) are rare.
• Shadows: Minimal. Mostly inset shadows for focus (rgb(51, 102, 204) 0px 0px 0px 1px inset) and a few subtle drop shadows (rgba(50, 50, 50, 0.25) 0px 0px 15px).
• Borders: 1px solid neutral gray (#a2a9b1) for most components. Functional colors for specific states (progressive: #6485d1, destructive: #f54739).

6. Components

6.1 Buttons

Primary (pure-button-primary-progressive)

• Default: bg #3366cc, text #ffffff, padding 8px 16px, radius 0px 2px 2px 0px, border 1px solid #6485d1.
• Hover: bg white, text #404244.
• Active: bg #233566 (var), text inverted.
• Focus: inset box-shadow blue/white.

Secondary (lang-list-button)

• Default: bg #f8f9fa, text #3366cc, padding 6px 12px, radius 2px, border 1px solid #a2a9b1.
• Hover: bg white, text #404244.
• Active/Focus: same pattern as primary.

6.2 Links

Two variants:

• Standard: color #3366cc, no underline by default, underline on hover.
• Invisible (transparent): used for icons, underline on hover.

6.3 Forms

Search input: bg white, text #202122, radius 2px 0px 0px 2px, padding 8px 64px 8px 12px, inset blue shadow. Focus border changes to error colors when relevant.

Select menus: transparent bg, no border, padding 0px 24px.

6.4 Cards

No explicit card component in data—Wikipedia uses divs with neutral borders and minimal shadows.

7. Design Tokens

:root {
  /* Colors */
  --primary-blue: #3366cc;
  --neutral-gray: #54595d;
  --text-black: #202122;
  --black: #000000;
  --white: #ffffff;
  --light-gray: #eaecf0;
  --hover-gray: #404244;
  --hover-blue: #3056a9;
  --border-color-subtle: #c8ccd1;
  --color-visited: #6a60b0;
  --border-color-destructive: #f54739;
  --color-link-red: #bf3c2c;
  --color-success: #177860;
  --color-warning: #886425;
  --background-color-success-subtle: #dff2eb;

  /* Typography */
  --font-serif: "Linux Libertine", "Hoefler Text", Georgia, "Times New Roman", Times;
  --font-sans: -apple-system, system-ui, "Segoe UI", Roboto, Inter, Helvetica, Arial;
  --font-montserrat: Montserrat, Helvetica Neue, Helvetica, Arial;

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-10: 10px;
  --radius-21: 21px;
  --radius-24: 24px;

  /* Shadows */
  --shadow-inset-blue: rgb(51, 102, 204) 0px 0px 0px 1px inset;
  --shadow-drop-light: rgba(50, 50, 50, 0.25) 0px 0px 15px 0px;
}

8. AI Coding Assistant Prompt

# Wikipedia Design System Specification

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

## Brand Context
Wikipedia values functional minimalism and global accessibility. The design prioritizes clarity, trust, and neutrality, avoiding decorative excess. Components must work across cultures, devices, and bandwidth conditions.

## Color Palette
- Primary Blue: #3366cc — Links, primary buttons, CTAs
- Neutral Gray: #54595d — Body text, UI labels
- Text Black: #202122 — Core text
- Pure Black: #000000 — Icons, high-contrast UI
- White: #ffffff — Backgrounds
- Light Gray: #eaecf0 — Subtle backgrounds, hover states
- Hover Gray: #404244 — Text on hover
- Hover Blue: #3056a9 — Progressive hover
- Border Subtle: #c8ccd1 — Dividers, borders
- Visited Link: #6a60b0 — Visited links
- Destructive Border: #f54739 — Error states
- Link Red: #bf3c2c — Missing links
- Success Green: #177860 — Success text
- Warning Brown: #886425 — Warnings
- Success BG: #dff2eb — Success backgrounds

## Typography
- Serif Headings: "Linux Libertine", Hoefler Text, Georgia, Times New Roman, Times
- Sans UI: -apple-system, system-ui, Segoe UI, Roboto, Inter, Helvetica, Arial
- Modern Sans: Montserrat, Helvetica Neue, Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 32px | 700 | 1.03 | Page titles |
| H1 | 30px | 400 | 1.10 | Page titles alt |
| H1 | 24px | 700 | 1.50 | UI headings |
| Link Large | 20px | 700 | 1.00 | Prominent nav links |
| H1 Small | 18px | 700 | 1.50 | Subheadings |
| H1 Small Reg | 17px | 400 | 1.50 | Subheadings alt |
| Button Large | 16px | 700 | — | Primary buttons |
| Link Regular | 14px | 400 | 1.50 | Body links |
| Caption | 14px | 400 | 1.50 | Captions |
| Button Medium | 14px | 700 | 1.00 | Secondary buttons |
| Caption Bold | 14px | 700 | 1.00 | Caption emphasis |
| Caption Small | 13px | 400 | 1.60 | Small text |
| Link Small | 13px | 400 | 1.50 | Small links |
| Link Small Bold | 13px | 700 | 1.50 | Small link emphasis |

## Spacing & Grid
Base: 8px. Scale: 1px, 5px, 8px, 16px, 24px, 32px, 40px.
- Button padding: 8px vertical, 16px horizontal
- Card padding: 16px
- Section gaps: 24px–40px

## Border Radius
- none: 0 — tables, straight edges
- sm: 2px — inputs, small buttons
- md: 10px — larger buttons
- lg: 21px–24px — special containers

## Shadows & Depth
Minimal. Use inset blue for focus: `rgb(51, 102, 204) 0px 0px 0px 1px inset`. Rare drop shadows: `rgba(50, 50, 50, 0.25) 0px 0px 15px`.

## Component Specifications

### Primary Button
Default:  
```css
background: #3366cc;
color: #ffffff;
padding: 8px 16px;
border-radius: 0px 2px 2px 0px;
border: 1px solid #6485d1;
font-weight: 700;
font-size: 16px;
```
Hover: bg #ffffff, color #404244  
Active: bg #233566, color inverted  
Focus: inset shadow blue/white  

### Secondary Button
Default: bg #f8f9fa, color #3366cc, padding 6px 12px, radius 2px, border #a2a9b1.  
Hover: bg white, color #404244.  

### Links
Default: color #3366cc, no underline. Hover: underline.  

### Input Fields
Search: bg white, color #202122, radius `2px 0px 0px 2px`, padding `8px 64px 8px 12px`. Focus: border-color error red when invalid.  

## Layout & Responsive Rules
Breakpoints: 240px, 320px, 375px, 480px, 660px, 720px, 768px, 960px.  
Mobile first, fluid widths, respect grid gaps from spacing scale.

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus indicators: inset blue/white shadow
- No animation on layout changes

## DO List
- Use only the defined palette
- Keep all spacing multiples of 8px
- Serif headings, sans for UI
- Maintain high contrast
- Use semantic colors (error, success, warning) appropriately

## DON'T List
- Add decorative gradients
- Mix large radius with square corners in the same container
- Use shadows for depth unless specified
- Override link colors

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #3366cc;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 0px 2px 2px 0px;
  border: 1px solid #6485d1;
  font-weight: 700;
  font-size: 16px;
}
.btn-primary:hover { background: #ffffff; color: #404244; }
```

Secondary Button:
```css
.btn-secondary {
  background: #f8f9fa;
  color: #3366cc;
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid #a2a9b1;
  font-weight: 700;
  font-size: 14px;
}
.btn-secondary:hover { background: #ffffff; color: #404244; }
```

Input:
```css
.input-search {
  background: #ffffff;
  color: #202122;
  border-radius: 2px 0px 0px 2px;
  padding: 8px 64px 8px 12px;
  box-shadow: rgb(51, 102, 204) 0px 0px 0px 1px inset;
}
.input-search:focus { border-color: #f54739; }
```

9. Summary

TL;DR — Wikipedia’s design system is utilitarian, global, and built for clarity. A tight palette, tiny border radii, and system fonts keep it fast and accessible. The primary blue is the heartbeat—everything else is neutral.

Brand Keywords:

• academic-neutral
• functional-minimalist
• global-accessible
• trust-first