iOS Design Spec

# Every video, on a red rectangle.

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.

View Design Tokens Explore Surfaces
9:41

## Subscriptions

Marques
Fireship
Veritasium
Kurzgesagt
Linus
12:42
Reviewing every iPhone 16 Pro feature so you don't have to
Marques Brownlee · 2.1M views · 4 hours ago
8:15
100+ JavaScript concepts you should know in 12 minutes
Fireship · 890K views · 1 day ago
23:04
The most counterintuitive physics fact I've ever seen
Veritasium · 4.2M views · 2 days ago
10:38
What happens at the bottom of the deepest hole on Earth?
Kurzgesagt · 6.1M views · 3 days ago
Home
Shorts
Subscriptions
You
Subscriptions
9:41
YouTube
All Music Live Mixes Cooking
12:42
M
Reviewing every iPhone 16 Pro feature so you don't have to
Marques Brownlee · 2.1M views · 4 hours ago
8:15
F
100+ JavaScript concepts in 12 minutes
Fireship · 890K views · 1 day ago
Reviewing every iPhone 16 Pro feature so...
Marques Brownlee
Home
Shorts
Subscriptions
You
Home
9:41
Shorts
142K
Dislike
2.1K
Share
Remix
@fireship_io
Subscribe
JavaScript in 100 seconds. Buckle up. 🚀
fireship_io · original audio
Home
Shorts
Subs
You
Shorts
iOS Surface Anatomy

## Three surfaces, two canvases, one red.

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.

### Home

Branded top bar with the wordmark, Cast / Notif / Search at `18pt`. Chip carousel filters the feed (active chip flips to `#0F0F0F` on white text).

### Shorts

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.

### Subscriptions

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.

Video card anatomy

### The 16:9 rectangle, exact to the pixel.

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`
12:42
M
Reviewing every iPhone 16 Pro feature so you don't have to
Marques Brownlee · 2.1M views · 4 hours ago
Thumbnail16:9 · 12pt radius Durationpill · y6 x6 Channel32pt circle Title2-line · 14/600
↓ pull down ↓
Reviewing every iPhone 16 Pro...
Marques Brownlee
Mini-player handoff

### Pull down. The video doesn't stop.

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`
Picture-in-picture

### The video leaves the app, the audio doesn't.

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`
Picture-in-picture · snap-to-corner
Design System Reference

## One red. One play triangle. One canvas.

The YouTube iOS vocabulary — light surfaces, gray ladder text, one functional red. Roboto in production, Inter here. Numbers always tabular.

View Source ↗

### Color

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.

Primary Brand
YouTube Red
#FF0000
Red Hover
#CC0000
Ink
#0F0F0F
Canvas
#FFFFFF
Dark Surface
#272727
Text
Primary
#0F0F0F
Secondary
#606060
Tertiary
#909090
Disabled
#AAAAAA
Link Blue
#065FD4
Surface & Border
Surface 1
#F9F9F9
Chip Bg
#F2F2F2
Border
#E5E5E5
Border Soft
#ECECEC
Duration Pill
black/.78
Semantic
Live / Subscribe
#FF0000
New / Link
#065FD4
Success
#1ED760
Premium Gold
#FFA42B
Shorts Canvas
#000000

### Typography

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

### Radius

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.

Pill
2px
Mini
4px
Input
6px
Chip
8px
Thumb
12px
Subscribe
20px
Screen
38px
Avatar
50%

### iOS Spec Strip

The constants the Home feed, Shorts, and mini-player agree on.

Tab bar height
83pt
5 tabs, center Create slot is a 30pt black circle.
Mini-player height
54pt
Above tab bar. 2pt red progress on top edge.
Card padding
12pt
Info row horizontal padding. Thumb is edge-to-edge.
Channel avatar
32pt
In feed. 46pt on Subscriptions row with 8pt dot.
Subscribe pill
20pt
Red on light surfaces, white on Shorts.
Chip height
28pt
Active chip flips black; inactive is #F2F2F2.
PiP card
108×60
Snaps to one of four corners with elastic bounce.
Animation curve
spring
.35s damping .8 for mini-player expand/collapse.

### Components

Light chrome, red where it counts, soft pills on Subscribe, square corners on duration pills.

##### Buttons

Subscribe Subscribed Join Share

##### Inputs

LIVE NEW #shorts

##### Cards

12:42
M
Reviewing every iPhone 16 Pro
Marques Brownlee · 2.1M · 4h
Mini-player active
Marques Brownlee
View source ↗