# Design System Inspiration of YouTube (iOS)

## 1. Visual Theme & Atmosphere

YouTube's iOS app is a content-forward canvas whose entire job is to surface a 16:9 thumbnail and let you tap it. The feed is a vertical stream of video cards — each one a wide still frame with a red-circled duration tag, a channel avatar, a two-line title, and metadata — arranged edge-to-edge with generous gaps between them. On light mode (the default in recent versions), the app canvas is clinical white (`#FFFFFF`); on dark mode, a near-black `#0F0F0F` that's been the flagship surface since 2017. Whichever mode you're in, the red is the same: YouTube Red (`#FF0000`), an unshifted, saturated, traffic-light red reserved for the Subscribe button, the live indicator, and the play-button logomark. Everything else — backgrounds, text, chrome — is achromatic.

The accent system has one job: mark the verb "Subscribe." When you tap Subscribe, the red pill morphs to a gray "Subscribed" state, the bell icon appears, and a light haptic fires — and that's the only time red ever appears on an action in the UI. Red is otherwise reserved for three static marks: the "LIVE" pill on live-stream thumbnails, the small "•" unread indicator on the subscriptions tab, and the play arrow inside YouTube's logomark. This restraint is what makes YouTube Red instantly iconic — when you see red in this app, you're looking at a brand element, not interactive UI.

Typography is YouTube Sans (proprietary, released in 2017) for display moments — the wordmark, large headers, the video player UI — paired with Roboto for body text (because the app was built by Google and its Material roots still show). On iOS, a fallback stack of SF Pro covers both when the custom fonts are unavailable. The hierarchy is compact: sizes run 11–20pt, weights at 400 / 500 / 700. Video titles sit at 16pt weight 500 with 2-line clamp — the single most common type moment in the app. There are no display-sized hero titles in the feed itself; the thumbnail is the headline, the title is the caption.

**Key Characteristics:**
- White canvas (`#FFFFFF`) in light mode, near-black `#0F0F0F` in dark — both with the same YouTube Red accent
- **YouTube Red** (`#FF0000`) reserved for the Subscribe button and brand marks (logo, LIVE badge, unread dots) — nothing else
- **16:9 video thumbnail** is the atomic unit of the app, with a black duration tag in the bottom-right corner
- 28pt circular channel avatar below the thumbnail, left-aligned, paired with channel name + metadata
- **Shorts tab** ships a TikTok-style vertical video player with right-rail actions
- **Mini-player** — a draggable floating video that persists when navigating away
- Bottom tab bar (5 tabs): Home, Shorts, Create (+), Subscriptions, You
- YouTube Sans (proprietary display) paired with Roboto body; SF Pro fallback
- Haptics on Subscribe, like/dislike, share, and video scrub

## 2. Color Palette & Roles

### Primary
- **YouTube Red** (`#FF0000`): The iconic brand red — Subscribe button (unsubscribed state), LIVE indicator pill, brand logomark (play arrow in the square), the red dot in notification badges, and the progress-fill color on the video scrubber.
- **YouTube Red Pressed** (`#CC0000`): Pressed / active-state variant for red CTAs.
- **Red Hover** (`#E60000`): Slight deepening for web-style hover; matched on iOS as a pressed alt.

### Canvas & Surfaces (Light Mode)
- **Canvas White** (`#FFFFFF`): Primary light canvas — all main feed surfaces.
- **Surface 1** (`#F9F9F9`): Elevated card backgrounds on some sheets, section backing.
- **Surface 2** (`#F2F2F2`): Pressed-state background on list rows and chips.
- **Divider** (`#E5E5E5`): 1pt hairline dividers between list items and sections.
- **Input Background** (`#F2F2F2`): Search bar fill in light mode.

### Canvas & Surfaces (Dark Mode)
- **Canvas Dark** (`#0F0F0F`): Primary dark canvas — YouTube's signature "not-quite-black."
- **Surface 1 Dark** (`#1F1F1F`): Sheet backgrounds, context menu, comment compose.
- **Surface 2 Dark** (`#272727`): Pressed-state on dark rows, hover overlays.
- **Surface 3 Dark** (`#3F3F3F`): Higher elevation — player chrome, sticky headers.
- **Divider Dark** (`#303030`): Hairline dividers in dark mode.

