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

Collected 14 Oct 2026. YouTube's public pages work signed out, so the live site was the main source.
We used our own fresh, throwaway Playwright Chrome profile (no sign-in, no cookies from anyone, deleted at the end).
No cookie notice was shown (region: India, "IN" next to the logo). No bot check or sign-in wall appeared.

- Raw files (no screenshots): `C:\Users\pc\OpenDesign-archive\altleads-design-project\research\youtube\` (about 12 MB: CSS, token dumps, icon dumps, scripts)
- Private pixel targets (real screenshots with real thumbnails and faces): **scratch folder only**, `C:\Users\pc\AppData\Local\Temp\ic\youtube\shots\`. They are NOT copied into the project.
- In the project: `screens-redacted\` (this folder) and `design-systems/youtube/img/originals/` hold **redacted** copies of the targets:
  every picture (thumbnail, avatar, video frame, banner) is covered with a flat grey box and creator text (titles, channel names, comments) is blurred.

Step 0 (check before building): Open Design's built-in library has **no YouTube** design system (152 systems checked; the closest is `material`).
YouTube has no public design-system site or npm token package. So every value below was read from the live site.

---

## 1. Pixel targets (1440 x 900 at 1x, Chrome 141, Windows, 14 Oct 2026)

| Screen | Light file | Dark file | What it shows |
|---|---|---|---|
| Home feed | `shots/light/home.png` | `shots/dark/home.png` | Masthead, expanded guide, topic chips, 3 video cards, Shorts shelf. Dark: middle card has an "Auto-dubbed" badge. |
| Watch page | `shots/light/watch-controls.png` | `shots/dark/watch-controls.png` | The 2025 player redesign ("delhi" in YouTube's CSS): frosted round pills, chaptered progress bar, title, owner row, actions, description, up-next. Paused at 0:30, mouse over the player. Dark has Ambient mode (coloured glow). |
| Comments | `shots/light/watch-scroll.png` | `shots/dark/watch-scroll.png` | The same watch page scrolled 650 px: comment header, "Add a comment...", 4 comment threads with reply lines. |
| Search results | `shots/light/search.png` | `shots/dark/search.png` | Result chips, Filters, 500 px thumbnails, snippets with bold query words, chapter strips. |
| Channel | `shots/light/channel.png` | `shots/dark/channel.png` | Banner, 160 px avatar, name, handle line, Subscribe, tabs with slider, featured video, "Popular videos" shelf. |
| Shorts | `shots/light/shorts.png` | `shots/dark/shorts.png` | 452 x 804 Short with the action bar. Light: details inside the video. Dark: the newer layout with details to the LEFT of the video (YouTube shows both in 2026). |

Extra (scratch only): `home-scroll`, `home-mini` (collapsed 72 px guide), `channel-videos`, `watch` (no hover), and state shots
`st-chip-hover`, `st-guide-hover`, `st-lockup-menu`, `st-tooltip-voice`, `st-sub-hover`, `st-player-tooltip`, `st-player-settings`.

Dark mode: switched with YouTube's real menu (top-right ⋮ > Appearance > Dark theme). Signed out, the Appearance menu offers only
"Dark theme" and "Light theme" ("Setting applies to this browser only"); `prefers-color-scheme: dark` alone did **not** switch the site.

## 2. Real code values (read live with Playwright)

| What | How | File in the raw folder |
|---|---|---|
| 203 colour tokens, light + dark | `getComputedStyle(html)` custom properties in each theme | `tokens/sys-colors.txt` |
| Type scale (100 styles), sizes (70 measurement tokens) | same | `tokens/sys-type-measure.txt` |
| Component CSS | YouTube's own stylesheets (public URLs): `kevlar_base` (3.7 MB), `www-player.css` (550 KB), page skeletons | `css/` |
| Computed styles of ~150 parts per page | our `stylejs.js` + `deepdump.js` (every visible element: box, font, colour, background, radius, border, shadow) | `dumps/light`, `dumps/dark` |
| Hover / press / menu states | `states.py` (hover chips, guide, buttons, menus, player tooltip and settings menu) | `dumps/*/states.json` |
| Icons | every inline `<svg>` on 5 pages with its button label; 76 named | `tokens/icons-live.json`, `tokens/icon-live-index.txt` |
| Logo | the inline SVG on the page (trademark of Google; study use only) | `tokens/logo-clean.svg` |

Key findings:
- In 2026 YouTube's tokens are named **`--yt-sys-color-baseline--*`** (e.g. `--yt-sys-color-baseline--text-primary`). The old `--yt-spec-*` names are gone (one left in the CSS).
- Component CSS refers to hashed variables (`--t7f4f2c6d54836ce0`); we mapped them back to values by reading the computed custom properties.
- Font: **Roboto** everywhere we looked (400 / 500 / 700). The page also loads "YouTube Sans" (display sizes) and the player asks for "YouTube Noto"; neither is openly licensed, so the kit uses Roboto (OFL) for both.
- The page is drawn on GPU layers: Chrome paints its text with grey antialiasing, not colour. Our copies use `will-change: transform` on the app to get the same.

## 3. Colours (real unless marked)

| Role | Light | Dark | Token |
|---|---|---|---|
| Page | #FFFFFF | #0F0F0F | base-background |
| Text | #0F0F0F | #F1F1F1 | text-primary |
| Muted text | #606060 | #AAAAAA | text-secondary |
| Chip / tonal button / chosen guide row | rgba(0,0,0,.05) | rgba(255,255,255,.10) | additive-background |
| Hover on tonal | rgba(0,0,0,.10) | rgba(255,255,255,.20) | mono-tonal-hover |
| Chosen chip, Subscribe | #0F0F0F on #F1F1F1 text | #F1F1F1 with #0F0F0F text | inverted-background |
| Link / "Sign in" | #065FD4 | #3EA6FF | call-to-action |
| "Sign in" hover fill | #DEF1FF | #263850 | suggested-action |
| Menu surface | #FFFFFF | #282828 | menu-background |
| Masthead | rgba(255,255,255,.9) + blur(48px) | rgba(15,15,15,.8) + blur(48px) | frosted-glass-desktop |
| Brand red / progress | #FF0033 → #FF2791 gradient (80%) | same | static-brand-red, static-magenta |
| Search box | #FFF, border #C6C6C6, button #F8F8F8 / #D3D3D3 | #121212, border #303030, button rgba(255,255,255,.08) | (component values) |
| Guide dividers | #CCCCCC (measured) | #3F3F3F (measured) | |
| Player pills | rgba(0,0,0,.3) + blur(16px), radius 28 | same | overlay-background-medium-light |

## 4. Sizes (real)
Masthead 56. Guide 240 (entries 204 x 40, radius 10, icon 24, text at x 72). Mini guide 72. Chips 32 tall, radius 8, 14/20 500, gap 12 (8 on search).
Home grid: 3 columns of 373.3 px at 1440, gap 16, thumbnails 16:9 radius 12, avatar 36, title 16/22 500 (2 lines), meta 14/20.
Duration badge 20 tall, radius 4, 12/18 500 on rgba(0,0,0,.6). Shorts shelf: 5 columns of 217.6 x 326.
Watch: player 996 x 560 radius 12 at 1440; up-next thumbs 247.5 x 139.2 radius 8; title 20/28 700; buttons 40 tall radius 20.
Player (2025): progress 4 px in chapter segments with 4 px gaps, knob 12; pills 40 tall at 1440 (48 / 56 in bigger players).
Search: thumbnails 500 x 280.5; title 18/26 400. Channel: banner 1070 x 172.5 radius 16, avatar 160, name 36/50 700, tabs 48 tall 16/22 500, slider 2 px.
Shorts: 452.3 x 804 radius 12; action buttons 48 round, labels 12/18.

## 5. Motion (real, from YouTube's CSS)
- Hover wash: opacity in 0.45 s `cubic-bezier(.25,1,.8,1)`; when pressed the wash jumps in 40 ms.
- Touch feedback (spec buttons): scale .9 → 1 in 0.3 s `cubic-bezier(.05,0,0,1)`.
- Masthead slide: 0.3 s `cubic-bezier(.05,0,0,1)`. Player pill buttons: 0.2 s `cubic-bezier(.05,0,0,1)`; controls fade 0.1 s `cubic-bezier(0,0,.2,1)`.
- Tooltip timing and control auto-hide (about 3 s) are estimated.

## 6. Fonts, icons, logo, licences
- Roboto: SIL Open Font License (copied from our Gmail study, same files Google Fonts serves). YouTube Sans and YouTube Noto: not copied (no open licence).
- Icons: YouTube's own inline SVGs, read from the page; study use only. 76 named in `design-systems/youtube/youtube-icons.js`.
- Logo: YouTube's inline SVG; trademark of Google LLC; study use only.

## 7. What was NOT found / gaps
- No public YouTube design-system site or token package; no official dark/light specification document.
- Signed-out only: no signed-in home (subscriptions, avatars in the top bar, notifications bell), no Studio, no comment posting.
- The tooltip colour and the "Subscribed" button look were not captured live (estimated from YouTube's CSS defaults).
- The Shorts page shows two layouts in 2026 (details inside or to the left of the video); we copied both but could not tell which is the default.
- Thumbnails, avatars, video frames and banners are replaced by generated stand-ins in every copy, so pixel scores include large picture areas that can never match. We report "UI only" scores (pictures masked) next to the full scores.

## 8. Pixel scores of the copies (light / dark, 14 Oct 2026)

Scored with `rcompare.py` (tolerance 24 of 255) against the private screenshots at 1440 x 900, 1x. "UI only" leaves out every picture area
(thumbnails, avatars, video, banner) because our copies use generated stand-ins on purpose. Scripts: `score.py`, `redact.py` in the scratch folder.

| Copy | All pixels | Edges | UI only | UI-only edges |
|---|---|---|---|---|
| home | 53.8 / 54.1 | 32.7 / 33.5 | 96.0 / 96.4 | 76.3 / 74.7 |
| watch | 41.6 / 40.2 | 30.6 / 28.2 | 94.4 / 91.9 | 63.7 / 58.8 |
| comments | 80.9 / 80.7 | 38.6 / 32.3 | 95.3 / 95.0 | 59.2 / 53.5 |
| search | 67.7 / 65.5 | 37.6 / 36.1 | 95.4 / 92.2 | 71.4 / 66.5 |
| channel | 70.6 / 70.5 | 42.3 / 35.9 | 96.4 / 96.4 | 70.6 / 66.7 |
| shorts | 72.2 / 71.9 | 37.9 / 59.1 | 100.0 / 98.9 | 99.4 / 86.0 |

Edges stay lower because every title, channel and comment is made up (different words, different line breaks).