---
title: "Twitch"
subtitle: "The offline screen is the shopfront. Most visitors arrive between streams"
description: "How the brand will show up on Twitch: profile avatar, profile banner, the offline video-player screen, and info-panel images, authored ahead of launch."
author: "Studio"
section: "Touchpoints"
layer: "core"
subsection: "Video"
order: 2
status: "published"
access: "team"
brand: "internal"
---

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](/brand/logo.html).
- **Colour**: banner, offline screen, and panels share the brand palette so the page reads as one composition, not four uploads: [4.2 Colour](/brand/color.html).
- **Type**: designed panels and the offline screen use the brand type roles: [4.3 Typography](/brand/typography.html).

## 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.

<div class="demo-preview is-joined is-centered">
  <img class="format-preview" src="/image/1200x480" width="1200" height="480" loading="lazy" alt="">
</div>
<div class="demo-caption">
  <p>Profile banner, 1200×480 (2.5:1)</p>
</div>
<div class="demo-preview is-joined is-centered">
  <img class="format-preview" src="/image/1920x1080" width="1920" height="1080" loading="lazy" alt="">
</div>
<div class="demo-caption">
  <p>Offline banner, 1920×1080 (16:9)</p>
</div>
<div class="demo-preview is-joined is-centered">
  <img class="format-preview" src="/image/320x300" width="320" height="300" loading="lazy" alt="">
</div>
<div class="demo-caption">
  <p>Info panel image, 320 wide</p>
</div>

## Don't

<div class="grid cols-2 gap-m">
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't leave the offline screen empty</h4>
    <p class="card-description">Offline is the default state a visitor sees. A blank player is a blank shopfront. The offline banner carries schedule, socials, and the brand.</p>
  </div>
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't upload panels wider than 320px</h4>
    <p class="card-description">Twitch resizes them down and the type goes soft. Design at 320 wide so what ships is what renders.</p>
  </div>
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't treat the page as separate uploads</h4>
    <p class="card-description">Avatar, banner, offline screen, and panels render together. Four assets designed in isolation read as four different brands on one page.</p>
  </div>
</div>