YouTube / Public web reference / 2026.09

Foundations and typography

The system gets its character from media geometry, Roboto, controlled density and quiet neutral controls.

All entries shown

Color roles

Canvas
#ffffff

Page and masthead

Primary text
#0f0f0f

Titles, active chip, main actions

Secondary text
#606060

Counts, channel metadata, support copy

Control fill
#f2f2f2

Neutral chips and quiet actions

Search button
#f8f8f8

Observed search submit background

Border
#d3d3d3

Search and separators

Link / sign in
#065fd4

Navigation and sign-in actions

Brand / progress
#ff0033

Brand marks and progress only

Observed / reconstructed. Light colors are observed or measured from delivered CSS and computed output. Dark guide colors are a local reconstruction until linked to a dark production capture. Token names below belong to this reference.

Type roles

A channel worth exploringPage title: 32px/40px · 700

Videos for a quiet afternoonSection title: 22px/30px · 600

A long title that still lets the video leadVideo title: 18px/26px · 400

Watch, search, and find your next video.Body: 14px/20px · 400

SubscribeControl: 14px/20px · 500

84K views · 2 days agoMetadata: 12px/18px · 400

Use Roboto with Arial and sans-serif fallbacks. Preserve Roboto Condensed or YouTube Sans only where a captured font declaration and a matching occurrence support it. The custom wordmark is an asset, never typeset text. Numeric durations use fixed-width fields; avoid changing a title’s font weight to signal selection.

Geometry and tokens

Contract	Value	Ownership
Masthead	56 px	Shell owns height; controls align centrally.
Guide	240 px expanded	Shell owns content offset; guide owns row padding.
Search field	40 px outer height; 64 px submit segment	Input text is 16 px / 22 px with 1 px vertical input padding in the captured desktop state.
Action	40 px height; 16 px horizontal inset	Button owns its content inset. Adjacent groups own gaps.
Filter chip	32 px height; 8 px between chips	Row owns gap; label padding belongs inside chip.
Media	16:9 video; portrait Shorts	Container owns aspect ratio. Crop with object-fit:cover; no stretched artwork.
Radii	12 px media; 8 px chips; 999 px pills	Local alias values; source exceptions stay in the geometry ledger.
Guide breakpoint	800 px local drawer threshold	Documentation shell choice. Product recipe breakpoints are defined separately in product.css.
Focus	3 px blue outline; 3 px offset	Local accessibility treatment. Do not infer it as the exact YouTube focus contract.

Content extremes

An unusually long video title about the night sky, telescopes, and the patient work behind a single photograph

Wissenschaftliche Beobachtungen für einen außergewöhnlich klaren Abend

اكتشف مقاطع فيديو جديدة وتابع القنوات التي تهمك

Missing creator name → Channel unavailable. Missing duration → omit the duration badge. Never render “undefined”.

Titles can wrap. In compact collections, use a documented two-line clamp and keep the full title in the accessible link name. Do not place essential eligibility or error information in truncated text. Use logical inline properties for mirrored layouts. A 200% text-size increase must retain controls and readable copy.

Copyable local tokens

:root {
  --yt-bg: #fff;
  --yt-fg: #0f0f0f;
  --yt-muted: #606060;
  --yt-panel: #f2f2f2;
  --yt-blue: #065fd4;
  --yt-red: #ff0033;
  --header-height: 56px;
  --guide-nav: 240px;
}

Retrieve local font declarations · Retrieve guide CSS · Retrieve product recipe CSS