--- version: alpha name: "Wikipedia" description: "Wikipedia's site is the rare brand whose design philosophy is **deliberately non-branded**. The canvas is white, headings sit in Linux Libertine (a free serif by Free Software Foundation contributors) at 24–48px, and the only chromatic accent is \"Wikilink Blue\" `#3366cc` — preserved from the early-2000s MediaWiki default. The Vector skin (current default) was last refreshed in 2023, but the visual DNA traces directly to the 2002 wiki origin: serif headings, blue links, footnote markers, info-boxes in pale-gray. Where every other media brand chose ownership of their design language, Wikipedia chose **encyclopedic transparency** — the design gets out of the way of the content. Voice is institutional-neutral: \"[edit]\", \"Citation needed\", \"This article is a stub\". The whole brand reads as the Britannica of the open web — authoritative, public-good, intentionally not exciting." colors: bg: "#ffffff" bg-soft: "#f8f9fa" bg-warm: "#fefefe" surface: "#ffffff" surface-soft: "#f8f9fa" surface-strong: "#eaecf0" brand: "#3366cc" brand-hover: "#2a4b91" brand-pressed: "#1f3870" brand-deep: "#162d56" brand-tint: "#dde6f0" on-brand: "#ffffff" text: "#202122" text-strong: "#101114" text-muted: "#54595d" text-soft: "#72777d" text-faint: "#a2a9b1" text-on-brand: "#ffffff" link: "#3366cc" link-visited: "#795cb2" link-hover: "#447ff5" link-red: "#dd3333" selected-bg: "#dde6f0" border: "#a2a9b1" border-strong: "#54595d" border-soft: "#eaecf0" border-brand: "#3366cc" infobox-header: "#eaecf0" citation-needed-orange: "#cc6633" stub-template: "#cee0f5" success: "#14866d" warning: "#fc3" danger: "#dd3333" info: "#3366cc" typography: display: fontFamily: "Linux Libertine" fontSize: "48px" lineHeight: 1.6 letterSpacing: "0" body: fontFamily: "Linux Libertine" fontSize: "14px" lineHeight: 1.6 mono: fontFamily: "Inconsolata" rounded: button: "4px" card: "14px" pill: "9999px" spacing: xs: "0px" sm: "4px" md: "12px" lg: "24px" xl: "40px" --- ## Overview ## Overview Wikipedia's site is the rare brand whose design philosophy is **deliberately non-branded**. The canvas is white `#ffffff`, headings sit in Linux Libertine (a free serif by Free Software Foundation contributors) at 22–48px, body in system-default sans (BlinkMacSystemFont / Segoe UI / Helvetica). The only chromatic accent is **Wikilink Blue** `#3366cc` — preserved from the early-2000s MediaWiki default. The Vector skin (current default since 2010, refreshed 2023) preserves visual DNA from the 2002 MediaWiki origin: serif headings, blue links, footnote markers, info-boxes in pale-gray. Where every other media brand chose ownership of their design language, Wikipedia chose **encyclopedic transparency** — the design gets out of the way of the content. Linux Libertine was chosen specifically as a **free libre serif** (GPL-compatible, no licensing fees), reinforcing the open-knowledge philosophy. Body uses system-default sans for the same reason — no webfont download, faster TTFB, works on every device including text-mode browsers. Voice is institutional-neutral: "[edit]", "Citation needed", "This article is a stub", "Disambiguation". CTAs are 2px-radius rectangles with system-blue. Cards use 0-2px radius with hairline borders. The whole brand reads as **the Britannica of the open web** — authoritative, public-good, intentionally not exciting. **Key Characteristics:** - White canvas - Wikilink Blue `#3366cc` (only chromatic accent) - Linux Libertine serif for display headings (free libre license) - System-default sans for body (no webfont) - 0–2px radius on UI (utilitarian-rectangular) - Body 14px line-height 1.6 (dense reference content) - Footnote markers `[1]`, `[citation needed]` first-class - Pale-gray infoboxes for structured data - Visited-link purple `#795cb2`, red links for missing pages - Light-only canvas (Vector 2023 has dark mode opt-in) - Non-branded voice ## Colors ### Primary - **Background** (`#ffffff`): white. - **Bg Soft** (`#f8f9fa`): infobox + section-header background. - **Text** (`#202122`): body. Slightly warm dark. - **Text Strong** (`#101114`): emphasized. ### Brand — Wikilink Blue - **Brand** (`#3366cc`): links + brand mark + primary CTA. - **Brand Hover** (`#2a4b91`), **Pressed** (`#1f3870`), **Deep** (`#162d56`). - **Brand Tint** (`#dde6f0`): selection wash. ### Link Palette (semantic) - **Link** (`#3366cc`): unvisited links. - **Link Visited** (`#795cb2`): purple for visited. - **Link Hover** (`#447ff5`): brighter blue on hover. - **Link Red** (`#dd3333`): red link = missing page. ### Annotation Accents - **Citation Needed Orange** (`#cc6633`): "[citation needed]" tag. - **Stub Template** (`#cee0f5`): pale-blue band on stub-article banners. ### Surface - **Surface** (`#ffffff`), **Surface Soft** (`#f8f9fa`), **Surface Strong** (`#eaecf0`). ### Borders - **Border** (`#a2a9b1`): hairline. - **Border Strong** (`#54595d`): emphasis. - **Border Soft** (`#eaecf0`): infobox interior dividers. ### Semantic - success `#14866d`, warning `#fc3` (yellow), danger `#dd3333`, info brand. ## Typography ### Font Family - **Display (Serif)**: Linux Libertine. Falls back to Georgia → Times New Roman → serif. - **Body**: system-ui sans (`sans-serif`, `Helvetica Neue`, `Helvetica`, `Arial`, system stacks). No custom webfont. - **Mono**: Consolas / Inconsolata / system mono for code samples. ### Hierarchy | Role | Font | Size | Weight | LH | Tracking | |------|------|------|--------|-----|----------| | display-hero | Libertine | 48 | 400 | 1.15 | 0 | | display-lg | Libertine | 32 | 400 | 1.25 | 0 | | h1 | Libertine | 28 | 400 | 1.3 | 0 | | h2 | Libertine | 22 | 400 | 1.35 | 0 | | h3 | system sans | 18 | 700 | 1.4 | 0 | | h4 | system sans | 16 | 700 | 1.45 | 0 | | body-lg | system sans | 16 | 400 | 1.6 | 0 | | body | system sans | 14 | 400 | 1.6 | 0 | | label | system sans | 12 | 400 | 1.4 | 0 | | button | system sans | 14 | 400 | 1.0 | 0 | | footnote | system sans | 12 | 400 | 1.5 | 0 | | citation | system sans | 11 | 400 | 1.5 | 0 | ### Principles - **Linux Libertine for display H1-H2**, system sans for H3+ and body. - **400 weight on display** — encyclopedic, not bold. - **Mixed case everywhere** — never all-caps in content. - **No custom webfonts** — performance + open-knowledge alignment. - **Body 14px** — denser reference-content density. - **Tracking always 0** — system defaults. ## Layout - Base 4px, 24-56px between sections - Page max width **1680px** (Vector 2023 — wider than typical) - Article prose width 880px - Sidebar TOC fixed-width 200px - Infoboxes float right of opening prose mobile <479: hero 48→24; sidebar TOC stacks above content; infobox stacks below opening section. tablet 480-767: 1-up still, infobox floats. desktop+: full sidebar TOC + main + infobox layout. 44×44 min touch targets on edit / discussion / cite links. ## Elevation & Depth | Level | Treatment | |-------|-----------| | 0 | none | default | | 1 | hairline border | cards, infoboxes | | 2 | none | hover changes color, not shadow | | 3 | none | featured uses border-thickness | | 4 | `0 8px 24px rgba(0,0,0,0.16)` modal | ### Shadow Philosophy The brand commits to **zero shadows on UI**. Hairline borders + color shifts do all the work. Modals are the only exception. ## Shapes | Tier | Value | Use | |------|-------|-----| | None | 0 | full-width banners | | Micro | 1 | indicators | | Standard | 2 | **default for buttons, cards, inputs** | | Comfortable | 4 | tooltips | | Pill | 9999 | rare; namespace pills only | ## Components ### Buttons (3 variants — small, 2px radius) **Primary** — Wikilink Blue: - bg `#3366cc`, text white, 14px system sans 400 (regular weight, not Bold) - Padding 6×12, **radius 2** (very gentle rectangular) - Hover: bg `#2a4b91` **Secondary** — bordered: - bg `bg-soft`, text dark, 1px gray border, radius 2 **Ghost**: bg transparent, text blue, padding 4×8 (tiny — like wiki edit links). ### Cards / Infoboxes (the brand's signature) - bg `#f8f9fa` (pale gray), 2px radius, 12px pad - 1px gray border, no shadow - Header row in `surface-strong` darker gray - Body uses 13-14px system sans ### Pills (rare — used for namespaces, tags) - bg `surface-strong`, text dark, 2px radius (NOT pill — wiki UI is rectangular) - 11px caption font ### Inputs - bg white, 1px gray border, radius 2, padding 6×10 - Focus: border blue ### Navigation - 50px sticky header (compact), white bg, hairline bottom - Wikipedia wordmark left (puzzle-globe + serif "Wikipedia"), top tabs (Article / Talk / Read / Edit / View history) center, search + account right ### Citation markers - Inline `[1]` — 11px superscript blue link - "[citation needed]" — 11px orange dotted-underline - Standard ease, fast durations (100-220ms) - No hover transforms — clicks fire instantly - Edit-mode toggle: instant, no transition - TOC scrollspy: smooth-scroll on click Reduced motion disables smooth-scroll fallback. - text on bg: `#202122` on `#ffffff` = **14.8:1** AAA - on-brand on brand: white on Wikilink Blue = **5.1:1** AA - 2px Wikilink Blue focus ring + 1px outset Wikipedia is one of the most rigorously accessible sites on the web. Every article uses semantic HTML5 sectioning, table-of-contents `