Learning & Reference / iOS / Android / Web

Wikipedia

Wikipedia disappears behind its content: one action blue, a quiet gray ladder, serif titles over a plain sans interface, and Light, Sepia, Dark and Black reading themes shared across web, iOS and Android.

Download

#3366CC
#202122
#F8F9FA
#EAECF0
#177860
#FFCC33

Color

Every color token in the file, grouped by role.

Brand

primary#3366CC
primary hover#3056A9
primary active#233566
primary subtle#E8EEFF
primary dark mode#88A3E8
on primary#FFFFFF
sepia text secondary#646059
primary disabled#99B3E6

Surfaces

canvas#F8F9FA
paper#FFFFFF
sepia paper#F8F1E3
sepia card#F0E6D6
dark paper#101418
black paper#000000
search surface#E6E6E6

Text

ink#202122
ink subtle#54595D
disabled#A2A9B1
dark ink#EAECF0
dark ink subtle#A2A9B1

Lines

border#A2A9B1
border subtle#C8CCD1
hairline#EAECF0
sepia border#CBC8C1

Status

success#177860
warning#886425

placeholder#72777D
neutral#EAECF0
destructive#BF3C2C
destructive subtle#FFE9E5
sepia base#E1DAD1
dark chrome#202122
dark field#27292D
dark rule#54595D
black field#202122
search field#E0E1E1
nav indicator#E8F0FF

Typography

Each style is set with the file's own family, size, weight and spacing.

Linux LibertineOpen font, listed in the open library as Libertinus Serif.
sans-serifSystem font, drawn with the default on your device.

article title24px / 400 / 32sp
Pack my box with five dozen liquor jugs
title24px / 700 / 32sp
Pack my box with five dozen liquor jugs
heading20px / 700 / 28sp
Pack my box with five dozen liquor jugs
subheading16px / 700 / 24sp
The quick brown fox jumps over the lazy dog
label14px / 700 / 24sp
Continue to checkout
caption12px / 700 / 18sp
Continue to checkout
body16px / 400 / 24sp
The quick brown fox jumps over the lazy dog
body article16px / 400 / 28sp
The quick brown fox jumps over the lazy dog
nav label11px / 400 / 16sp
Continue to checkout

Shape

Corner radius tokens.

sharp0px
xs2px
sm4px
card12px
large24px
circle50%
pill9999px

Spacing

The spacing scale, drawn to size.

xs4px
sm8px
md12px
base16px
lg24px
xl32px
xxl48px
section64px

Components

Component tokens drawn with the colors, type and corners they name.

button primary
button-primary
button primary hover
button-primary-hover
button quiet
button-quiet
button destructive
button-destructive
list item
list-item
card
card
hint banner
hint-banner

Read the full DESIGN.md The written rationale behind the tokens

Design tokens YAML front matter, 153 lines

version: alpha
name: Wikipedia-design-analysis
description: "A reading-first knowledge product built on a restrained, shared Wikimedia palette: near-black ink on white paper, one progressive blue (#3366cc) for every link and action, and a thin gray ladder for borders and chrome. Articles are set in a serif display face over a plain sans interface. The mobile apps add four reading themes (light, sepia, dark, black) and honor system text scaling."
status: Draft
appVersion: "Android app 50610-r-2026-10-06 measured on an Android phone, 2026-10-07; source snapshot of the public repositories, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#3366cc"
  primary-hover: "#3056a9"
  primary-active: "#233566"
  primary-subtle: "#e8eeff"
  primary-dark-mode: "#88a3e8"
  ink: "#202122"
  ink-subtle: "#54595d"
  placeholder: "#72777d"
  disabled: "#a2a9b1"
  border: "#a2a9b1"
  border-subtle: "#c8ccd1"
  hairline: "#eaecf0"
  canvas: "#f8f9fa"
  paper: "#ffffff"
  neutral: "#eaecf0"
  destructive: "#bf3c2c"
  destructive-subtle: "#ffe9e5"
  success: "#177860"
  warning: "#886425"
  on-primary: "#ffffff"
  sepia-paper: "#f8f1e3"
  sepia-card: "#f0e6d6"
  sepia-base: "#e1dad1"
  sepia-border: "#cbc8c1"
  sepia-text-secondary: "#646059"
  dark-paper: "#101418"
  dark-chrome: "#202122"
  dark-field: "#27292d"
  dark-ink: "#eaecf0"
  dark-ink-subtle: "#a2a9b1"
  dark-rule: "#54595d"
  black-paper: "#000000"
  black-field: "#202122"
  search-surface: "#e6e6e6"
  search-field: "#e0e1e1"
  nav-indicator: "#e8f0ff"
  primary-disabled: "#99b3e6"

