---
title: "YouTube design system"
variant: extended
source: https://www.youtube.com/
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/youtube-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# YouTube · Design System

> A quiet canvas for finding what to watch

**Theme:** light · **Industry:** media · **Source:** https://www.youtube.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

YouTube’s homepage uses a bright, nearly all-white canvas and a compact utility header to keep attention on search and discovery. In this first-visit state, a single centered prompt replaces the usual video feed, leaving most of the page intentionally open.

## North star

Keep the interface bright and utility-led, using a compact header and one clear focal point against generous white space.

## Overview

The page is defined by a white canvas, black primary text, muted gray supporting text, and a restrained blue accent reserved for interactive cues such as the sign-in action. The compact header spans the top edge: menu and wordmark sit left, search occupies the center, and account actions remain at the right. Roboto keeps labels and interface copy familiar and functional, while the heavier display face gives the empty-state heading a clear focal point. The main content is deliberately sparse: a small elevated message card sits near the top center, surrounded by a large uninterrupted field of white. Rounded search and sign-in controls soften the otherwise crisp interface; thin gray borders distinguish controls without creating strong section bands. There is no visible editorial photography or promotional artwork in this viewport, so spacing and hierarchy do the work of directing attention.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and header background; the empty-state area remains visually continuous with it. |
| Soft Graphite | `#606060` | `--color-soft-graphite` | neutral | Muted supporting copy, including the helper sentence beneath the empty-state heading. |
| Screen Ink | `#0f0f0f` | `--color-screen-ink` | brand | Primary interface text and icons, including the empty-state heading and utility controls. |
| Quiet Divider | `#c6c6c6` | `--color-quiet-divider` | neutral | Fine navigation and interface borders that separate controls without creating strong visual bands. |
| YouTube Blue | `#065fd4` | `--color-youtube-blue` | accent | Interactive emphasis, notably the Sign in label and account icon treatment. |
| Control Gray | `#cccccc` | `--color-control-gray` | neutral | Border on the outlined Sign in button; a control detail rather than a broad page color. |
| Button Mist | `#d3d3d3` | `--color-button-mist` | neutral | Border on a pale utility button; limited to the control surface, not the page canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#0f0f0f` (Screen Ink) · `--color-text-muted` → `#606060` (Soft Graphite) · `--color-border` → `#c6c6c6` (Quiet Divider) · `--color-accent` → `#065fd4` (YouTube Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0f0f0f` | `#ffffff` | 19.17:1 | AAA |
| `#606060` | `#ffffff` | 6.29:1 | AA |
| `#065fd4` | `#ffffff` | 5.84:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roboto | `--font-body` | webfont | 400, 500 | Interface labels, navigation, search, helper text, and general body copy. | Roboto |
| YouTube Marquee Beta | `--font-display` | system | 600 | Prominent empty-state heading. | Roboto |

- **Roboto:** Measured at regular and medium weights; use sentence case and neutral, untracked interface text.
- **YouTube Marquee Beta:** Measured as a semibold display face; keep the heading compact and distinct from regular interface copy.

### Type scale — Custom (ratio ≈ 1.714, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 600 | 1.33 | 0 | — | YouTube Marquee Beta | Empty-state heading that anchors the centered prompt card. |
| body | 14px | 400 | 1.43 | 0 | — | Roboto | Supporting sentence and general interface copy. |
| nav | 14px | 500 | 2.86 | 0 | — | Roboto | Header navigation and utility labels, including account actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 12, 14, 15, 16, 18, 24, 36, 42, 56 px.
- Section rhythm 56px · element gap — · card padding — · max content width —.

A full-width header forms the only strong horizontal structure, with left-aligned menu and wordmark, centered search, and right-aligned account controls. Below it, a single prompt card is centered horizontally near the top rather than vertically centered. The measured viewport shows no populated feed grid; open white space dominates the remaining canvas. Keep the composition sparse and comfortable, preserve clear separation between header and prompt, and avoid inventing a page maximum width or unmeasured spacing values.

## Shape & elevation

- Radius: button `9999px` · card `12px` · nav `9999px` · xs `12px` · pill `9999px`
- Shadow `inset` (nav): `rgb(238, 238, 238) 0px 1px 2px 0px inset`
- Shadow `md` (card): `rgba(0, 0, 0, 0.2) 0px 8px 23px 0px`

Most of the interface reads as flat, with thin neutral borders defining search and account controls. The empty-state card is the notable elevated element, using a soft shadow and rounded corners to separate it gently from the white canvas. Keep depth restrained and avoid heavy outlines or stacked panels.

## Imagery

No prominent photography, illustration, or video thumbnails appear in the measured first viewport. The homepage is in an empty discovery state, so the prompt card and search affordance carry the visual message. Keep any brand mark or interface iconography confined to navigation and controls; do not add decorative hero imagery that would disrupt the open canvas.

## Components

### Top utility navigation

A compact full-width row with menu and YouTube mark at left, centered search tools, and overflow and sign-in actions at right.

### Search field

A long, rounded outlined input with a muted Search hint and a distinct search-action segment.

### Sign-in action

An outlined pill control using YouTube Blue for its account icon and label, with a thin neutral border.

### Empty-state prompt

A centered white card with a bold discovery heading and a smaller muted sentence encouraging users to watch videos.

### Utility icon buttons

Small, low-emphasis menu, microphone, and overflow controls using dark iconography on the light canvas.

### Measured component styles

