YouTube Design System

YouTube's signed-out home does something none of its streaming peers do: it loads directly into the chrome itself, with no marketing hero, no pricing tier, no testimonial wall. The viewport opens to a 240px left navigation rail carrying the YouTube wordmark with its saturated red play-button mark, five icon-and-label rows ("Home," "Shorts," "Subscriptions," "You," "History"), a "Sign in to like videos" prompt with a blue auth pill, an "Explore" group ("Music," "Gaming," "News"), a "More from YouTube" group (Premium, Music, Kids), and a footer link strip ("About," "Press," "Copyright"). The centered top bar holds a search field rounded to 100px paired with a 50% circular microphone button. The content well is mostly empty — a single "Try searching to get started" card sits centered, rendered in YouTube Sans at 20px weight 600. The page is, effectively, the application UI without the videos.

The chromatic move is restraint. The saturated red of the play-button mark is scoped to the wordmark only — it does not fill the "Sign in" CTA (that role goes to the saturated Google blue at `#065fd4`), it does not appear on hover, and it does not anchor any feature highlight. The rest of the chrome runs in a near-black ink `#0f0f0f` (`--yt-sys-color-baseline--text-primary`) that carries 238 of the captured page hits across text and border tones combined. A pure-white canvas fills the content well; a mid-grey `#606060` carries secondary labels like "Sign in to like videos" and timestamp captions; a softer grey `#909090` handles the search-field placeholder and disabled icon states. The brand-red voltage of the play mark is the only saturated chromatic moment on the page that isn't blue.

The DESIGN.md file packages the signed-out shell as a machine-readable spec for React tooling. Inside: 12 color tokens covering the load-bearing near-black ink, the pure-white canvas, three structural greys for secondary text, the brand red scoped to the wordmark, the Google blue scoped to auth, plus two utility shades for dividers and shadows; 8 typography tokens spanning YouTube Sans at 20px / 600 for the centered prompt heading down to Roboto at 12px / 400 for nav captions; six radii topped by a 100px search pill and bottoming at 10px for the dominant tap target; and 13 component recipes covering the icon rail, the search bar, the navigation rows, the blue Sign in pill, and the empty-state prompt card. Feed it to Claude or Cursor and the agent reproduces YouTube's specific moves: brand red as wordmark voltage only, blue as auth, monochrome near-black as everything else, 100px search pill paired with 10px tap targets, and a Roboto chrome with YouTube Sans reserved for headlines.