# Gmail (web) design-system study: sources and measurements

Collected 13 Oct 2026. Everything came from public pages. Nothing was signed in to. mail.google.com was not opened.
One page showed a Cloudflare bot check (a Medium article), so it was skipped.

- Raw files: `C:\Users\pc\OpenDesign-archive\altleads-design-project\research\gmail\` (about 314 MB)
- Curated files for the rebuild: this folder (`app-screens\`, `logo\`, this file)

Short names used below: `R\` = the raw folder, `A\` = `app-screens\` in this folder.

---

## 1. Pixel targets for the rebuild (use these first)

| # | File | Size | Scale | What it shows | Theme |
|---|------|------|-------|---------------|-------|
| **T1** | `A\01-TARGET-inbox-light-2x_bloggoogle-2022.png` | 2560x1600 | exactly 2x (1280x800 CSS) | Inbox with the Mail/Chat/Spaces/Meet rail, nav with labels, list card, side panel. This is Google's own launch image for the Material 3 Gmail. It is a clean PNG and the most accurate colour source. | Light |
| **T2** | `A\03-TARGET-inbox-dark-current_mailmeteor-2026.jpg` + its light twin `A\02-TARGET-inbox-light-current_mailmeteor-2026.jpg` | 1941x1043 each | about 1.333x (about 1456x782 CSS) | The same account and layout in dark and light (current 2025-26 UI: Gemini sparkle, Purchases, category tabs, label colours, hover row actions). This is the best light/dark pair. It is a JPEG, so colours can be off by 1-2 values. It also shows a "Mailmeteor" extension label and an "Upgrade" button that are not part of Gmail. | Dark + light |
| **T3** | `A\04-TARGET-thread-inline-reply-light-1x_workspaceupdates-2026.png` | 1280x800 | exactly 1x | An open thread with an inline reply box, pill Send button and formatting row. Current UI (2026). It is a GIF frame (256-colour palette), so flat colours are a little off (for example #F5F7FB instead of #F6F8FC). Take geometry from it and colours from T1. | Light |

---

## 2. All useful sources

### 2a. Curated screens (`app-screens\`)

| File | Source URL | Size | Shows | Theme | Date |
|------|-----------|------|-------|-------|------|
| 01-TARGET-inbox-light-2x_bloggoogle-2022.png | https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/Gmail_GM3.png (from https://blog.google/products-and-platforms/products/gmail/gmail-design-update/) | 2560x1600 | Full inbox, integrated rail | Light | 26 Jul 2022 |
| 02-TARGET-inbox-light-current_mailmeteor-2026.jpg | https://assets.mailmeteor.com/blog/gmail-dark-mode/gmail-settings.jpg (https://mailmeteor.com/blog/gmail-dark-mode) | 1941x1043 | Inbox with tabs, hover row, settings gear outlined | Light | Jan 2026 |
| 03-TARGET-inbox-dark-current_mailmeteor-2026.jpg | https://assets.mailmeteor.com/blog/gmail-dark-mode/gmail-dark-mode.jpg | 1941x1043 | Same inbox in the Dark theme | **Dark** | Jan 2026 |
| 04-TARGET-thread-inline-reply-light-1x_workspaceupdates-2026.png | GIF on https://workspaceupdates.googleblog.com/2026/03/use-help-me-schedule-in-gmail-to-easily-set-up-a-meeting-time-with-multiple-guests.html (frame 0) | 1280x800 | Open thread + reply box | Light | Mar 2026 |
| 05-search-filter-chips-light_bloggoogle-video-2022.png | https://storage.googleapis.com/gweb-uniblog-publish-prod/original_videos/Gmail_Inbox_Filters_no_Audio.mp4 (frame at 18 s) | 1920x1080 | Search results with chips: Mail/Messages/Spaces, From, To, Anytime, Has attachment, Is unread; "Best match" and "All results" | Light | Jul 2022 |
| 06-search-chips-ai-overview-light_workspaceupdates-2026.png | GIF on https://workspaceupdates.googleblog.com/2026/04/search-faster-and-smarter-with-ai-overviews-in-Gmail-search.html | 1480x949 | Search with filter chips, "Most relevant" sort and an AI Overview card | Light | Apr 2026 |
| 07-compose-popup-light_workspaceupdates-2024.png | GIF on https://workspaceupdates.googleblog.com/2024/08/refine-emails-faster-with-help-me-write-gmail.html | 1280x800 | New Message popup (header, To, Subject, body, Send pill, bottom toolbar) | Light | Aug 2024 |
| 08-compose-popup-light-2x-crop_9to5google-2022.jpeg | https://9to5google.com/wp-content/uploads/sites/4/2022/07/Gmail-web-Material-You-google-compose.jpeg (https://9to5google.com/2022/07/02/gmail-material-you-hands-on/) | 1351x1170 | Large crop of the compose window, formatting bar open. The left edge is cropped. | Light | Jul 2022 |
| 09-quick-settings-panel-light_mailmeteor-2026.jpg | https://assets.mailmeteor.com/blog/gmail-dark-mode/view-all-gmail-themes.jpg | 1941x1043 | Quick settings panel open: Apps in Gmail, Density (Default/Comfortable/Compact), Theme thumbnails, Inbox type | Light | Jan 2026 |
| 10-theme-picker-dialog-light_mailmeteor-2026.jpg | https://assets.mailmeteor.com/blog/gmail-dark-mode/enable-dark-theme-gmail.jpg | 1941x1043 | "Pick your theme" dialog over a scrim, Dark tile selected | Light | Jan 2026 |
| 11-settings-page-accounts-tab-light_workspaceupdates-2025.png | https://workspaceupdates.googleblog.com/2025/06/hardware-key-certificate-management-for-client-side-encryption-in-gmail.html | 1252x1008 | Full Settings page crop (tabs: General, Labels, Inbox, Accounts, ...). It has a red highlight box drawn by Google. | Light | Jun 2025 |
| 12-inbox-dark-2x-topcrop_9to5google-2022.jpeg | https://9to5google.com/wp-content/uploads/sites/4/2022/07/Gmail-Material-You-web-theme-1.jpeg | 2880x850 | Top part of the dark-theme inbox (2x) | **Dark** | Jul 2022 |
| 13-inbox-dark_streak-2023.png | https://www.streak.com/post/gmail-dark-mode (converted from AVIF) | 1600x795 | Dark inbox, almost empty list, nav and labels | **Dark** | Oct 2023 |
| 14-chat-in-app-rail-light_bloggoogle-video-2022.png | https://storage.googleapis.com/gweb-uniblog-publish-prod/original_videos/Gmail_Left_Nav_no_Audio.mp4 | 1920x1080 | Chat selected in the rail: chat list with avatars, "New chat" | Light | Jul 2022 |
| 15-quick-settings-closeup-light_bloggoogle-video-2022.png | https://storage.googleapis.com/gweb-uniblog-publish-prod/original_videos/Gmail_Enabling_Chat_Meet_no_Audio.mp4 | 1920x1080 | Zoomed Quick settings ("See all settings", Apps in Gmail) | Light | Jul 2022 |
| 16-inbox-light-1x_workspaceupdates-2022.png | https://workspaceupdates.googleblog.com/2022/06/updated-timing-for-gmail-integrated-view.html | 1600x1000 | Inbox without the rail (Gmail-only view) | Light | Jun 2022 |
| 17/18-toolbar-*.png | https://support.google.com/mail/answer/2473038 | 702x124 / 998x124 | Simplified and advanced thread toolbar strips | Light | current |
| 19-theme-picker-2022_9to5google.jpeg | 9to5google gallery (above) | 1692x1108 | Theme picker with colour tiles | Light | Jul 2022 |

### 2b. Raw folders (everything else)

| Folder | Count | What is in it |
|--------|-------|---------------|
| `R\help-center\` | 30 images + 118 key frames in `frames\` | Images from about 200 Gmail Help articles. `manifest.json` lists the source page, URL, size and alt text for each image. **Note:** most desktop "how-to" GIFs (1200x750) are *stylised wireframes* (grey bars instead of text). They are good for layout (quick settings, settings page, search chips, filters) but not for pixels. The real UI ones are the Gemini summary GIF (1434x895), the AI Inbox GIF (1440x810) and the "navigate around Gmail" PNG (2016x929). |
| `R\workspace-updates\` | 95 images + 45 key frames | Images from 77 Gmail posts on the Workspace Updates blog, 2022-2026, in full resolution (`/s0/`). `manifest.json` has the post URL for each. Many real 1600x1000 and 1280x800 screenshots: inbox, thread, compose, side panel, emoji reactions, CSE banners, settings, admin console. |
| `R\marketing\` | 9 files + 39 video frames | blog.google GM3 launch image (original 2560x1600 PNG plus resized copies), 3 launch videos (1920x1080 MP4, 19 s each: left nav, enabling Chat/Meet, inbox filters and search), and frames taken from them. |
| `R\press-9to5google\` | 19 | 9to5Google hands-on gallery from Jul 2022: all 7 theme crops (Dark, Lavender, Rose, Mustard, Wasabi, photo themes) at 2880 px wide, compose, quick settings, nav crops. |
| `R\press-darkmode\` | 23 | Dark-mode guides: Mailmeteor (4 desktop screens, Jan 2026, plus 3 Android), Streak (dark inbox, theme pane, iPhone), IONOS (settings and theme crops). The `nighteye_*` files are **not** real Gmail dark mode (they show a browser extension from 2019). Do not use them. `usecarly_image` is an illustration. |
| `R\css\` | 15 | CSS and CSS custom properties captured from public Google pages: the accounts sign-in page (public page, not signed in), support.google.com, workspace.google.com/products/gmail, google.com/gmail/about, fonts.google.com, m3.material.io. **`gm3-sys-tokens-from-public-google-css.json`** holds Google's own GM3 colour tokens (see section 3). |
| `R\wayback\` | 1 CSS bundle + extracts | **Real Gmail stylesheet** (`gmail.main...` from `mail.google.com/_/scs/mail-static/_/ss/...`), Wayback capture of 22 Sep 2024, 2.7 MB. `sources.txt` has the archived URL. `key-rules-extract.txt` has the list-row, nav, compose and density rules. `gm3-icon-urls-2x.txt` lists the icon images that this CSS uses. |
| `R\material\` | 201 | `material-web-tokens-scss\`: the full token set from the npm package @material/web (version 0_192 tokens: sys colour, typescale, shape, elevation, motion, state, plus all component tokens). `material-color-utilities\`: package.json and licence of @material/material-color-utilities 0.4.0. |
| `R\fonts\` | 22 | See section 5. |
| `R\icons\` | 150 SVG + 146 PNG | See section 6. |
| `R\logo\` | 13 | See section 7. |

Scripts used (crawl, download, frame extraction, contact sheets): `C:\Users\pc\AppData\Local\Temp\ic\gmail\`.

---

## 3. Colours

### 3a. Measured from the real screenshots

The colours were measured with Python/PIL. The method was the most common pixel colour in a box, or flat runs along a scan line.
"T1 (x,y)" uses original pixel coordinates in T1 (2x). "T2" uses the Mailmeteor pair (JPEG, so ±2).

| Role | Light | Dark | How measured |
|------|-------|------|--------------|
| Page / app background (behind nav and list) | **#F6F8FC** | **#111111** (#101010-#121212) | T1 scan y=64 x 136-647 and x=300 y=0-135. Dark: T2 box (20,450)-(30,480) and top-bar box (1400,20)-(1600,60). 9to5 dark 2022 histogram: #121212/#101010. |
| App rail (Mail/Chat/Spaces/Meet column) | #EAF1FB (2022). In the 2026 GIF the rail looks a little darker than the nav (#EAEFF8 in the GIF palette). | n/a (no dark rail screenshot) | T1 x=68 vertical; T3 x=34 vertical |
| Search bar fill | #EEF3FC in the 2022 image. **#EAF1FB in the 2024 Gmail CSS** (`form.aJf{background-color:#eaf1fb}`). T2 (2026) reads #E9EEF6 (= GM3 surface-container-high). | **#474747** (T2), #464646 (9to5 2022) | T1 x=1000 y=16-111. T2 box (600,20)-(1200,30). Wayback CSS. |
| List card (unread row / card surface) | **#FFFFFF** | **#2C2C2C** | T1 x=1000 y=128-535. T2 card toolbar (600,95)-(1400,105) and tabs row. The 9to5 dark 2022 histogram also has #2C2C2C as its top colour. |
| Read row background | **#F2F6FC** | **#161616** (#151515-#171717) | T1 x=1000 y=538-1565. Gmail CSS `.yO{background:#f2f6fc}`. Dark from T2 rows. |
| Row divider | #EBEEF0 on white (1 CSS px) | not measured (too thin in the JPEG) | T1 y=302-303. CSS: `box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.12)` |
| Compose button | **#C2E7FF** (= GM3 secondary-container) | **#FFFFFF** (white button, dark text) | T1 scan y=190. T2 x=100 y=95-169. CSS `.z0>.L3 background-color:#c2e7ff; color:#001d35` |
| Selected nav pill (Inbox) | **#D3E3FD** (= GM3 primary-container) | **#595959** (#575757-#595959) | T1 scan y=312 x=168-615. T2 box (140,200)-(300,206). CSS `.TK .TO.nZ{background-color:#d3e3fd}` |
| Selected nav text / icon | #041E49 (T1). In the CSS, selected nav text is #001D35. | #FFFFFF | T1 x=300 y=301-321 |
| Main text | #1F1F1F | #E3E3E3 expected. JPEG reads about #FFFFFF for nav text and about #B3B3B3-#BEBEBE for row text (anti-aliased). | T1 sender histogram. GM3 on-surface. |
| Secondary text / icons | #444746 (snippet, dates, icons) | #C4C7C5 expected (GM3 dark on-surface-variant). JPEG reads #8F8F8F-#C4C4C4. | T1 snippet and date boxes. Gmail CSS has #444746 384 times. |
| Older grey icons in the top bar | #5F6368 | - | T1 scan y=64 |
| Primary / Send button / active tab | **#0B57D0** | #A8C7FA expected (GM3 dark primary). Not seen in a dark screenshot. | T3 Send (GIF reads #0A57CE). Gmail CSS has #0b57d0 245 times. `.gU .btA .Uo{background-color:#0b57d0;border-radius:18px}` |
| Unread badge on the rail | #D93025 | - | T1 box (60,140)-(110,170) |
| Active status dot | #1E8E3E | - | T1 scan y=64 |
| Compose window header | #F2F6FC | - | 08 compose crop box (300,20)-(1000,70) |

### 3b. Google's own GM3 colour tokens (public CSS, not guessed)

Source: accounts.google.com sign-in page CSS (`:root` = light, `.AfoeCd` = dark). Gmail's 2024 CSS uses the same values as fallbacks.

| Token | Light | Dark |
|---|---|---|
| primary | #0B57D0 | #A8C7FA |
| on-primary | #FFFFFF | #062E6F |
| primary-container | #D3E3FD | #0842A0 |
| on-primary-container | #0842A0 | #D3E3FD |
| secondary | #00639B | #7FCFFF |
| secondary-container | #C2E7FF | #004A77 |
| on-secondary-container | #004A77 (Gmail uses #001D35) | #C2E7FF |
| tertiary / container | #146C2E / #C4EED0 | #6DD58C / #0F5223 |
| error / container | #B3261E / #F9DEDC | #F2B8B5 / #8C1D18 |
| surface | #FFFFFF | #131314 |
| surface-container-lowest | #FFFFFF | #0E0E0E |
| surface-container-low | #F8FAFD | #1B1B1B |
| surface-container | #F0F4F9 | #1E1F20 |
| surface-container-high | #E9EEF6 | #282A2C |
| surface-container-highest | #DDE3EA | #333537 |
| surface-dim / bright | #D3DBE5 / #FFFFFF | #131314 / #37393B |
| on-surface | #1F1F1F | #E3E3E3 |
| on-surface-variant | #444746 | #C4C7C5 |
| outline / outline-variant | #747775 / #C4C7C5 | #8E918F / #444746 |
| inverse-surface / inverse-on-surface | #303030 / #F2F2F2 | #E3E3E3 / #303030 |

**Important:** Gmail's own Dark theme is a *neutral grey* theme (#111111 page, #2C2C2C card, #161616 read rows, #474747 search, white compose). It is **not** the blue-tinted GM3 dark scheme above (#131314, #1E1F20). Two independent screenshots (9to5Google Jul 2022 and Mailmeteor Jan 2026) agree. Use the measured values for the Gmail dark rebuild.

The @material/web token files (`R\material\material-web-tokens-scss\`) hold the generic M3 baseline (purple #6750A4). They do not hold Gmail's blue. Use them only for typescale, shape, motion and elevation.

---

## 4. Measured sizes (CSS px)

| Item | Value | Evidence |
|------|-------|----------|
| Top bar height | 64 | T1: the list card starts at y=128 (2x). T3: the card starts at about y=64-70. |
| App rail width | 68 (2022) / about 72 (2026) | T1 x 0-135 (2x). T3 x 0-71. |
| Left nav width | 256 | T1: nav x 136-647 = 512 px at 2x. Gmail CSS `.aeN{min-width:256px;max-width:256px}` |
| Search bar | 48 tall. Radius about 8 in the 2022 image, **24 (pill) in the 2024 CSS** (`.Yb.bax{border-radius:24px;height:48px}`). Width about 600 on a 1280 px window (T1: x 648-1849 at 2x). The width grows with the window. The maximum width was not measured; about 720 is commonly cited. | T1, T2 (64 px at 1.333x = 48), CSS |
| Compose button | 56 tall, about 135 wide, radius 16, label 14 px Google Sans weight 500. Smaller CSS variants: 48 px (min-width 56) and 40 px (collapsed). | T1 y 136-247 and x 168-437 (2x). T2: 75 px / 1.333 = 56. CSS `.z0>.L3{border-radius:16px;height:56px}` |
| Nav item (pill) | 32 tall, fully rounded (radius 16), about 224-240 wide, right edge stops before the list card | T1 y 280-343 (2x). T2 43 px / 1.333 = 32. |
| List card | Radius 16, white, 16 px gap to the right edge. Right side panel is 56 wide. | T1 corner scan (30 px at 2x). Side panel x 2448-2559. |
| Row height, **Default** density | **40** | T1: row pitch 80 px at 2x. T2: 54 px / 1.333 = 40.5. CSS `.zA{padding:4px 0}` + 32 px cell (`.zA>.xY.K35O9b{height:32px}`). |
| Row with attachment chips (Default) | about 80 | T2 Paul row y 278-384 / 1.333. Chip is about 32 tall, pill. |
| Row height, Comfortable | not measured from a real screenshot. Gmail CSS has a 32 px cell (Comfortable = Default without chips = 40). | CSS only |
| Row height, Compact | not measured. CSS `.Zs .zA>.xY.K35O9b{height:20px}` + 4+4 padding = about 28. | CSS only (needs a real check) |
| Row hover | Raised: `box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)` | Gmail CSS `.zA:hover` |
| Send button | 36 tall, radius 18, #0B57D0, about 106 wide including the arrow part | T3 (1x) y 710-746. CSS `border-radius:18px` |
| Filter chip (search) | 32 tall, radius 8 (M3 filter chip) | Video frame 05, T2 chip |
| Quick settings panel | about 320 wide, full height, white, slides in from the right | 09 (1434-1866 px at 1.333x) |
| Icons | 20 px (Gmail's own icon PNGs are `*_20dp`), 24 px in the top bar. Icon buttons 40 px. | Wayback CSS icon file names, `--gm3-icon-button-*-container-height:40px` |
| Type | Thread subject 22 px Google Sans. Nav labels 14 px (Google Sans). "Labels" heading 16 px. Rows 14 px (unread weight 700 / read 400). Body 14 px. Dates 12-14 px. Fonts used: "Google Sans", "Google Sans Text", Roboto. | Cap heights in T3 at 1x (cap/size about 0.72), Gmail CSS stacks: `"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif` and `Google Sans Text,Google Sans,Roboto,Arial,sans-serif` |
| Motion | Nav and compose changes: 0.15 s cubic-bezier(0.4,0,0.2,1) (M3 "legacy standard"). Compose shadow: .08 s linear. | Gmail CSS `.TN`, `.aqn .z0>.L3` |
| Elevation | Compose button: `0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)`. Hover: `0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15)` | Gmail CSS |

M3 baseline values (from @material/web tokens) for the rest:
- Shape: 4 / 8 / 12 / 16 / 28 px, full = 9999px.
- Elevation levels 0-5 = 0, 1, 3, 6, 8, 12 dp.
- Motion durations short1-4 = 50/100/150/200 ms, medium1-4 = 250-400 ms, long1-4 = 450-600 ms.
- Easing: standard (0.2,0,0,1), emphasized-decelerate (0.05,0.7,0.1,1), emphasized-accelerate (0.3,0,0.8,0.15), legacy (0.4,0,0.2,1).

---

## 5. Fonts (`R\fonts\`)

| Font | Files saved | Licence | Notes |
|------|-------------|---------|-------|
| **Google Sans** (variable: wght 400-700, opsz, GRAD) | `GoogleSans-normal-400-700-latin.woff2`, `GoogleSans-italic-400-700-latin.woff2` | **SIL OFL 1.1** (released 2025, github.com/googlefonts/googlesans). `LICENSE-googlesans-OFL.txt`. Also read `TRADEMARKS-googlesans.md`: the name "Google Sans" is a trademark, but using the font itself is allowed. | This is the font Gmail uses. Good news: it is now openly licensed. |
| Google Sans Flex (variable) | `GoogleSansFlex-normal-1-1000-latin.woff2` | SIL OFL 1.1 | Optional |
| Google Sans Code | `GoogleSansCode-normal-400-latin.woff2` | SIL OFL 1.1 | Optional (monospace) |
| Roboto (variable 100-900) | `Roboto-normal/italic-100-900-latin.woff2` | SIL OFL 1.1 | Fallback in Gmail's font stacks |
| Material Symbols Outlined (variable: opsz 20-48, wght 100-700, FILL 0-1, GRAD) | `MaterialSymbolsOutlined-var.woff2` (4 MB, full) | Apache 2.0 | Icon font |
| **Google Sans Text** | *CSS only (`Google_Sans_Text.css`). The font files were NOT downloaded.* | **Not openly licensed** (not in the google/fonts repo). The Fonts API serves it, but there is no licence for reuse. | Use **Google Sans** at small optical size (opsz axis) as the substitute. It is the same family, and the variable font covers text sizes. |
| Product Sans | CSS only | Not openly licensed | Not needed |

---

## 6. Icons (`R\icons\`)

- **150 Material Symbols Outlined SVGs** (75 names x outline + `_fill` variant), weight 400, 24 px, from github.com/google/material-design-icons (Apache 2.0). The list is in `_icon-list.txt`. It covers every icon asked for: menu, search, tune, help, settings, apps, inbox, star, schedule, send, draft, description, label, label_important, expand_more/less, chevron_left/right, more_vert/horiz, refresh, check_box(_outline_blank), archive, report, delete, mark_email_unread/read, drive_file_move, attach_file, image, mood, add_reaction, link, lock_clock, edit, close, minimize, open_in_full, close_fullscreen, arrow_back, arrow_drop_down, reply, reply_all, forward, print, open_in_new, chat, chat_bubble, videocam, groups, keyboard, add, mail, format_color_text, text_format, add_to_drive, filter_list, person, account_circle, snooze, inventory_2, outbox, shopping_cart, dark_mode, light_mode, density_medium, tag, info, contacts, calendar_today, task_alt, lightbulb, photo_camera.
  - Not found under these names: emoji_emotions, insert_photo, star_border, label_outline. Use mood, image, star (outline) and label instead.
- **146 of Gmail's own icon PNGs** in `icons\gmail-gm3-png-from-gstatic\`. They come from `ssl.gstatic.com/ui/v1/icons/mail/gm3/2x/*_20dp.png` (the URLs are listed in Gmail's 2024 CSS, for example `inbox_baseline_nv700_20dp.png`, `star_fill_baseline_p900_20dp.png`). Colour codes: `nv700` = #444746 (unselected), `p900` = selected (dark blue, filled). Use them to check that the SVG icons look the same. They are Google's assets, so use them for study only.

