YouTube

Overview

YouTube is the world's premier video-sharing platform, serving billions of users seeking entertainment, education, and connection. The design system embodies a philosophy of **Content-First Minimalism**—a deliberate aesthetic that prioritizes video content and user-generated material by maintaining a clean, neutral canvas (predominantly white and near-black) punctuated by a bold, unmistakable red accent (#e1002d). This approach reflects YouTube's brand personality: accessible, energetic, and focused on discovery. The interface speaks with clarity and directness, avoiding decoration in favor of functional elegance. The emotional response is one of openness and possibility—the UI recedes, allowing content to command attention. Voice: conversational, action-oriented, never pretentious. Example: "Start watching videos to help us build a feed of videos you'll love."

Colors

YouTube's color palette operates on a principle of **maximum contrast and clarity**. The primary surface is pure white (#ffffff) with near-black text (#0f0f0f) for optimal readability at 16px body copy. The signature accent is YouTube Red (#e1002d), applied exclusively to primary CTAs (Sign In button, play icons, upload prompts) and interactive states—this color is the brand's most recognizable asset and must never be diluted or used decoratively. Secondary accent green (#2ba640) supports status indicators and positive actions (verified badges, success states). Tertiary blue (#3ea6ff) is reserved for links and informational elements. The surface stack uses subtle grays: surface-container (#f5f5f5) for hover states, surface-container-highest (#e8e8e8) for pressed states, and outline (#dbdbd

Typography

The type system pairs YouTube Sans (a custom, geometric sans-serif optimized for screen legibility) with Roboto as a fallback for headlines and display text, while body copy uses Roboto at 16px / 24px line-height for comfortable reading. Headlines employ YouTube Sans at weights 600–700 with tight letter-spacing (-0.01em to -0.02em) to convey authority and brand presence. Body text remains at 400 weight with 0px letter-spacing to maximize clarity. Labels and UI text use 500 weight at 12–14px with 0.01–0.02em letter-spacing for visual hierarchy. When small labels (12px) appear over busy video thumbnails or dark overlays, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility. The display level (56px, 700 weight) is reserved for hero messaging and should use -0.02em letter-spaci

Layout

YouTube uses a **flexible 12-column grid** with a maximum container width of 1440px, allowing content to breathe on ultra-wide displays while maintaining focus on narrower viewports. The primary navigation sidebar (72–240px depending on collapse state) sits fixed on the left, with the main content area consuming the remaining width. Horizontal spacing follows the 8px unit system: 16px gutter margins on desktop (24px on larger screens), 12px between card elements, and 24px for section separation. The home feed uses a masonry-style layout with video cards at 310px minimum width, scaling fluidly up to 500px on standard displays and 3-column grids on 1600px+ screens. All section breaks employ 40px (lg spacing) vertical margin to establish clear rhythm. The search bar and header occupy a fixed

Elevation & Depth

YouTube's depth model is **flat-first with subtle shadows**. The base layer (Level 1) is the white background (#ffffff) with no shadow. Cards and modals (Level 2) use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) to create gentle separation from the background. Elevated surfaces like dropdown menus and floating action buttons (Level 3) use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) for pronounced depth. Hover states on interactive elements transition to the next shadow level over 200ms (ease-in-out timing). The search input field uses a 1px solid border at rgba(0, 0, 0, 0.1) instead of a shadow,

Shapes

YouTube employs **Functional Roundness**—a shape language that balances approachability with precision. Buttons and chips use full border-radius (9999px) to signal interactivity and create a friendly, inviting appearance; this applies to all primary CTAs, secondary buttons, and filter chips. Input fields and search boxes also use full radius (40px height with 9999px border-radius) to maintain visual consistency with button family. Cards and containers use 8px (1rem) border-radius for a modern, slightly softened edge that feels contemporary without sacrificing clarity. Smaller UI elements like

Components

**Action Elements:** Primary buttons use YouTube Red (#e1002d) background with white text, 40px height, 8px vertical / 16px horizontal padding, and full border-radius. On hover, the background darkens to #c41e3a over 200ms. Secondary buttons use surface-container-high (#eeeeee) background with a 1px outline at #dbdbdb, same dimensions and radius. Ghost buttons are transparent with on-surface text, revealing surface-container background on hover. All buttons use label-md typography (14px, 500 weight). **Containers & Surfaces:** Cards use white background (#ffffff) with 1px border at #dbdbdb and 8px border-radius, 24px padding. On hover, the background shifts to surface-dim (#f5f5f5) and shadow elevates to 0 4px 12px rgba(0, 0, 0, 0.08). Video thumbnail containers use 8px radius with a subtl

Do's and Don'ts

**Do**

• Do use YouTube Red (#e1002d) exclusively for primary CTAs, play buttons, and critical interactive states—never for decorative elements or backgrounds.
• Do maintain 16px body text with 24px line-height for all body copy to ensure readability and accessibility compliance.
• Do apply full border-radius (9999px) to all buttons and input fields to create a consistent, friendly interactive affordance.
• Do use the 8px spacing unit consistently: 16px gutters on desktop, 12px between components, 24px for section breaks.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) to cards on hover to signal elevation and interactivity.
• Do use YouTube Sans for all headlines and display text at 600–700 weight with -0.01em to -0.02em letter-spacing.
• Do apply a 3px focus ring at rgba(225, 0, 45, 0.1) to all interactive elements for keyboard navigation visibility.

**Don't**

• Don't use primary red (#e1002d) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and critical feedback.
• Don't apply border-radius less than 4px to any interactive element; this breaks the functional roundness hierarchy and reduces affordance clarity.
• Don't use shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.12) on any surface; excessive depth contradicts the flat-first philosophy.
• Don't mix YouTube Sans and Roboto weights arbitrarily; use YouTube Sans for headlines (600–700) and Roboto for body (400) to maintain typographic clarity.
• Don't reduce opacity of primary red below 100% for interactive states; instead, shift the hue to #c41e3a (darker red) for hover and pressed states.
• Don't apply padding less than 8px to any button or input field; this violates the 8px unit system and creates cramped, inaccessible touch targets.
• Don't use outline colors other than #dbdbdb (#e6e6e6 on dark mode) for borders and dividers; this ensures visual consistency across the system.