typography:
  article-title:
    fontFamily: "'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif"
    fontSize: 24sp
    fontWeight: 400
    lineHeight: 32sp
  title:
    fontFamily: "sans-serif"
    fontSize: 24sp
    fontWeight: 700
    lineHeight: 32sp
  heading:
    fontFamily: "sans-serif"
    fontSize: 20sp
    fontWeight: 700
    lineHeight: 28sp
  subheading:
    fontFamily: "sans-serif"
    fontSize: 16sp
    fontWeight: 700
    lineHeight: 24sp
  label:
    fontFamily: "sans-serif"
    fontSize: 14sp
    fontWeight: 700
    lineHeight: 24sp
  caption:
    fontFamily: "sans-serif"
    fontSize: 12sp
    fontWeight: 700
    lineHeight: 18sp
  body:
    fontFamily: "sans-serif"
    fontSize: 16sp
    fontWeight: 400
    lineHeight: 24sp
  body-article:
    fontFamily: "sans-serif"
    fontSize: 16sp
    fontWeight: 400
    lineHeight: 28sp
  nav-label:
    fontFamily: "sans-serif"
    fontSize: 11sp
    fontWeight: 400
    lineHeight: 16sp

rounded:
  sharp: 0px
  xs: 2px
  sm: 4px
  card: 12px
  large: 24px
  pill: 9999px
  circle: 50%

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.xs}"
    height: 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xs}"
  button-quiet:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.xs}"
    height: 32px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.xs}"
    height: 32px
  list-item:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.subheading}"
    height: 48px
    padding: 16px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.card}"
    padding: 16px
  hint-banner:
    backgroundColor: "{colors.primary-subtle}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px

Overview

Wikipedia is an encyclopedia product where the content is the interface. The design system, shared by the website and the iOS and Android apps, is built to disappear: dark ink on white paper, one blue for everything you can act on, and gray rules for structure. [Measured]

Three decisions define the look:

One action color. A single blue, #3366cc, marks links, primary buttons and selected states on all three platforms. Hover and pressed states darken it to #3056a9 and #233566. [Measured]
Serif for the subject, sans for the tool. Article titles use a serif stack (Linux Libertine, then Georgia) while all interface text is plain sans. The Android styles set article headings to serif and the iOS font set includes Georgia title styles. [Measured]
Reading themes are part of the system. Both mobile apps ship Light, Sepia, Dark and Black themes built from one shared palette, because people read long articles for long periods. [Measured]

The palette and tokens are shared across platforms: the Android color blue600 and the web token color-progressive are the same #3366cc, and gray700 and color-base are the same #202122. [Measured]

Sources for this file: the public Android and iOS repositories and the published Codex design tokens, read on 2026-10-06, then the running Android app measured on an Android phone on 2026-10-07. The device capture replaces several source values that the shipping build no longer matches, and those differences are listed in Known Gaps. iOS was not captured. [Measured]

Core

What holds on every platform.

Colors

A neutral gray ladder plus one blue. [Measured]

Role	Value	Notes
Ink (primary text)	`#202122`	Web `color-base`, Android `gray700`
Subtle text	`#54595d`	Secondary text, icons
Placeholder	`#72777d`	Hints, empty fields
Disabled	`#a2a9b1`	Also the default border
Border subtle	`#c8ccd1`	Inputs, dividers
Hairline	`#eaecf0`	Lightest rule, neutral fills
Canvas	`#f8f9fa`	Page background behind paper
Paper	`#ffffff`	Article and card surface
Progressive (action)	`#3366cc`	Links, primary buttons, focus
Progressive hover and active	`#3056a9`, `#233566`
Progressive subtle	`#e8eeff`	Selected rows, hint banners
Destructive	`#bf3c2c`	Web token. Android uses `#b32424` for its error red
Success	`#177860`
Warning	`#886425`

Accent hues for avatars and categories: green #00af89, yellow #ffcc33, orange #ff9500, purple #534fa3, pink #82456a, maroon #854848. [Measured]

