# Twitch: brand book and build spec

One loud purple, one geometric sans set huge, and the community's own emotes and streams as the imagery. Twitch is purple, then white, then black, with creators flush to the edges.

From unfairly.ai/brand-guidelines/twitch, checked 2026-10-31. Unofficial study; not affiliated with Twitch.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Twitch's brand is borrowed from its community on purpose: emotes from chat, stills from real streams, handles as captions, game names for colors. The system (one purple, one face, a strict grid) only frames them. Based on: The guide says the rebrand was to "lift up and celebrate every member of our community"; the homepage credits every image to a streamer.

## Purpose

Mission: To create belonging by enabling streamers to build community. (published; https://www.twitch.tv/p/en/company/)

Story: Twitch rebranded in 2019 to lift up and celebrate every member of its community rather than rebuild: a bolder purple, the Roobert typeface, an extruded wordmark built from its predecessor, the Glitch, emotes used everywhere, and an expanded palette named after video games. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Community first | The rebrand was about celebrating the community, not Twitch (paraphrase). | published: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/ |
| Stay different | The will to be different never changes; signature elements carry it (paraphrase). | published: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/ |
| Method in the madness | A structured system that focuses the community's creativity (paraphrase). | published: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/ |

## Fixed and flexible

Never changes:
- Twitch Purple #9146FF
- Roobert (one family)
- The extruded wordmark and the Glitch, unaltered
- Emotes as part of the language

The one thing that varies: How much of the expanded palette and gradient appears: none on the About homepage (purple, white, black only), full on campaigns and creator moments.

## Positioning

- **Statement**: Twitch is building the future of live, interactive entertainment, one community at a time. (published)
- **Category**: Live, interactive entertainment: live streaming with chat. (published)
- **Audience**: Four audiences, one per homepage section: fans who watch, streamers who create, developers who build tools, advertisers who want the audience. (observed)
- **Problem**: Entertainment you only watch, alone: Twitch makes it something people make together, live. (our reading)
- **Promise**: A seat in chat: belonging in a live community around what you love. (our reading)
- **Differentiators**: Live chat and emotes: the audience is part of the show.; Creators across categories beyond games (music, talk shows, sports, travel, just chatting, food, events).; Community tools built by developers (Extensions).; Ways for fans to support creators (Bits, Subs, Prime, Turbo in the footer product list).
- **Alternatives**: Not named by Twitch. Our reading: on-demand video platforms and other live-streaming services.

## Messaging

Boilerplate (observed): Twitch is where millions of people meet live every day to chat, interact and make their own entertainment together.

Taglines:
- We saved you a seat in chat (About homepage hero headline)
- Meet your new Twitch (Opening line of the 2019 rebrand guideline site)
- There is no Twitch without purple. Period. (Core palette chapter of the guideline site)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Watch: find your thing | Fans find what they love, connect with streamers and chat with communities. | Millions of people come together live every day (homepage wording; no exact figure on the page).; Eight homepage categories: Games, Music, Talk Shows, Sports, Travel & Outdoors, Just Chatting, Food & Drink, Special Events. | observed |
| Stream: share your dream | Creators bring their passions and Twitch helps them build a community around them. | Mission: create belonging by enabling streamers to build community. | observed |
| Develop: build new stuff | Communities need custom tools; developers build them (Extensions). | Extensions and a developer platform (dev.twitch.tv) for custom community tools. | observed |
| Advertise: reach our crowd | Brands meet a large, engaged audience through real connections. | "A few million friends we'd like you to meet" (homepage wording; no exact figure). | observed |

They never claim:
- No audience or streamer counts beyond "millions": the homepage publishes none.
- No rankings ("biggest", "number one"): none appear on the homepage or guide.
- Never suggests a partnership, sponsorship or endorsement by Twitch (trademark guidelines).

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "We saved you a seat in chat" | About homepage hero | https://www.twitch.tv/p/en/about/ |
| "Find your thing" | homepage section | https://www.twitch.tv/p/en/about/ |
| "Share your dream" | homepage section | https://www.twitch.tv/p/en/about/ |
| "Build new stuff" | homepage section | https://www.twitch.tv/p/en/about/ |
| "Reach our crowd" | homepage section | https://www.twitch.tv/p/en/about/ |

## Voice

Tone words: Playful, Community-first, Irreverent, Direct.

Traits:
- Playful, but not Childish (our reading)
- Community-first, but not Corporate (published)
- Irreverent, but not Mean (published)
- Direct, but not Hard-sell (observed)

- Talks like the community talks: gaming references, emotes and in-jokes, with a wink at itself ("our (beloved) madness").
- Short declarative lines and fragments for emphasis: "There is no Twitch without purple. Period."
- Credits the community for the brand: creators and chat come first, Twitch second.
- Homepage voice is plainer than the guide: one invitation per section, a two-to-three-word headline and a one-sentence pitch to a named audience (fans, streamers, developers, advertisers).
- Homepage leads open with a short punchy fragment aimed at the reader ("Unabashed fans, welcome home.", "Come be their hero."), then one plain sentence. Keep that cheek; don't explain.

Rules a copy check enforces:
- Sentence case headlines
- Write as "we", to "you"
- No exclamation marks
- American spelling
- Section headlines are two to four words and set on two or three lines at 192px ("Find your thing", "Reach our crowd")
- No period at the end of a headline
- Use contractions (we've, we'll, it's, you're)
- Emotes are part of the lexicon: set one inline at the end of a headline or a lead sentence, at the text size, never as decoration in a corner
- CTAs are a short verb phrase with a north-east arrow ("See our lineup", "Build with us"), never a boxed button
- Use the TWITCH mark as an adjective, never a noun or verb, when writing about the brand from outside
- Sentences of 25 words or fewer

Their words: community, creators, streamers, chat, live, together, emotes.
Never: users (say viewers, fans, streamers or creators), content consumers, exclamation marks.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Twitch Purple | #9146FF | accent | Core. RGB 145 70 255, CMYK 65 65 0 0. The brand: grounds, headlines, links. |
| Black | #000000 | ink | Core. Body copy, dark sections, footer. |
| Ice | #F0F0FF | surface | Core. RGB 240 240 255. Light text on black, nav on purple. |
| White | #FFFFFF | paper | Observed on the homepage: middle section ground, hero headline, lead panel. |
| Caption gray | #868695 | ink_muted | Observed: vertical photo captions. |
| Jiggle | #FAB4FF | expanded | Expanded palette (named after video games) |
| Worm | #FACDCD | expanded | Expanded palette (named after video games) |
| Isabelle | #FEEE85 | expanded | Expanded palette (named after video games) |
| Droid | #BEFAE1 | expanded | Expanded palette (named after video games) |
| Wipe-Out | #00C8AF | expanded | Expanded palette (named after video games) |
| Smoke | #D2D2E6 | expanded | Expanded palette (named after video games) |
| Widow | #BEAAFF | expanded | Expanded palette (named after video games) |
| Peach | #FC6675 | expanded | Expanded palette (named after video games) |
| Pac | #FFCA5F | expanded | Expanded palette (named after video games) |
| Mudkip | #57BEE6 | expanded | Expanded palette (named after video games) |
| Sonic | #0014A5 | expanded | Expanded palette (named after video games) |
| Dragon | #8205B4 | expanded | Expanded palette (named after video games) |
| Cuddle | #FA1ED2 | expanded | Expanded palette (named after video games) |
| Bandit | #FF6905 | expanded | Expanded palette (named after video games) |
| Lightning | #FAFA19 | expanded | Expanded palette (named after video games) |
| K.O. | #BEFF00 | expanded | Expanded palette (named after video games) |
| Mega | #00FAFA | expanded | Expanded palette (named after video games) |
| Nights | #41145F | expanded | Expanded palette (named after video games) |
| Osu | #BE0078 | expanded | Expanded palette (named after video games) |
| Red Alert | #FA2828 | expanded | Expanded palette (named after video games) |
| Egg | #00FA05 | expanded | Expanded palette (named after video games) |
| Legend | #69FFC3 | expanded | Expanded palette (named after video games) |
| Zero | #1E69FF | expanded | Expanded palette (named after video games) |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Roobert | Commercial (Displaay Type Foundry); Twitch serves its own cut, RoobertTW | Figtree | Figtree, "Helvetica Neue", Arial, sans-serif |
| body | Roobert | Commercial (Displaay) | Figtree | Figtree, "Helvetica Neue", Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Display headline (every section) | --text-display-xl-* | display | 192px | 58.5px | 0.92 | -7.68px | 500 |
| Category list row | --text-list-xl-* | body | 96px | 37px | 1 | -3.84px | 600 |
| Lead copy and text CTA | --text-lead-* | body | 48px | 19.5px | 1 | -2.2px | 600 |
| Footer link | --text-footer-link-* | body | 24px | 16.7px | 1.5 | 0px | 600 |
| Nav link | --text-nav-* | body | 18px | 18px | 1.16 | 0px | 600 |
| Footer heading | --text-footer-head-* | body | 14px | 12.4px | 1.42 | 0px | 600 |
| Photo caption (vertical) | --text-caption-* | body | 14px | 8px | 1 | 0px | 600 |
| Legal and copyright | --text-legal-* | body | 12px | 12px | 1.42 | 0px | 600 |

## Layout

Measured on https://www.twitch.tv/p/en/about/: computed styles and bounding boxes with Playwright at 1440x900 and 390x844 after scrolling the page once, plus the full-page screenshots, 2026-10-31.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 120px | 33px |
| Section padding | 84px | 33px |
| Container max width | 1200px | full |
| Hero text width | max 1320px | full |
| Grid columns | 12 | 12 |
| Navigation height | 204px | 204px |

Breakpoints from Twitch's CSS: 500, 750, 950, 1150, 1440, 1920px.

Homepage bands, top to bottom (observed):
1. Header on purple
   - Desktop: 0-204
   - Phone: 0-135, hamburger
   - No bar, no border
2. Hero headline
   - Desktop: y 204-629
   - Phone: y 135-311, 3 lines
   - Starts right under the header
3. Hero video + white lead panel
   - Desktop: y 738-1488
   - Phone: panel y 348-494 then video y 478-679
   - Panel is flush to the right edge
4. Category list
   - Desktop: y 1613-2381
   - Phone: y 713-1019
   - Row 1 black with 9px underline
5. Find your thing
   - Desktop: y 2381-3268
   - Phone: y 1020-1578
   - Photo crosses into the white section
6. Share your dream
   - Desktop: y 3268-4684
   - Phone: y 1578-2260
   - Images flush to page edges
7. Build new stuff
   - Desktop: y 5080-5860
   - Phone: y 2408-2895
   - Inset ends 27px above the black section
8. Reach our crowd
   - Desktop: y 5860-7281
   - Phone: y 2895-3668
   - Right half empty at rest
9. Footer
   - Desktop: y 7281-8070
   - Phone: y 3699-4401
   - Ice text

## Page anatomy

How Twitch's own landing pages are built, part by part (observed; https://www.twitch.tv/p/en/about/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: No bar: the header sits on the Twitch Purple ground of the hero. Wordmark left, five centred text links, "twitch.tv" with an arrow right.
- ground: #9146FF (same as the hero; no border, no shadow)
- height: 204px band to the headline top at 1440 (logo y 56-91, links y 63-85); 135px at 390
- border: none
- logo: the extruded Twitch wordmark, white letters with black extrusion (twitch-wordmark-white-black-extrusion.svg), 105x35 at x 140, y 56
- links: 5 links "About", "Stream", "Watch", "Company", "Blog": 18px/20.9px Roobert 600, tracking normal, #F0F0FF; current page ("About") #000000. Left edges x 496, 592, 696, 795, 919 (45px gaps); text top y 63
- actions: "twitch.tv" plus a 9px north-east arrow in the link color #F0F0FF (same shape as the CTA arrows, drawn inline in currentColor), right-aligned ending at x 1300, same 18px/600 #F0F0FF. No button, no search, no sign-in.
- container: x 140-1300 (1160px); the rest of the page uses x 120
- sticky: not sticky; scrolls away
- phone: logo 105x35 at x 38, y 40; a two-bar hamburger (24px wide, white) at right, vertically centred on the logo; header 135px tall; menu opens full-screen purple with 50px/600 links, current one black; closed state only matters for the build (the menu is not shown at rest)

**Hero**
- summary: Purple ground. A giant two-line white headline (192px Roobert Regular) ending in an inline emote, then a 16:9 stream video flush to the left edge with a white text panel laid over its top right.
- desktop: headline x 120, top y 204, 192px/176.64px display face (Figtree 500; Roobert 400 on the live page), -7.68px tracking, #FFFFFF, 2 lines: "We saved you a" / "seat in chat" + emote. Line 1 runs to x ~1365 (nearly the right edge); no max width, it breaks by words; emote hi.png 154x154 inline after the last word of line 2, x 1082, y 391 (its bottom sits on the baseline, ~43px gap after the word); gap 72px padding below the headline block (block ends y 629); panel top at y 738; media video-poster.jpg (stream with overlay) at x 0, y 748, 1320x743 (16:9), no radius, flush to the page left edge; right 120px is purple; panel white #FFFFFF panel x 720-1440 (720 wide, flush to the right edge), y 738-1264 (526 tall), on top of the video (covers the video from x 720 to 1320 for its top 516px); panel text lead 48px/48px weight 600, -1.92px tracking (-2.2px with Figtree), #000000, x 840, top y 861, max width 480px, 6 lines breaking after "millions", "come", "day", "and", "own" (the live lead opens "Twitch is where millions of people come together live every day"; messaging.boilerplate paraphrases the rest); below purple gap from y 1488 (video bottom) to the category list at y 1613; optical Figtree caps sit ~8px higher than Roobert in the same 176.64px line box: add 8px top offset to every 192px headline (so the hero headline block starts at y 212); 3px at 58.5px; z order panel above video
- phone: order header, headline (3 lines + emote), white panel, video; alignment left, margin 33px; sizes headline 58.5px/58.5px -2.34px white, x 33, y 135-311, 3 lines "We saved / you a seat in / chat" + 47px emote; white panel x 33-390 (flush right), y 348-494, text box x 65-358 (32px left padding, 293px measure), 19.5px/20.7px 600 black, 4 lines breaking after "people", "to", "own"; video poster x 0, y 478, 358x201, overlapping the panel bottom by 16px; z order the white panel sits ABOVE the video (panel z 2 over video z 1): the video top 16px hides under the panel
- at rest: headline all words visible (they jump in once on load, 450ms: animation only); emote resting at its baseline position; video show the poster still (video-poster.jpg); it autoplays muted on the live page
- type: display-xl for the headline; lead for the panel copy
- cta: none in the hero
- proof: none in the hero

**Category list (browse)**
- summary: Eight category names stacked as a 96px list on purple. Each row continues sideways as a faint marquee of the other names in 13% black.
- ground: #9146FF
- desktop: band y 1613-2381 (8 rows x 96px), no padding; rows "Games", "Music", "Talk Shows", "Sports", "Travel & Outdoors", "Just Chatting", "Food & Drink", "Special Events": 96px/96px weight 600, -3.84px tracking, left edge x 120, row pitch 96px; colors row 1 "Games" #000000 with a 9px #000000 underline bar (0.625vw) directly under it, full word width; rows 2-8 #FFFFFF, no underline; ghost marquee after each row's word, 24px gap, then the following category names in order, same size, color rgba(0,0,0,0.13), running off the right edge; the same ghost text also continues to the left of x 120 (cut by the page edge). Each row's ghost sequence starts with the next category, so the words do not line up vertically; media no visible image at rest (a 800x450 preview video appears only on hover: animation only)
- phone: band y 713-1019; rows same 8 names, 37px/38.5px pitch weight 600, -1.48px tracking, x 33, all #FFFFFF with a white 3px underline under every row; ghost marquee same 13% black continuation both sides
- anatomy:
  - The list is links; no heading, no intro copy
  - Ghost words are aria-hidden decoration: rgba(0,0,0,0.13) on #9146FF
- components:
  - category_row

**Watch: Find your thing**
- summary: Still on purple. A 192px black headline at left, a white lead and black text CTA in the right third, and a tall portrait photo that overlaps the headline's second line and the purple-to-white boundary.
- ground: #9146FF to y 3268, then the white section starts under the photo
- desktop: band y 2381-3268, padding-top 84px; headline "Find your" / "thing": 192px/176.64px display (Figtree 500), #000000, x 120, top y 2465, 2 lines; photo purpleToWhiteSection.jpg 480x683 at x 130, y 2613 (covers most of the headline's second line "thing"; the line shows only a sliver at its left), bottom y 3296 overhangs the white section by 28px; caption "/djarii" rotated -90deg (reads bottom to top), 14px 600 #868695, 1em left of the photo (x ~109), its start at the photo bottom-left corner; lead 48px/48px 600 #FFFFFF, x 840, top y 2764, width 480, 6 lines, ending with an inline 38px thumbsup.png emote; cta "See our lineup" + arrow, 48px 600 #000000, x 840, y 3100; one word space plus 0.1em between the last letter and the arrow (≈17px), arrow bottom on the baseline; lead copy Opens "Unabashed fans, welcome home." then invites fans to watch what they love, connect with streamers and chat with communities; ends with the thumbs-up emote. 6 lines at 1440 breaking after "fans,", "Watch", "connect", "and", "of"
- phone: headline 58.5px #000000 x 33, y 1052, 2 lines; lead 19.5px/20.7px 600 #FFFFFF y 1189, 4 lines + emote; cta 19.5px 600 #000000 y 1291; photo purpleToWhiteSection.jpg 260x370 at x 130 (flush right), y 1521, straddling the purple-to-white boundary at y 1578; caption 8px #868695 vertical
- anatomy:
  - Text column is the 4-column block x 840-1320 (480px)
  - The photo sits above the headline in z-order
- components:
  - text_cta_on_purple
  - figure_caption

**Stream: Share your dream**
- summary: White section. The headline sits in the right half; three stream images are scattered at the left and right edges, each with a vertical handle caption.
- ground: #FFFFFF (section y 3268-5860 holds this and the next section)
- desktop: headline "Share" / "your" / "dream": 192px/176.64px display (Figtree 500) #9146FF, x 720, top y 3352, 3 lines; image 1 twoItemLockup-img.jpg (streamer at desk) 427x240 at x 0, y 3755, flush left; caption "/FemSteph" rotated +90deg (reads top to bottom), 1em right of the image (x ~432), starting at its top-right corner; lead 48px 600 #000000, x 720, top y 3954, width 480, 5 lines; cta "How to start" + arrow, 48px 600 #9146FF, x 720, y 4242; one word space plus 0.1em between the last letter and the arrow (≈17px), arrow bottom on the baseline; image 2 offset-single-image.jpg 360x202 at x 1080, y 4120, flush right, overlapping the end of the lead copy; caption "/myth" rotated -90deg (reads bottom to top), 1em left of it (x ~1059), ending at its top-left corner; image 3 twoItemLockup-vid-poster.jpg (gameplay with facecam) 747x420 at x 0, y 4264, flush left; caption "/Fitzyhere" rotated +90deg (reads top to bottom), 1em right of it (x ~754), starting at its top-right corner; space empty white from y 4684 to the next headline at y 5080; lead copy Opens "Your creative content thrives here." then "Bring your passions; we'll help you build a community around them." 5 lines at 1440 breaking after "content", "your", "you", "community"
- phone: headline 58.5px #9146FF x 33, y 1757, 2 lines "Share your" / "dream"; image 1 twoItemLockup-img.jpg 195x110 at x 0, y 1816 (over the headline's second line); lead 19.5px 600 #000000 y 1893, 3 lines; cta 19.5px #9146FF y 1975; image 3 twoItemLockup-vid-poster.jpg 359x202 at x 0, y 2052; image 2 hidden on phone
- anatomy:
  - Images are flush to the page edges, never inside the 120px margin
  - Captions are the streamer's channel handle with a leading slash
- components:
  - text_cta_on_light
  - figure_caption

**Develop: Build new stuff**
- summary: White. A 192px purple headline at left, a large screenshot below it flush left with a small UI inset overhanging into the black section, lead and purple CTA at right.
- ground: #FFFFFF
- desktop: headline "Build new" / "stuff": 192px display (Figtree 500) #9146FF, x 120, top y 5080, 2 lines (the second line is partly covered by the image); image pokemon.jpg 720x482 at x 0, y 5317, flush left; inset pokemon-inset.png (leaderboard UI) 240x278 at x 115, y 5555, on top of the image; its bottom (y 5833) stops 27px above the black section. No overhang; caption "Pokemon Badge Collector" rotated +90deg (reads top to bottom), 14px #868695, 1em right of the image (x ~727), starting at its top-right corner; lead 48px 600 #000000, x 840, top y 5356, width 480, 6 lines with an inline 38px vohiyo.png emote mid-sentence; cta "Build with us" + arrow, 48px 600 #9146FF, x 840, y 5692; one word space plus 0.1em between the last letter and the arrow (≈17px), arrow bottom on the baseline; lead copy Opens "Twitch is a developer's dreamland." then says countless communities need custom tools built just for them, emote, "Come be their hero." 6 lines at 1440 breaking after "Countless", "need", "just", "Come be"
- phone: headline 58.5px #9146FF x 33, y 2408, 2 lines; lead 19.5px 600 #000000 y 2545, 4 lines; cta 19.5px #9146FF y 2645; image pokemon.jpg 361x242 at x 29, y 2973 with the inset 128x148 at x 66, y 3127
- anatomy:
  - Same text column as Watch: x 840-1320
- components:
  - text_cta_on_light
  - figure_caption

**Advertise: Reach our crowd**
- summary: Black section: a 192px purple headline at left, white lead and a purple CTA under it. The right half is empty black at rest.
- ground: #000000
- desktop: band y 5860-7281 (1421 tall): the headline top is 372px below the band top; CTA bottom y 7042, then 239px of black to the footer; headline "Reach our" / "crowd": 192px display (Figtree 500) #9146FF, x 120, top y 6232, 2 lines; lead 48px 600 #FFFFFF, x 120, top y 6658, width 480, 6 lines; cta "Advertise with us" + arrow, 48px 600 #9146FF, x 120, y 6994; one word space plus 0.1em between the last letter and the arrow (≈17px), arrow bottom on the baseline; right half empty black at rest in our capture (crowd.jpg reveals on scroll at x 677, y 6915, 767x511: animation only; leave it out); lead copy Opens "Ready to build real connections with a huge, engaged audience?" then "We've got a few million friends we'd like you to meet." 6 lines at 1440 breaking after "real", "a", "huge, engaged", "got a", "we'd"
- phone: band y 2895-3668: headline top 218px below the band top; headline 58.5px #9146FF y 3113; lead 19.5px #FFFFFF y 3249; cta 19.5px #9146FF y 3352
- anatomy:
  - Text column moves to the left (x 120-600) in this section
- components:
  - text_cta_on_dark

**Footer**
- summary: Black, continuous with the section above (no rule between). Glitch logo at left, six link columns, a legal row and the copyright at the bottom.
- ground: #000000
- anatomy:
  - Band y 7281-8070 (789 tall): the Glitch and the column headings start 105px below the band top; legal row 649px below; 135px of black under it
  - Glitch logomark (glitch-white.svg) 48x53 at x 120, y 7386
  - Six columns at x 360, 524, 688, 852, 1016, 1180 (164px pitch, 140px wide); headings at y 7386 in 14px/20px 600 #F0F0FF
  - Links 24px/36px 600 #F0F0FF, first at y 7424, 48px pitch; "Creator Camp" wraps to 2 lines
  - Communities: Stream, Watch, Develop, Advertise, twitch.tv (with a north-east arrow)
  - Company: Jobs, Merch, Brand, TwitchCon, Meetups
  - Newsroom: News, Press
  - Products: Bits, Subs, Turbo, Prime, Extensions, Gift Card
  - Resources: Creator Camp, Legal, Help Center, Security
  - Connect: Twitter, Facebook, Instagram
  - Legal row at y 7921: Terms of Service, Privacy Policy, Ad Choices, Cookie Policy, Partners, Affiliates: 12px/17px 600 #F0F0FF, 24px gaps, starting x 120
  - Copyright "© 2024 Twitch Interactive, Inc." 12px 600 #F0F0FF right-aligned to x 1320 on the legal row (the live page still prints 2024)
- phone: glitch 48x53 at x 33; columns in a 3-up grid (x 33, 157, 281): Communities, Company, Newsroom, then Products, Resources, Connect; headings 12.4px, links 16.7px/25px; legal links in 2 columns (12px); copyright last line

**On dark grounds**
- secondary button: none (text CTAs only)
- link: #9146FF text CTA + arrow on black
- muted text: #F0F0FF (Ice) for footer text; lead copy is #FFFFFF
- hairline: none
- logo variant: white Glitch (footer); on purple the wordmark has white letters and a black extrusion

## Components

- **text cta on purple** (observed): text #000000, fill none, radius 0, font size 48, weight 600, face body, arrow north-east arrow 0.5em square (24px at 48px), margin-left 0.1em, bottom-aligned to the baseline (arrow-ne-black.svg), example "See our lineup" + arrow, gap a word space + 0.1em (≈17px at 48px) before the arrow. No box, no underline. Sits 1em below the lead (48px)
  - hover (observed): color the lead text color (white on purple), arrow slides out to the north-east (100ms ease-in) and a fresh arrow slides in from the south-west (200ms ease-in)
- **text cta on light** (observed): text #9146FF, fill none, radius 0, font size 48, weight 600, face body, arrow arrow-ne-purple.svg, 24px, example "How to start" + arrow
  - hover (observed): color #000000 (the lead text color)
- **text cta on dark** (observed): text #9146FF, fill none, radius 0, font size 48, weight 600, face body, arrow arrow-ne-purple.svg, 24px, example "Advertise with us" + arrow
  - hover (observed): color #FFFFFF
- **category row** (observed): text #FFFFFF, font size 96, weight 600, face body, underline 9px bar (0.625vw) in the text color under the active row, full word width, ghost rgba(0,0,0,0.13) continuation text, 0.25em from the word
  - hover (observed): color #000000, underline black bar grows from 0 to 100% width, 300ms ease-in-out
- **figure caption** (observed): text #868695, font size 14, weight 600, face body. the streamer handle "/name", 14px #868695 (8px at 390), set 1em outside the image edge. Right-edge captions rotate +90deg and read top to bottom from the top-right corner; left-edge captions rotate -90deg and read bottom to top. Phone: same sides as desktop, 8px
- **lead panel** (observed): fill #FFFFFF, text #000000, radius 0, padding 120px left and top at 1440; 32px at 390

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| text-jump |  | 450ms | Headline words and inline emotes jump up into place once (translateY 5.2vw to 0) | observed |
| label-rise | cubic-bezier(0.87, 0, 0.04, 1) | 300ms | Labels and captions rising into view | observed |
| cta-color | ease-in-out | 150ms | Text CTA and category color change on hover | observed |
| underline-grow | ease-in-out | 300ms | Category underline grows to full width on hover | observed |
| arrow-swap | ease-in | 200ms | CTA arrow exits north-east in 100ms, a new one enters in 200ms | observed |

## Icon tokens

Grid not published, stroke solid block arrow: two 5.3-unit bars and a 7.1-unit diagonal on a 35-unit box (observed).
| Name | Size | Use |
|---|---|---|
| cta-arrow | 24px | north-east arrow after a 48px text CTA (0.5em) |

## Signature moves

### Purple flood

Where: the top of every brand surface: the homepage is Twitch Purple from the header through the first three bands.
Do: a full-bleed #9146FF ground under the header and hero, with white display type and black body copy on it; then hand over to white and finally black. One purple stretch per page, at the top.
Don't: tint the purple, lighten it to lavender, or set it as a small accent only.
Example: "We saved you a seat in chat".

### Giant two-line headline

Where: every section opener.
Do: 192px Roobert Regular (stand-in Figtree 500) at -0.04em and 0.92 line height, two or three lines, left on the 120px margin or at the page center line (x 720).
Don't: bold the display type or set it below 128px at 1440.
Example: "Share your dream".

### Emotes as punctuation

Where: end of the hero headline (154px) and inside lead sentences (38px).
Do: a real Twitch emote set inline at the text size, as a word. One emote per headline or paragraph.
Don't: scatter emotes as stickers or use them as icons.
Example: "Come be their hero.".

### Edge-flush stream figures with vertical handles

Where: photo and video slots.
Do: square-cornered stream stills flush to the page edge, overlapping headlines or section boundaries, each with a 14px gray "/handle" caption rotated along its edge.
Don't: round the corners, frame the images in cards, or caption them with a title.

### Extruded wordmark and the Glitch

Where: header (wordmark) and footer (Glitch).
Do: blocky wordmark with a game-style extrusion; the Glitch speech-bubble mark as the short form.
Don't: redraw, recolor or restyle either mark.

## Messaging: rules

One invitation per audience: watch, stream, build, advertise. Each gets a two-to-four-word headline and one sentence.

Why it works: Four audiences on one page stay clear because every section speaks to exactly one of them.

- Lead with the community, then the offer
- One audience per section
- Keep claims qualitative: "millions", "a few million friends"
- Don't invent audience numbers
- Don't suggest Twitch endorses a third party

Sources: https://www.twitch.tv/p/en/about/, https://www.twitch.tv/p/en/company/, https://legal.twitch.com/en/legal/trademark/

## Voice: rules

The guide talks like chat: jokes, fragments, gaming references, a self-aware wink ("our (beloved) madness"). The homepage is calmer but keeps contractions and emotes.

Why it works: It sounds like the people who use it, which is the brand's whole promise.

- Sentence case, no period on headlines
- We to you, with contractions
- Emotes inline as words
- Short fragments for emphasis
- Don't write corporate filler
- Don't use exclamation marks
- Don't call people users

Sources: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/, https://www.twitch.tv/p/en/about/

## Logo: rules

The 2019 wordmark keeps the DNA of the old one: bold, blocky letters with an extrusion inspired by classic video games. The Glitch, a speech bubble with two eyes, is the shorthand for Twitch.

Why it works: Nostalgia keeps long-time fans; the extrusion signals gaming at a glance.

|  |  |
|---|---|
| Wordmark | blocky letters + game-style extrusion |
| Short form | the Glitch |
| Clear space | not published |
| Minimum size | not published |

- On Twitch Purple the homepage uses white letters with a black extrusion
- The Glitch alone is the compact mark (footer, social)
- Use only the official files from brand.twitch.com
- Don't modify or recolor the logos (trademark guidelines)
- Don't combine the marks into another product name
- Don't use the logo to suggest partnership or endorsement

Not published: clear space; minimum size.

Real examples, to look at on Twitch's own pages (not for reuse):
- The guideline site opening ("Meet your new Twitch"): https://web.archive.org/web/20240501000000/https://brand.twitch.tv/

Sources: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/, https://legal.twitch.com/en/legal/trademark/, https://brand.twitch.com/

## Color: rules

Core palette: Twitch Purple #9146FF, Black and Ice #F0F0FF. Expanded palette: 23 more named after video games (Jiggle, Wipe-Out, Pac, Mudkip...). Gradients pair purple with expanded colors.

Why it works: Purple is the only color "weird enough" for Twitch (guide); keeping the core to three makes it unmistakable.

|  |  |
|---|---|
| Twitch Purple | #9146FF / RGB 145 70 255 / CMYK 65 65 0 0 |
| Black | #000000 |
| Ice | #F0F0FF / RGB 240 240 255 / CMYK 4 4 0 0 |
| Gradient stops | #9146FF, #00C8AF, #FAB4FF, #FFCA5F |

- Purple, black and ice are the natural state; expanded colors are for expression
- Gradients: Twitch Purple with Wipe-Out #00C8AF, Jiggle #FAB4FF or Pac #FFCA5F
- The homepage runs purple, then white, then black, top to bottom
- Don't ship a Twitch surface without purple
- Don't swap purple for a lavender tint

Not published: color proportions or ratios; contrast or accessibility pairings.

Do and don't:
- Do: "We saved you a seat in chat". White display type on Twitch Purple, as the homepage hero.
- Don't: "We saved you a seat in chat". A lavender tint in place of Twitch Purple.

Sources: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/, https://www.twitch.tv/p/en/about/

## Typography: rules

Roobert, a monolinear geometric sans named after Robert Moog, is the one family. The homepage sets 192px Regular headlines and 48px SemiBold lead copy, both at -0.04em.

Why it works: One family at two weights and two extreme sizes gives the page its scale contrast without a second face.

|  |  |
|---|---|
| Family | Roobert (licensed); stand-in Figtree |
| Display | 192px / 400 / -0.04em |
| Lead | 48px / 600 / -0.04em |

- Display Regular 400, huge, tight (-0.04em, 0.92 leading)
- Body and CTAs SemiBold 600
- Sentence case
- Don't set display type bold
- Don't add a second typeface

Not published: a published type scale; line-length rules.

Sources: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/, https://www.twitch.tv/p/en/about/

## Graphic elements: rules

Signature elements: the purple, the extruded wordmark, the Glitch, Roobert and emotes. On the web: giant headlines, edge-flush stream stills with vertical handle captions, ghost-text category marquees.

Why it works: Each comes from the community (emotes, chat, streams), so the system feels like the product.

- Emotes inline at text size
- Images flush to the page edge, square corners
- Vertical "/handle" captions on stream images
- Don't round corners or put images in cards
- Don't use emotes as decoration

Sources: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/, https://www.twitch.tv/p/en/about/

## Iconography: rules

The only icon on the homepage is a solid north-east arrow after text CTAs; it is half the text size.

Why it works: Keeps CTAs as words, not buttons.

- Arrow 0.5em square, currentColor
- Don't add an icon set the brand has not published

Not published: an icon set, grid or stroke.

Sources: https://www.twitch.tv/p/en/about/

## Illustration: rules

Emotes are the illustration: small expressive faces from chat (HeyGuys-style wave, thumbs up). The guide also shows game-inspired extrusions and gradients.

Why it works: Emotes are already the community's visual language.

- Use real Twitch emotes, at text size
- Don't draw new mascots or icons in their place

Not published: an illustration style guide.

Sources: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/, https://www.twitch.tv/p/en/about/

## Photography: rules

Real streamers on camera and real stream captures with their overlays: facecams, gaming screens, a cut-out portrait on a plain light ground. Each carries the channel handle.

Why it works: Creators are the product; showing them, credited by handle, is the brand promise in pictures.

- Real creators and real streams, credited "/handle"
- Square crops, flush to the page edge, allowed to overlap type and section edges
- Don't use stock models
- Don't remove the stream overlays

Not published: photography guidelines.

Sources: https://www.twitch.tv/p/en/about/

## Motion: rules

Headline words and emotes jump in (450ms); CTA arrows swap north-east on hover; category underlines grow (300ms). The guide site itself is a playable "Press Start" experience.

Why it works: Motion feels like a game: quick, bouncy, rewarding a hover.

- Short (100-450ms), ease or the brand curve cubic-bezier(0.87, 0, 0.04, 1)
- Don't use slow fades

Not published: motion principles.

Sources: https://www.twitch.tv/p/company-assets/css/about.css, https://web.archive.org/web/20240501000000/https://brand.twitch.tv/

## Interface and layout: rules

12 columns of 120px at 1440 with no gutter; type on column 2, lead copy in a 4-column block at x 720 or 840; media breaks the grid to the page edges.

Why it works: Huge type on a strict grid, with images allowed to cross it, gives order plus mess, the guide's "method to our madness".

- Margin 120px desktop, 33px phone
- Section order purple, white, black
- No cards, no boxes, no radius
- Don't center the layout in a narrow container

Sources: https://www.twitch.tv/p/en/about/, https://web.archive.org/web/20240501000000/https://brand.twitch.tv/

## Rules: rules

Twitch's published rules are mostly about its marks: do not modify them, do not imply endorsement, use TWITCH as an adjective.

Why it works: Protects a brand the community remixes constantly.

- Refer to Twitch as the source ("Compatible with Twitch")
- Glitch + channel name is allowed on social
- Purple is non-negotiable
- Don't alter colors or design of logos, app icons or screenshots
- Don't use Twitch marks in domain, product or event names
- Don't suggest affiliation, sponsorship or endorsement
- Don't use emotes without permission

Sources: https://legal.twitch.com/en/legal/trademark/, https://web.archive.org/web/20240501000000/https://brand.twitch.tv/

## Campaigns

### The 2019 rebrand: Meet your new Twitch (2019)

A refreshed wordmark, a bolder Twitch Purple, Roobert, wider use of emotes and an expanded palette with gradients, presented on brand.twitch.tv as a playable site.

How the system shows: Every chapter of the guide site uses the purple, giant Roobert, emotes and a chat log running beside it.
Why it works: It reads as the community's brand, not a corporate refresh.
Channels: identity system, web. Source: https://web.archive.org/web/20240501000000/https://brand.twitch.tv/

## Applications

| Format | What | Source |
|---|---|---|
| marketing homepage | twitch.tv/p/en/about: purple, white, black bands, giant headlines, edge-flush stream stills | https://www.twitch.tv/p/en/about/ |
| brand asset page | brand.twitch.com: a single download page for the official asset zip | https://brand.twitch.com/ |

## By format

How our engine applies Twitch's system to each format. Our recipe from the guide and the homepage. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | Build it the way twitch.tv/p/en/about is built (kit.spec.page, homepage voice): a purple header and hero with a 192px white headline and an inline emote, a white lead panel over an edge-flush video still, purple then white then black sections, 192px section headlines, 48px SemiBold lead in a 480px column, text CTAs with a north-east arrow, a black footer with the Glitch | which audiences get a section; the images (always real streams, credited by handle) |
| Deck | 3 | Twitch Purple title slide, Roobert (Figtree) headlines, emotes inline | expanded palette gradients for section breaks |
| Social post | 4 | purple or a purple gradient, one giant line, one emote | expanded palette colors |

## Checks before anything ships

- **Logo hidden**: Cover the wordmark. Purple ground, giant Roobert-style type and an emote should still say Twitch.
- **Swap test**: Swap in another streaming brand's logo. If it still fits, the purple, the emotes or the creator credits are missing.
- **Real creators**: Every image is a real stream or streamer, credited "/handle".

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Twitch's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- The 2019 guideline site (brand.twitch.tv) is offline; we read the copy archived on 2024-05-01. brand.twitch.com now holds only an asset download (Twitch-Brand.zip, not read).
- Logo clear space and minimum size: not published on the guide site.
- Color proportions, contrast pairings and accessibility rules: not published.
- A type scale, line lengths and weights beyond Roobert: not published; the homepage values are observed.
- Voice principles: not published as rules; tone words are our reading.
- Photography, illustration, icon and motion guidelines: not published; chapters are observed from the homepage and its CSS.
- White #FFFFFF and caption gray #868695 are homepage colors, not in the published palette.

Logos and reference images belong to Twitch. Look at them on Twitch's own pages; don't reuse them.