YouTube / Public web reference / 2026.09

Build with YouTube’s visual language.

A working reference for the signed-out web experience. Start with a route, inspect its components, then copy the local contract.

All entries shown

Public webMeasured geometryRunnable examplesReconstructed contracts

Captured YouTube interface used as research evidence

Open live examples

Rendered page recipes

Search, watch, channels and account gates assembled with reusable local components.

Reference chapter

Find a component

Anatomy, state, spacing and the exact specimen to open.

Reference chapter

Read the foundations

Roboto, neutral surfaces, pill controls and content-first spacing.

Reference chapter

Understand the product

Persistent chrome, viewing routes, channel context and public access boundaries.

Reference chapter

Handle the difficult cases

An empty feed, unavailable video, long title and signed-out action each need different feedback.

Reference chapter

Inspect the evidence

Original screenshots, source traces, recovery attempts and measured contracts.

What this reference covers

YouTube puts video content ahead of interface decoration. A 56 px masthead and a 240 px expanded desktop guide frame search, channel collections and playback. Metadata recedes in gray. Dark selected chips, thin borders and pill actions carry most state changes. Red identifies YouTube and playback progress; it is not a general primary-button color.

Masthead · menu · brand · search · account

Guide

Home
Shorts
Subscriptions
History

Contextual tabs and filters

Media or collection canvas

Reconstructed reference contract. The shell diagram is an original documentation aid. The live recipes reconstruct public YouTube compositions; they do not connect to YouTube accounts, recommendations, billing or media services.

Scope and audience

Included	Boundary and practical effect
Signed-out browser	Public navigation, search, video and channel representations, observed playback and failure states, account gates and public Premium communication.
Supported reference	Static HTML, CSS and JavaScript in Chromium at 390, 768, 1440 and 1920 px. The guide includes local keyboard, responsive and reduced-motion contracts.
Excluded private verification	Studio publishing, moderation queues, personalized subscriptions/history, billing completion and account permission administration. Public help informs the boundary, not a claim of direct observation.
Separate product families	YouTube Music, YouTube TV, YouTube Kids, mobile native apps and creator Studio are discovered neighbors, not independently complete implementations in this consumer web reference.