Typography

Two voices. [Measured]

Sans (interface): system sans on mobile (sans-serif on Android, the system font through Dynamic Type on iOS) and a Helvetica-first stack on the web: 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial'. Web also defines a system stack starting with -apple-system.
Serif (articles): 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4' on the web; serif on Android article headings; Georgia title styles on iOS.

Android scale (sp): H1 24 bold, H2 20 bold, H3 16 bold, H4 14 bold, H5 12 bold, body 16 regular. Line heights are 32, 28, 24, 24, 18 and 24, and article body text uses 28. [Measured]

Web scale (Codex): 12, 14, 16, 18, 20, 24 and 28px, with line heights from 20px to 38px and a content line height of 1.625. Weights are 400, 600 and 700. [Measured]

Shape and spacing

Corners are nearly square. [Measured]

Web base radius is 2px, with 0 for sharp and 9999px for pills.
Android control styles define 4dp and 2dp, and 12dp for the article card. [Measured]
Web spacing scale in px: 1, 2, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64.
Android spacing: 8dp base margin, 16dp screen and list padding. [Measured]

The near-square rule no longer holds across the whole Android app. The shipping build draws several surfaces at a large radius: the home feed banner measured 23.5dp, the search field reads as a pill at about 21dp on a 48dp field, and the language chip is a strongly rounded rectangle. Near-square corners survive on the smaller controls. [Measured on a device]

Elevation is shown with thin rules rather than shadows. Web defines a 1px ring in #a2a9b1 for small elevation, and medium and large shadows at 6 percent black. On Android no shadow renders under the top bar, at rest or with content scrolled beneath it; the navigation bar is separated from content by a 1px hairline instead. [Measured on a device]

Iconography and motion

Icons are simple line glyphs in the subtle ink color, with the progressive blue for the selected tab. Android uses selected and unselected tab icon variants; iOS ships tab bar icons for explore, nearby, save and recent. [Measured] Motion is minimal and functional. Link preview thumbnails scale to 1.03 on press and 1.05 when over-pressed on Android. [Measured]

Themes

Four reading themes on mobile, built from the same palette. [Measured]

Light and Sepia are as the source describes them. Dark and Black were measured on the device and differ from the source values, so the measured ones are used here.

Theme	Page (paper)	Chrome and bars	Inset fields	Text	Link
Light	`#ffffff`	`#ffffff`	`#f8f9fa`	`#202122`	`#3366cc`
Sepia	`#f8f1e3`	`#f8f1e3`	`#f0e6d6`	`#202122`, secondary `#54595d`	`#3366cc`
Dark	`#101418`	`#202122`	`#27292d`	`#eaecf0`, secondary `#a2a9b1`	`#88a3e8`
Black	`#000000`	`#000000`	`#202122`	`#eaecf0`, secondary `#a2a9b1`	`#88a3e8`

Rules and dividers sit on #cbc8c1 in Sepia and #54595d in Dark and Black. [Measured on a device]

The reading theme is chosen in a sheet on the article screen, which also carries a text size slider, a choice between a sans and a serif article face, a reading focus mode, and switches for matching the system theme and dimming images in the dark theme. While "Match system theme" is on, which is its default, the Dark and Black buttons are disabled and the app follows the system setting instead. Turning it off enables all four. The theme the system produces and the theme the in-app Dark button produces measured identical. [Measured on a device]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

Expected on iOS: chevron plus previous title, swipe from the left edge.

The app uses standard UINavigationController conventions, so the system back chevron and the edge swipe apply. [Inferred] Navigation bar styling is themed through shared code that sets chrome background and text color per theme. [Measured]

Primary navigation

Expected on iOS: bottom tab bar, about five items.

A themed UITabBar at the bottom. Tab icons exist for Explore, Nearby (places), Save and Recent, and the tab labels use the system caption1 text style. [Measured] The exact tab order must be confirmed on a device. [Inferred]

Main action

Expected on iOS: nav bar or bottom bar button.

There is no floating action button, which fits iOS. Primary actions sit in the navigation bar and in content. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Popovers and hint banners use dedicated theme colors: a popover background per theme and a subtle blue hint background on Light and Sepia. [Measured] System alerts and action sheets are used for confirmation. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Standard iOS controls tinted with the theme's link color. [Inferred] A font size slider screen lets readers scale article text. [Measured]

Text sizing

