Twitch

---
name: twitch-tv-design-system
source: https://www.twitch.tv/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#0e0e10"
  text-muted: "#adadb8"
  surface: "#efeff1"
  hairline: "#d9d8dd"
  accent: "#9147ff"  # indigo
  accent-2: "#772ce8"  # indigo
  accent-3: "#5c16c5"  # indigo
fonts:
  primary: "Inter"
---

# Twitch — Design System

Extracted from **https://www.twitch.tv/** on 2026-07-03.

> Twitch is an interactive livestreaming service for content spanning gaming, entertainment, sports, music, and more.

Every value below is mined from the site's live CSS (1 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 43 light against 59 dark. The palette is chromatic: 12 saturated values against 11 neutrals, led by indigo (`#9147ff`). **Inter** carries the interface. Geometry mixes sharp corners (2px) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 51% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 43:59). Don't flip individual sections to the opposite mode.
- `2px` is the workhorse radius (x5); treat the other radii as exceptions, not options.
- Shadows stay tight (max 2px blur) — keep elevation subtle if you extend the scale.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 29 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-100` | `#efeff1` | 13 | **surface** — neutral closest to canvas luminance |
| `neutral-200` | `#d9d8dd` | 1 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-300` | `#c8c8d0` | 1 | — |
| `neutral-400` | `#b7b2a7` | 2 | — |
| `neutral-500` | `#adadb8` | 4 | **text-muted** — most-used mid-luminance neutral |
| `neutral-600` | `#848494` | 1 | — |
| `neutral-700` | `#808080` | 3 | — |
| `neutral-800` | `#53535f` | 2 | — |
| `neutral-900` | `#26262c` | 2 | — |
| `neutral-950` | `#0e0e10` | 23 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `indigo` | `#9147ff` | 17 | **accent** — most-used chromatic color |
| `indigo-2` | `#772ce8` | 15 | **accent-2** — supporting chromatic color |
| `indigo-3` | `#5c16c5` | 11 | **accent-3** — supporting chromatic color |
| `indigo-4` | `#a970ff` | 8 | — |
| `indigo-5` | `#bf94ff` | 6 | — |
| `blue` | `#1e69ff` | 6 | — |
| `purple` | `#8205b4` | 5 | — |
| `yellow` | `#e2be53` | 5 | — |
| `blue-2` | `#3b5998` | 4 | — |
| `purple-2` | `#f093f9` | 3 | — |
| `yellow-2` | `#976700` | 3 | — |
| `yellow-3` | `#fafa19` | 3 | — |

## Typography

**Inter** is the primary interface face. Full list by usage:

| Family | Usage |
| --- | --- |
| Inter | 21 |
| Roobert | 6 |
| Noto Sans Arabic | 3 |
| Tajawal | 3 |

**Size scale (px):** `16`, `18`, `19.2`, `25.6`

**Weights in use:** `400` (x11), `500` (x2), `600` (x10), `700` (x12)

**Line-heights (unitless):** `1.5`, `1.7`

**Letter-spacing values:** `.1em`

## Spacing

Most-used values (px): `1`, `2`, `3`, `4`, `5`, `8`, `10`, `16`, `21`, `24`, `32`, `160`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `2px` | 5 |
| `radius-md` | `5px` | 1 |
| `radius-lg` | `.4rem` | 1 |
| `radius-full` | `50%` | 4 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 3px 10px -2px` (x1)

## Breakpoints

`767px`, `768px`, `919px`, `920px`, `1023px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #9147ff */
  color: var(--color-canvas); /* #ffffff — contrast 4.6:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 500;
}

.card {
  background: var(--color-surface); /* #efeff1 */
  border: 1px solid var(--color-hairline); /* #d9d8dd */
  border-radius: 2px; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #0e0e10 — contrast 19.3:1 */
  border: 1px solid var(--color-hairline); /* #d9d8dd */
  border-radius: 2px;
  /* placeholder color: var(--color-text-muted) #adadb8 */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #d9d8dd */
  color: var(--color-ink); /* #0e0e10 */
  /* inactive links: var(--color-text-muted) #adadb8 */
  /* active link: var(--color-accent) #9147ff — contrast vs canvas 4.6:1 */
}

.modal {
  background: var(--color-surface); /* #efeff1 */
  border-radius: 2px;
  box-shadow: var(--shadow-sm); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #0e0e10 */
}

.input-error {
  /* no red exists in the mined palette — this site does not expose an error color in its CSS. */
  /* Introduce one deliberately rather than borrowing a random red; keep saturation near the accent's. */
}
```

## Observations

- 11 of 23 extracted colors are neutrals.
- 1 distinct shadow; the softest reaches 2px blur.
- 5 breakpoints, from 767px to 1023px.

## Native CSS custom properties

First 1 of 1:

```css
:root {
  --writing-dir-flip: 1;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-indigo`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.