YouTube's iOS app: light canvas, one functional red, 16:9 thumbnails, the mini-player that follows you everywhere, and a Shorts surface that breaks every rule.
YouTube on iOS lives in two visual worlds: the light, restrained feed and the full-bleed black of Shorts. The 16:9 rectangle and the red play triangle are the only constants.
Branded top bar with the wordmark, Cast / Notif / Search at 18pt. Chip carousel filters the feed (active chip flips to #0F0F0F on white text).
Full-bleed 9:16, right-side action stack (like / dislike / comment / share / remix). Subscribe button is a white pill on the bottom-left, not a red one.
Horizontal channel avatar row at top (8pt notification dot on channels with new uploads), then a dense vertical feed of latest videos with 120pt thumbs.
The feed card is one rule: thumbnail at 16:9, duration pill bottom-right at rgba(0,0,0,.78) with tabular numerals, then a 32pt channel avatar, a 2-line clamped title at 14/600, and a single line of channel · views · time at 12/400 #606060.
The 3-dot menu sits 8pt from the right edge of the info row and stays at 14×14.
thumb: 16:9
title: 14/600
meta: 12/400
avatar: 32pt
The fullscreen video player collapses with a downward swipe into a 54pt mini-player above the tab bar. The thumbnail shrinks to 80×45 (still 16:9) on the left; play/close controls sit on the right.
A 2pt red progress bar runs across the top edge of the mini-player to indicate scrub position. Tap anywhere on the mini to expand back.
height: 54pt
thumb: 80×45
progress: 2pt #FF0000
Background the app and the player becomes an iOS PiP card — a draggable, snap-to-corner 108×60 rectangle that floats above the home screen and lock screen.
YouTube uses the standard AVPictureInPictureController, but inherits the iOS system corner radius (8pt) and shadow (y8 b24 black/.18).
size: 108×60
radius: 8pt
shadow: y8 b24 .18
The YouTube iOS vocabulary — light surfaces, gray ladder text, one functional red. Roboto in production, Inter here. Numbers always tabular.
Light canvas with a strict gray ladder for text. One red — and it appears exclusively on the brand mark, the Subscribe button, the Shorts active state, and the mini-player progress bar.
Roboto in production — substituted with Inter. Title 16/600, channel 14/500, view counts 12/400 in #606060. Always tabular numerals on counters and durations.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --title-screen | Subscriptions | 20 / 1.25rem | 700 | -0.4px |
| --video-title | Reviewing every iPhone 16 Pro feature | 16 / 1.00rem | 600 | normal |
| --channel-name | Marques Brownlee | 14 / 0.88rem | 500 | normal |
| --view-count | 2.1M views · 4 hours ago | 12 / 0.75rem | 400 (tnum) | normal |
| --duration-pill | 12:42 | 11 / 0.69rem | 600 | normal |
| --chip-label | Music | 13 / 0.81rem | 500 | normal |
| --subscribe-btn | Subscribe | 14 / 0.88rem | 600 | normal |
| --tab-label | Home | 9.5 / 0.59rem | 500 | normal |
| --shorts-handle | @fireship_io | 13 / 0.81rem | 600 | normal |
Soft on the feed (12pt thumbs), small on the Shorts subscribe pill, and a tight 4pt on duration pills. Material-influenced — but pulled tighter than Material defaults.
The constants the Home feed, Shorts, and mini-player agree on.
Light chrome, red where it counts, soft pills on Subscribe, square corners on duration pills.