Expected on iOS: Dynamic Type.

Fully supported. The WMFFont wrapper builds every style from UIFont.preferredFont(forTextStyle:) (body, callout, caption1, footnote, headline, subheadline, title1 to title3), so text follows the system size setting. Georgia styles exist for article titles. [Measured]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified in the files read. Standard iOS controls meet 44pt. [Standard]

Insets and system bars

Expected on iOS: safe areas, status bar.

Standard safe-area handling with themed navigation and tab bars. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom PDF icon assets in the asset catalog, for example the tab bar icons. [Measured]

Account and sign-in rules

Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Sign-in is a Wikimedia account. No third-party social sign-in appeared in the files read, so Guideline 4.8 is likely not triggered. Account deletion behavior was not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: follow system components and Dynamic Type.

The app follows iOS closely: system tab bar, system text styles, edge-swipe navigation. The deviations are its theme system (four reading themes with their own chrome colors) and Georgia for article titles. These serve long-form reading. [Inferred]

Platform: Android

How the Android app looks and behaves. Values marked as measured on a device come from the running app on an Android phone at font scale 1.0. Every size is given in dp, so it is independent of the screen it was read from.

Back and up navigation

Expected on Android: system back and gesture, up arrow in the top bar.

Uses the Material 3 light theme without a default action bar and draws its own top bars, with system back handling. [Measured] The top bar is 64dp tall on every screen captured, and carries a back arrow in a 56dp target on the nested screens. [Measured on a device]

Back unwinds the screen stack rather than returning to Home. From an article it goes to the search results, then to the Search tab, then to the feed, then out to the device home screen. [Observed on a device]

The source sets a 4dp top bar elevation, but no shadow renders beneath the top bar in the shipping build, at rest or with content scrolled under it. [Measured on a device]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

A bottom navigation bar with five tabs, in this order: Home, Saved, Search, Activity, More. [Measured on a device] Each tab is 77dp wide, the icons are 24dp, and the label box measures 13.2dp tall at font scale 1.0, which matches an 11sp label. [Measured on a device]

The bar measures 80dp tall, not the 72dp the source token suggests, and a 1px hairline separates it from the content above. The selected tab carries the Material 3 pill indicator, 64x32dp filled #e8f0ff, with the icon and label in the progressive blue and unselected items in #72777d. Tabs can show a 6dp dot in #b32424 for unread items. [Measured on a device]

The More tab opens a bottom sheet, measured 244dp tall, holding the account entry, Games, Places, Settings and Donate as 48dp rows. [Measured on a device]

Main action

Expected on Android: floating action button.

There is no floating action button anywhere. Twenty screen captures covering the feed, Saved, Search, search results, an article, the More sheet, Settings, the sign-in screen and four bottom sheets contain no floating action button. [Observed on a device]

The article carries the app's real main action set instead: a 72dp bottom action bar with five evenly divided items, Save, Language, Find in article, Theme and Contents, each an icon above a label. Elsewhere actions live in the top bar and in the cards themselves. This deviates from the Material habit of a single floating action, and suits a product whose main act is reading rather than creating. [Measured on a device]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Bottom sheets carry the app's secondary surfaces. Measured rendered heights: the More menu 244dp, the save-to-collection sheet 457dp, the reading theme sheet 466dp, and a promotional sheet 391dp. These are the heights the sheets actually settle at, which do not match the fixed peek heights named in the source, so sheet height is content driven in the shipping build. [Measured on a device]

Sheets sit on the canvas color with white rows inside, use a 4dp tall drag handle in #a2a9b1 measured at 24dp and 32dp wide, and dim the screen behind them with a scrim measured at #adadad over white, which is 32 percent black. [Measured on a device] Material 3 alert dialogs with themed text, and Material 3 snackbars on the border color. [Measured]

Controls

Expected on Android: Material switches, pickers, chips.

Material 3 widgets recolored through theme attributes, which the device confirms: the navigation indicator, switches and buttons are the Material 3 shapes carrying Wikimedia colors. [Measured on a device]

Chips do not use the canvas fill. The language chip on the feed has a paper fill with a dark gray stroke and strongly rounded corners, holding a dark rounded badge and a caret. [Measured on a device] Text fields are 56dp tall and filled with the canvas color. The primary button is 48dp tall, filled with the progressive blue with white text, and its disabled fill measured #99b3e6. [Measured on a device] The search field on the Search tab is a pill filled #e0e1e1 on an #e6e6e6 surface, neither of which belongs to the documented gray ladder. [Measured on a device]

