# Wikimedia: brand book and build spec

The Wikimedia brand is built for a movement, not a company: free fonts, one-colour logos and shared palettes that any volunteer group can use, with plain, neutral copy that translates into hundreds of languages. The Foundation's own site applies it as black and white type with flat blocks of movement colour, one highlighted word, hand-drawn illustrations and a credit for every image.

From unfairly.ai/brand-guidelines/wikimedia, checked 2026-10-31. Unofficial study; not affiliated with Wikimedia.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Knowledge looks open. Everything a volunteer needs is free (Montserrat, Source Serif, the palettes, the templates), colour comes in flat blocks anyone can reproduce, and even the image credits are part of the page. Based on: From the guide: free open-source fonts, palettes for affiliates, attribution as a movement value; and the homepage's Photo credits band and colour-block cards.

## Purpose

Mission: Empower and engage people around the world to collect and develop educational content under a free license or in the public domain, and to disseminate it effectively and globally. (published; https://wikimediafoundation.org/about/mission/)

Story: Founded in 2003, the Foundation hosts Wikipedia and the other Wikimedia projects and supports the hundreds of thousands of volunteers who edit them. The Wikimedia brandmark shows a vaguely human figure raising its arms in celebration; the Foundation logo, drawn in 2005 by Neolux, shows a figure holding an open book. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Knowledge | Images and stories should communicate knowledge | published: https://meta.wikimedia.org/wiki/Brand/Imagery |
| Equity | Representative and diverse, without tokenising people or cultures | published: https://meta.wikimedia.org/wiki/Brand/Imagery |
| Community | Shared moments between people; a Wikimedia family album | published: https://meta.wikimedia.org/wiki/Brand/Imagery |

## Fixed and flexible

Never changes:
- Logo in black or white, wordmark in Montserrat
- Montserrat Bold headlines
- Colours from the Core, Legacy and Creative palettes
- White text only on strong red, blue, green, dark green or purple
- Credit every image
- Plain, neutral, translatable copy

The one thing that varies: Which palette colours lead: each affiliate (and each campaign) picks its own 4-6, and the Foundation site rotates them section by section.

## Positioning

- **Statement**: For everyone who reads, writes or relies on Wikipedia, the Wikimedia Foundation is the nonprofit that keeps it free, reliable and independent, because it is funded by readers and built by volunteers rather than run for profit. (our reading)
- **Category**: Nonprofit that hosts Wikipedia and the Wikimedia projects (observed)
- **Audience**: Readers and donors, volunteer editors, partners and policymakers (our reading)
- **Problem**: Reliable, free information online is under pressure from paywalls, misinformation and AI systems that reuse it without credit (our reading)
- **Promise**: Reliable information shared with the world, free of ads and paywalls (observed)
- **Differentiators**: The only top-10 website hosted by a nonprofit; Written and fact-checked by volunteers under a neutral point of view; No advertising or paywalls; funded mostly by small reader donations; Over 300 languages; Everything freely licensed (CC BY-SA)
- **Alternatives**: Ad-funded platforms and paywalled publishers; AI chatbots that answer without attribution

## Messaging

Boilerplate (observed): The Wikimedia Foundation is the nonprofit that hosts Wikipedia and the other Wikimedia projects. It supports the volunteers who write and check them, the technology that keeps them fast and private, and the legal and policy work that protects everyone's right to free knowledge.

Taglines:
- We support human knowledge (Homepage hero; the highlighted verb rotates through support, protect, fund, open)
- Imagine a world in which every single human being can freely share in the sum of all knowledge. (The Wikimedia vision, the line the movement words come from)
- Built for people, by people (Homepage section heading on volunteers)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Free and independent | Knowledge without ads or paywalls, paid for mostly by readers, so it stays independent. | Most funding comes from readers; the average single donation is around $10 (USD); The only website among the top 10 most visited that is hosted by a nonprofit | observed |
| Built by people | Volunteers from all backgrounds write, check and fix Wikipedia; the Foundation supports them. | The Wikimedia Foundation supports nearly 265,000 volunteers every month; Every minute 324 new edits are made to Wikipedia | observed |
| The backbone of the internet's knowledge | Reliable information at internet scale, in hundreds of languages, used by students and chatbots alike. | Wikipedia receives nearly 15 billion views each month; Over 67 million articles in 300+ languages | observed |
| Protecting the right to knowledge | Legal and advocacy work to protect access to free knowledge. | Legal and advocacy efforts to protect people's right to free knowledge | observed |

They never claim:
- The Foundation does not make content decisions on Wikipedia: volunteers do (never claim the Foundation writes Wikipedia)
- Affiliates are independent: never "local chapter of the Wikimedia Foundation" or "local representative"

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "We support human knowledge" | homepage hero | https://wikimediafoundation.org/ |
| "Built for people, by people" | homepage section | https://wikimediafoundation.org/ |
| "Help expand human knowledge" | homepage section | https://wikimediafoundation.org/ |
| "Knowledge is human." | guide poster example | https://meta.wikimedia.org/wiki/Brand/Typography |

## Voice

Tone words: Neutral, Clear, Warm, Trustworthy, Joyful.

Traits:
- Neutral, but not Opinionated (published)
- Clear, but not Clever (published)
- Trustworthy, but not Alarming (published)
- Joyful, but not Childish (published)
- For everyone, but not Exclusive (published)

- Codex names four design principles that govern copy: content first, design for consistency, this is for everyone, trustworthy yet joyful (published, Codex writing guide).
- The point of view is neutral: no personal opinions in product copy; third person, active voice for content; second person when telling the reader to act (published, Codex voice and tone).
- Tone shifts with the task: plain and neutral for warnings, celebratory and informative on success (published).
- The Foundation site speaks as "we" (the Foundation) to "you" (reader, donor, volunteer): "We support human knowledge", "Help us support everyone's access" (observed).
- Numbers do the persuading on the homepage: 15 billion views, 265,000 volunteers, 324 edits a minute, 300+ languages (observed).
- The brand guide pages themselves are chattier ("That's pretty sweet.") because they address affiliates; a landing page follows the homepage voice: plain, institutional, warm, no exclamation marks (observed).
- Two voices, scoped: Codex rules govern product UI copy; the Foundation homepage voice governs landing pages. They agree on plain English and neutrality.

Rules a copy check enforces:
- Sentence case headlines
- Write as "we", to "you"
- No exclamation marks
- Plain English: short, easy-to-understand words and simple phrases; it also helps translation
- No idioms, slang, jokes, metaphors or pop-culture references (copy must translate)
- Never: please, sorry, just, simply, try. Say the direct instruction instead
- Say "turn on / turn off", not "enable" or "disable"
- Say "allowlist / denylist", not "whitelist" or "blacklist"
- Say "incorrect", not "invalid"
- Verbs for actions (bare infinitive: Upload, Publish, Share, Donate), nouns for places
- Avoid directional words like below or above; not everyone sees the layout
- Do not assume pronouns; use they, you or we when gender is unknown
- Serial comma ("the people, technology, and policies")
- Taglines: the shorter the better, no more than 10 words in English

Their words: free knowledge, open knowledge, sum of all human knowledge, reliable information, volunteers, nonprofit, human knowledge.
Never: please, sorry, simply, whitelist, blacklist, invalid.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| White | #FFFFFF | Core palette. Main colour with Black; logo reverse colour | Page ground, white card on the birthday band, text on every colour block (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Black | #000000 | Core palette. Main colour; the Foundation logo is black or white | Headlines and body text, Subscribe button fill, map markers (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Black 75 | #404040 | Core palette shade | Footer ground (theme preset black-75) (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Black 50 | #7F7F7F | Core palette shade | Disabled carousel-arrow glyph colour (black-50 preset) (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Black 25 | #BFBFBF | Core palette shade | Disabled carousel-arrow fill and ring; input borders (border-base preset) (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Green | #339966 | Legacy palette. Movement colour for backgrounds, headlines and apparel |  |
| Blue | #0063BF | Legacy palette. Movement colour for backgrounds, headlines and apparel | People-map panel ground behind the volunteer card (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Red | #990000 | Legacy palette. Movement colour for backgrounds, headlines and apparel | Edit action card (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Green AAA | #246342 | Legacy palette, accessibility version: AAA contrast with white | Donate now button in the nav, Donate action card (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Blue AAA | #0C57A8 | Legacy palette, accessibility version: AAA contrast with white | Donation bar ground, Participate action card, every text link (Join the party, credit links) (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Red AAA / Creative Red | #970302 | Legacy AAA red, also the Creative palette strong red |  |
| Pink | #E679A6 | Creative palette, strong |  |
| Orange | #EE8019 | Creative palette, strong |  |
| Yellow | #F0BC00 | Creative palette, strong | Subscribe for news band ground (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Purple | #5748B5 | Creative palette, strong; takes white text | Advocate action card (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Dark green | #305D70 | Creative palette, strong; takes white text |  |
| Creative Blue | #0E65C0 | Creative palette, strong (AA-adjusted blue); takes white text |  |
| Bright Blue | #049DFF | Creative palette, strong | Technology category dot on Our work cards (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Bright Yellow | #E9E7C4 | Creative palette, strong | Hero highlight chip behind "protect" (rotating word) (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Creative Green | #308557 | Creative palette, strong (AA-adjusted green); takes white text |  |
| Bright Green | #71D1B3 | Creative palette, strong | Public policy category dot on Our work cards (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Light Red | #E5C0C0 | Creative palette, light: subtle backgrounds, black text only, never in logos |  |
| Light Pink | #F9DDE9 | Creative palette, light | Hero highlight chip behind "support" (the resting state) (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Light Orange | #FBDFC5 | Creative palette, light |  |
| Light Yellow | #FBEEBF | Creative palette, light |  |
| Light Purple | #D5D1EC | Creative palette, light | Hero highlight chip behind "fund" (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Light Dark green | #CBD6DB | Creative palette, light |  |
| Light Blue | #C3D8EF | Creative palette, light |  |
| Light Bright Blue | #C0E6FF | Creative palette, light | Hero highlight chip behind "open"; the $ cell of the donation amount field (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Light Bright Yellow | #F9F9F0 | Creative palette, light | Photo credits band ground (observed https://wikimediafoundation.org/ (2026-10-31)) |
| Light Green | #CBE0D5 | Creative palette, light |  |
| Light Bright Green | #DBF3EC | Creative palette, light | Hover fill of the green Donate now button (observed https://wikimediafoundation.org/ (2026-10-31)) |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Montserrat | SIL Open Font License 1.1 (Google Fonts) | Montserrat | Montserrat, Inter, sans-serif |
| body | Inter | SIL Open Font License 1.1 (Google Fonts) | Inter | Inter, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero and campaign H2 | --text-display-xl-* | display | 48px | 33.27px | 1.333 | 0px | 700 |
| Stat number | --text-display-stat-* | display | 48px | 33.27px | 1.333 | 0px | 600 |
| Section H2, action-card label | --text-display-l-* | display | 32px | 24.64px | 1.25 | 0px | 700 |
| Post title | --text-display-m-* | display | 24px | 20.32px | 1.4 | 0px | 600 |
| Hero lead | --text-lead-* | display | 24px | 20.32px | 1.333 | 0px | 400 |
| Photo credits heading | --text-display-s-* | display | 24px | 20.32px | 1.333 | 0px | 600 |
| Donation appeal | --text-appeal-* | display | 20px | 18.16px | 1.4 | 0px | 700 |
| Body large (section intros, stats, card copy) | --text-body-l-* | body | 20px | 18.16px | 1.4 | 0px | 400 |
| Button | --text-button-* | body | 20px | 18.16px | 1.25 | 0px | 700 |
| Nav and footer links | --text-nav-* | body | 16px | 18.16px | 1.5 | 0px | 600 |
| Body (volunteer bio, footer text) | --text-body-* | body | 16px | 14.16px | 1.5 | 0px | 400 |
| Credit link | --text-link-s-* | body | 16px | 14.16px | 1.4 | 0px | 400 |
| Meta (category, credit author, consent, legal) | --text-meta-* | body | 14px | 14px | 1.4 | 0px | 400 |

## Layout

Measured on https://wikimediafoundation.org/: Playwright computed styles at 1440 and 390 on 2026-10-31, plus the theme CSS and the brand pages on Meta-Wiki.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 120px | 17px |
| Section padding | 80px | 43px |
| Container max width | 1200px | full |
| Hero text width | max 580px | full |
| Grid columns | 3 | 1 |
| Gutter | 40px | 17px |
| Card gap | 16px | 16px |
| Navigation height | 76px | 76px |

Breakpoints from Wikimedia's CSS: 600, 782, 960px.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: y 0-76, sticky, 1px #E5E5E5 bottom border
   - Phone: y 0-65: hamburger, logo, EN, Donate
   - Content aligned to the 1200px container (x 120-1320)
2. Hero
   - Desktop: y 76-562, 580/580 columns, 40px gap
   - Phone: y 65-612, stacked
   - "support" chip #F9DDE9 at rest
3. Donation bar
   - Desktop: y 562-666
   - Phone: y 612-883 stacked
4. Birthday campaign
   - Desktop: y 706-1186 (40px gap above)
   - Phone: y 901-1549
   - ground is the light-blue puzzle artwork birthday-puzzle-ground.jpg (cover, 89% 46%); #C0E6FF is the nearest palette tint, for the wireframe only
5. By the numbers
   - Desktop: y 1186-2007
   - Phone: y 1549-2488
   - #E5E5E5 rules between stats
6. Our work
   - Desktop: y 2047-2832 (40px gap above)
   - Phone: y 2549-3581, 2 stacked cards
7. Built for people, by people
   - Desktop: y 2832-3716
   - Phone: y 3581-4734
   - rule #E5E5E5 at y 3756
8. Help expand human knowledge
   - Desktop: y 3797-4447
   - Phone: y 4734-4994 + cards to 5439
9. Subscribe for news
   - Desktop: y 4487-4775 (40px gap above)
   - Phone: y 5499-5949
10. Photo credits
   - Desktop: y 4774-5991
   - Phone: y 5949-8376
11. Footer
   - Desktop: y 5991-6620
   - Phone: y 8376-9745

## Page anatomy

How Wikimedia's own landing pages are built, part by part (observed; https://wikimediafoundation.org/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: White sticky bar 76px tall with a 1px #E5E5E5 bottom border: horizontal black Wikimedia Foundation logo at left, four mega-menu labels, then a search icon, a bordered language button and a green Donate now button at right. Phone: hamburger at left, logo, EN button and a short green Donate button.
- ground: #FFFFFF; border-bottom 1px solid #E5E5E5
- height: 76px desktop, 65px phone (both include the 1px border)
- border: 1px solid #E5E5E5 bottom
- logo: variant horizontal black Wikimedia Foundation logo (brandmark + WIKIMEDIA / FOUNDATION in Montserrat); px 172x38 desktop; 108x24 phone; position desktop x 120 y 18 (left edge of the 1200px container); phone x 82 y 20; file nav-logo-horizontal.svg
- links: count 4; labels Who we are, What we do, What you can do, News; size Inter 16px/24px; weight 600; color #000000; hover adds a 2px black underline 8px below the baseline (transition 0.3s); alignment left group: buttons 76px tall with padding 24px 16px at x 324, 449, 573, 736 (label text starts 16px in: 340, 465, 589, 752). No chevrons, no dividers
- actions:
  - Search: 24px magnifier icon (search.svg, black) centred in a 68x76 button at x 962
  - Language: 108x48 button at x 1046 y 14: white fill, 1px solid #E5E5E5 border, radius 4px, padding 11px 40px 11px 16px; 20px translate icon, 8px gap, "EN" Inter 16px/24px 400 uppercase #000000, 10x7 black open stroked chevron (a V, not a filled triangle) 16px from the right. Hover: fill #E5E5E5, border #000000
  - Donate now: 150x49 at x 1170 y 13: fill #246342, white Inter 20px/25px 700, radius 4px, padding 9.75px 16px, 2px transparent border. Hover: fill #DBF3EC, text and border #246342, 2px underline
- sticky: position sticky top 0; stays white with the same border when scrolled
- phone: shows hamburger (three 2px black lines, 18px wide) centred in a 65x64 button at x 0, closed by a 1px #E5E5E5 vertical rule on its right edge; logo 108x24 at x 82 y 20; EN language button 64x42 at x 226 y 11 (same border/radius, padding 8px 30px 8px 10px, no translate icon); Donate button 76x42 at x 298 y 11, fill #246342, white Inter 16px/20px 700, label "Donate" only, padding 9px 8px; menu Hamburger opens a full-screen white menu (not shown at rest); cta Donate (green)

**Hero**
- summary: White hero: at left a two-line 48px Montserrat headline "We support / human knowledge" where the verb sits in a pale pink highlight chip, then a 24px Montserrat lead; at right a 580x326 muted, looping video with a round pause button.
- desktop: section y 76-562 (486px), ground #FFFFFF, padding 80px 24px; content in the 1200px container x 120-1320; column split two equal 580px columns with a 40px gap: text x 120-700, media x 740-1320. The text column is vertically centred against the video; vertical anchors video y 156-482; headline y 171-299 (2 lines x 64px); lead y 339-467 (4 lines x 32px), 40px under the headline; text max width 580px; the headline breaks after the highlighted word: line 1 "We [support]", line 2 "human knowledge"; the lead wraps in 4 lines; media video 580x326 (16:9), no radius, no border, object-fit contain; pause button 44x44 at x 1252 y 414 (24px in from the video's right and bottom edges); cta size no button in the hero; the donation bar directly below is the call to action
- phone: order headline, lead, video (stacked, all left-aligned, full width 357px); alignment left, 16.67px side padding (content x 17-374); sizes section y 65-612, padding 43px top and bottom; headline Montserrat 33.27px/44.35px 700, 2 lines at y 108-197 ("We [support]" / "human knowledge"); lead Montserrat 20.32px/27.08px 400, 5 lines y 215-350; video 357x201 at y 368; pause button 44x44 at x 313 y 508
- at rest: headline Static state = the word "support" in its chip. Build it as: "We " + an inline-block mark 214x72 (padding 4px 8px, background #F9DDE9, radius 0) holding "support" in the same 48px/64px 700 black type, left-aligned in the chip, starting at x 209 (89px after the line start) + line break + "human knowledge". Phone chip 154x52 at x 76. Animation only: the chip is a vertical carousel that cycles support (#F9DDE9) -> protect (#E9E7C4) -> fund (#D5D1EC) -> open (#C0E6FF); show "support" only; video PLACE THE FRAME, the page autoplays a muted 18.5s montage. Use hero-video-rest-frame.jpg (1280x720) as the poster/static image, object-fit cover in the 580x326 frame (or the mp4 hero-video.mp4 with that poster, muted autoplay loop). The frame shows an open Arabic manuscript, warm parchment tones; pause button 44x44, radius 50%, fill rgba(0,0,0,0.1), 2px solid #FFFFFF ring, padding 10px, white 20px pause glyph (pause.svg: two rounded bars)
- media: hero-video-rest-frame.jpg
- type: headline Montserrat 48px/64px 700 #000000 (clamp 2rem-3rem; 33.27px at 390); lead Montserrat 24px/32px 400 #000000 (20.32px/27.08px at 390)
- cta: none in the hero
- proof: none
- copy: H2 "We support human knowledge" ("support" in the chip); lead "We are the nonprofit that hosts Wikipedia. We support the people, technology, and policies that enable reliable information to be shared with the world."

**Donation bar**
- summary: Full-width Blue AAA strip: a two-line bold Montserrat appeal with an underlined "Why donate?" link at left, and at right an amount field, two radio options and a white outline Donate now button.
- ground: #0C57A8
- desktop: band y 562-666 (104px), padding 24px; content x 120-1320; left paragraph at x 120 y 588, max width 387px, 2 lines that must break exactly as "Help us support everyone’s access to / reliable information. Why donate?" (give the paragraph max-width 400px if your render wraps "to" early) in Montserrat 20px/28px 700 #FFFFFF, then " Why donate?" Inter 20px/28px 400 #FFFFFF underlined (1px, offset 5px); right one row vertically centred, right-aligned to x 1320: amount field 144x48 at x 707 y 590 (radius 4px, shadow 0 0 1px rgba(0,0,0,0.2)): a 48x48 "$" cell fill #C0E6FF (radius 4px 0 0 4px, Inter 16px 600 #000000, centred) + a 96px white input showing "2.75" (Inter 16px #000000, padding 12.7px 10.7px); radio "Just once" (checked) at x 875 and "Give monthly" at x 1009: 20px circles with 2px #FFFFFF ring, the checked one with a white 10px inner dot, labels Inter 20px/28px 400 #FFFFFF 7px after the circle; Donate now button 140x50 at x 1180 y 589
- phone: band y 612-883 (271px), padding 16.67px; stack appeal 2 lines (Montserrat 18.16px/25.42px 700, "Why donate?" Inter 18.16px) at y 629; amount field 144x48 at y 697; radios row at y 769 (Just once x 17, Give monthly x 141, labels 18.16px); Donate now button 130x48 at y 818, left-aligned
- anatomy:
  - The bar sits flush under the hero with no gap; a 40px white gap follows it before the birthday band
  - Button: transparent fill, 2px solid #FFFFFF border, radius 4px, white Inter 20px/25px 700 "Donate now", padding 10.72px; hover adds a 2px underline
- components:
  - button_outline_on_blue
  - amount_field
  - radio_on_blue
- copy: Appeal: "Help us support everyone’s access to reliable information." + link "Why donate?"; radios "Just once" / "Give monthly"; button "Donate now"

**Birthday campaign band**
- summary: A 480px band filled with the Wikipedia 25 puzzle-piece artwork (pale blue ground, blue jigsaw pieces forming a giant W on the right) with a white card at left holding a 48px headline, a paragraph and a blue arrow link.
- ground: photo: birthday-puzzle-ground.jpg (light blue #C0E6FF-like ground with blue puzzle pieces)
- desktop: band y 706-1186 (480px), 40px white gap above it; padding 80px 24px; background-image birthday-puzzle-ground.jpg, background-size cover, background-position 89% 46%, no colour layer; card 656x320 at x 120 y 786: fill #FFFFFF, radius 4px, padding 24px, no shadow; card content H2 "Celebrate Wikipedia’s / 25th birthday" Montserrat 48px/64px 700 #000000, 2 lines at y 810 (608px wide); paragraph Inter 20px/28px 400 #000000, 3 lines at y 954 (16px under the H2); link "Join the party →" Inter 20px/28px 600 #0C57A8 at y 1056 (18px under the paragraph), no underline at rest, the arrow is a text " →" after the label
- phone: band y 901-1549 (648px); padding 43px 16.67px; the puzzle image fills the band (cover), showing pieces at top and edges; card 357x336 at x 17 y 1170 (bottom of the band minus 43px): padding 16.67px; H2 33.27px/44.35px 3 lines ("Celebrate / Wikipedia’s 25th / birthday"); paragraph Inter 18.16px/25.42px 5 lines; link 18.16px
- anatomy:
  - The artwork is one image file; place it, never redraw the puzzle pieces
  - Link hover: 2px underline offset 3px, same colour
- components:
  - link_arrow
- copy: H2 "Celebrate Wikipedia’s 25th birthday"; paragraph "Mark this milestone by paying tribute to the hundreds of thousands of people that edit, write, and fact check the backbone of knowledge on the internet."; link "Join the party →"

**By the numbers**
- summary: White stats section: a 32px heading at left and a 20px intro at right, then a 3-column row of illustrated stats with big Montserrat numbers, a full-width hairline, and a 2-column row of sentence stats; thin vertical rules separate the columns.
- ground: #FFFFFF
- desktop: band y 1186-2007 (821px), padding 80px 0 (inside the 1200 container x 120-1320); intro row H2 "By the numbers" Montserrat 32px/40px 700 #202122 at x 120 y 1266 (373px column); intro Inter 20px/28px 400 #202122 at x 533 y 1266, width 787, 2 lines; row 1 3 columns 373px wide at x 120, 533, 947 (40px gaps). Each: illustration 80px tall (globe 81x80, friendship 103x80, collaboration 103x80) at y 1410; label Inter 20px/28px #202122 at y 1506; number Montserrat 48px/64px 600 #202122 directly under the label; trailing line Inter 20px/28px directly under the number. Column 2's label wraps to 2 lines so its number sits 28px lower (y 1562); rules 1px solid #E5E5E5 vertical rules centred in the gaps at x 512 and 926, from y 1386 to 1676; a 1200px horizontal rule #E5E5E5 at y 1702 (24px margins); row 2 2 columns 580px at x 120 and 740 (vertical rule at x 719, y 1726-1926): illustration 80x80 at y 1751, sentence Inter 20px/28px #202122 at y 1847 with bold (700) runs: "With over **67 million articles**, in **300+ languages**, Wikipedia is the home of trusted information online." and "Wikipedia is the only website among the **top 10** most visited that is hosted by a nonprofit organization."
- phone: band y 1549-2488, padding 43px 16.67px; stack H2 24.64px/30.8px at y 1592; intro 18.16px/25.42px 3 lines at y 1641; then 5 stat rows, each a 2-column grid (illustration column x 17-118, text column x 135 width 239) with a 1px #E5E5E5 top border and 16.67px top and bottom padding; row tops at y 1752, 1881, 2036, 2191, 2352 (heights 129, 155, 155, 161, 136); illustrations keep their own widths at 80px tall (globe 81, friendship 102, collaboration 102, world 80, mobile 80), vertically centred in the row; numbers Montserrat 33.27px/44.35px 600; no vertical rules
- anatomy:
  - Stats copy, in order: "Wikipedia receives nearly / 15 billion / views each month." | "The Wikimedia Foundation supports nearly / 265,000 / volunteers every month." | "Every minute / 324 / new edits are made to Wikipedia."
  - Illustrations are the Foundation's hand-drawn line art with one flat colour fill (blue globe, green faces, orange laptop, yellow world, pink phone): place the SVG files, never icons
- components:
  - stat_item
- copy: H2 "By the numbers"; intro "Wikipedia is the backbone of the internet’s knowledge. From students to chatbots, everyone learns from it."

**Our work**
- summary: Lavender band with a 32px heading and intro, then a carousel of three news cards (photo, coloured category dot, Montserrat title) with round arrow buttons outside the content edges.
- ground: #F9F7FF
- desktop: band y 2047-2832 (785px), 40px white gap above it; padding 80px 24px; intro row H2 "Our work" Montserrat 32px/40px 700 #000000 at x 120 y 2127; intro Inter 20px/28px #000000 at x 534 y 2127, width 786, 2 lines; cards 3 visible cards 373px wide at x 120, 533, 947 (40px gap), track clipped at x 1320 (further cards hidden). Photo 373x263 radius 4px object-fit cover at y 2223; category row at y 2502 (16px under the photo): 10px circle + 9px gap + label Inter 14px/19.6px 400 #000000; title Montserrat 24px/33.6px 600 #000000 at y 2538 (16px under the category), 3-4 lines, no underline. The carousel track box runs y 2223-2752: 80px of empty space stays below the longest title (y 2672) before the band's 80px bottom padding; arrows two 48x48 circles (44px glyph + 2px ring) at y 2409: previous at x 44 (disabled at rest: fill #BFBFBF, ring #BFBFBF, black arrow glyph), next at x 1348 (white disc, 2px #E5E5E5 ring, black arrow glyph). Glyph: icon-carousel-arrow-next.svg (a 40px disc with a cut-out arrow) drawn white over a black centre, so the arrow reads black
- phone: band y 2549-3581, padding 43px 16.67px; stack H2 24.64px at y 2592; intro 18.16px 4 lines; then only 2 cards stacked, no arrows: photo 357x251 radius 4px, category row 16px below, title Montserrat 20.32px/28.45px 600; the second card has a 1px #E5E5E5 top border with 26px padding above its photo
- anatomy:
  - Card 1: category "Public policy" (dot #71D1B3), title "The Wikimedia Foundation files to protect open knowledge in New York Times v OpenAI case"
  - Card 2: category "Technology" (dot #049DFF), title "OpenAI “rogue” agent activities found on Wikimedia projects"
  - Card 3: category "Public policy" (dot #71D1B3), title "Human knowledge at stake: Wikimedia Foundation makes its case at the United Nations General Assembly"
  - Category dot colour by topic: Public policy #71D1B3, Technology #049DFF (observed)
- components:
  - post_card
  - carousel_arrow
- copy: H2 "Our work"; intro "Read more about how we are supporting the people, policies, and products that make Wikipedia and Wikimedia projects possible."

**Built for people, by people**
- summary: White section with heading and intro, then a 1200x600 module: a grey world map with black volunteer markers (one orange, active) at left and a Legacy Blue panel at right holding a volunteer photo, name, country and a short bio with round previous/next buttons.
- ground: #FFFFFF
- desktop: band y 2832-3716 (884px), padding 80px 24px; intro row H2 "Built for people, by / people" Montserrat 32px/40px 700 #000000 at x 120 y 2912 (374px column, 2 lines); intro Inter 20px/28px at x 534 width 786, 3 lines; module 1200x600 at x 120 y 3036: map 840x600 at left (x 120-960), panel 360x600 at right (x 960-1320) fill #0063BF; map PLACE THE IMAGE map-desk.png (1680x1202 = 840x601 at 2x), a static capture of the live Mapbox map: white sea, #DCDBDC land, 16 black 24px markers, one active orange #FF7800 marker (29px with a white ring and an outer orange ring) over Malaysia. Add the zoom control group on top: 29x87 white box, radius 4px, shadow 0 0 0 2px rgba(0,0,0,0.1), at x 921 y 3046 (10px from the map's top-right), three 29x29 cells (+, -, compass) split by 1px #DDDDDD lines, dark grey (Mapbox default) glyphs; panel padding 24px: photo 312x208 object-fit cover at x 984 y 3060; name "Taufik Rosman" Montserrat 32px/40px 700 #FFFFFF at y 3292 (CSS asks for 900 but the site loads no 900 face, so it renders as Bold 700: use 700); country row at y 3356: 16px orange #FF7800 dot + "Malaysia" Inter 16px/24px 700 italic #FFFFFF; bio Inter 16px/24px 400 #FFFFFF 6 lines at y 3404 (312px wide); two 48x48 white circle buttons (1px #AAAAAA ring, black chevron) at x 976 and 1036, y 3569
- phone: band y 3581-4734, padding 43px 16.67px; stack H2 24.64px 1 line at y 3624; intro 18.16px 5 lines; map full-bleed 390x250 at y 3836 (map-phone.png, no side padding); blue #0063BF panel full-bleed below it (y 4086-4691): photo 357x300 at x 17 y 4102, name Montserrat 24.64px/30.8px 700, country 14.16px, bio Inter 14.16px/21.24px 5 lines, two 43x43 white buttons at x 14 and 68 y 4630
- anatomy:
  - Bio copy: "The 2023 Wikimedian of the Year, Taufik has been editing since he was 8 years old. He has expanded the Malay Wiktionary with nearly 11,000 changes. “Each of our contributions matters greatly,” Taufik says."
  - After this section: a 1200px 1px #E5E5E5 rule at y 3756 (40px below the section), then 40px to the next section
- components:
  - carousel_button_white
- copy: H2 "Built for people, by people"; intro "Wikipedia is built by nearly 250,000 volunteers from all kinds of backgrounds. They edit articles, check facts, fix code, and help make the internet’s knowledge better. Meet some of them."

**Help expand human knowledge**
- summary: White section with heading and intro, then four equal colour-block action cards (Green AAA, Red, Blue AAA, Purple) each with a white 32px Montserrat label at the bottom-left.
- ground: #FFFFFF
- desktop: band y 3797-4447 (650px), padding 80px 24px; intro row H2 "Help expand / human knowledge" Montserrat 32px/40px 700 #202122 at x 120 y 3877 (394px column, forced 2 lines); intro Inter 20px/28px #202122 at x 554 y 3877, width 766, 2 lines; cards 4 cards 288x330 at x 120, 424, 728, 1032 (16px gaps), y 4037: radius 4px, padding 64px 24px, content bottom-aligned (flex column, justify end). Fills in order #246342 (Donate), #990000 (Edit), #0C57A8 (Participate), #5748B5 (Advocate). Label Montserrat 32px/40px 700 #FFFFFF at x +24, y 4263 (64px above the card bottom). Nothing else is visible at rest
- phone: band y 4734-4994, padding 43px 16.67px; stack H2 24.64px/30.8px 2 lines at y 4814; intro 18.16px 3 lines; then the four cards stacked full width 357x100 with 8.5px gaps from y 5013: radius 4px, padding 34.5px 16.67px, label Montserrat 24.64px/30.8px 700 white, vertically centred
- anatomy:
  - Hover only (animation, not the rest state): a hidden subline grows in (grid rows 0fr to 1fr, 0.35s ease, 16px top margin) in Inter 20px/28px 700 white, and a " →" fades in after the label (0.25s ease-in-out, 0.2s delay). Sublines: Donate "Join the readers who help fund Wikipedia"; Edit "Join the community that builds Wikipedia"; Participate "From coding to photography to organizing events, contribute your skills to advance free knowledge"; Advocate "Help us protect everyone’s right to knowledge"
  - Whole card is the link
- components:
  - action_card
- copy: H2 "Help expand human knowledge" (break after "expand"); intro "There are many different ways for you to support us. Here are some ideas for putting your skills and passions to use:"; card labels Donate, Edit, Participate, Advocate

**Subscribe for news**
- summary: Full-width Creative Yellow band: heading and one-line pitch at left, an email field with a black Subscribe button, a consent checkbox and a privacy line at right.
- ground: #F0BC00
- desktop: band y 4487-4775 (288px), 40px white gap above it; padding 80px 24px; left H2 "Subscribe for news" Montserrat 32px/40px 700 #000000 at x 120 y 4575 (560px column); paragraph Inter 20px/28px #000000 at y 4631, 2 lines; right column x 760-1320 starting y 4567: email input 411x48 (white, 1px solid #BFBFBF, radius 4px, padding 12px 10px, placeholder "Enter your email" Inter 16px #7F7F7F-ish) + Subscribe button 134x49 at x 1187 (fill #000000, white Inter 20px/25px 700, radius 4px); below at y 4631: 18x18 white checkbox (1px #BFBFBF, radius 4px) at x 760 and the consent text Inter 14px/21px #000000 at x 794 (526px, 2 lines), then "For more details, see our Privacy statement." 14px with the link underlined
- phone: band y 5499-5949 (450px), padding 43px 16.67px; stack H2 24.64px at y 5543; paragraph 18.16px 3 lines; email input 357x48 at y 5676; Subscribe button full width 357x44 at y 5741 (Inter 18px 700); checkbox at y 5801 with the consent text at x 43 (4 lines 14px); privacy line under it
- anatomy:
  - Consent copy: "Yes, I would like to receive updates, news, and promotional emails from the Wikimedia Foundation. I understand I can unsubscribe at any time."
  - Subscribe hover: fill #E5E5E5, text #000000, 2px #000000 border, underline
- components:
  - button_black
  - email_input
- copy: H2 "Subscribe for news"; paragraph "Get the latest updates about the Wikimedia Foundation directly to your inbox."; input placeholder "Enter your email"; button "Subscribe"

**Photo credits**
- summary: Off-white band listing every image on the page with its title, author and licence, in three columns of small thumbnail + text items. Attribution is a brand rule, so the credits are part of the page design.
- ground: #F9F9F0
- desktop: band y 4774-5991 (1217px), padding 80px 24px; heading "Photo credits" Montserrat 24px/32px 600 #000000 at x 120 y 4854; grid 3 columns at x 120, 516, 912 (396px pitch); items start y ~4892 and stack in rows (row pitch 103-143px depending on wrapping, ~40px gap between items). Item: thumbnail 61x61 object-fit cover inside a 1px solid #EAECF0 frame (63x63), text column at x +78 (301px wide; columns are 396px apart so the item is 379px of each 396px track, no extra gap): title as a link Inter 16px/22.4px 400 #0C57A8 followed by a 14x16 Wikimedia Commons icon (commons-logo.svg) when the file comes from Commons, else plain Inter 14px/19.6px #000000; author Inter 14px/19.6px #000000; licence link Inter 16px/22.4px #0C57A8 (no underline at rest, underline 1.6px on hover); items exactly these 27 items in order, filling the 3 columns row by row (items 1-3 row 1, 4-6 row 2, ...)
- phone: band y 5949-8376, padding 43px 16.67px; stack heading Montserrat 20.32px/27.08px 600 at y 5992; one column: thumbnail 61x61 at x 17, text at x 95 (267px wide), link titles 14.16px/19.8px, items ~67px apart
- anatomy:
  - 01. thumb credit-01; title "Close-up of Lady Justice statue holding scales, symbolizing justice and fairness" (link #0C57A8 + Commons icon); DP Singh Bhullar; CC BY-SA 4.0 (link #0C57A8)
  - 02. thumb credit-02; title "SwarmRobot_org" (link #0C57A8 + Commons icon); Serg; GNU General Public License
  - 03. thumb credit-03; title "Wikimedia_UNGA_IMG_3281" (plain #000000 14px); Lucia Liss
  - 04. thumb credit-04; title "Wikimedia Foundation Logo" (plain #000000 14px); Wikimedia Foundation
  - 05. thumb credit-05; title "Rena Kokalari" (plain #000000 14px); Image by Rena Kokalari; CC BY-SA 4.0 (link #0C57A8)
  - 06. thumb credit-06; title "Wikimania 2026 blue wordmark" (link #0C57A8 + Commons icon); Eclos Production; CC BY-SA 4.0 (link #0C57A8)
  - 07. thumb credit-07; title "Roger B. Chaffee at a console in the Mission Control Center, Houston, during the Gemini-Titan 3 flight" (link #0C57A8 + Commons icon); NASA; Public domain (link #0C57A8)
  - 08. thumb credit-08; title "Royal Courts of Justice 2019" (link #0C57A8 + Commons icon); David Castor; CC0 1.0 (link #0C57A8)
  - 09. thumb credit-09; title "Wiki Globe illustration" (plain #000000 14px); Wikimedia Foundation; CC BY-SA 4.0 (link #0C57A8)
  - 10. thumb credit-10; title "Wiki friendship illustration" (plain #000000 14px); Wikimedia Foundation; CC BY-SA 4.0 (link #0C57A8)
  - 11. thumb credit-11; title "Wiki collaboration illustration" (plain #000000 14px); Wikimedia Foundation; CC BY-SA 4.0 (link #0C57A8)
  - 12. thumb credit-12; title "Wiki world illustration" (plain #000000 14px); Wikimedia Foundation; CC BY-SA 4.0 (link #0C57A8)
  - 13. thumb credit-13; title "Wiki Mobile Illustration" (plain #000000 14px); Wikimedia Foundation; CC BY-SA 4.0 (link #0C57A8)
  - 14. thumb credit-14; title "WikiSG Headshots Taufik" (link #0C57A8 + Commons icon); Don Wong for Tiny Big Picture, commissioned by The Wikimedia Foundation; CC BY-SA 4.0 (link #0C57A8)
  - 15. thumb credit-15; title "Siobhan Leachman at BioBlitzWBN 1" (link #0C57A8 + Commons icon); Mike Dickison; CC0 1.0 (link #0C57A8)
  - 16. thumb credit-16; title "Armine Aghayan-Flisch" (link #0C57A8 + Commons icon); Pdproject; CC BY-SA 4.0 (link #0C57A8)
  - 17. thumb credit-17; title "Le Burex de WikiCiv" (link #0C57A8 + Commons icon); Abiba Pauline; CC BY-SA 4.0 (link #0C57A8)
  - 18. thumb credit-18; title "The Photographer User in Humboldt Peak" (link #0C57A8 + Commons icon); Wilfredor; CC0 1.0 (link #0C57A8)
  - 19. thumb credit-19; title "Equipo de Wikipedistas en El Salvador" (link #0C57A8 + Commons icon); Karlalhdz; CC BY-SA 4.0 (link #0C57A8)
  - 20. thumb credit-20; title "Monica Bonilla" (link #0C57A8 + Commons icon); Monica Bonilla (WMCO); CC BY-SA 4.0 (link #0C57A8)
  - 21. thumb credit-21; title "Wikisource Conference 2025, Day 3, Denpasar; February 2025 (086)" (link #0C57A8 + Commons icon); Memora Productions for Wikimedia Indonesia; CC BY-SA 4.0 (link #0C57A8)
  - 22. thumb credit-22; title "Wikiar2022 0034 (cropped)" (link #0C57A8 + Commons icon); Tamuz Hasan; CC BY-SA 4.0 (link #0C57A8)
  - 23. thumb credit-23; title "Nkem Osuigwe 3" (link #0C57A8 + Commons icon); AfricanLibrarian; CC BY-SA 4.0 (link #0C57A8)
  - 24. thumb credit-24; title "Ananya Mondal - WLM" (link #0C57A8 + Commons icon); Sumitsurai; CC BY-SA 4.0 (link #0C57A8)
  - 25. thumb credit-25; title "Netha Hussain-070A3987" (link #0C57A8 + Commons icon); Bijay Chaurasia; CC BY-SA 4.0 (link #0C57A8)
  - 26. thumb credit-26; title "Rosie at Wikimania 2023 6" (link #0C57A8 + Commons icon); Mrb Rafi; CC BY-SA 4.0 (link #0C57A8)
  - 27. thumb credit-27; title "Andrew Lih" (link #0C57A8 + Commons icon); Joi Ito; CC BY 2.0 (link #0C57A8)
- components:
  - credit_item
- copy: H2 "Photo credits"; items listed below

**Footer**
- summary: Charcoal (#404040) footer: two social blocks (white stacked Wikimedia Foundation logo + text + 4 icons; white Wikipedia logo + text + 6 icons) split by a faint vertical rule, an app-download row, four link columns, and the CC BY-SA licence line, with grey hairlines between rows.
- ground: #404040; padding 40px 24px; content x 120-1320
- anatomy:
  - Row 1 (y 6031): white stacked WMF logo 109x80 at x 120 (footer-wmf-logo-stacked-reverse.svg); text at x 253, 427px wide: "Follow the Wikimedia Foundation on social media to get news and updates on our projects, global community, and advocacy efforts." Inter 16px/24px #FFFFFF (3 lines); icons at y 6111: Instagram, Bluesky, Facebook, LinkedIn as white 20px glyphs in 30px circles (fill #404040, so only the glyph shows), 46px pitch from x 253
  - Vertical divider: 1px at x 719, y 6031-6141, rgba(255,255,255,0.2) (renders #666666)
  - Wikipedia block: white stacked Wikipedia logo 70x80 at x 760 (footer-wikipedia-logo-stacked-reverse.svg); text at x 854, 466px: "Connect with Wikipedia on social media to learn new facts and know your world better" Inter 16px/24px #FFFFFF (2 lines); icons at y 6095: TikTok, LinkedIn, Instagram, Bluesky, Facebook, YouTube (46px pitch)
  - Rule: 1200px 1px solid #808080 at y 6173 (32px margin above)
  - App row (y 6206): "Download the Wikipedia app" Inter 20px/28px #FFFFFF at x 120; App Store badge 120x40 at x 423 and Google Play badge 120x40 at x 583 (badge-app-store.svg, badge-google-play.svg)
  - Rule: #808080 at y 6278
  - Link columns from y 6311, x 120 / 430 / 740 / 1050 (310px pitch), Inter 16px/24px 600 #FFFFFF, 40px row pitch, no headings. Col 1: Who we are, What we do, What you can do, News, Frequently asked questions. Col 2: Donate, Careers, Contact, Press. Col 3: Research, Wikipedia Library, Wikipedia Store (external). Col 4: Terms of use (external), Privacy policy, Disclaimers (external), Accessibility statement, Cookies statement (external). External links carry a 16x16 white external-link icon (link-external-reverse.svg) 8px after the label. Hover: 1.6px underline
  - Rule: #808080 at y 6527
  - Legal line at y 6560: "Except where otherwise noted, the content of this site is licensed under a Creative Commons Attribution-ShareAlike 4.0 International license. Powered by WordPress.com VIP." Inter 14px/19.6px #FFFFFF, one line; the licence words are a link (white, no visible underline at rest). Footer ends y 6620
- phone: y 8376-9745, padding 18px 16.67px: WMF logo 104x80 + text (14.16px/21.24px) side by side, then its 4 icons in a row between 1px rgba(255,255,255,0.5) top and bottom borders (64px tall strip); Wikipedia logo + text, then its 6 icons in a bordered strip; "Download the Wikipedia app" 18.16px 2 lines with 80x27 badges at right; link groups stacked in one column (Inter 18.16px/27.24px 600, 43px pitch), each group closed by a 1px white-50% rule; legal line 14px 4 lines at the bottom

**On dark grounds**
- secondary button: transparent fill, 2px solid #FFFFFF border, radius 4px, white Inter 20px 700 (Donate now on the Blue AAA bar); hover adds an underline
- link: #FFFFFF, underlined 1px (Why donate?) or no underline in the footer (underline on hover)
- muted text: not used: text on colour is always pure #FFFFFF
- hairline: #808080 1px on the #404040 footer; rgba(255,255,255,0.2) vertical divider
- logo variant: white (reverse) stacked logos in the footer

## Components

- **button donate** (observed): fill #246342, text #FFFFFF, radius 4, height 49, padding x 16, font size 20, weight 700, face body, border 2px solid transparent, example Donate now (nav, 150x49)
  - hover (observed): fill #DBF3EC, text #246342, border 2px solid #246342, underline 2px, offset 3px
- **button outline on blue** (observed): fill none, text #FFFFFF, ring #FFFFFF, ring px 2, radius 4, height 50, padding x 11, font size 20, weight 700, face body, example Donate now on the donation bar (140x50)
  - hover (observed): underline 2px, offset 3px
- **button black** (observed): fill #000000, text #FFFFFF, radius 4, height 49, padding x 16, font size 20, weight 700, face body, example Subscribe (134x49)
  - hover (observed): fill #E5E5E5, text #000000, border 2px solid #000000
- **link arrow** (observed): text #0C57A8, font Inter 20px/28px 600, after  → (text arrow), underline none at rest; 2px offset 3px on hover
- **language button** (observed): fill #FFFFFF, border 1px solid #E5E5E5, radius 4, size 108x48, content translate icon 20px, EN 16px 400 uppercase, chevron 10x7, hover fill #E5E5E5, border #000000
- **carousel arrow** (observed): size 48x48 circle, ring 2px #E5E5E5 (enabled) / #BFBFBF (disabled), fill white disc, black arrow; disabled #BFBFBF disc, glyph icon-carousel-arrow-next.svg (prev = rotated 180deg)
- **carousel button white** (observed): size 48x48 circle, fill #FFFFFF, border 1px solid #AAAAAA, glyph black chevron 13x22
- **post card** (observed): image 373x263 radius 4px cover, category 10px dot + Inter 14px label, 16px under the image, title Montserrat 24px/33.6px 600 black, 16px under the category, card fill none (sits on the band ground)
- **action card** (observed): size 288x330 desktop, 357x100 phone, radius 4, fill one Legacy/Creative strong colour per card, label Montserrat 32px/40px 700 white, bottom-left, 24px side padding, 64px bottom padding
- **stat item** (observed): illustration 80px tall line illustration, label Inter 20px/28px, number Montserrat 48px/64px 600, divider 1px #E5E5E5
- **amount field** (observed): size 144x48, prefix 48px "$" cell #C0E6FF, radius 4
- **radio on blue** (observed): size 20px, ring 2px #FFFFFF, checked white inner dot
- **email input** (observed): size 411x48, border 1px solid #BFBFBF, radius 4, fill #FFFFFF
- **credit item** (observed): thumb 61x61 cover in a 1px #EAECF0 frame, text title link 16px #0C57A8 + Commons icon; author 14px; licence link 16px #0C57A8
- **highlight chip** (observed): fill #F9DDE9 (rotates through #E9E7C4, #D5D1EC, #C0E6FF), padding 4px 8px, radius 0, size 214x72 at 48px
- **button primary** (observed): fill #246342, text #FFFFFF, radius 4, height 49, padding x 16, font size 20, weight 700, face body, border 2px solid transparent, example Donate now (nav, 150x49). Alias of button_donate: the green Donate now button
  - hover (observed): fill #DBF3EC, text #246342, border 2px solid #246342, underline 2px, offset 3px
- **button secondary** (observed): fill #000000, text #FFFFFF, radius 4, height 49, padding x 16, font size 20, weight 700, face body, example Subscribe (134x49). Alias of button_black: the black Subscribe button
  - hover (observed): fill #E5E5E5, text #000000, border 2px solid #000000

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| codex-base | ease | 100ms | Codex transition-duration-base with the system timing function: colour, background, border and shadow changes in product UI | published |
| codex-medium | ease-out | 250ms | Codex transition-duration-medium with the user timing function (ease-out) for user-triggered changes | published |
| link-underline | ease | 300ms | Nav label underline and colour changes on hover (0.3s) | observed |
| card-reveal | ease | 350ms | Action-card subline grows in on hover (grid rows 0fr to 1fr) with a 16px top margin | observed |
| card-arrow | ease-in-out | 250ms | Action-card " →" fades and slides in from -1rem after a 0.2s delay | observed |
| sound-logo |  | 4000ms | The Wikimedia sound logo: 4 s (cutdowns 2 s and 1 s), C major, 144 BPM, at least 250 ms of silence before and after; starts once a logo is static and fully visible | published |

## Icon tokens

Grid 20 x 20 dp canvas (1 dp margin for square shapes; circles use the full canvas), stroke 2 dp medium-thick stroke on the default canvas; squared or bevelled ends (published).
| Name | Size | Use |
|---|---|---|
| default | 20px | Codex default |
| medium | 16px | Codex |
| small | 12px | Codex |
| site | 24px | Search and arrow icons on wikimediafoundation.org (observed) |

## Signature moves

### One word in a colour chip

Where: the hero headline (and the guide's own campaign posters).
Do: Set the key word of a Montserrat Bold headline on a flat Creative light-palette block (Light Pink #F9DDE9, Light Purple #D5D1EC, Light Bright Blue #C0E6FF or Bright Yellow #E9E7C4), padding 4px 8px, no radius, black text; the rest of the headline stays plain black on white. The guide's version colours the word itself instead ("Knowledge is human." with human in green). One chip per headline, one highlighted headline per page.
Don't: chip more than one word, round the chip, or put a strong-palette colour behind black text.
Example: "We support human knowledge", with "support" set as box.

### Saturated movement-colour blocks

Where: action cards, donation bar, subscribe band, volunteer panel.
Do: Flat Legacy and Creative strong colours as whole surfaces, each carrying white Montserrat Bold (on Green AAA #246342, Red #990000, Blue AAA #0C57A8, Purple #5748B5, Blue #0063BF) or black text (on Yellow #F0BC00). Radius 4px or full-bleed; no gradients, no shadows. Each block one colour; neighbours never repeat a colour.
Don't: put white text on yellow, bright green, bright blue, pink or any light tint (the guide reserves white text for red, blue, green, dark green and purple).

### Credit every image

Where: a Photo credits block before the footer, and captions.
Do: Every image carries its title, author and licence (TASL), linked to the source; Commons files get the Commons icon. On a landing page: a full-width off-white (#F9F9F0) band of small thumbnails with credits in three columns.
Don't: use an image you cannot credit, or hide credits in a tooltip only.

### Hand-drawn line illustration with one colour

Where: stats, spot illustrations.
Do: Continuous, fluid, uniform pen-like black stroke, not too thick, with one flat palette colour or a circular shape behind; light ink/pencil texture at most; used large and in one colour.
Don't: thick childish lines, gradients, 3D, or illustrations smaller than 1.25 in (31.75 mm) wide.

### Black, white and the logo in black

Where: nav, headings, logo.
Do: Core palette carries the frame: black logo and type on white, white reverse logo on Black 75 #404040; colour enters in blocks, chips and photos, never in the logo.
Don't: colour the Foundation logo or set the logo in another font.

## Messaging: rules

The homepage leads with the Foundation's job ("We support human knowledge"), proves it with five numbers, then turns every section into an invitation: donate, edit, participate, advocate, subscribe.

Why it works: Numbers and named volunteers make an abstract mission concrete, and the four verbs give each reader one way in.

- Lead with what the Foundation does, then the proof
- Use the movement words: free knowledge, open knowledge, sum of all human knowledge
- Never imply the Foundation writes or controls Wikipedia content
- Affiliate taglines: 10 words or fewer, show independence from the Foundation

Sources: https://wikimediafoundation.org/, https://wikimediafoundation.org/who-we-are/, https://wikimediafoundation.org/about/mission/, https://meta.wikimedia.org/wiki/Brand/Create

## Voice: rules

Plain, neutral and warm. Codex sets the rules for UI copy (plain English, no idioms, no please/sorry/just, neutral point of view); the homepage speaks as "we" to "you" in short declarative sentences with no exclamation marks.

Why it works: Copy is translated into hundreds of languages and read by people who need to trust it, so clarity and neutrality beat cleverness.

- Sentence case for headings and buttons (observed)
- Bare-infinitive verbs on actions: Donate, Edit, Participate, Advocate, Subscribe
- Short words and simple phrases; no idioms, slang or jokes
- Neutral point of view; no personal opinions
- Tone follows the task: plain for warnings, celebratory for success
- Use they, you or we when gender is unknown
- Don't use please, sorry, just, simply or try
- Don't say enable/disable, whitelist/blacklist or invalid
- Don't use directional words like above or below

Do and don't:
- Do: "Refresh the page to load the data". Direct instruction (Codex example).
- Don't: "Please try simply refreshing the page to load the data". Softeners that imply the reader might fail.

Sources: https://doc.wikimedia.org/codex/latest/style-guide/writing-for-copy.html, https://doc.wikimedia.org/codex/latest/style-guide/voice-and-tone.html, https://wikimediafoundation.org/

## Logo: rules

The Foundation logo is the brandmark (a figure holding an open book, drawn in 2005 by Neolux) plus WIKIMEDIA / FOUNDATION in Montserrat, in a horizontal and a vertical version, only in black or white. The wider movement shares the Wikimedia brandmark (a figure raising its arms) and a tricolour Community logo for user groups.

Why it works: One-colour marks work everywhere, from favicons to merch, and leave colour to the content.

|  |  |
|---|---|
| Versions | horizontal, vertical; brandmark alone |
| Colours | black, white |
| Clear space | 1x small-circle height |
| Minimum size | 36 px / 12 mm wide |

- Keep the relationship of mark and text the same
- Keep the wordmark in Montserrat
- Black or white only
- Clear space: at least 1x the height of the small circle in the brandmark on every side
- Minimum width 12 mm / 0.5 in / 36 px
- Preferred placement top left or bottom left; top right or bottom right allowed
- On photos or colour only with enough contrast
- Right-to-left scripts: flip the order (mark first, read first) but never mirror the mark
- Next to Wikipedia: Wikipedia width equals Foundation logo height, at least half the puzzle-globe width between them, bottom-aligned on white
- Chapter logos replace FOUNDATION with the chapter name, with approval from trademarks@wikimedia.org
- Favicons: the whole brandmark, uncropped
- Don't set the wordmark in another font (e.g. a script)
- Don't put the mark after the wordmark
- Don't recolour the logo in multiple colours
- Don't replace the brandmark with another figure
- Don't italicise or skew the logo
- Don't change the size relationship of mark and text

Real examples, to look at on Wikimedia's own pages (not for reuse):
- Horizontal and vertical versions: https://meta.wikimedia.org/wiki/Brand/logo
- Clear space from the small circle: https://meta.wikimedia.org/wiki/Brand/logo
- Logo misuse: https://meta.wikimedia.org/wiki/Brand/logo

Sources: https://meta.wikimedia.org/wiki/Brand/logo, https://foundation.wikimedia.org/wiki/Policy:Trademark_policy

## Color: rules

Three palettes: Core (black, white and three greys), Legacy (the movement's green, blue and red, each with an AAA version for white text) and Creative (11 strong colours from community groups and the Wikipedia 20 birthday, each with a light tint). The site runs on white and black, with Blue AAA for links and the donation bar, Green AAA for Donate, strong colours for action cards and light tints for highlight chips and band grounds.

Why it works: A shared palette keeps a decentralised movement recognisable while letting each affiliate pick 4-6 colours that fit their culture.

|  |  |
|---|---|
| Core | FFFFFF, 000000, 404040, 7F7F7F, BFBFBF |
| Legacy | 339966, 0063BF, 990000; AAA 246342, 0C57A8, 970302 |
| Creative strong | 970302, E679A6, EE8019, F0BC00, 5748B5, 305D70, 0E65C0, 049DFF, E9E7C4, 308557, 71D1B3 |
| Creative light | E5C0C0, F9DDE9, FBDFC5, FBEEBF, D5D1EC, CBD6DB, C3D8EF, C0E6FF, F9F9F0, CBE0D5, DBF3EC |

- Limit a brand to 4-6 colours: primary, secondary, tertiary, accent
- Black text on most colours
- White text only on red, blue, green, dark green and purple (strong)
- Light tints take black text only and never go in logos
- Use the AAA Legacy versions when white text sits on green, blue or red
- Legacy colours suit backgrounds, headlines and apparel
- Developers building MediaWiki interfaces use the Codex palette instead
- Don't set grey or coloured text on colour blocks
- Don't combine strong and light Creative colours in text (too little contrast)

Not published: colour proportions or ratios; which colour is the primary for the Foundation itself.

Real examples, to look at on Wikimedia's own pages (not for reuse):
- Legacy palette: https://meta.wikimedia.org/wiki/Brand/colours
- Creative palette, strong: https://meta.wikimedia.org/wiki/Brand/colours
- Text and ground combinations: https://meta.wikimedia.org/wiki/Brand/colours

Sources: https://meta.wikimedia.org/wiki/Brand/colours, https://wikimediafoundation.org/

## Typography: rules

Two free faces: Montserrat (wide, large x-height, humanist touches) for the logo, headlines and branded content, and Source Serif 4 for long reading. Noto covers non-Latin scripts. The website pairs Montserrat headings with Inter for body, nav and buttons.

Why it works: Open-licensed fonts anyone in the movement can download; Montserrat's width reads well big and translates well.

|  |  |
|---|---|
| Display | Montserrat 700 (OFL) |
| Body (guide) | Source Serif 4 400 |
| Body (site) | Inter 400/600/700 |
| Non-Latin | Noto |

- Montserrat Bold for headlines, set big
- Mainly Regular and Bold weights
- Subheadline at about 50% of the headline size in Montserrat Regular (colour usage examples)
- As few sizes and weights at once as possible
- Emphasise a word by colour, not by another font
- Codex: lines up to 75 characters, line height about 1.6x the font size for reading text
- Don't mix in other display faces
- Don't use thin or black weights for body copy

Real examples, to look at on Wikimedia's own pages (not for reuse):
- Montserrat and Source Serif: https://meta.wikimedia.org/wiki/Brand/Typography
- Emphasis by colouring one word: https://meta.wikimedia.org/wiki/Brand/Typography

Sources: https://meta.wikimedia.org/wiki/Brand/Typography, https://doc.wikimedia.org/codex/latest/style-guide/typography.html, https://wikimediafoundation.org/

## Graphic elements: rules

No ornament system: the recognisable pieces are flat colour blocks, the coloured highlight chip on one word, hand-drawn line illustrations, the puzzle-piece globe from Wikipedia, and attribution credits. The guide also borrows Wikipedia's diff interface as a storytelling device.

Why it works: The content is the brand; graphics stay simple enough for any volunteer to reproduce.

- Flat colour blocks, no gradients
- Simple shapes, holding devices and textures can set a mood around type
- Diff-style reveals (from the editing interface) for storytelling

Sources: https://meta.wikimedia.org/wiki/Brand/Typography, https://wikimediafoundation.org/

## Iconography: rules

Codex icons: monochrome, geometric, front-facing outlines on a 20 dp canvas with a 2 dp stroke, sharp corners, freely licensed.

Why it works: Neutral, universal symbols that work across cultures and right-to-left scripts.

- Reduce to the essential form
- Universal, not culture-specific (no $ for money)
- No text inside icons (language icons excepted)
- Avoid gestures, animals, religion, humour, ethnicity and gender
- Sizes 20, 16, 12 px
- Make RTL variants only where direction changes meaning

Sources: https://doc.wikimedia.org/codex/latest/style-guide/icons.html

## Illustration: rules

Line illustrations from the Wikipedia 20 campaign by Karabo Poppy Moletsane and Jasmina El Bouamraoui: continuous, uniform pen-like strokes, hand-made feel, often one colour or a circle of colour behind.

Why it works: Feels made by people, which is the point of the movement.

- Continuous, fluid, uniform stroke; not too thick
- Subtle ink, pencil, crayon, paint or chalk texture at most
- One colour, used big
- Add colour with a slight misprint offset or a circle behind
- Representative and diverse without tokenising
- One illustration style per execution
- Never smaller than 1.25 in / 31.75 mm wide
- Don't make it childish
- Don't mix illustration and photo heavily in one execution

Real examples, to look at on Wikimedia's own pages (not for reuse):
- Wikipedia 20 line illustrations: https://meta.wikimedia.org/wiki/Brand/Imagery
- Circular shape behind: https://meta.wikimedia.org/wiki/Brand/Imagery

Sources: https://meta.wikimedia.org/wiki/Brand/Imagery

## Photography: rules

Real moments at events: people engaged with each other and with Wikipedia, not looking at the camera; natural light, bright saturated colour, imperfect framing allowed.

Why it works: An insider's family album builds trust and shows the community behind the content.

- Subjects that say knowledge, equity and community
- Candid, close, unposed; imperfection welcome
- Natural light, light source behind the photographer
- Bright, saturated grade; echo Creative palette colours
- At least 1920x1080 for screen
- Credit title, author, source and licence
- Text on photos only with clear black or white contrast and never over faces or the focal point
- Avoid retouching; if you do, do it with the people pictured

Real examples, to look at on Wikimedia's own pages (not for reuse):
- Candid editing session: https://meta.wikimedia.org/wiki/Brand/Imagery
- Text on photos with contrast: https://meta.wikimedia.org/wiki/Brand/Imagery

Sources: https://meta.wikimedia.org/wiki/Brand/Imagery, https://meta.wikimedia.org/wiki/Brand/Attribution

## Motion: rules

Motion is minimal in UI (Codex: 100 ms and 250 ms transitions) and the brand's richest motion asset is sonic: a 4-second sound logo with 2 s and 1 s cutdowns.

Why it works: Calm interfaces for reading; a sound logo identifies Wikimedia knowledge in voice assistants and audio.

- UI transitions 100 ms (ease) or 250 ms (ease-out)
- Sound logo after all other audio, never mixed, 250 ms silence either side
- 15 s+ content: 4 s logo; 6-15 s: 2 s; under 6 s: 1 s
- Start the sound logo when a visual logo is static and fully visible
- Respect prefers-reduced-motion (the site shows card sublines without animation)

Sources: https://doc.wikimedia.org/codex/latest/design-tokens/transition.html, https://meta.wikimedia.org/wiki/Brand/logo, https://wikimediafoundation.org/

## Interface and layout: rules

A 1200px container with 120px margins at 1440, sections in alternating white, lavender, yellow and off-white bands, intro rows with a heading column and a paragraph column, and grids of 3 x 373 or 4 x 288.

Why it works: Predictable rhythm lets dense, multilingual content stay scannable.

- 1200px container; 80px section padding (43px phone)
- Heading left, intro paragraph right (from x 533)
- Radius 4px on everything rectangular
- Hairlines #E5E5E5
- Reading line length up to 75 characters (Codex)

Sources: https://wikimediafoundation.org/, https://doc.wikimedia.org/codex/latest/style-guide/typography.html

## Rules: rules

The guide asks rather than polices ("we would rather they didn't"), but a few rules are firm: logo construction, colour contrast and attribution.

- Keep the logo in Montserrat and in black or white
- Clear space 1x the small circle; minimum 36 px
- White text only on strong red, blue, green, dark green or purple
- Credit every image (title, author, source, licence)
- Photos: candid, natural light, no text over faces
- Illustrations: uniform line, one colour, at least 31.75 mm
- Sound logo: never altered, always after other audio
- Affiliate wording shows independence from the Foundation
- Don't mirror the brandmark in RTL layouts
- Don't use maps of regions or countries in logos (they can read as political statements)
- Don't create your own sound logo

Sources: https://meta.wikimedia.org/wiki/Brand/logo, https://meta.wikimedia.org/wiki/Brand/colours, https://meta.wikimedia.org/wiki/Brand/Imagery, https://meta.wikimedia.org/wiki/Brand/Attribution, https://meta.wikimedia.org/wiki/Brand/Create

## Campaigns

### Wikipedia 25 (2026)

Birthday campaign for Wikipedia's 25th year, promoted on the homepage with a puzzle-piece artwork band.

How the system shows: Puzzle pieces from the Wikipedia globe in Blue on Light Bright Blue; white card with Montserrat headline and a blue arrow link.
Why it works: Turns the Wikipedia globe into a pattern anyone recognises.
Channels: web. Source: https://wikimediafoundation.org/

### Wikipedia 20 (2021)

Birthday campaign whose colours and line illustrations became the Creative palette and the illustration library.

How the system shows: Creative palette colours; hand-drawn line illustrations by Karabo Poppy Moletsane and Jasmina El Bouamraoui.
Why it works: Gave the movement a reusable, human illustration language.
Channels: web, social, print. Source: https://meta.wikimedia.org/wiki/Brand/Imagery

## Applications

| Format | What | Source |
|---|---|---|
| Social templates | Canva templates for Facebook, Instagram, X and WhatsApp formats | https://meta.wikimedia.org/wiki/Brand/Create |
| Presentations | Google Slides affiliate template | https://meta.wikimedia.org/wiki/Brand/Create |
| Logos | Figma templates for affiliate logos | https://meta.wikimedia.org/wiki/Brand/Create |
| Documents | Letterhead and digital document templates | https://meta.wikimedia.org/wiki/Brand/Create |

## By format

How loud the system gets by format. Landing pages follow the homepage: black and white frame, colour in blocks and chips. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | Black horizontal logo top left, Montserrat Bold headings, Inter body, one highlighted word, flat colour-block bands, Photo credits band before a #404040 footer | Which palette colours fill the bands and cards |
| Social post | 4 | Montserrat Bold headline, subhead ~50% Montserrat Regular, logo bottom left, palette ground | Ground colour, photo or illustration |
| Presentation | 2 | Affiliate template, Montserrat, logo | Accent colour |
| Product UI | 1 | Codex tokens, components and icons | none |
| Audio and video | 3 | Sound logo at the end, after all other audio | Cutdown length |

## Checks before anything ships

- **Contrast**: White text only on strong red, blue, green, dark green or purple; black on everything else
- **Logo**: Black or white, Montserrat wordmark, clear space 1x small circle, 36 px minimum
- **Credits**: Every image credited with title, author, source and licence
- **Copy**: Plain English, sentence case, no please/sorry/just/simply

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Wikimedia's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Colour proportions or ratios: not published
- A Foundation-specific primary colour: not published (the site uses Blue AAA and Green AAA as its working accents, observed)
- Web type scale, spacing and grid for marketing pages: not published (all page values here are observed on wikimediafoundation.org, 2026-10-31)
- Logo clear space and minimum size are published; logo construction geometry is not
- Motion principles for visuals beyond Codex UI transitions and the sound logo: not published
- Inter (the site body face) is not named in the guide; the guide names Source Serif 4 for body text
- A messaging framework (pillars, proof): not published; pillars here are read from the homepage and Who we are page

Logos and reference images belong to Wikimedia. Look at them on Wikimedia's own pages; don't reuse them.