Twitch Brand Book

1 Twitch Identity Guidelines Identity Guidelines (Speedrun Edition) V 2.0, 01.07.21

2 Twitch Identity Guidelines Here’s the thing: Not everyone’s going to get it. Staring at a screen was fine for a while, but canned content had its day. We’re building something better, and we’re not alone. From everyone in chat, to the streamers making sure the show goes on. We’re a collective cast of millions going all-in to make moments together, directing the action as we watch it. We don’t always know what’s next, and we like it that way. Because multiplayer is everything—our how and our why. It’s powered by all of us. And for some reason, by Bob Ross too. This started as a place to stream. Together, we’re making it Twitch.

5 Twitch Identity Guidelines Logos Our most recognizable element, the new Twitch wordmark contains the DNA of our previous iteration to give a sense of nostalgia and evoke our roots in gaming. Wordmark: This is our representational mark. Primarily used internally on our owned channels, and in partnerships when locked up with other logos. Extruded Wordmark: Our primary logo, the extruded, dimensional logo is the core expression of Twitch and is used primarily in outbound comms when we want to be the most expressive. And let's not forget: Glitch: The quickest way of saying ‘Twitch’ without spelling it out, Glitch represents everything about us and our community through an ownable mascot. You can find a more detailed explanation on when and where to use each version of the logo to the right. x x x x x 1/2 Glitch → Wordmark → Clearspace → Clearspace → Clearspace → Extruded Wordmark →

6 Twitch Identity Guidelines Logo Lockups Sometimes our logo likes to team up with other logos or copy. With the proper spacing, it’ll play nice with almost anything. Here are some guidelines for those instances. Internal lockup → Partnership lockup → Cap Height Cap Height X-Height Center

8 Twitch Identity Guidelines Color Core Palette Our core colors are how we express ourselves in the most direct, Twitch way possible. The Core Palette consists of three swatches: ● Twitch Purple (of course!) ●Black Ops ● Ice Usage When designing for digital, use RGB. When designing for IRL, PMS is preferred. CMYK is the acronym of last resort. Black Ops R 0 C 100 G 0 M 80 B 0 Y 40 K 90 H 0 S 0 B 0 HEX 000000 PMS Black 6C Ice R 240 C 10 G 240 M 4 B 255 Y 2 K 1 H 240 S 6 B 100 HEX F0F0FF PMS 656C Twitch Purple R 145 C 57 G 70 M 60 B 255 Y 0 K 0 H 264.32 S 72.55 B 100 HEX 9146FF PMS 814 C