Text sizing

Expected on Android: font scale.

Sizes are in sp, so system font scale applies. The in-app article text size runs from 50 percent to 180 percent in 10 percent steps, which is the -5 to +8 multiplier in steps of 0.1, confirmed by stepping the slider to both ends on the device. The default is 100 percent. [Measured on a device]

At a system font scale of 1.3 the chrome does not reflow: the top bar stays 64dp and the article action bar stays 72dp. The longest action label, "Find in article", wraps onto a second line and that line is clipped by the fixed bar height. [Measured on a device]

Touch and pointer targets

Expected on Android: 48dp minimum.

48dp rows hold across the menu sheet, the search field and the list section titles, and every tap target measured at least 48dp. [Measured on a device]

Two row figures from the source do not hold. Settings section headers measure 35dp, not 56dp, and no 56dp header appeared on any captured screen. Settings rows are not a fixed height either: they run from 58dp to 136dp because the summary line wraps. Search results are 88dp two-line rows with a 56dp thumbnail. [Measured on a device]

Insets and system bars

Expected on Android: edge to edge, system bars.

The app draws edge to edge under the system bars and tints them to match the surface beneath, so they read white on Light and #202122 on Dark. [Measured on a device]

Measured on an Android phone using gesture navigation: the status bar inset is 29dp, the display cutout takes the same 29dp and is a centred hole punch about 20dp wide, and the navigation bar inset is 0dp because gesture navigation draws no bar. A 32dp mandatory gesture region sits along the bottom edge and 30dp gesture regions run down both sides, so content near those edges competes with the system gestures. [Measured on a device]

The source also defines a splash theme that sets the status and navigation bar colors to #f8f9fa, plus full-screen and translucent variants for media. The splash could not be captured because it completes faster than a frame grab. [Measured from the public source files]

Icons

Expected on Android: Material Symbols or custom.

Custom vector drawables with state selectors for the tab bar. [Measured] On screen the icons are simple line glyphs on a 24dp box, in #72777d when unselected and the progressive blue when selected. [Measured on a device]

Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

Sign-in is a Wikimedia account and reading never requires it. The account entry sits at the top of the More sheet as "Log in / join Wikipedia" and opens a create-account screen with Username, Password, Repeat password and an optional Email, each a 56dp field on the canvas fill, a primary Next button, a "Log in" button for existing accounts, a human-check disclaimer, and links for a forgotten password and the privacy policy. There is no third-party or social sign-in anywhere on that screen, so Apple's Guideline 4.8 equivalent login requirement is not triggered. [Observed on a device] No account was created and no credentials were entered, so everything past this screen is unseen. Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-07 on the device for the sign-in entry, 2026-10-06 against source for the rest.

Platform conformance

Expected on Android: Material 3 components and roles.

The app maps its palette onto Material roles: primary is the progressive blue, every surface role resolves to the same paper color, and primary container is paper too. So Material components are used but flattened into the Wikimedia look. Deviation: no floating action button and no tonal color depth. [Measured]

The device shows the flattening is not complete. The Search tab sits on an #e6e6e6 surface with an #e0e1e1 field, and the navigation indicator is #e8f0ff rather than the documented #e8eeff, so a few surfaces carry neutral grays from outside the Wikimedia ladder. Corner radius has also moved away from near-square on the newer feed and search surfaces. [Measured on a device]

Platform: Web

The wikipedia.org site and the Codex design system that powers it.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Relies on browser back and linked article titles. Article pages show a "From Wikipedia" subtitle and language links rather than breadcrumbs. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

The Vector 2022 skin has a persistent left menu, a top bar with search and account links, and a sticky table of contents on article pages. [Inferred]

Main action

Expected on Web: page-level button.

Search is the primary action, placed in the top bar. Edit and other page actions are text-link tabs. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Codex provides dialogs, messages with progressive, destructive, warning and success tones, and popovers. [Measured]

Controls

Expected on Web: native or custom.

Codex components: buttons at 32px default height, text inputs, toggle switches, checkboxes, radio buttons, menus and typeahead search. [Measured]

Text sizing

Expected on Web: browser zoom.