### Text (Light Mode)
- **Text Primary** (`#0F0F0F`): Video titles, channel names, primary headings.
- **Text Secondary** (`#606060`): Metadata — view counts, upload date, channel subscriber count.
- **Text Tertiary** (`#909090`): Timestamps, placeholders, lowest-emphasis labels.
- **Text Disabled** (`#C0C0C0`): Disabled button text.

### Text (Dark Mode)
- **Text Primary Dark** (`#FFFFFF`): Video titles, channel names, headings on dark.
- **Text Secondary Dark** (`#AAAAAA`): Metadata on dark.
- **Text Tertiary Dark** (`#717171`): Lowest-emphasis labels on dark.

### Semantic
- **Live Red** (`#FF0000`): LIVE indicator pill — same token as brand red.
- **Error Red** (`#FF0000`): Playback / network errors, same token.
- **Success Green** (`#3EA6FF` is info, not success — YouTube uses blue): Minimal success states.
- **Info Blue** (`#3EA6FF`): Links inline within descriptions, "Show more," clickable hashtags in comments.
- **Warning Yellow** (`#FFC400`): Rarely used — age-restriction warnings, content advisories.

### Content Accent: Channel & Playlist
- Channel pages accept a custom banner image and an accent color — but this accent never bleeds into the app's chrome. It only appears as a subtle header overlay.

## 3. Typography Rules