9 Twitch Identity Guidelines Color Twitch Secondary Palette Secondary colors and gradients are for when we activate turbo mode. They’re like our ultimate move. Ice R 240 C 10 G 240 M 4 B 255 Y 2 K 1 H 240 S 5.88 B 100 HEX F0F0FF PMS 656C Smoke R 210 C 12 G 210 M 8 B 230 Y 8 K 22 H 240 S 8.7 B 90.2 HEX D2D2E6 PMS Cool Gray 3 Dragon R 130 C 68 G 5 M 78 B 180 Y 0 K 0 H 282.86 S 97.22 B 70.59 HEX 8205B4 PMS 2084C Nights R 65 C 85 G 20 M 100 B 95 Y 0 K 10 H 276 S 78.95 B 37.25 HEX 41145F PMS 2617C Jiggle R 250 C 0 G 180 M 32 B 255 Y 10 K 0 H 296 S 29.41 B 100 HEX FAB4FF PMS 920C Widow R 190 C 30 G 170 M 25 B 255 Y 0 K 0 H 264.32 S 72.55 B 100 HEX BFABFF PMS 270C Cuddle R 250 C 0 G 30 M 78 B 210 Y 0 K 0 H 310.91 S 88 B 98.04 HEX FA1ED2 PMS 806C Osu R 190 C 45 G 0 M 100 B 120 Y 50 K 60 H 322.11 S 100 B 74.51 HEX BE0078 PMS 233C Worm R 250 C 0 G 205 M 26 B 205 Y 20 K 0 H 0 S 18 B 98.04 HEX FACDCD PMS 9261C Peach R 252 C 0 G 102 M 75 B 117 Y 40 K 0 H 352 S 59 B 98 HEX FC6675 Bandit R 255 C 10 G 105 M 7 B 5 Y 0 K 4 H 24 S 98.04 B 100 HEX FF6905 PMS Orange 021C Sniper R 250 C 0 G 40 M 95 B 40 Y 100 K 0 H 0 S 84 B 98.04 HEX FA2828 PMS 032C Isabelle R 254 C 2 G 238 M 2 B 133 Y 59 K 0 H 50 S 47 B 99 HEX FEEE85 Pac-Man R 255 C 0 G 202 M 22 B 95 Y 72 K 0 H 39 S 62 B 100 HEX FFCA5F Lightning R 250 C 0 G 250 M 0 B 25 Y 100 K 0 H 60 S 90 B 98.04 HEX FAFA19 PMS 803C Egg R 0 C 50 G 250 M 0 B 5 Y 85 K 0 H 121.2 S 100 B 98.04 HEX 00FA05 PMS 802C Droid R 190 C 26 G 250 M 0 B 225 Y 14 K 0 H 155 S 24 B 98.04 HEX BEFAE1 PMS 621C Felicia R 87 C 58 G 190 M 6 B 230 Y 3 K 0 H 196 S 61 B 90 HEX 57BEE6 K.O. R 190 C 12 G 255 M 0 B 0 Y 80 K 0 H 75.29 S 100 B 100 HEX BEFF00 PMS 395C Legend R 105 C 40 G 255 M 0 B 195 Y 25 K 0 H 156 S 58.82 B 100 HEX 69FFC3 PMS Green 0921C Wipe Out R 0 C 80 G 200 M 0 B 175 Y 40 K 0 H 172.5 S 100 B 78.43 HEX 00C8AF PMS 3255C Sonic R 0 C 100 G 20 M 75 B 165 Y 0 K 0 H 232.73 S 100 B 64.71 HEX 0014A5 PMS 2147C Mega R 0 C 45 G 250 M 0 B 250 Y 0 K 0 H 180 S 100 B 98.04 HEX 00FAFA PMS 9464C Zero R 30 C 100 G 105 M 15 B 255 Y 0 K 0 H 220 S 88.24 B 100 HEX 1E69FF PMS Process Blue C Muted Accent

Twitch Brandbook

The official identity guide for Twitch. Access logos, colors, and Twitch usage standards here.

11 Twitch Identity Guidelines Color Core Palette Logo Color Pairings There are only four color pairings we use when creating ‘core communications’. They are: Solid Backgrounds: 1. ● Twitch Purple on ● Ice 2. ●Black Ops on ● Twitch Purple 3. ● Twitch Purple on ●Black Glitch → Wordmark → Extruded Wordmark →

12 Twitch Identity Guidelines Hello Hello Hello Hello Hello Hello Hello Typography Weights Our brand typeface, Roobert, comes in six weights from light to heavy. We most commonly use Regular, Medium, Bold, and Semibold. Light and Heavy should be left for special instances. Styles Roobert comes in twelve styles including a full set of italics that can be (tastefully) used to add emphasis. Suntore, idus non rem custecus, si audia quaepedis diorroreius eatur? Hentorro et et quam is utam idem siti ipsunt et, sitae et unt ut ped eicias venihilitas adipideri occulparibus quaspellabor aut ius vitae pero molest aboribusto voluptatiist Diorroreius eatur? Hentorro et et quam is sitae et unt ut ped eicias venihilitas adipideri occulparibus quaspellabor aut ius Meet our typeface: Twitch Roobert Headline: Roobert SemiBold 80/80/-20 → Body: Roobert Medium 16/20/-10 → Body Small Roobert Medium, 11/14,0 → Highlight/Call Out Roobert Large 30/33/-15 → Suntore, idus non rem custecus, si audia quaepedis diorroreius eatur? Hentorro et et quam is utam idem siti ipsunt et, sitae et unt ut ped eicias venihilitas adipideri occulparibus quaspellabor aut ius vita. Hentorro et et quam is utam idem abba. 01→ Light 02 → Regular 03 → Medium 04→ Semibold 05→ Bold 06→ Heavy

