Watch: find your thing
Fans find what they love, connect with streamers and chat with communities. Observed
The system
Fixed, everywhere
- 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.
Source: web.archive.org/web/20240501000000/https://brand.twitch.tvtwitch.tv/p/en/about
How loud each format gets
Silent
Quiet
Calm
WarmLanding pageDeck
LoudSocial post
Loudest
Our engine's setting, built from their rules.
Every piece passes 3 checks
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".
Strategy
Twitch is building the future of live, interactive entertainment, one community at a time. Published
Stream: share your dream
Creators bring their passions and Twitch helps them build a community around them. Observed
Develop: build new stuff
Communities need custom tools; developers build them (Extensions). Observed
Advertise: reach our crowd
Brands meet a large, engaged audience through real connections. Observed
We saved you a seat in chat
Find your thing
Share your dream
Build new stuff
Full spec
- For Observed
- Four audiences, one per homepage section: fans who watch, streamers who create, developers who build tools, advertisers who want the audience.
- Problem Our reading
- Entertainment you only watch, alone: Twitch makes it something people make together, live.
- Promise Our reading
- A seat in chat: belonging in a live community around what you love.
- Mission Published
- To create belonging by enabling streamers to build community.
Proof behind each pillar
- Watch: find your thing. Millions of people come together live every day (homepage wording; no exact figure on the page).
- Watch: find your thing. Eight homepage categories: Games, Music, Talk Shows, Sports, Travel & Outdoors, Just Chatting, Food & Drink, Special Events.
- Stream: share your dream. Mission: create belonging by enabling streamers to build community.
- Develop: build new stuff. Extensions and a developer platform (dev.twitch.tv) for custom community tools.
- Advertise: reach our crowd. "A few million friends we'd like you to meet" (homepage wording; no exact figure).
Story Published
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.
Values
Community first
The rebrand was about celebrating the community, not Twitch (paraphrase).
PublishedStay different
The will to be different never changes; signature elements carry it (paraphrase).
PublishedMethod in the madness
A structured system that focuses the community's creativity (paraphrase).
PublishedCategory. Live, interactive entertainment: live streaming with chat. Published
Why them
- Live chat and emotes: the audience is part of the show. Published
- Creators across categories beyond games (music, talk shows, sports, travel, just chatting, food, events). Observed
- Community tools built by developers (Extensions). Observed
- Ways for fans to support creators (Bits, Subs, Prime, Turbo in the footer product list). Observed
Instead of
Not named by Twitch. Our reading: on-demand video platforms and other live-streaming services.
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 Observed
Meet your new Twitch Published
There is no Twitch without purple. Period. Published
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).
More real lines
Reach our crowd
One invitation per audience: watch, stream, build, advertise. Each gets a two-to-four-word headline and one sentence.
Source: twitch.tv/p/en/abouttwitch.tv/p/en/companylegal.twitch.com/en/legal/trademark
Personality and voice
Playfulbut not ChildishOur reading
Community-firstbut not CorporatePublished
Irreverentbut not MeanPublished
Directbut not Hard-sellObserved
It sounds like the people who use it, which is the brand's whole promise.
Full spec
- 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
PlayfulCommunity-firstIrreverentDirect
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.
- Sentence case, no period on headlines
- We to you, with contractions
- Emotes inline as words
- Short fragments for emphasis
- 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.
Their words
communitycreatorsstreamerschatlivetogetheremotes
Never
users (say viewers, fans, streamers or creators)content consumersexclamation marks
Source: web.archive.org/web/20240501000000/https://brand.twitch.tvtwitch.tv/p/en/about
- Don’t write corporate filler
- Don’t use exclamation marks
- Don’t call people users
Source: web.archive.org/web/20240501000000/https://brand.twitch.tvtwitch.tv/p/en/about
Logo
Copied from the inline SVG on twitch.tv/p/en/about (fill colors resolved from its CSS). Official files are in the Twitch-Brand.zip on brand.twitch.com.
Nostalgia keeps long-time fans; the extrusion signals gaming at a glance.
Full spec
- 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
| Wordmark | blocky letters + game-style extrusion |
|---|---|
| Short form | the Glitch |
| Clear space | not published |
| Minimum size | not published |
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.
Not published: clear space; minimum size.
Source: web.archive.org/web/20240501000000/https://brand.twitch.tvlegal.twitch.com/en/legal/trademarkbrand.twitch.com
Color
We saved you a seat in chat
We saved you a seat in chat
Purple is the only color "weird enough" for Twitch (guide); keeping the core to three makes it unmistakable.
Full spec
- 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
| 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 |
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.
Not published: color proportions or ratios; contrast or accessibility pairings.
Source: web.archive.org/web/20240501000000/https://brand.twitch.tvtwitch.tv/p/en/about
Typography
We saved you a seat in chat
One family at two weights and two extreme sizes gives the page its scale contrast without a second face.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Roobert | Display headlines Regular 400 | Commercial (Displaay Type Foundry); Twitch serves its own cut, RoobertTW | Figtree Closest measured match: same cap height (0.70em) and x-height (0.50em); width within 1.2% at weight 500 |
| Roobert | Lead copy, CTAs, nav and footer SemiBold 600 | Commercial (Displaay) | Figtree Figtree 600 at -0.046em matches the line width exactly |
- 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
| Family | Roobert (licensed); stand-in Figtree |
|---|---|
| Display | 192px / 400 / -0.04em |
| Lead | 48px / 600 / -0.04em |
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.
Not published: a published type scale; line-length rules.
Source: web.archive.org/web/20240501000000/https://brand.twitch.tvtwitch.tv/p/en/about
Graphic elements
We saved you a seat in chat
Purple flood · the top of every brand surface: the homepage is Twitch Purple from the header through the first three bands
Share your dream
Giant two-line headline · every section opener
Come be their hero.
Emotes as punctuation · end of the hero headline (154px) and inside lead sentences (38px)
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.
Edge-flush stream figures with vertical handles · photo and video slots
Do blocky wordmark with a game-style extrusion; the Glitch speech-bubble mark as the short form.
Extruded wordmark and the Glitch · header (wordmark) and footer (Glitch)
Specimens use sample copy, not Twitch’s.
Each comes from the community (emotes, chat, streams), so the system feels like the product.
Full spec
- 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
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.
Source: web.archive.org/web/20240501000000/https://brand.twitch.tvtwitch.tv/p/en/about
Iconography
Keeps CTAs as words, not buttons.
Full spec
- Arrow 0.5em square, currentColor
- Don’t add an icon set the brand has not published
The only icon on the homepage is a solid north-east arrow after text CTAs; it is half the text size.
Not published: an icon set, grid or stroke.
Source: twitch.tv/p/en/about
Illustration
Emotes are already the community's visual language.
Full spec
- Use real Twitch emotes, at text size
- Don’t draw new mascots or icons in their place
Emotes are the illustration: small expressive faces from chat (HeyGuys-style wave, thumbs up). The guide also shows game-inspired extrusions and gradients.
Not published: an illustration style guide.
Source: web.archive.org/web/20240501000000/https://brand.twitch.tvtwitch.tv/p/en/about
Photography
Creators are the product; showing them, credited by handle, is the brand promise in pictures.
Full spec
- 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
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.
Not published: photography guidelines.
Source: twitch.tv/p/en/about
Motion
Labels and captions rising into view
Motion feels like a game: quick, bouncy, rewarding a hover.
Full spec
- Short (100-450ms), ease or the brand curve cubic-bezier(0.87, 0, 0.04, 1)
- Don’t use slow fades
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.
Not published: motion principles.
Source: twitch.tv/p/company-assets/css/about.cssweb.archive.org/web/20240501000000/https://brand.twitch.tv
Interface & layout
The page, band by band
Header on purple
Hero headline
Hero video + white lead panel
Category list
Find your thing
Share your dream
Build new stuff
Reach our crowd
Footer
Buttons
Full spec
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.
Measured from twitch.tv/p/en/about's computed styles and bounding boxes with Playwright at 1440x900 and 390x844 after scrolling the page once, plus the full-page screenshots, 2026-10-31.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 120px | 33px |
| Section padding | 84px | 33px |
| Hero text width | max 1320px, centered | full width |
| Navigation | 204px | 204px |
Type, at size
Display headline (every section)
Roobert · 192px (phone 58.5) · line 0.92 · tracking -7.68px · weight 500
Category list row
Roobert · 96px (phone 37) · line 1 · tracking -3.84px · weight 600
Lead copy and text CTA
Roobert · 48px (phone 19.5) · line 1 · tracking -2.2px · weight 600
Footer link
Roobert · 24px (phone 16.7) · line 1.5 · weight 600
Nav link
Roobert · 18px · line 1.16 · weight 600
Footer heading
Roobert · 14px (phone 12.4) · line 1.42 · weight 600
Photo caption (vertical)
Roobert · 14px (phone 8) · line 1 · weight 600
Legal and copyright
Roobert · 12px · line 1.42 · weight 600
- Motion
- Headline words and emotes jump in (450ms), CTA arrows slide out north-east on hover (100ms out, 200ms in), category rows underline on hover (300ms ease-in-out)
- Buttons
- none
Page anatomy
How Twitch’s own landing pages are built, observed on twitch.tv/p/en/about, 2026-10-31. The full measurements are in spec.md.
- Navigation
- 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.
- Hero
- 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.
- Category list (browse)
- 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.
- Watch: Find your thing
- 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.
- Stream: Share your dream
- 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.
- Develop: Build new stuff
- 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.
- Advertise: Reach our crowd
- Black section: a 192px purple headline at left, white lead and a purple CTA under it. The right half is empty black at rest.
- Footer
- 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.
Source: twitch.tv/p/en/aboutweb.archive.org/web/20240501000000/https://brand.twitch.tv
In use
The 2019 rebrand: Meet your new Twitch · 2019
It reads as the community's brand, not a corporate refresh. Our reading
Full spec
How our engine applies Twitch's system to each format. Our recipe from the guide and the homepage.
- The 2019 rebrand: Meet your new Twitch. 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. web.archive.org/web/20240501000000/https://brand.twitch.tv
| Format | What they did | Source |
|---|---|---|
| marketing homepage | twitch.tv/p/en/about: purple, white, black bands, giant headlines, edge-flush stream stills | twitch.tv/p/en/about |
| brand asset page | brand.twitch.com: a single download page for the official asset zip | brand.twitch.com |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | 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 | Twitch Purple title slide, Roobert (Figtree) headlines, emotes inline | expanded palette gradients for section breaks | |
| Social post | purple or a purple gradient, one giant line, one emote | expanded palette colors |
Ads
Rules
Do
- 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
- use Twitch marks in domain, product or event names
- suggest affiliation, sponsorship or endorsement
- use emotes without permission
Source: legal.twitch.com/en/legal/trademarkweb.archive.org/web/20240501000000/https://brand.twitch.tv
Steal this kit
Your name and logo, Twitch’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Twitch doesn’t publish
- 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.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with Twitch.