### Font Family
- **Primary Display**: `YouTube Sans` (proprietary, released 2017 — rounded geometric sans, close to Nunito / Rubik in feel)
- **Primary Body**: `Roboto` (Google's signature sans — used for video titles, metadata, body copy)
- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif`
- **CJK / Non-Latin**: Platform-native — PingFang SC, Hiragino Sans, Apple SD Gothic Neo, Noto Sans extended
- YouTube Sans is used for the wordmark, the large "Shorts" / "Live" labels, and display moments; Roboto handles everything else

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Screen Title | YouTube Sans | 20pt | 700 | 1.2 | -0.1pt | "Home", "Subscriptions" top nav |
| Video Detail Title | Roboto | 18pt | 600 | 1.3 | -0.1pt | Below the full-player on the video detail page |
| Video Title (Feed) | Roboto | 16pt | 500 | 1.3 | 0pt | Video card title — 2-line clamp — the most common type moment |
| Channel Name | Roboto | 14pt | 500 | 1.3 | 0pt | Below video title, next to channel avatar |
| Metadata | Roboto | 13pt | 400 | 1.3 | 0pt | "1.2M views · 3 days ago" |
| Comment Text | Roboto | 14pt | 400 | 1.4 | 0pt | Comment body on video detail |
| Comment Author | Roboto | 13pt | 500 | 1.3 | 0pt | Username + "• 2 hours ago" |
| Body | Roboto | 14pt | 400 | 1.45 | 0pt | Description, About sections |
| Button (Primary — Subscribe) | Roboto | 14pt | 500 | 1.0 | 0pt | Red Subscribe / gray Subscribed pill |
| Button (Secondary) | Roboto | 14pt | 500 | 1.0 | 0pt | Share, Download, Join, etc. |
| Chip | Roboto | 14pt | 400 | 1.0 | 0pt | Filter chips on Home ("All", "Music", "Gaming") |
| Tab Label | Roboto | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Duration Tag | Roboto | 11pt | 500 | 1.0 | 0pt | "12:34" in bottom-right of thumbnail |
| Timestamp | Roboto | 12pt | 400 | 1.0 | 0pt | "•1:23 / 4:56" on player scrubber |
| Like Count | Roboto | 13pt | 500 | 1.0 | 0pt | "1.2K" under the like icon |
| Shorts Overlay Caption | YouTube Sans | 15pt | 500 | 1.35 | 0pt | Caption on Shorts, shadow-backed |

### Principles
- **Weight concentration at 400 / 500 / 700**: Regular for body, medium for titles and buttons, bold for display
- **No thin, light, or black weights**: The fonts ship with them but the product does not use them
- **Two font families**: YouTube Sans for display, Roboto for body — keep them in their lanes
- **Video titles at 16pt medium**: This is the most common type moment; its weight 500 gives visual weight without being bold
- **View-count metadata compresses**: "1.2M views", "234K views", "1,234 views" — abbreviate above 10K
- **Dynamic Type supported**: Titles, descriptions, and comments scale with user preference; tab labels and duration tags stay fixed
- **Shorts captions need shadow**: Any text over Shorts video gets a subtle `rgba(0,0,0,0.5)` drop shadow for legibility

## 4. Component Stylings

### Buttons

**Subscribe Button (The Iconic Red → Gray Morph)**
- Unsubscribed state:
  - Shape: Rounded rectangle with 18pt corner radius (NOT full pill — YouTube's signature is the rounded rect)
  - Background: `#FF0000`
  - Text: `#FFFFFF`, Roboto 14pt weight 500 ("Subscribe")
  - Padding: 8pt vertical, 16pt horizontal
  - Height: 36pt
- Subscribed state:
  - Background: `#F2F2F2` light / `#272727` dark
  - Text: `#0F0F0F` light / `#FFFFFF` dark ("Subscribed")
  - Often paired with a trailing bell icon (notification toggle) — 16pt SF Symbol bell
- Pressed: opacity 0.85, scale 0.98, light haptic on state change
- Transition: 200ms spring morph between red and gray

**Primary Pill (Sign in / Continue)**
- Used on sign-in flows, creator tools
- Background: `#0F0F0F` (dark text button in light mode) or `#3EA6FF` (blue info button)
- Padding: 10pt vertical, 24pt horizontal
- Corner radius: 18pt (matches Subscribe)
- Text: `#FFFFFF` 14pt weight 500

**Action Button Row (Like / Dislike / Share / Download / Save / Remix)**
- A horizontal pill-group below the video title on the video detail page
- Each button: 36pt tall capsule with light gray background (`#F2F2F2` light / `#272727` dark)
- Leading 20pt SF Symbol glyph + trailing count label (13pt weight 500)
- Corner radius: 18pt, padding 8pt vertical / 12pt horizontal
- Gap between pills: 8pt
- Like: thumbs-up SF Symbol with count ("1.2K"); tap toggles fill and turns `#0F0F0F` solid; no color change (YouTube removed the blue-highlight treatment)
- Dislike: thumbs-down SF Symbol; count is hidden (per 2021 product decision); only the user sees their own dislikes
- Pressed: scale 0.97, light haptic

**Icon Button (Player Controls — Play / Pause / Skip)**
- Glyph size: 32pt (main play/pause), 20pt (skip forward/back, captions, fullscreen)
- Color: `#FFFFFF` over video — always white since the player is on a dark canvas
- Hit area: 44pt
- Pressed: scale 0.9, soft haptic

**Text Button ("Show more", "Sort by")**
- Font: Roboto 14pt weight 500
- Color: `#0F0F0F` light / `#FFFFFF` dark
- No underline, no background

### Cards & Containers

**Video Card (Feed) — The Atomic Unit**
- Width: full screen width
- Structure (top to bottom):
  1. **16:9 thumbnail** — full-width, image fills with no letterbox, no corner rounding (0pt, hard edges) on the feed card itself (some experiments use 12pt; the signature is hard edge)
  2. **Duration tag** — positioned absolute bottom-right of thumbnail, 6pt from corners; background `rgba(0,0,0,0.75)`, text `#FFFFFF` 11pt weight 500, 4pt corner radius, 4pt vertical / 6pt horizontal padding
  3. **LIVE tag** (if live) — top-left of thumbnail; background `#FF0000`, text "LIVE" white 11pt weight 700, same 4pt radius
  4. Metadata row below thumbnail: 12pt top padding, 16pt horizontal padding
     - Left: 28pt circular channel avatar
     - Right stack:
       - Video title: Roboto 16pt weight 500, 2-line clamp with ellipsis, `#0F0F0F` light / `#FFFFFF` dark
       - Channel name + metadata on one line: Roboto 13pt weight 400 `#606060` light / `#AAAAAA` dark — format "Channel Name · 1.2M views · 3 days ago"
     - Trailing: 24pt `ellipsis` overflow icon, 44pt hit
  5. Bottom padding: 16pt (gap before next card)
- Background: transparent (canvas shows through)
- No corner radius on the card itself — cards are flush to screen edges; the thumbnail's hard edges are the defining aesthetic

**Shorts Card (Vertical Video)**
- Full-viewport 9:16 video (width × height of screen)
- Overlays (over the video):
  - Right-rail action stack, 12pt from right, centered vertically 50–90%
    - Creator avatar (44pt circle, 2pt white border) with `+` Subscribe badge
    - Like (thumbs-up) 32pt white + count below (13pt weight 500 white with shadow)
    - Dislike (thumbs-down) 32pt white + count hidden
    - Comment bubble 32pt white + count
    - Share arrow 32pt white
    - Remix icon (music note + play) 32pt
    - Audio disc — 44pt rotating circle showing the audio source cover
  - Bottom-left info: 16pt from left, bottom-align above tab bar
    - `@channel` 15pt weight 500 white
    - Caption YouTube Sans 15pt weight 500 white, 2-line clamp, shadow `rgba(0,0,0,0.5)` 0 1px 3px
    - Audio marquee — music note + "Original audio" or song title, 13pt weight 400 white
  - Progress scrubber at bottom — 2pt tall, track `rgba(255,255,255,0.3)`, fill `#FFFFFF` (not red on Shorts — kept white for minimalism)

**Video Detail (Full Player + Info)**
- Top: 16:9 player, full width — black letterbox if video is not 16:9
- Below player:
  - Title: Roboto 18pt weight 600, can be 2–3 lines, 16pt horizontal / 12pt top padding
  - View count + upload date row: 13pt weight 400 secondary
  - Channel row: 40pt circle avatar + channel name (14pt weight 500) + subscriber count (13pt weight 400 secondary) + **Subscribe pill** trailing right
  - Action button row: horizontal scroll of pills (Like, Dislike, Share, Remix, Download, Save, Report)
  - Description card: 16pt padding, collapsible with "Show more" — contains description, hashtags, chapters, playlist links
  - Comments preview: tap opens comment sheet
  - Up-next recommendations — vertical list of related video cards

**Mini-Player**
- Sits at the bottom of the screen, above the tab bar, when the user swipes down from a full player
- Height: 72pt
- Full width, background `#FFFFFF` light / `#1F1F1F` dark
- Left: 72pt-tall 16:9 thumbnail (128pt wide approx)
- Center: video title 14pt weight 500 (1 line), channel name 12pt weight 400 (1 line)
- Right: Play/pause 20pt SF Symbol + close X 20pt
- Drag up: expands back to full player with shared-element animation
- Drag down past 40pt from bottom: dismisses

**Comment Row**
- 32pt circular avatar leading
- Author + "• 2 hours ago" header row (13pt weight 500 + secondary)
- Comment body (14pt weight 400) with inline link styling
- Action row: thumbs-up + count, thumbs-down, reply button, heart-from-creator badge if applicable (20pt)
- If the creator hearted the comment: a small red heart with their avatar appears below the comment
- Nested replies: indented 40pt, hidden behind a "View replies" button

**Filter Chip Row (Home)**
- Horizontal scroll of chips at the top of Home
- Each chip: 34pt tall pill
- Default: background `#F2F2F2` light / `#272727` dark, text `#0F0F0F` / `#FFFFFF`
- Active: background `#0F0F0F` light / `#FFFFFF` dark, text white / black (full color inversion for the selected chip — YouTube's signature)
- Padding: 8pt vertical, 12pt horizontal
- Corner radius: 500pt (full pill)

### Navigation

**Bottom Tab Bar**
- Height: 56pt + safe area
- Background: `#FFFFFF` light / `#0F0F0F` dark with 1pt top hairline `#E5E5E5` / `#303030`
- 5 tabs: **Home** (house), **Shorts** (short play icon — unique custom glyph), **Create** (centered `+`), **Subscriptions** (subscription-box icon), **You** (user circle or avatar)
- Icon size: 24pt glyph, 44pt hit area
- Active: `#0F0F0F` light / `#FFFFFF` dark (filled variant)
- Inactive: `#606060` light / `#AAAAAA` dark (outlined variant)
- Labels: Roboto 10pt weight 500, shown always
- Create tab: center button is slightly different — on some variants it's a `+` inside a circle outline; when tapped, it opens a modal sheet ("Create a Short", "Upload video", "Go live")
- Unread badge: 8pt `#FF0000` dot at the top-right of the tab icon (shows on Subscriptions and You)

**Top App Bar (Home)**
- Height: 48pt + safe area
- Background: matches canvas
- Leading: YouTube logomark (red play-button in a rounded square + "YouTube" wordmark in YouTube Sans) 24pt tall
- Trailing icons (from right): Cast (TV + wave), Notifications (bell), Search (magnifying glass), Profile avatar (28pt circle) — all 24pt, 16pt gap
- On scroll down: bar compresses / hides with subtle fade
- Filter chip row sits below the app bar — sticky to top when scrolling

**Top Nav (Video Detail / Settings)**
- Height: 44pt + safe area
- Back chevron 24pt leading, title 17pt weight 500 center, trailing overflow 24pt
- Background matches canvas

### Input Fields

**Search Bar (tapped from Home)**
- After tapping the search icon on Home, a full-screen search view takes over
- The top becomes an input field: 44pt tall, 500pt corner radius on the pill side on newer versions (rounded rect 4pt on classic)
- Leading back chevron 24pt; input field takes the full remaining width
- Placeholder: "Search YouTube" 16pt weight 400 `#606060` light / `#AAAAAA` dark
- Trailing: microphone (voice search) + camera (visual search) 24pt icons
- Background: `#F2F2F2` light / `#272727` dark

**Comment Compose**
- Pinned above the keyboard when comments sheet is open
- Background: `#FFFFFF` light / `#0F0F0F` dark with 1pt top border
- Height: 44pt collapsed, expands with content
- Leading: user avatar 32pt circle
- Center: input "Add a comment..." 14pt weight 400 tertiary
- Trailing: send arrow (grayed until non-empty, then `#3EA6FF`)

### Distinctive Components

**The Duration Tag**
- Positioned absolute bottom-right on every thumbnail
- Background `rgba(0,0,0,0.75)` (an opaque dark chip that reads as "official" YouTube style)
- Text `#FFFFFF` 11pt weight 500, 4pt radius, 4pt vertical / 6pt horizontal padding
- Format: "M:SS" for under an hour, "H:MM:SS" for longer
- If a Short: the tag is replaced with a small Shorts glyph or is hidden (Shorts thumbnails are 9:16 and handled differently)

**The Live Indicator**
- Top-left on thumbnails: red pill "LIVE" + small white dot pulsing
- On the video detail page, a rotating live viewer count sits below the channel name
- Red `#FF0000` chip, white text, 11pt weight 700

**The LIVE Pulse**
- Subtle 2-second opacity pulse on the LIVE dot (opacity 1 → 0.6 → 1)
- Indicates active real-time stream

**Subscribe Button Morph**
- Red "Subscribe" pill → gray "Subscribed" pill in 200ms
- Bell icon fades in trailing after subscription
- Success haptic fires on the red-to-gray transition

**Mini-Player Drag-Down**
- Full player + info can be swiped down with a two-finger drag to collapse into the mini-player
- The mini-player persists while the user browses other content — this is YouTube's most distinctive navigation pattern
- Drag mini-player down past threshold: dismisses (video stops)

**Chapters**
- Longer videos show chapter markers on the scrubber — hairline vertical notches on the 1pt track
- Tap chapter: jumps to that timestamp; current chapter title sits above the scrubber

**Heart-from-Creator**
- When a video creator hearts a comment, a small red heart icon overlays the comment, showing the creator's avatar inside
- 20pt heart, creator's 16pt circular avatar offset bottom-right

**Playback Speed Menu**
- A modal sheet from the player's overflow menu
- Options: 0.25x, 0.5x, 0.75x, Normal (1x), 1.25x, 1.5x, 1.75x, 2x
- Selected option has a checkmark and is `#3EA6FF` or bold

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 48, 56
- Video card vertical rhythm: 0pt between thumbnail and metadata, 16pt bottom padding between cards
- Content margin: 0pt on thumbnails (full-width), 16pt on metadata text
- Comment row: 12pt vertical padding, 16pt leading

### Grid & Container
- Feed: single-column full-width on iPhone (cards stack vertically)
- iPad portrait: 2-column grid with 16pt gap
- iPad landscape: 3-column grid
- Shorts: always single-column, 9:16 full-viewport
- Filter chip row: horizontal scroll, no wrap

### Whitespace Philosophy
- **No outer padding on thumbnails**: Thumbnails bleed edge-to-edge for maximum visual weight
- **Generous between-card gaps**: 16pt vertical rhythm gives feed a breathable flow
- **Tight metadata density**: Channel row + title + metadata pack 3 pieces of info in ~56pt vertical space below the thumbnail
- **Shorts are immersive**: Zero chrome; the video IS the UI

### Border Radius Scale
- Square (0pt): Feed thumbnails — YouTube's signature hard edge
- Soft (4pt): Duration tag, LIVE pill, some legacy cards
- Standard (8pt): Some modal content, image previews
- Pronounced (12pt): Bottom sheet top corners
- Rounded Button (18pt): Subscribe, pill buttons in the action row, filter chips
- Full Pill (500pt): Search bar (modern), notification pills
- Circle (50%): Channel avatars, audio discs, close buttons

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Feed cards, most UI |
| Card Lift | `rgba(0,0,0,0.08) 0 2px 8px` | Mini-player, elevated sheets |
| Player Chrome | `rgba(0,0,0,0.3) 0 0 40px` inset-ish gradient | Over video, darkens edges for control visibility |
| Sheet | `rgba(0,0,0,0.2) 0 -8px 24px` | Bottom sheets (share, comments, chapters) |
| Modal Dim | `rgba(0,0,0,0.6)` + no blur | Modal dimming behind sheets |
| Tab Bar Border | 1pt hairline top border `#E5E5E5` / `#303030` | Instead of shadow, YouTube uses a hairline |

**Shadow Philosophy**: YouTube is a mostly flat app. The only components that carry noticeable shadow are the mini-player (which needs to read as floating above content) and bottom sheets. Feed cards have no shadow — they're laid out flat on the canvas, separated only by whitespace. On Shorts, text overlays carry text shadow for legibility but UI buttons do not.

### Motion
- **Subscribe morph**: 200ms spring (damping 0.8) between red and gray states; success haptic on transition
- **Mini-player expand**: Shared-element transition on the 16:9 thumbnail, 0.35s spring, damping 0.8
- **Video card tap**: Light haptic; dim the card 0.95 opacity while loading
- **Like tap**: Thumbs-up fills, 1.0 → 1.15 → 1.0 bounce over 300ms, light haptic
- **Scrubber drag**: Haptic tick every 10% of progress; thumb scales 1.0 → 1.3 during drag
- **Shorts swipe**: 60fps vertical paging, 300ms spring (damping 0.85)
- **Double-tap seek**: Left side -10s, right side +10s, with a semi-transparent arc ripple overlay and "−10" / "+10" label
- **Comment heart-from-creator**: Appear with spring bounce + heart scale 0 → 1.2 → 1.0

## 7. Do's and Don'ts

### Do
- Use `#FFFFFF` as light canvas and `#0F0F0F` as dark — YouTube's signature "near-black," never pure black
- Reserve YouTube Red (`#FF0000`) for the Subscribe button, LIVE indicator, and logomark — nothing else
- Render video thumbnails at full screen width with NO corner radius — hard edges are the signature
- Place the duration tag in the bottom-right of every thumbnail, dark chip, white text
- Pair YouTube Sans (display) with Roboto (body) — keep the two in their lanes
- Use the gray "Subscribed" state after a user subscribes — never leave the red pill active
- Hide the dislike count (reflects 2021+ product decision)
- Use 18pt corner radius on Subscribe and action pills — YouTube's rounded-rect button shape
- Support full color inversion on selected filter chips (black bg / white text when active)
- Animate the mini-player with a shared-element transition from the full player
- Use heart-from-creator overlay for creator-highlighted comments — 20pt red heart with creator avatar
- Use haptics: light on Subscribe, light on like, success on share confirm

### Don't
- Don't use pure black `#000000` for dark canvas — `#0F0F0F` is the brand token (slightly warmer)
- Don't round thumbnail corners on the feed — hard edges are load-bearing aesthetic
- Don't use red on non-Subscribe actions — red is a brand element, not an action accent
- Don't display dislike counts publicly (post-2021 product decision)
- Don't use a full-pill corner on Subscribe — it's 18pt, not 500pt
- Don't use thin or light font weights — 400 / 500 / 700 only
- Don't forget the shadow on Shorts captions — text over video needs `rgba(0,0,0,0.5)` drop shadow
- Don't omit the duration tag — every thumbnail must show runtime
- Don't hide the mini-player when the user navigates away during playback — it's load-bearing UX
- Don't animate the Subscribe morph with a slide — it's an in-place color cross-fade

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Title clamp tighter, chip row shows 4 instead of 5 |
| iPhone 13/14/15 | 390pt | Standard card layout — 16:9 thumbnail ~219pt tall |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | Thumbnail ~242pt tall, more metadata fits inline |
| iPad | 768pt+ | 2–3 column grid, mini-player pins to bottom-right corner |

### Dynamic Type
- Video titles, descriptions, comments: full scale
- Duration tag: **fixed** at 11pt (never scales — layout-sensitive)
- Subscribe button text: fixed at 14pt
- Tab labels: fixed at 10pt
- Shorts caption: fixed size (tight layout)
- Metadata row: scales to ~20% larger maximum to avoid wrapping

### Orientation
- Feed / Subscriptions / You: **portrait-locked**
- Video Detail: **rotates to landscape** — video goes fullscreen, controls overlay
- Shorts: **portrait-locked**
- Comments sheet: portrait-locked (would be weird in landscape)

### Touch Targets
- Subscribe: 36pt pill (hit area expanded to 44pt vertically)
- Video card: full card tappable (thumbnail + metadata as one touch target)
- Overflow icon: 44pt hit
- Player controls: 44pt each
- Shorts action icons: 32pt glyph with 48pt hit area
- Tab bar: 44pt hit

### Safe Area Handling
- Top: status bar / Dynamic Island respected by top app bar
- Bottom: tab bar respects home indicator; mini-player sits above both
- Video player (fullscreen landscape): ignores safe area for video content, respects for controls
- Shorts: respects safe area only for overlays; video extends edge-to-edge

## 9. Agent Prompt Guide

### Quick Color Reference
- Light canvas: `#FFFFFF`
- Dark canvas: `#0F0F0F`
- Surface 1 (light): `#F9F9F9`
- Surface 1 (dark): `#1F1F1F`
- Surface 2 (light): `#F2F2F2`
- Surface 2 (dark): `#272727`
- Divider (light): `#E5E5E5`
- Divider (dark): `#303030`
- Text primary (light): `#0F0F0F`
- Text primary (dark): `#FFFFFF`
- Text secondary (light): `#606060`
- Text secondary (dark): `#AAAAAA`
- YouTube Red: `#FF0000`
- Red pressed: `#CC0000`
- Info blue: `#3EA6FF`

### Example Component Prompts
- "Create a SwiftUI YouTube Subscribe button: 36pt tall rounded rectangle with 18pt corner radius, background `#FF0000`, text 'Subscribe' in Roboto 14pt weight 500 white. 8pt vertical / 16pt horizontal padding. On subscribe: morph background to `#F2F2F2` (light) or `#272727` (dark), text becomes 'Subscribed' in text-primary color, 200ms spring, fire light haptic. Add a trailing bell SF Symbol 16pt when subscribed."
- "Build a YouTube video card: full-width 16:9 thumbnail with NO corner radius and hard edges. Bottom-right of thumbnail: 'M:SS' duration tag on `rgba(0,0,0,0.75)` background, 4pt radius, white text Roboto 11pt weight 500. Below thumbnail: 12pt top padding, 16pt horizontal. 28pt channel avatar leading, then stack of title (Roboto 16pt weight 500, 2-line clamp) and metadata line ('Channel · 1.2M views · 3 days ago' in 13pt weight 400 `#606060`). Trailing: 24pt ellipsis icon."
- "Design the YouTube Shorts player: full-viewport 9:16 vertical video, overlays on top. Right rail (12pt from right): stacked creator avatar with `+` subscribe badge, thumbs-up 32pt white + count, thumbs-down 32pt (count hidden), comment 32pt + count, share 32pt, remix 32pt, and a 44pt rotating audio disc. Bottom-left (16pt from left): `@channel` 15pt weight 500 white, caption YouTube Sans 15pt weight 500 white with `rgba(0,0,0,0.5)` drop shadow, music marquee 13pt weight 400. Bottom progress bar: 2pt tall, track `rgba(255,255,255,0.3)`, fill white."
- "Build the YouTube mini-player: 72pt tall horizontal bar above the tab bar. 128×72pt 16:9 thumbnail leading, center column with video title 14pt weight 500 (1 line) and channel name 12pt weight 400 (1 line), trailing play/pause 20pt SF Symbol and close X 20pt. Background `#FFFFFF` light / `#1F1F1F` dark. Drag up: animate shared-element expansion into full player. Drag down 40pt+: dismiss."
- "Create the YouTube action pill row: horizontal scroll below video title on detail page. Each pill: 36pt tall capsule, background `#F2F2F2` light / `#272727` dark, 18pt radius, leading 20pt icon + trailing count label 13pt weight 500. Pills in order: Like (thumbs-up + '1.2K'), Dislike (thumbs-down, no count), Share, Remix, Download, Save. 8pt gap between pills."
- "Build the YouTube filter chip row on Home: horizontal scroll of 34pt-tall pills. Default chip: background `#F2F2F2` light / `#272727` dark, text `#0F0F0F` / `#FFFFFF` 14pt weight 400, 8pt vertical / 12pt horizontal padding, 500pt corner radius (full pill). Active chip: full color inversion — background becomes `#0F0F0F` / `#FFFFFF`, text becomes white / black. Tap: crossfade 200ms with selection haptic."

### Iteration Guide
1. Canvas is `#FFFFFF` in light and `#0F0F0F` in dark — never pure black
2. YouTube Red `#FF0000` is for the Subscribe button and brand marks (LIVE, logo, unread dots) — not a generic accent
3. Thumbnails bleed edge-to-edge with NO corner radius — hard edges are the signature
4. Duration tag is non-negotiable — every thumbnail shows its runtime in the bottom-right
5. Subscribe button uses 18pt corner radius (rounded rectangle, not full pill)
6. Typography: YouTube Sans (display) + Roboto (body), weights 400 / 500 / 700
7. After subscribing, the red morphs to gray — 200ms spring with haptic
8. Filter chips invert fully when selected (black bg / white text)
9. Dislike count is hidden (post-2021 decision)
10. Mini-player persists above the tab bar when user navigates during playback — load-bearing UX
11. Shorts is portrait-only 9:16 with floating overlays; Subscribe button appears as `+` on the avatar
12. Haptics: light on Subscribe / Like, success on share confirm, selection on filter chip