Design reference

YouTube / Public web reference / 2026.09

Routes, shells and page families

Read navigation as a change of task. A watch page prioritizes playback; a channel page organizes an identity and its collections.

All entries shown

Family and routeTask and compositionLocal recipe
Home · /Fresh signed-out home retains global chrome and a search-first empty state.Home empty state
Search · /results?search_query=…Query, selected chips, Filters panel and stacked media rows. Preserve the query on return.Search results
Watch · /watch?v=…Player, video identity, channel/action row, description, comments and related videos.Watch unavailable · Playable local media fixture
Channel · /@handleIdentity header, local tabs and media shelves.Channel home
Channel videos · /@handle/videosSame identity plus sort controls and a grid of videos.Channel videos
Channel Shorts · /@handle/shortsPortrait-card collection, distinct media geometry.Channel Shorts
Playlist · /playlist?list=…Collection identity, ordered video rows and playback entry.Playlist
Shorts · /shorts/…Portrait viewer with adjacent interaction stack and next/previous movement.Shorts viewer
History · /feed/historySigned-out history boundary with a sign-in entry.History gate
Subscriptions · /feed/subscriptionsSigned-out gate before personalized subscription content.Subscriptions gate
Premium · /premiumPublic benefit communication and purchase entry. Transaction completion excluded.Premium landing · Alternate Lite explainer

Region ownership

RegionGeometry and responsibilityInput and scroll
Masthead56 px high; top anchored; 16–24 px horizontal insets. Search owns its input, clear action and submit action.First persistent navigation landmark. Search text does not disappear when the guide changes.
Expanded guide240 px desktop width. Groups use separators and 40 px rows. Page content starts after the guide.Independent vertical overflow. Active destination is a navigation state, not a toggle.
Task canvasSearch uses stacked rows; channels use shelves/grids; watch uses a player and secondary rail.Document scrolling unless a specimen explicitly names a scroll container.
Transient layerMenus anchor to their trigger; modal dialogs own focus and a scrim.Escape dismisses the top layer and restores focus. A menu never changes the route before item activation.

Independent route inventory

IDRoute/familyEvidence/status
home/
search/results?search_query=music
watch/watch?v=dQw4w9WgXcQ
channel/@YouTube
playlist/playlist?list=PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI
shorts/shorts
trending/feed/trending
subscriptions/feed/subscriptions
history/feed/history
premium/premium
Reconstructed reference contract. Measured masthead and guide dimensions come from evidence/captures/home--desktop.json. Responsive rules in the local code are reconstructed unless an explicit source comparison is linked.