— Full Page Layout Specification —

YOUTUBE.COM — HOME VIEW

VIEWPORT: 1440 × 900px | BREAKPOINT: XL DESKTOP

A Section A — Top Navigation Bar h: 56px | position: fixed

| W: 100vw (1440px) |

— H:56px —

MENU_BTN

YouTube

LOGO_MARK [SVG] 120×28

Search... INPUT[type="search"] — flex:1, max-w:640px border-radius: 20px 0 0 20px

◁ max-w: 640px ▷

CREATE

NOTIFY

U AVATAR:32px

◁ gap:12px ▷

↓ margin-top: 56px (clears fixed nav) ↓

B Section B — Category Filter Chips h: 56px | overflow-x: scroll | sticky

All

Music

Gaming

Live

News

Podcasts

Mixes

Lo-fi

Cooking

React

Sports

chips: border-radius:8px | padding:6px 12px | font:14px | active_state:bg-white/text-black

C Section C — Main Layout (Sidebar + Content Grid) display: flex | h: calc(100vh - 112px)

| W:240px |

Sidebar Nav (collapsible)

Home ● ACTIVE

▶

Shorts

☰

Subscriptions

YOU ▸

▶

Your Channel

◷

History

▤

Playlists

⏱

Watch Later

▲

Liked Videos

SUBSCRIPTIONS

MKBHD

Veritasium

Fireship

Theo

About Press Copyright
Contact us Creators
Advertise Developers

Terms Privacy Policy & Safety

| W: calc(100% - 240px) — FLUID |

D Video Grid — CSS Grid: repeat(auto-fill, minmax(310px, 1fr))

12:34

THUMBNAIL

16:9

aspect-ratio: 16/9

CH 36px

•

⋮

8:21

● LIVE

•

24:07

•

5:43

•

progress_bar: 66% watched

SHORTS SHELF

(horizontal scroll row)

aspect-ratio: 9/16 per item | scroll-snap-type: x mandatory

31:15

•

grid-gap: 16px padding: 16px 24px overflow-y: auto scroll-behavior: smooth

DETAIL: VIDEO CARD COMPONENT SPEC

thumbnailaspect-ratio: 16/9, border-radius: 12px

titlefont: 14px/20px Roboto, -webkit-line-clamp: 2

channel_namefont: 12px, color: #aaa, margin-top: 4px

meta_textfont: 12px, "123K views • 2 days ago"

avatarwidth: 36px, border-radius: 50%

duration_badgebg: rgba(0,0,0,0.8), bottom-right

hover_statethumbnail preview (animated), scale(1.0)

progress_barh:3px, bg: #f00, bottom:0, if watched

E Section E — Responsive Breakpoint Map

1 col

sidebar: hidden

MOBILE

<640px

2 col

sidebar: mini (72px)

TABLET

640–1024px

3 col

sidebar: expanded (240px)

DESKTOP ●

1024–1440px

4–5 col

sidebar: expanded + extra

ULTRAWIDE

>1440px

F Section F — Design Tokens (Dark Theme)

Color Palette

#0F0F0F

bg-primary

#212121

bg-secondary

#FFFFFF

text-primary

#AAAAAA

text-secondary

#FF0000

yt-red / brand

#3EA6FF

link / accent

#272727

chip-default

#3F3F3F

hover-state

Typography Scale

Video TitleRoboto 14px/20px — weight:500 — clamp:2

Channel NameRoboto 12px/18px — weight:400 — color:#aaa

Meta / ViewsRoboto 12px/18px — weight:400 — color:#aaa

Chip LabelRoboto 14px/20px — weight:500

Sidebar NavRoboto 14px/20px — weight:400

Duration BadgeRoboto 12px — weight:500 — bg:rgba(0,0,0,.8)

Sidebar FooterRoboto 11px — weight:400 — color:#717171

G Section G — Z-Index Layer Stack

z:2200z:2100z:2000z:100z:10z:1z:0

MODAL / DIALOG OVERLAY z-index: 2200 | position: fixed

TOOLTIPS / POPOVERS z-index: 2100 | position: absolute

TOP NAVIGATION BAR [Section A] z-index: 2000 | position: fixed | top:0

SIDEBAR / GUIDE PANEL [Section C-left] z-index: 100 | position: fixed (mobile) / static (desktop)

CATEGORY CHIPS BAR [Section B] z-index: 10 | position: sticky | top: 56px

VIDEO GRID CONTENT [Section D] z-index: 1 | position: relative

PAGE BACKGROUND z-index: 0 | #0F0F0F

NOTE: Sidebar transitions from fixed overlay (mobile) → mini rail 72px (tablet) → expanded 240px static (desktop) | Top nav uses backdrop-filter: blur(8px) on scroll

H Section H — Interaction State Matrix

ELEMENT	DEFAULT	HOVER	ACTIVE	FOCUS
Video Card	static	thumbnail: preview anim, title: underline	navigate → /watch?v=	outline: 2px #3EA6FF
Category Chip	bg:#272727	bg:#3f3f3f	bg:#fff color:#0f0f0f	ring: 1px #fff
Sidebar Item	transparent	bg:#272727 rounded	bg:#3f3f3f, weight:500	outline ring
Icon Button	opacity:0.9	bg:rgba(255,255,255,0.1) rounded-full	bg:rgba(255,255,255,0.2)	ring: 2px #3EA6FF
Search Input	border:#303030	border:#303030	—	border:#1c62b9, inset shadow

I Section I — Spacing & Grid System

BASE UNIT: 4px

4px xs — icon internal padding

8px sm — chip gap, inline spacing

12px md — card content padding

16px lg — grid gap, section padding

24px xl — content margin, nav padding

32px 2xl — section separation

GRID COLUMN BREAKPOINTS

<640px

640–1024px

1024–1440 ●

1440–1920px

>1920px

REVISION NOTES

R4.22026-02-11Added z-index layer stack, interaction state matrix, spacing system

R4.12026-02-10Added responsive breakpoint map, color tokens, typography scale

R4.02026-02-09Complete layout: nav, sidebar, chips, video grid, shorts shelf

R3.02026-02-05Initial wireframe — desktop only

CONFIDENTIAL — FOR INTERNAL DESIGN REVIEW ONLY DRAWING ID: YT-BP-2026-0211-001 APPROVED ✓