--- version: alpha name: "YouTube" website: "https://www.youtube.com" description: >- A video-platform brand whose signed-out home renders as the chrome itself rather than as a marketing surface — a 240px left navigation rail running the YouTube Sans wordmark with the saturated red play-button mark, five icon nav rows in the near-black ink, a centered top search pill rounded to 100px, and an empty content well carrying a single 20px YouTube Sans prompt card. The brand voltage sits inside the play-button mark only; the rest of the chrome runs monochrome near-black on white, with a brand blue holding the "Sign in" pill and a structural mid-grey carrying secondary labels. The system prefers Roboto for chrome and reserves YouTube Sans for headlines, and rounds tap targets to a 10px default while keeping the search field fully circular. seo: title: "YouTube Design System for React — play-button red, Roboto chrome, 13 components" metaDescription: "YouTube's signed-out home as a DESIGN.md file. Play-button red brand voltage, Roboto + YouTube Sans, 100px search pill, 12 colors, 13 components. For React, Next.js, and AI tools." highlights: - "Play-button red as scoped voltage — the saturated brand red appears only on the wordmark play mark, never as a CTA fill or hover state" - "100px circular search pill — the top search field is the system's only fully-rounded geometry, paired with a 50% circular microphone button" - "Two-typeface split — YouTube Sans carries the wordmark and the centered prompt h2, Roboto carries every nav label and secondary caption" - "Brand blue handles auth — the Sign in pill fills with a saturated Google blue rather than the brand red, scoping the play-button mark to product identity only" - "Near-black not pure black — the dominant chrome ink is #0f0f0f, used 238 times across text and hairlines, with pure black reserved for surface dividers" tags: - "Music, Video & Streaming" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.youtube.com" title: "YouTube — official site" description: "Google's video platform — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is YouTube's primary brand color?" answer: "YouTube's brand voltage is the saturated red on the play-button mark of the wordmark. The CSS exposes it through the deprecated brand-red token and a baseline static-brand-red variable, with a contrast variant wired as the brand-red-contrast deep-crimson reserved for error indicators. The brand red is scoped to the wordmark and the play-button mark only — it does not fill the Sign in CTA (that role goes to the Google blue wired as the call-to-action token), it does not appear on hover, and it does not anchor any feature highlight on the signed-out home. Where Netflix paints its entire identity in a brand red and reaches for it on CTAs, YouTube treats the play-button red as a logo-only voltage and lets the chrome stay monochrome." - id: "typography" title: "What typeface does YouTube use, and what should I use as a substitute?" answer: "YouTube runs a two-typeface system. YouTube Sans (a custom Google-commissioned display sans) handles the wordmark, the centered prompt heading 'Try searching to get started' (20px weight 600 with 28px line-height), and any other H1 / H2 surface. Roboto carries every other text surface — the 14px / 400 nav labels (count 14 in the extraction), the 13px / 500 link captions (count 12), the 14px / 500 chip labels (count 3), the 16px / 500 search-pill heading (count 2), the 24px / 900 black-weight emphasis label (count 1), and the 12px / 400 nav captions (count 1). YouTube Sans is proprietary; the closest open-source substitute for it is Manrope or Plus Jakarta Sans at the same sizes. Roboto is free under the Apache License — paste it into a self-hosted React project with no licensing concern." - id: "shape-language" title: "What does YouTube's shape vocabulary look like?" answer: "The radius scale is a three-tier ladder: 10px tap-target chrome, 18px section blocks, and 100px / 50% pill rounds. The 10px tier carries 26 of the captured radii — the nav row tap targets, the prompt card, the sidebar icon backgrounds. The 18px tier carries 7 — the Sign in pill, the chip-style filter buttons. The 100px and 50% tiers carry the search field (rendered effectively as a full pill) and the microphone button (rendered as a perfect circle). There is no 4px or 6px tight tier — the system rounds everything generously, and the contrast between the 10px chrome default and the 100px search pill is the system's defining shape moment." - id: "blue-sign-in" title: "Why is the Sign in button blue rather than the YouTube red?" answer: "The Sign in pill renders in `#065fd4` — the saturated Google blue wired into CSS as `--yt-sys-color-baseline--call-to-action`. This is a deliberate scoping choice: YouTube is part of the Google product family, and Sign in across Google products (Search, Drive, Gmail, Photos) uses the same blue Sign in chip. Filling the YouTube Sign in pill with the brand red would conflict with the cross-product convention and would also overload the play-button red, which is scoped to product identity. The blue pill at 18px radius with a circular avatar icon left of the label is the same component shipped across the Google product surface." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React video-platform site?" answer: "Yes — feed it to Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce YouTube's specific moves: brand red scoped to the wordmark only, blue scoped to auth, monochrome near-black across the rest of the chrome, 240px left icon rail with five primary nav rows, 100px circular search pill paired with a 50% circular microphone button, and a content well that loads empty rather than as a marketing surface. The 12 color tokens, 8 typography levels, six radii, and 13 component recipes are quoted values you can paste into Tailwind config or CSS variables. The one move worth borrowing carefully: the empty-content-well treatment only works for products with a strong signed-in feed identity — for a marketing site, you still need the hero." mockups: - "marketing-hero" - "media-grid" colors: primary: "#c30027" primary-blue: "#065fd4" ink: "#0f0f0f" ink-strong: "#000000" ink-mute: "#606060" ink-stone: "#909090" ink-soft: "#717171" canvas: "#ffffff" hairline: "#d3d3d3" divider: "#eeeeee" cta-deep: "#0556bf" link-inverse: "#3ea6ff" typography: display-md: fontFamily: "\"YouTube Sans\", Roboto, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 28px letterSpacing: 0 display-emphasis: fontFamily: "Roboto, Arial, sans-serif" fontSize: 24px fontWeight: 900 lineHeight: 32px letterSpacing: 0 heading-md: fontFamily: "Roboto, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 22px letterSpacing: 0 body-md: fontFamily: "Roboto, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 body-strong: fontFamily: "Roboto, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0 chip-label: fontFamily: "Roboto, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 36px letterSpacing: 0 caption-strong: fontFamily: "Roboto, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 18px letterSpacing: 0 caption: fontFamily: "Roboto, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0 rounded: none: "0px" md: "10px" lg: "12px" xl: "18px" pill: "40px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "12px" md: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "120px" components: side-rail: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px" nav-row: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "0px 12px" height: "40px" nav-row-active: backgroundColor: "{colors.divider}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.md}" padding: "0px 12px" height: "40px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" padding: "16px 24px 0px" top-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 16px" height: "56px" search-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.full}" padding: "1px 0px" height: "40px" borderColor: "{colors.hairline}" search-icon-button: backgroundColor: "{colors.divider}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: "0px" height: "40px" sign-in-pill: backgroundColor: "transparent" textColor: "{colors.primary-blue}" typography: "{typography.body-strong}" rounded: "{rounded.xl}" padding: "6px 12px 4px" height: "36px" borderColor: "{colors.hairline}" empty-state-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: "16px 24px" borderColor: "{colors.divider}" empty-state-caption: backgroundColor: "transparent" textColor: "{colors.ink-mute}" typography: "{typography.body-md}" sidebar-prompt: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "16px 24px" footer-link: backgroundColor: "transparent" textColor: "{colors.ink-mute}" typography: "{typography.caption-strong}" padding: "0px 4px" wordmark: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px 16px" --- ## Overview YouTube's signed-out home does something none of its streaming peers do. **Chrome as canvas.** Where Netflix, Hulu, and Max load into a marketing carousel of poster art with a saturated CTA pinned to a hero, YouTube loads directly into the application shell — a 240px left navigation rail, a centered search bar, and an empty content well with a single "Try searching to get started" prompt card. There is no hero band, no feature grid, no pricing tier, no testimonial wall. The page is the chrome, and the chrome is the pitch. The chromatic discipline reinforces the move. The saturated red of the play-button mark on the wordmark is scoped to the logo only — it does not fill the "Sign in" CTA (that role goes to the saturated Google blue at `{colors.primary-blue}` — #065fd4), it does not appear on hover, and it does not anchor any feature highlight. The rest of the chrome runs monochrome near-black on white: `{colors.ink}` (#0f0f0f) carries 238 of the captured page hits across text and hairlines combined; `{colors.canvas}` (pure white) fills the content well; three structural greys (`{colors.ink-mute}` at #606060, `{colors.ink-stone}` at #909090, `{colors.hairline}` at #d3d3d3) carry secondary text, placeholder text, and divider tones. The brand-red voltage of the play mark and the brand-blue voltage of the Sign in pill are the only saturated chromatic moments on the page. The shape vocabulary is a three-tier ladder. The dominant `{rounded.md}` 10px radius carries 26 of the captured radii — every nav row tap target, the prompt card, the sidebar icon backgrounds. The `{rounded.xl}` 18px tier handles the Sign in pill and chip-style filter buttons. The `{rounded.full}` 100px tier handles the search field and the 50% circular microphone button. There is no 4px or 6px tight tier; the contrast between the 10px chrome default and the 100px search pill is the system's defining shape moment. **Key Characteristics:** - Play-button red brand voltage (`{colors.primary}` — #c30027 in the captured contrast variant, with the canonical `--yt-deprecated-brand-youtube-red` token also wired in CSS) is scoped to the wordmark mark only. - Sign in CTA fills with the Google blue `{colors.primary-blue}` (#065fd4) — a cross-product convention used across Google's surface. - Near-black ink `{colors.ink}` (#0f0f0f) carries 238 of the captured occurrences (120 text, 118 border) — the system's dominant tone. - 100px search pill paired with a 50% circular microphone button — the only fully-rounded geometry on the page. - 10px default tap-target rounding across nav rows, prompt cards, and chrome backgrounds — the system's structural radius. - Two-typeface split — YouTube Sans for the wordmark and centered prompt heading, Roboto for every other label and caption. - Empty content well — no marketing hero, no feature grid, no pricing band — just the application shell itself. - 240px left navigation rail with five primary nav rows, a Sign in card, an Explore section, a More from YouTube section, and a footer link strip. ## Colors ### Brand - **Play-Button Red** (`{colors.primary}` — #c30027): frequency 0 on the captured signed-out home, but declared as `--yt-sys-color-baseline--brand-red-contrast` and `--paper-input-container-invalid-color`. The canonical `--yt-deprecated-brand-youtube-red` token is wired in CSS and renders on the wordmark play-button mark inside the YouTube logo SVG; the contrast variant captured here is the rendered token. Scoped to the wordmark mark only — never on a CTA, never on hover. - **Primary Blue** (`{colors.primary-blue}` — #065fd4): frequency 30. Used as text (16), border (14). Wired as `--yt-sys-color-baseline--call-to-action`. The Sign in pill text color and the brand-blue auth voltage shared across Google products. - **CTA Deep** (`{colors.cta-deep}` — #0556bf): frequency 0. Wired as `--yt-sys-color-baseline--call-to-action-hover`. The hover-state darker variant of the primary blue, reserved for the Sign in pill press state. - **Link Inverse** (`{colors.link-inverse}` — #3ea6ff): frequency 0. Wired as `--yt-deprecated-light-blue` and `--yt-sys-color-baseline--call-to-action-inverse`. The lighter brand-blue used for inline links rendered on dark surfaces (the dark-mode variant of the system, not visible on the captured light home). ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 6 as background. The pure-white content well, top bar, and side rail surface. Wired as `--light-theme-background-color` and `--yt-sys-color-baseline--base-background`. ### Text - **Ink** (`{colors.ink}` — #0f0f0f): frequency 238 — 120 as text, 118 as border. The system's dominant chrome tone. Wired as `--yt-sys-color-baseline--text-primary` and `--paper-menu-color`. Used for all nav row labels, the wordmark text, the prompt heading, and every border that needs to read as ink. - **Ink Strong** (`{colors.ink-strong}` — #000000): frequency 173 — 84 as text, 85 as border, 3 as background, 1 as shadow. Pure black; wired as `--yt-sys-color-baseline--static-clear-black` and `--yt-deprecated-black-pure`. Used for SVG icon fills and surface dividers; coexists with `{colors.ink}` rather than replacing it. - **Ink Mute** (`{colors.ink-mute}` — #606060): frequency 30 — 15 as text, 15 as border. Wired as `--yt-sys-color-baseline--text-secondary`. Used for the "Sign in to like videos" caption, the "Start watching videos" sub-caption, and the divider tones around sidebar groups. - **Ink Stone** (`{colors.ink-stone}` — #909090): frequency 4 — 2 as text, 2 as border. Wired as `--yt-sys-color-baseline--text-disabled`. The search-field placeholder color and disabled icon button state. - **Ink Soft** (`{colors.ink-soft}` — #717171): frequency 0. Wired as `--secondary-text-color` and `--light-theme-secondary-color`. Reserved for a tertiary text tier not visible on the captured surface. ### Hairline - **Hairline** (`{colors.hairline}` — #d3d3d3): frequency 1 as border. Wired as `--ytd-searchbox-border-color` and `--light-theme-divider-color`. The search-field outline tone and the divider rule between sidebar sections. - **Divider** (`{colors.divider}` — #eeeeee): frequency 1 as shadow. Wired as `--yt-sys-color-baseline--keyboard-background` and `--yt-sys-color-baseline--outline-opaque`. The hover-fill background for nav rows and the surface tone for the microphone icon button. ## Typography ### Font Families The system runs two faces. **YouTube Sans** (custom Google-commissioned display sans, declared as `"YouTube Sans", Roboto, sans-serif`) handles the wordmark and the centered prompt heading "Try searching to get started." **Roboto** (declared as `Roboto, Arial, sans-serif`) handles every other text surface — nav row labels, link captions, chip labels, search-pill text, sidebar group headings, footer links. The split is the typographic signature: YouTube Sans claims the brand voice for the wordmark and the one centered heading, then steps back and lets Roboto carry the entire chrome. There is no editorial serif, no monospace face, and no display-tier swap below the prompt heading. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-md}` | 20px | 600 | 28px | Centered prompt heading "Try searching to get started" (YouTube Sans) | | `{typography.display-emphasis}` | 24px | 900 | 32px | Black-weight emphasis label (Roboto) — count 1 in extraction | | `{typography.heading-md}` | 16px | 500 | 22px | Search-pill input text and section headings | | `{typography.body-md}` | 14px | 400 | 20px | Default nav-row label text | | `{typography.body-strong}` | 14px | 500 | 20px | Active nav-row label and chip-style filter buttons | | `{typography.chip-label}` | 14px | 500 | 36px | Inline chip labels — count 3 in extraction | | `{typography.caption-strong}` | 13px | 500 | 18px | Link captions and footer link strip | | `{typography.caption}` | 12px | 400 | 18px | Sub-caption text and metadata labels | ### Principles The typographic ladder is compressed. The largest text on the signed-out home is the 24px / 900 black-weight emphasis label that appears once in the captured DOM; the next step is the 20px / 600 YouTube Sans prompt heading; the next is the 16px / 500 search-pill text. There is no 48px hero display, no 32px sub-display, no editorial display tier — the system is built for an application shell, not for a marketing page. Body and nav text sit at 14px / 400 across the side rail; secondary labels drop to 13px / 500 or 12px / 400. YouTube Sans appears exactly twice on the captured surface — once on the wordmark, once on the centered prompt heading. Every other label is Roboto. This restraint is the typographic discipline: the proprietary face stakes a brand claim where it matters most and yields the rest of the chrome to the open-source workhorse. ### Note on Font Substitutes YouTube Sans is proprietary. The closest open-source substitutes for it are **Manrope** or **Plus Jakarta Sans** at the same sizes — both carry comparable cap height and a similarly geometric counter shape. Roboto is free under the Apache License — paste it into a self-hosted React project with no licensing concern. The system mono stack is not declared on the captured surface; if a code font is needed, Roboto Mono is the closest within-family match. ## Layout ### Spacing System - **Base unit:** 12px (`{spacing.base}`) — the dominant gap value, with 13 captured occurrences as `0px 12px` horizontal padding. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 120px. - **Nav row padding:** `{spacing.base}` 12px horizontal, 40px tap-target height — matched to the icon rail's tap-target rhythm. - **Section padding:** 16x24px top, 16px between groups; 120px bottom margin reserved for the page's tail breathing room. - **Top bar:** 0x16px padding, 56px height — flush left for the hamburger and wordmark, centered for the search field, flush right for the icon cluster. ### Grid & Container - **Left rail:** 240px fixed width. Holds five primary nav rows, the Sign in card, an Explore section, a More from YouTube section, and a footer link strip. - **Top bar:** 56px fixed height across the full viewport width. Hamburger + wordmark flush-left, search field centered at ~720px max-width with a 40px circular microphone button to its right, three-dot icon and Sign in pill flush-right. - **Content well:** fills the remaining viewport. Holds a single centered prompt card on the signed-out home; intended to fill with the video grid once signed in. ### Rhythm The signed-out home reads as a single application shell rather than as a stack of editorial bands. The left rail carries the entire navigation surface; the top bar carries the search and auth surface; the content well is intentionally empty. The rhythm comes from the sidebar's group dividers — sections are separated by 12px gaps and a 1px `{colors.hairline}` rule rather than by atmospheric transitions. The page is dense by intention, not by accident. ## Elevation The system has essentially **no shadow tier** on the captured signed-out home. The 1 captured shadow occurrence sits on `{colors.divider}` (#eeeeee) at low opacity — a faint elevation under the prompt card. Everything else is flat. - **Flat (no shadow):** the entire side rail, top bar, search field, and content well — 99% of surfaces. - **Prompt card elevation:** the centered "Try searching to get started" card sits with a single faint divider-tone shadow halo, the only meaningfully-elevated element on the page. - **Hairline outlines:** `{colors.hairline}` (#d3d3d3) marks the search field outline; the rest of the chrome uses tonal contrast rather than borders. ## Shapes The radius scale is a three-tier ladder: - `{rounded.none}` 0px — the page-level chrome surfaces (top bar, side rail). - `{rounded.md}` 10px — 26 occurrences. The dominant tap-target radius across nav rows, the prompt card, and sidebar icon backgrounds. - `{rounded.lg}` 12px — 2 occurrences. Inline filter chips and a single component variant. - `{rounded.xl}` 18px — 7 occurrences. The Sign in pill, chip-style filter buttons, the "Skip navigation" affordance. - `{rounded.pill}` 40px — 1 occurrence. A single secondary CTA pill variant. - `{rounded.full}` 9999px — covers the 100px and 50% extreme radii: the search field renders as a fully-rounded pill, and the microphone button renders as a perfect circle. The contrast between the 10px chrome default and the 100px search pill is the system's defining shape moment. There is no 4px or 6px tight tier — the system rounds everything generously. ## Components **`side-rail`** — White `{colors.canvas}` fill, 240px fixed width. Holds five primary nav rows, a Sign in card, an Explore group, a More from YouTube group, and a footer link strip. 12px internal padding around grouped sections. **`nav-row`** — Transparent fill, `{colors.ink}` text in `{typography.body-md}` (14px / 400). 10px `{rounded.md}` radius, 0x12 padding, 40px height. Inactive state — no background until hover. **`nav-row-active`** — `{colors.divider}` fill (the hover/active background tone), bold `{typography.body-strong}` (14px / 500) label. Same 10px radius and 40px height as the inactive row. The "Home" row is shown active on the captured render. **`section-heading`** — Bold `{typography.heading-md}` (16px / 500) labels — "Explore," "More from YouTube" — sit above grouped nav rows with 16x24 padding. **`top-bar`** — White surface, 56px height, 0x16 padding. Holds the hamburger menu icon, the YouTube wordmark, the centered search field, the microphone button, the three-dot overflow menu, and the Sign in pill. **`search-pill`** — White fill, ink text in `{typography.heading-md}` (16px / 500), `{rounded.full}` 100px radius, 40px height, 1px `{colors.hairline}` border. The placeholder text "Search" renders in `{colors.ink-stone}` (#909090). To the right sits a paired 50% circular search icon button. **`search-icon-button`** — `{colors.divider}` (#eeeeee) fill, `{rounded.full}` 50% radius, 40x40 size. The search-submit icon button at the right edge of the search field, paired with a free-standing microphone button to its right at the same dimensions. **`sign-in-pill`** — Transparent fill, `{colors.primary-blue}` (#065fd4) text in `{typography.body-strong}` (14px / 500), `{rounded.xl}` 18px radius, 6x12 padding, 36px height. 1px `{colors.hairline}` border. A circular blue avatar icon sits left of the "Sign in" label. The pill repeats twice — once in the top bar and once inside the side rail card. **`empty-state-card`** — White fill, `{rounded.lg}` 12px radius, 16x24 padding. Centered in the content well. Holds the 20px YouTube Sans prompt heading and a 14px caption beneath. A faint shadow halo provides the only elevation on the page. **`empty-state-caption`** — `{colors.ink-mute}` (#606060) text in `{typography.body-md}` (14px / 400). Sits below the prompt heading: "Start watching videos to help us build a feed of videos you'll love." **`sidebar-prompt`** — `{colors.ink}` text in `{typography.body-md}` with 16x24 padding. The "Sign in to like videos, comment, and subscribe." prompt above the Sign in pill in the side rail. **`footer-link`** — `{colors.ink-mute}` text in `{typography.caption-strong}` (13px / 500), 0x4 horizontal padding. The footer strip "About / Press / Copyright / Contact us / Creators / Advertise / Developers" inline links. **`wordmark`** — The YouTube logotype: "YouTube" in `{colors.ink}` paired with the saturated red play-button mark to its left. 0x16 padding around the SVG. Sits flush-left in the top bar next to the hamburger menu. ## Do's and Don'ts **Do** scope the play-button red (`{colors.primary}`) to the wordmark mark only. The saturated red is the system's product-identity signal — placing it on a CTA fill or a hover state would conflict with the Google-blue auth voltage and overload the play-button mark beyond recognition. **Do** fill the Sign in pill with `{colors.primary-blue}` (#065fd4) rather than with the brand red. The blue is the cross-Google auth convention — the same component is shipped across Search, Drive, Gmail, and Photos. Filling with the brand red would break the convention. **Do** keep the chrome monochrome below the wordmark. The near-black ink `{colors.ink}` (#0f0f0f) carries 238 of the captured page hits — every nav row label, every hairline, every prompt heading. Adding a second chromatic accent dilutes the play-button red and the auth blue. **Do** pair a 100px search pill with a 50% circular microphone button. The fully-rounded geometry on these two elements is the system's defining shape moment — the contrast with the 10px tap-target default makes the search the visual focus of the top bar. **Don't** drop the chrome ink to pure `#000000` for nav row labels. The captured chrome uses `{colors.ink}` (#0f0f0f), not `{colors.ink-strong}` (#000000). The two coexist in the system — `{colors.ink-strong}` is reserved for SVG icon fills and surface dividers, while `{colors.ink}` carries every text label. **Don't** add a 4px or 6px tight radius tier. The system rounds everything generously starting at 10px — adding a tight tier would feel borrowed from a dev-tools system (Linear, Vercel) and break the YouTube shape language. **Don't** load the signed-out home with a marketing hero. The empty-content-well treatment is the system's defining structural move — replacing it with a feature carousel, pricing band, or testimonial wall pushes the page into the Netflix / Hulu register that YouTube specifically avoids. **Don't** render the wordmark text in YouTube Sans at any size other than the canonical wordmark scale. YouTube Sans appears exactly twice on the captured surface — wordmark and centered prompt heading — and the wordmark scale is fixed. Stretching it to a 48px display heading would push the proprietary face into a brand-shouting register the system avoids. ## Known Gaps - **Dark mode:** the captured marketing surface is light-only. A dark theme exists in the product (wired via `--dark-theme-background-color` and `--dark-theme-text-color`) and switches via the user account menu; the dark-mode CSS variables are declared in the captured stylesheet but the rendered surface is light. - **Signed-in feed:** this DESIGN.md captures the signed-out home only. The signed-in feed renders a video-card grid in the content well — typography and component recipes for the video card, watch page, and comment thread are not represented here. - **Hover and focus states:** documented for `{component.nav-row-active}` only; the full state matrix (focus rings, disabled tints, error states) is not captured from the signed-out surface. - **Motion:** the page is static in the captured render; the sidebar group expand/collapse animation, the search-pill focus expansion, and the hamburger menu transition live in client-side scripts not captured in the token spec. - **Mobile and tablet breakpoints:** the captured render is desktop-only at ~1440px viewport. The collapsed mobile chrome (bottom nav, fullscreen search) carries its own component recipes that are not represented here. - **Player surfaces:** the video player UI (scrubber, fullscreen controls, captions, theater mode chrome) carries a separate token system inside `--yt-live-chat-*` and `--paper-*` CSS variables that is not represented in this marketing-shell capture. - **Live chat and Shorts surfaces:** the live-chat panel and Shorts vertical-video shell carry their own token sets exposed through the `--yt-live-chat-*` namespace; neither is represented here.