15 Twitch Identity Guidelines Layout When laying out typography, don't be afraid to keep things simple. Make it punchy and not too intricate or complex. Avoid using more than 3 type styles and make sure to keep things tight and organized. YES Headline top left and body copy bottom YES Headline centered and body copy bottom YES Headline centered top, body copy bottom YES Headline split: Centered top and bottom YES Headline left-aligned, body copy bottom YES Streaming Effect: Crop & Repetition Lorem ipsum dolar sit amat. Sumquodis et, omnis di arum ratias dolo volum id mantis quae. Lorem Ipsum Lorem ipsum dolar sit amat Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers . Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers . Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers. Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers . Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers . Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers. Sit amat aut et anto Lorem ipsum dolar Lorem ipsum dolar sit amat Nus doloriost alicia corete verupid quatem rem asd exceproria volupitincte pa dolorep erspiducient plit. Nus doloriost alicia corete verupid quatem rem asd exceproria volupitincte pa dolorep erspiducient plit. Nus doloriost alicia corete verupid quatem rem asd exceproria volupitincte pa dolorep erspiducient plit. Lorem Lorem Lorem Lorem Lorem Lorem Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers . Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers . Nus doloriost alicia corete verupid quatem rem asdnet adantris aqui exceproria volupitincte pa dolorep ers.

18 Twitch Identity Guidelines The Twitch Voice Our voice exists in everything we do, even when words aren’t involved. It defines who we are and how we present ourselves to the world. Our community is vast, passionate, funny, clever, supportive and was born fluent in the language of the internet. Our voice seeks to match that energy setting up our brand as a kindred spirit: the friend who plays games with you. Here are the elements that make the Twitch Voice unique: Mischievous We’ve got spirit and a sense of humor. This whole thing is meant to be fun. And it always is, thanks to the limitless levels of lunatic creativity within our community. When we poke fun, it’s good natured. It’s between friends. And it comes with the understanding that our roast is next. Purposeful We’re here to help. We work hard to set the table, but we know it’s the guests who make it a party. So we do everything to host, guide, and support our community the best we can. Iterative We get things done. Twitch is a work in progress, much like the internet it came from. We embrace our rawness and speak honestly because the community shares our scrappy do-it-yourself spirit. Revolutionary We strive to be different. Our distinct voice comes from a true place - before this there was nowhere for people like us to go. We still carry that fringe mentality as we question the status quo in favor of making something better for all of us. Those principles form the foundation of our voice, but our tone can shift depending on the circumstances. Here are two scales we use to make sure our tone is aligning with specific needs. → Casual How we’d talk to friends. Go ahead and use slang that would be understood by most internet users. Ex. social media posts, most brand marketing Neutral Straightforward. When we’re neutral, we’re communicating something by way of the shortest route possible. Ex. instructions, in product copy Firm Assertive, without ever crossing into aggressive. Ex. Policy updates, apologizing, taking a stance on industry issues Reassuring Lean this way to boost users’ confidence or alleviate concerns. This is the ‘don’t worry, we’ve got you’ tone. Ex. Posting a popular clip on social, announcing a marathon, hyping TwitchCon Encouraging This is where we dial up the welcoming, friendly side of our voice to make users feel like they can and should do it - whatever ‘it’ is. Ex. Event invites, creator tools, new streamer comms Celebratory Lean here when we’re cheering on our community or commemorating something. The most upbeat of tones. Ex. Twitch event announcements, product launches, streamer milestones. Voice Tonal Scales Functional Emotional

If you are having double with anything in this guide, you are missing brand elements from the Brand Package, or you are unsure if your communication best represents the Twitch Brand, please contact the Twitch design team. Please note that many of the photographic images used in these guidelines are not owned or licensed by Twitch, and are intended only to illustrate the brand mechanics. Under no circumstance should you use any photo or example in the guide for any kind of public facing communications. Always ensure that you have the approval of the appropriate copyright owners before using a photographic image in a Twitch communication. Twitch Guidelines (Speedrun Edition) — 01.07.21