⚠️ 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

Touchpoints / YouTube
Download .md file
Open .md in new tab

The channel isn't live yet. These guidelines exist so launch day starts on-brand instead of from scratch. YouTube's 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.

Identity here

  • Logo: the avatar variant fills the profile slot; YouTube clips it to a circle and renders it 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.

Specs

Asset Size Safe area 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) 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

Specs verified against platform documentation: 2026-07-05.

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. Design the message inside it and let the rest breathe.

Templates & assets

Banner and thumbnail blanks, with the device safe area marked, get commissioned from design 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)

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
  • Identity here
  • Specs
  • Templates & assets
  • 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