- **Primary button**: background #f8f8f8 · text #0f0f0f · border 1px solid #d3d3d3 · radius 0px · padding 0px · 400 13.3333px Arial
- **Secondary button** (“Sign in”): transparent background · text #065fd4 · border 1px solid #cccccc · radius 20px · padding 0px 15px · 500 14px Roboto
- **Input**: transparent background · text #0f0f0f · radius 0px · padding 1px 0px · 400 16px Roboto
- **Card** (“Try searching to get started Start watch”): transparent background · text #000000 · radius 12px · padding 0px · 400 10px Roboto · shadow rgba(0, 0, 0, 0.2) 0px 8px 23px 0px
- **Navigation item** (“Skip navigation Sign in”): transparent background · text #000000 · radius 0px · padding 0px · 400 10px Roboto

## Do

- Keep the canvas predominantly white.
- Use dark text for primary interface content.
- Reserve blue for clear interactive emphasis.
- Keep navigation compact and horizontally organized.
- Use rounded outlines for prominent controls.
- Let empty space remain an intentional part of the layout.

## Don't

- Do not add large colored section backgrounds.
- Do not turn the empty state into a promotional hero.
- Do not use heavy shadows across the interface.
- Do not make muted copy compete with the heading.
- Do not fill the open canvas with decorative imagery.
- Do not invent additional palette colors.

## Agent prompt

Build a new page in YouTube’s light, utility-first visual style. Use Gallery White (#ffffff) as the dominant canvas, Screen Ink (#0f0f0f) for primary copy and icons, and Soft Graphite (#606060) for supporting text. Keep YouTube Blue (#065fd4) for restrained interactive emphasis, with Quiet Divider (#c6c6c6) and the measured control grays (#cccccc, #d3d3d3) limited to fine borders. Use Roboto for interface text and a compact semibold heading treatment. Organize a slim, full-width header with navigation, centered search, and right-side account actions. Place the main content in a clear, horizontally centered focal area, preserve generous open space, and use gentle elevation only for a key card. Favor rounded controls and precise alignment over decorative artwork or dense panels.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Compact full-width utility header above a centered empty-state card; the rest of the viewport remains open. | Search-first discovery, Account sign-in access, Empty-state guidance | Horizontal utility navigation, Rounded outlined search, Soft-shadow prompt card |

## Source CSS custom properties (selected)

```css
--yt-attributed-string-link-hover-color: unset;
--yt-light-rim-color: unset;
--yt-light-wash-color: rgba(255,255,255,0.3);
--yt-live-chat-background-color: #fff;
--yt-live-chat-secondary-background-color: hsl(0,0%,93.3%);
--yt-live-chat-action-panel-background-color: #fff;
--yt-live-chat-action-panel-renderer-fallback-background-color: #f2f2f2;
--yt-live-chat-poll-choice-vote-bar-color: #e6e6e6;
--yt-live-chat-action-panel-background-color-transparent: hsla(0,0%,97%,0.8);
--yt-live-chat-additive-background-inverse: rgba(255,255,255,0.1);
--yt-live-chat-mode-change-background-color: hsla(0,0%,93.3%,0.4);
--yt-live-chat-primary-text-color: #0f0f0f;
--yt-live-chat-secondary-text-color: hsla(0,0%,6.7%,0.6);
--yt-live-chat-secondary-text-color-inverse: #aaa;
--yt-live-chat-tertiary-text-color: hsla(0,0%,6.7%,0.4);
--yt-live-chat-tertiary-text-color-inverse: rgba(255,255,255,0.3);
--yt-live-chat-text-input-field-inactive-underline-color: #b8b8b8;
--yt-live-chat-text-input-field-placeholder-color: hsla(0,0%,6.7%,0.6);
--yt-live-chat-text-input-field-underline-transition-duration: 0.25s;
--yt-live-chat-icon-button-color: #0f0f0f;
--yt-live-chat-enabled-send-button-color: #4285f4;
--yt-live-chat-disabled-icon-button-color: hsla(0,0%,6.7%,0.2);
--yt-live-chat-picker-button-color: hsla(0,0%,6.7%,0.4);
--yt-live-chat-picker-button-active-color: hsla(0,0%,6.7%,0.8);
--yt-live-chat-picker-button-disabled-color: hsla(0,0%,6.7%,0.2);
--yt-live-chat-picker-button-hover-color: hsla(0,0%,6.7%,0.6);
--yt-live-chat-mention-background-color: #ff5722;
--yt-live-chat-mention-text-color: #fff;
--yt-live-chat-mention-pill-background-color: #ffd7ca;
--yt-live-chat-mention-pill-text-color: #882712;
--yt-live-chat-deleted-message-color: rgba(0,0,0,0.5);
--yt-live-chat-deleted-message-bar-color: rgba(11,11,11,0.2);
--yt-live-chat-disabled-button-background-color: hsl(0,0%,93.3%);
--yt-live-chat-disabled-button-text-color: hsla(0,0%,6.7%,0.4);
--yt-live-chat-header-background-color: #fff;
--yt-live-chat-header-button-color: hsl(0,0%,6.7%);
--yt-live-chat-header-bottom-border: 1px solid rgba(0,0,0,0.1);
--yt-live-chat-count-color-error: #c30027;
--yt-live-chat-error-message-color: hsl(10,51%,49%);
--yt-live-chat-reconnect-message-color: hsla(0,0%,7%,0.2);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/youtube-com