A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
1radius steps
8pxspacing base
YouTube, in one page
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#0F0F0Fin 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
Do's and don'ts
Do
- Use
#FFFFFFas light canvas and#0F0F0Fas 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
#000000for dark canvas —#0F0F0Fis 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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the YouTube design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- YouTube Red: #ff0000
- YouTube Red Pressed: #cc0000
- Red Hover: #e60000
- Canvas White: #ffffff
- Surface 1: #f9f9f9
- Surface 2: #f2f2f2
- Divider: #e5e5e5
- Input Background: #f2f2f2
- Canvas Dark: #0f0f0f
- Surface 1 Dark: #1f1f1f
Type:
- families: YouTube Sans, Primary Display, Roboto, Primary Body
- scale: 10, 11, 12, 13, 14, 15, 16, 18, 20
- weights: 400, 500, 600, 700
Shape:
- radius: 18
- elevation: Like (thumbs-up) 32pt white + count below (13pt weight 500 white with shadow)
Spacing: 8, 10, 16
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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 (
#3EA6FFis 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.
Type scaleRead the full spec
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
Components and layoutRead the full spec
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:
#F2F2F2light /#272727dark - Text:
#0F0F0Flight /#FFFFFFdark ("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:
#FFFFFF14pt 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 (
#F2F2F2light /#272727dark) - 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
#0F0F0Fsolid; 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:
#FFFFFFover 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:
#0F0F0Flight /#FFFFFFdark - 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#FFFFFF11pt 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,
#0F0F0Flight /#FFFFFFdark - Channel name + metadata on one line: Roboto 13pt weight 400
#606060light /#AAAAAAdark — format "Channel Name · 1.2M views · 3 days ago" - Trailing: 24pt
ellipsisoverflow 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
@channel15pt 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
#FFFFFFlight /#1F1F1Fdark - 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
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-youtube {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0f0f0f;
--heading-color: #0f0f0f;
--link-color: #eb0000;
--link-hover-color: #b80000;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(15,15,15,0.06);
--card-hover-shadow: 0 6px 18px rgba(15,15,15,0.12);
--header-bg: #0f0f0f;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #636363;
--button-bg: #ff0000;
--button-text-color: #000000;
--button-hover-bg: #cc0000;
--button-border: none;
--button-border-radius: 18px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #0f0f0f;
--button-secondary-hover-bg: #e2e2e2;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0f0f0f;
--base-font: var(--font-helvetica);
--heading-font: var(--font-roboto);
--card-border-radius: 18px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- coffee meets bagel 80.3%
- character ai 77.2%
- sanu 76.3%
- figma 75.0%
- zwift 73.9%
Where this came from
- Source document
ios/design-md/video/youtube/DESIGN.md· 29.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.