---

## 7. Logos (`logo\` here, more in `R\logo\`)

- `gmail-M-logo-official-gstatic.svg`: the official 4-colour "M" from `https://www.gstatic.com/images/branding/productlogos/gmail_2020q4/v11/192px.svg`
- `gmail-lockup-light-2x.png` / `gmail-lockup-dark-2x.png` (218x80, i.e. 109x40 CSS): the exact "M + Gmail" lockup that the app shows in the top bar, from `ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_{default,dark}_2x_r5.png`
- In `R\logo\`: Google wordmark SVG/PNG, Gmail favicon (.ico), 32/48 dp product icons, and the Wikimedia copy of the M logo.
- **Gmail and Google logos are trademarks of Google. Use them for this study only.**

---

## 8. What was NOT found (honest gaps)

1. **No real dark screenshot of the compose window, an open thread, the settings page or the quick settings panel.** Dark exists only for the inbox (T2 dark, Streak 2023, 9to5 2022 top crop). Dark values for the compose window, thread and dialogs must come from the GM3 dark tokens and the dark inbox measurements.
2. **No real Compact or Comfortable density screenshot.** Only Default was measured (40 px). The Compact value (about 28) comes from Gmail's CSS and was not checked visually. Help-centre density animations are stylised wireframes.
3. **No dark-theme Gmail CSS.** The archived 2024 Gmail CSS is the light/default bundle. The dark theme is a separate themed sheet that was not found in the Wayback Machine.
4. **Dark text colours are approximate.** They come from JPEG anti-aliasing (for example #B3B3B3-#FFFFFF). The likely real values are #E3E3E3 (primary) and #C4C7C5 (secondary), from GM3, not from pixels.
5. **The newest search bar style is uncertain:** fill #EAF1FB (2024 CSS) or #E9EEF6 (2026 screenshot), and radius 24 (CSS) or 8 (2022 image). Use the 2024 CSS values (pill, radius 24, #EAF1FB) and check against T2.
6. **No full-window compose screenshot at 2x after 2024.** Compose sources are a 2022 crop and a 1280x800 GIF frame from 2024.
7. **Mobile web Gmail** was not collected. Some Android app screenshots exist in `R\press-darkmode\` and `R\workspace-updates\`.
8. **Help-centre animations are mostly wireframes**, not real UI. Do not use them for pixel colours.
9. Not checked: an archived signed-out Gmail landing page (the live google.com/gmail/about and workspace pages were captured instead).