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

Twitch

The offline screen is the shopfront. Most visitors arrive between streams

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

Twitch 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. It has a quirk the others do not: most visitors land while the channel is offline, so the offline screen carries more brand weight than the live one. The studio team owns it.

Regulations

Twitch 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
Profile picture 256×256 · 1:1 circular crop, centre the mark JPG/PNG/GIF 10 MB n/a
Profile banner 1200×480 · 2.5:1 keep key content centred JPG/PNG/GIF 10 MB scaled to 480px high regardless of upload
Offline banner 1920×1080 · 16:9 keep text and content near centre PNG, JPG accepted under 3 MB fills the video player between streams
Info panel image 320 wide, height flexible n/a PNG, JPG/GIF accepted 2.9 MB wider uploads auto-resize down to 320

Twitch pins the panel width at 320px but publishes no height. Verified 2026-07-05.

Standards

  • Logo: the avatar variant fills the profile slot, which Twitch displays as a circle. Variants and clear space: 4.1 Logo
  • Colour: banner, offline screen and panels share the brand palette, so the page reads as one composition rather than four uploads: 4.2 Colour
  • Type: designed panels and the offline screen use the brand type roles: 4.3 Typography
  • Design the page, not the assets. Avatar, banner, offline screen and panels render together on one screen. Judge them together before any of them ships.
  • Panels sit around 300px tall so the column scans evenly, and use PNG where transparency matters. The width is Twitch's rule; the height is ours.
  • The offline screen is the priority asset. It is what most visitors actually see, so it carries the schedule, the socials and the brand.

Formats

Design commissions the banner, offline-screen and panel blanks when the channel activates. Each frame below holds its format at the exact ratio until the template lands.

Profile banner, 1200×480 (2.5:1)

Offline banner, 1920×1080 (16:9)

Info panel image, 320 wide

Tools

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

No Twitch-specific tool exists yet. A page mock-up that assembles all four assets as Twitch renders them would catch the failure this channel is most prone to, which is four assets that each work alone. Request it when the channel activates.

Don't

Don't leave the offline screen empty

Offline is the default state a visitor sees. A blank player is a blank shopfront. The offline banner carries schedule, socials, and the brand.

Don't upload panels wider than 320px

Twitch resizes them down and the type goes soft. Design at 320 wide so what ships is what renders.

Don't treat the page as separate uploads

Avatar, banner, offline screen, and panels render together. Four assets designed in isolation read as four different brands on one page.

On this page
  • Regulations
  • Standards
  • Formats
  • Tools
  • Don't
Previous YouTube
Next Channels Newsletter

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default