⚠️ Design system CSS not found. Check the path in cms/docs.config.js → designSystemPath, then re-run npm run docgen.

YouTube

One banner, four devices. The safe area is the design area

Social / YouTube
Download .md file
Open .md in new tab
On this page
  • Regulations
  • Standards
  • Formats
  • Tools
  • Don't

YouTube is a rented channel and the brand is not live on it yet. These guidelines exist so launch day starts on-brand instead of from scratch. Its catch: one banner is cropped four ways across devices, and phones, where most first views land, show only the centre band. The studio team owns it.

Regulations

YouTube sets these per format and changes them without notice. Nothing here is ours to negotiate.

Format Size / ratio Safe area File format Max weight Notes
Channel banner 2560×1440 · 16:9, min 2048×1152 text and logos inside the centre 1546×423 band JPG/PNG/BMP/GIF, no animation 6 MB mobile shows only the band; TV shows the full frame
Profile picture 800×800 · 1:1 circular crop, centre the mark; renders at 98×98 JPG/PNG/BMP/GIF, no animation not published, confirm in the upload dialog YouTube states the render size, not a firm upload cap
Video thumbnail 1280×720 · 16:9, min 640 wide keep subject and text centred JPG/PNG 2 MB some vertical surfaces re-crop to 4:5

The banner is one image cropped four ways: mobile gets the 1546×423 centre band, desktop and tablet slightly more, TV the full 2560×1440. Anything outside the band is decoration. Verified 2026-07-05.

Standards

  • Logo: the avatar variant fills the profile slot, which YouTube clips to a circle and renders at 98px. Variants and clear space: 4.1 Logo
  • Colour: the banner and thumbnails are brand-palette compositions. A thumbnail row is a mini-grid that reads as ours or as noise: 4.2 Colour
  • Type: thumbnail and banner text uses the brand type roles, sized for a phone screen: 4.3 Typography
  • Design inside the band, decorate outside it. The centre 1546×423 carries the message. Everything beyond it exists for the people on a television.
  • One idea per thumbnail. A thumbnail is read at postage-stamp size in a crowded feed, so it holds one focal point and a few words at most.

Formats

Design commissions the banner and thumbnail blanks, with the device safe area marked, when the channel activates. Each frame below holds its format at the exact ratio until the template lands.

Channel banner, 2560×1440 (16:9)

Video thumbnail, 1280×720 (16:9)

Tools

  • Image Placeholder, blanks at the banner and thumbnail sizes, for laying out drafts before the imagery exists

No YouTube-specific tool exists yet. A banner preview that shows all four device crops at once is the obvious first one, because the band is impossible to judge from the full-size export. Request it when the channel activates.

Don't

Don't design outside the banner band

Text or logos beyond the 1546×423 centre disappear on phones, where most viewers meet the channel first.

Don't overload the thumbnail

A thumbnail is read at postage-stamp size in a crowded feed. More than a few words or one focal point and it communicates nothing.

Don't put a lockup in the circle

The profile slot clips to a circle at 98px. A horizontal lockup loses its ends. The avatar variant exists for exactly this crop.

On this page
  • Regulations
  • Standards
  • Formats
  • Tools
  • Don't
Previous TikTok
Next Twitch

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default