Sizes are in rem, so browser zoom and default font size apply. [Measured]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Default controls are 32px tall on desktop. Coarse-pointer sizing was not checked. [Measured]

Insets and system bars

Expected on Web: viewport, scrollbars.

Standard responsive layout. Breakpoints found in the stylesheets read include 875px, 500px and 360px. [Measured]

Icons

Expected on Web: any.

Codex icon set, inline SVG at 20px (size-icon-medium). [Inferred]

Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

Accounts are optional; reading never requires sign-in. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

Standard web behavior. Link color is the same blue as the apps, with a darker visited tone for red links. Dark mode is available through Codex's dark theme tokens. [Measured]

Cross-platform consistency

The same palette, the same single action blue, and the same serif-for-articles idea hold on every platform. [Measured]

What intentionally differs:

Mobile adds Sepia and Black reading themes. The web has light and dark only.
Corner radius is 2px on web, while Android keeps small radii on controls but uses about 24dp on its newer feed and search surfaces.
The web uses a Helvetica-first sans while the apps use each platform's system font.
Navigation: bottom tab bar on both apps, left menu and top search on the web.

Do's and Don'ts

Do

Use #3366cc as the only action color, and darken it on hover and press.
Set article titles in a serif and everything else in sans.
Keep corners small: 2px to 4px on controls, 12px on cards.
Build every screen from the gray ladder and keep paper white (or the theme paper).
Offer Light, Sepia, Dark and Black themes on mobile reading screens.
Respect system text size on every platform.

Don't

Don't add a second brand color or gradients.
Don't use heavy drop shadows. Use thin rings and soft low shadows.
Don't use pill buttons for primary actions. The pill is for the search field, not for buttons.
Don't use a floating action button on Android. The product doesn't.
Don't recolor links per section. A link is always the action blue.

Known Gaps

Now verified on a device (Android only)

The Android section was measured on an Android phone running app build 50610-r-2026-10-06, on 2026-10-07. Verified: the five tabs and their order, the absence of a floating action button, the text size range, list row heights, the four reading themes, real insets, back behavior, and the Light, Sepia, Dark and Black colors.

Where the shipping app contradicts the source

The source was read one day before the capture, yet these values did not match what the app draws. The measured value is used in this file.

Bottom navigation bar height is 80dp, not 72dp. The 72dp figure matches the article bottom action bar, which measured exactly 72dp.
Section headers in Settings are 35dp, not 56dp, and no 56dp header was found on any captured screen.
The top bar draws no shadow, so the 4dp elevation in the source has no visible effect.
Bottom sheets settle at content-driven heights (244dp, 391dp, 457dp, 466dp) rather than the fixed peek heights named in the source (320dp, 360dp, 464dp, 280dp).
Dark theme colors differ. Measured paper #101418, chrome #202122, fields #27292d, text #eaecf0, links #88a3e8. The source values #2e3136 and #6699ff did not appear anywhere in the capture.
Chips use a paper fill with a dark gray stroke, not the canvas fill.
The Search tab surface #e6e6e6 and its field #e0e1e1, and the navigation indicator #e8f0ff against the documented #e8eeff, are outside the documented gray ladder.
The Android destructive red #b32424 is confirmed on screen, as the unread dot on the navigation tabs. The web destructive token stays #bf3c2c. This resolves an earlier gap.

Still not verified

The splash screen could not be captured. It completes faster than a frame grab, so the #f8f9fa status and navigation bar colors remain source-only.
Typeface names cannot come from a device capture, because the accessibility hierarchy carries no font information. All font families in this file are read from the public source files. Text sizes in sp are inferred from measured box heights in dp, not read directly.
Motion, transitions and gestures were not recorded, so no timing or easing is claimed.
Everything behind a Wikimedia account is unseen. No account was created and no credentials were entered, so the signed-in states, account deletion and the data safety form are unverified.
The Activity tab contents were not captured, only its entry in the navigation bar.
iOS is entirely uncaptured and stays inferred. There is no iOS capture path on the machine used, so the iOS tab order and count, corner radii, spacing and component sizes are still unconfirmed.
Web values come from the published Codex tokens and a short look at the Vector 2022 stylesheet. The page was not measured at multiple widths.
Accessibility: at a system font scale of 1.3 the article action bar does not grow, and the "Find in article" label wraps and clips. This is a real defect in the shipping build, recorded rather than silenced.
The checker reports no contrast warnings for this file.