# Twitch

> `twitch@1.0.0`

Twitch is the global live-streaming platform for gaming, esports, and creator-driven live content, owned by Amazon since 2014. The brand identity, refreshed in 2019 by Collins, is anchored on a single saturated Twitch Purple (#9146FF) and the geometric Glitch mark on a dark canvas. The brand is dark-first and unmistakably gamer-facing: the consumer product, the chat panel, and the player chrome all live on near-black surfaces with the purple reading as the high-energy interactive signature.


**Tags:** `streaming`, `gaming`, `twitch`, `amazon`, `dark-first`, `live`, `creator`

## Atoms

### Palette

**Twitch** · `twitch@1.0.0` · Proprietary — All Rights Reserved

> Twitch (an Amazon company) corporate palette. Twitch's identity is anchored on a single saturated purple — Twitch Purple (#9146FF) — paired with a dark canvas. The brand is dark-first: the consumer product, marketing surfaces, and the Glitch mark all live on near-black surfaces with the purple reading as the high-energy signature. The 2019 brand refresh by Collins simplified the identity to one purple, one mark, and a deliberately gamer-facing voice that distinguishes Twitch from streaming-video conventions. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `twitch-purple` | Twitch Purple | `#9146FF` |
| `twitch-purple-hover` | Twitch Purple Hover | `#772CE8` |
| `twitch-purple-light` | Twitch Purple Light | `#BF94FF` |
| `twitch-black` | Twitch Black | `#0E0E10` |
| `twitch-near-black` | Twitch Near-Black | `#18181B` |
| `twitch-charcoal` | Twitch Charcoal | `#1F1F23` |
| `twitch-white` | Twitch White | `#FFFFFF` |
| `twitch-off-white` | Twitch Off-White | `#EFEFF1` |
| `twitch-graphite` | Twitch Graphite | `#53535F` |
| `twitch-gray-light` | Twitch Gray Light | `#ADADB8` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `twitch-off-white` | `#EFEFF1` |
| `surface` | `twitch-white` | `#FFFFFF` |
| `surface-elevated` | `twitch-white` | `#FFFFFF` |
| `text-primary` | `twitch-black` | `#0E0E10` |
| `text-secondary` | `twitch-graphite` | `#53535F` |
| `text-tertiary` | `twitch-gray-light` | `#ADADB8` |
| `primary` | `twitch-purple` | `#9146FF` |
| `primary-hover` | `twitch-purple-hover` | `#772CE8` |
| `accent` | `twitch-purple` | `#9146FF` |
| `accent-hover` | `twitch-purple-hover` | `#772CE8` |
| `warning` | `twitch-purple-light` | `#BF94FF` |
| `warning-hover` | `twitch-purple` | `#9146FF` |
| `error` | `twitch-purple-hover` | `#772CE8` |
| `success` | `twitch-purple` | `#9146FF` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `twitch-black` | `#0E0E10` |
| `surface` | `twitch-near-black` | `#18181B` |
| `surface-elevated` | `twitch-charcoal` | `#1F1F23` |
| `text-primary` | `twitch-white` | `#FFFFFF` |
| `text-secondary` | `twitch-gray-light` | `#ADADB8` |
| `text-tertiary` | `twitch-graphite` | `#53535F` |
| `primary` | `twitch-purple` | `#9146FF` |
| `primary-hover` | `twitch-purple-light` | `#BF94FF` |
| `accent` | `twitch-purple` | `#9146FF` |
| `accent-hover` | `twitch-purple-light` | `#BF94FF` |
| `warning` | `twitch-purple-light` | `#BF94FF` |
| `warning-hover` | `twitch-purple` | `#9146FF` |
| `error` | `twitch-purple-light` | `#BF94FF` |
| `success` | `twitch-purple` | `#9146FF` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `twitch-black` | `#0E0E10` |
| `on-identity` | `twitch-purple` | `#9146FF` |
| `background` | `twitch-black` | `#0E0E10` |
| `surface` | `twitch-near-black` | `#18181B` |
| `surface-elevated` | `twitch-charcoal` | `#1F1F23` |
| `text-primary` | `twitch-white` | `#FFFFFF` |
| `text-secondary` | `twitch-gray-light` | `#ADADB8` |
| `text-tertiary` | `twitch-graphite` | `#53535F` |
| `primary` | `twitch-purple` | `#9146FF` |
| `primary-hover` | `twitch-purple-light` | `#BF94FF` |
| `accent` | `twitch-purple` | `#9146FF` |
| `accent-hover` | `twitch-purple-light` | `#BF94FF` |
| `mark` | `twitch-purple` | `#9146FF` |
| `text-emphasis` | `twitch-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `wordmark` | `heading` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark.fill`

- **allowed:** twitch-purple, twitch-white, twitch-black
- **forbidden:** twitch-purple-hover, twitch-purple-light, twitch-graphite, twitch-gray-light

> The Twitch Glitch mark renders only in Twitch Purple, reversed white on dark cinematic surfaces, or in monochrome black on light. The hover and lighter purples are interactive-state values; gray tones are chrome — none are acceptable mark fills. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant

> Twitch's 2019 brand refresh established a flat, geometric identity. Gradients, drop-shadows, and recoloring conflict with the documented brand system; apply only Twitch-approved variants with respected clearspace. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Twitch White on Twitch Black (#0E0E10) gives ~19:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Twitch surfaces. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> Twitch Purple (#9146FF) on Twitch Black gives ~5:1 — clears AA-large and approaches AA-normal. Buttons using the purple fill with white text exceed 6:1; this rule guards the interactive affordance of the primary CTA. 

#### `contextRestriction` → `roles.colors.primary`

- **forbiddenContexts:** body-text, secondary-link, validation-failure

> Twitch Purple is reserved for the brand mark, the wordmark, and primary actions ("Follow," "Subscribe," "Go Live"). Using it inside body copy or for error/failure states breaks the interactive signal the purple carries throughout the product. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing. 

### ⚠️ warning (2)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 700, 800

> Twitch's marketing and product chrome use Medium (500), Bold (700), and Heavy (800) for hero and section headers. Lighter cuts read as chat body and compromise the energetic, gamer- facing voice. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.4`

> Twitch's marketing headers and section heads run materially larger than the chat-and-metadata body text. A 1.4× minimum ratio preserves the display-to-prose hierarchy the product and marketing both depend on. 

## Provenance

- **Source:** <https://brand.twitch.tv/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Twitch Interactive, Inc. (an Amazon company) — Twitch, the Twitch wordmark, and the Glitch mark are registered trademarks of Twitch Interactive, Inc. The signature Twitch Purple (#9146FF) and the canvas (#0E0E10) are documented across Twitch's public brand site at brand.twitch.tv. Inter is referenced for both heading and body roles — Twitch does not use a proprietary brand face and runs Roobert / Inter family sans across product surfaces. 
- **Imported:** `2026-05-18`
- **Notes:** Twitch's brand site (brand.twitch.tv) is one of the more accessible streaming brand kits. Twitch does not commission a full proprietary corporate face the way Netflix Sans or Spotify Circular were commissioned; the product runs an Inter-family sans. Inter is the canonical reference for this atom. 

---

*Generated by the brand-atoms converter. Source: `twitch@1.0.0` from the encyclopedia.*