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

Touchpoints / Twitch
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. Twitch has a quirk the others don't: 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.

Identity here

  • Logo: the avatar variant fills the profile slot; Twitch displays it 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, not four uploads: 4.2 Colour.
  • Type: designed panels and the offline screen use the brand type roles: 4.3 Typography.

Specs

Asset Size Safe area Format Max weight Notes
Profile picture 256×256 (1:1) circular crop, centre the mark JPG/PNG/GIF 10 MB –
Profile banner 1200×480 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 – PNG (JPG/GIF accepted) 2.9 MB wider uploads auto-resize down to 320

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

Twitch pins the panel width (320px) but not its height. Keep panels around 300px tall so the column scans evenly, and use PNG where transparency matters.

Templates & assets

Banner, offline-screen, and panel blanks get commissioned from design 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

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
  • Identity here
  • Specs
  • Templates & assets
  • Don't
Previous

YouTube

Next

Podcast

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default