YouTube

---
version: alpha
name: YouTube-design-analysis
description: YouTube's design language is a dark-first video platform anchored on the signature red `#ff0000` against near-black surfaces. The interface is thumbnail-driven: video cards dominate, with a persistent left navigation and a bold red accent for brand and active states. Typography is compact and legible, and the red is used sparingly so content stays the star.

colors:
  primary: "#ff0000"
  primary_dark: "#c4302b"
  primary_light: "#ff4e45"
  canvas_dark: "#0f0f0f"
  surface_dark: "#212121"
  surface_dark_2: "#282828"
  surface_dark_3: "#303030"
  fg_dark: "#f1f1f1"
  fg_muted_dark: "#aaaaaa"
  fg_faint_dark: "#717171"
  border_dark: "#303030"
  canvas: "#ffffff"
  surface: "#f9f9f9"
  on_primary: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""YouTube Sans", Roboto, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by YouTube

## 1. Visual Theme & Atmosphere

YouTube is a video-first platform, and the interface is built to make thumbnails and moving images the hero. The signature red `#ff0000` of the play button and brand marks is used with restraint against near-black surfaces `#0f0f0f` (or white in light mode). A persistent left rail and dense thumbnail grid keep discovery effortless.

## 2. Color System

- **YouTube red** `#ff0000` — the play button, logo, subscribe button, and active states.
- Dark surfaces step through `#0f0f0f`, `#212121`, `#282828`, `#303030` with hairlines `#303030`.
- Text `#f1f1f1`, muted `#aaaaaa`, faint `#717171`.
- Light mode mirrors: `#ffffff` canvas, `#f9f9f9` surface, dark text.
- The red never bleeds into other UI — it is reserved for the moments that mean "watch."

## 3. Typography

YouTube Sans (Roboto fallback) at a compact, dense scale. Video titles are medium-weight with two-line clamping; channel names and metadata are small and muted. Type supports scanning a feed quickly; it is never the focus.

## 4. Components & Shape

The video card is the core component: a 16:9 thumbnail with a duration badge and a title + channel row below. Buttons are soft rounded rectangles (the subscribe button is a red pill or outlined state). Chips along the top of the home feed are pill-shaped filters. The left rail uses simple icon + label nav items.

## 5. Layout & Spacing

A fixed left navigation rail (collapsible) with a responsive thumbnail grid (1-6 columns). Gutters are 8-16px for density; the header is a slim bar with search front-and-center. Spacing tightens in the grid but keeps a clean vertical rhythm.

## 6. Motion

The play/pause and seek interactions are the focus; hover reveals a subtle card scale and thumbnail preview. Transitions are fast (<200ms) and functional — the video is the motion, the UI stays quiet.