---
title: "Twitch design system"
variant: extended
source: https://www.twitch.tv/
captured_at: 2026-10-12
theme: dark
industry: gaming
generator: Design DNA (https://four.wiralomi.com/style/twitch-tv)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Twitch · Design System

> Live video, built around discovery and community

**Theme:** dark · **Industry:** gaming · **Source:** https://www.twitch.tv/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Twitch’s homepage pairs a prominent live-channel carousel with a persistent streamer sidebar and a feed of active broadcasts. A vivid purple consent banner and brand accents sit above a mostly light, content-dense interface.

## North star

Make live video the visual focal point, using a restrained light interface and Twitch purple to guide discovery.

## Overview

The page balances Twitch’s saturated purple identity with a light, high-contrast browsing canvas. The vivid purple consent banner at the top and purple footer strip establish brand presence, while the white and pale gray interface keeps the stream imagery easy to scan. Purple is also used selectively for links, section headings, and signup actions rather than flooding the content area. Inter is the workhorse for navigation, metadata, and broadcast labels; Roobert gives compact display headings a distinct brand character. The layout prioritizes live content: a narrow channel list stays anchored at the left, a large featured broadcast occupies the central stage, and a row of smaller live previews begins below it. Stream thumbnails are vivid, varied, and largely untreated, so the UI frames creator content instead of imposing a unified image style. Generous gaps separate major content zones, while dense channel metadata supports quick scanning.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Stream White | `#ffffff` | `--color-stream-white` | surface | Text and bright surfaces, including compact navigation elements and the Proceed consent button. |
| Canvas Mist | `#f7f7f8` | `--color-canvas-mist` | surface | Main light page canvas behind channel lists, featured content, and stream cards. |
| Deep Twitch | `#330c6e` | `--color-deep-twitch` | brand | Measured brand-purple canvas tone; appears in selected dark content surfaces and the purple identity range. |
| Night Violet | `#14052c` | `--color-night-violet` | surface | Very dark supporting surface tone, used beneath or around content rather than as the visible page canvas. |
| Twitch Ink | `#0e0e10` | `--color-twitch-ink` | neutral | Primary dark text for navigation, channel names, and stream metadata. |
| Link Violet | `#5c16c5` | `--color-link-violet` | accent | Purple text links and navigation accents, including streamer names and section labels. |
| Overlay Black | `#000000` | `--color-overlay-black` | semantic | Black used in video-image shading and gradient overlays; not a primary interface fill. |
| Muted Graphite | `#3b3b44` | `--color-muted-graphite` | neutral | Secondary text tone for subdued navigation and supporting interface labels. |
| Banner Purple | `#451093` | `--color-banner-purple` | brand | Saturated purple section and footer band, reinforcing Twitch identity around the content canvas. |
| Divider Gray | `#d2d2d7` | `--color-divider-gray` | semantic | Fine hairline borders, particularly around navigation and separated interface regions. |
| Panel Gray | `#efeff1` | `--color-panel-gray` | surface | Pale card and control surface tone, including lightly shaded content panels. |
| Consent Violet | `#54239b` | `--color-consent-violet` | accent | Consent-choice button fill within the prominent privacy banner. |
| Action Purple | `#9147ff` | `--color-action-purple` | accent | Bright signup button accent; a measured CTA color that stands out from the lighter shell. |

### Semantic aliases

`--color-canvas` → `#330c6e` (Deep Twitch) · `--color-surface` → `#14052c` (Night Violet) · `--color-surface-2` → `#f7f7f8` (Canvas Mist) · `--color-surface-3` → `#efeff1` (Panel Gray) · `--color-surface-4` → `#ffffff` (Stream White) · `--color-text` → `#ffffff` (Stream White) · `--color-text-muted` → `#0e0e10` (Twitch Ink) · `--color-text-subtle` → `#3b3b44` (Muted Graphite) · `--color-border` → `#d2d2d7` (Divider Gray) · `--color-accent` → `#5c16c5` (Link Violet) · `--color-accent-2` → `#451093` (Banner Purple) · `--color-accent-3` → `#54239b` (Consent Violet) · `--color-on-accent` → `#ffffff` (Stream White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#330c6e` | 14.8:1 | AAA |
| `#ffffff` | `#14052c` | 19.3:1 | AAA |
| `#ffffff` | `#f7f7f8` | 1.07:1 | fail |
| `#ffffff` | `#efeff1` | 1.15:1 | fail |
| `#0e0e10` | `#330c6e` | 1.3:1 | fail |
| `#0e0e10` | `#14052c` | 1:1 | fail |
| `#0e0e10` | `#f7f7f8` | 18.01:1 | AAA |
| `#0e0e10` | `#efeff1` | 16.79:1 | AAA |
| `#3b3b44` | `#330c6e` | 1.34:1 | fail |
| `#3b3b44` | `#14052c` | 1.74:1 | fail |

### Gradients

- `linear-gradient(0deg, rgb(0, 0, 0) 0px, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0))`
- `linear-gradient(rgba(0, 0, 0, 0.8) 0px, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0))`
- `linear-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.9) 75%, rgb(255, 255, 255) 80%, rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600 | Navigation, body copy, live labels, channel metadata, and links. | Inter |
| Roobert | `--font-display` | webfont | 500, 600 | Compact display headings and brand-flavored section titles. | Inter |

- **Inter:** Use regular text with measured semibold emphasis; compact uppercase captions appear for live or category labels.
- **Roobert:** Measured medium weight, subtly tight tracking, and restrained heading scale.

### Type scale — Major Third (ratio ≈ 1.286, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 18px | 500 | 1.1 | -0.01em | — | Roobert | Compact display heading treatment for primary page or section titles. |
| body | 14px | 400 | 1.4 | 0 | — | Inter | Consent explanation, channel descriptions, and supporting interface copy. |
| caption | 12px | 600 | 1.4 | 0 | uppercase | Inter | Uppercase live, category, or compact metadata labels. |
| nav | 14px | 400 | 1.4 | 0 | — | Inter | Browse, account actions, search controls, and channel navigation. |
| link | 14px | 400 | 1.4 | 0 | — | Inter | Streamer names and interactive text links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 8, 16, 20, 24, 40 px.
- Section rhythm 212px · element gap 2px · card padding — · max content width 1408px.

A spacious desktop shell uses a persistent narrow channel rail beside a broad central content area. The featured stream carousel is centered in the main region, with live recommendations arranged in a multi-column row below. The measured page max width is 1408px, and the screenshot shows a 1440px viewport with content spanning nearly the full canvas. Major sections have generous separation, while channel rows and video metadata remain tightly packed for quick scanning.

## Shape & elevation

- Radius: button `50%` · input `8px` · media `50%` · badge `2px` · nav `50%` · link `9999px` · xs `2px` · sm `4px` · md `6px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.22) 0px 6px 16px 0px, rgba(0, 0, 0, 0.08) 0px 0px 4px 0px`
- Shadow `sm` (nav, footer): `rgba(0, 0, 0, 0.13) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px`
- Shadow `inset` (input): `rgba(50, 50, 57, 0.62) 0px 0px 0px 1px inset`
- Motion: standard transition `0.15s ease` on interactive elements.

The interface is mostly flat, with pale surfaces and fine dividers defining structure. A soft, layered shadow lifts the featured stream card above surrounding carousel previews, creating a clear focal point. Video edges remain square in the measured cards; pill-shaped controls and badges provide the primary rounded forms.

## Imagery

Live video thumbnails dominate the page, showing varied creator broadcasts, gameplay, and music content. A large featured stream is layered over dimmer neighboring previews, while smaller thumbnails appear in a clean row below. The imagery retains its native color and detail rather than sharing a brand filter. The consent banner adds a small playful mascot illustration, distinct from the creator-led media.

## Components

### Consent banner

Full-width saturated purple notice at the top, pairing a mascot illustration and compact explanatory copy with rounded choice buttons.

### Top navigation

Light horizontal bar with Twitch mark, Browse entry, centered search field, notification indicator, login, signup, and account icon.

### Live channel rail

Left-side list of creator avatars, names, categories, and viewer counts, designed for rapid scanning.

### Featured live carousel

A large central broadcast card layered above darker neighboring previews, with a live badge and creator details beside the video.

### Live preview cards

Wide stream thumbnails arranged in a row below the featured item, with compact viewer-count overlays.

### Signup action

High-contrast rounded purple CTA in the header and community footer band.

### Measured component styles

- **Primary button** (“Cookies & Ads Choices”): background #54239b · text #ffffff · radius 9000px · padding 0px · 600 14px Inter
- **Secondary button** (“Sign Up”): background #9147ff · text #ffffff · radius 9000px · padding 0px · 600 14px Inter
- **Link** (“juicedrumandbass”): transparent background · text #5c16c5 · radius 0px · padding 0px · 400 14px Inter
- **Input**: transparent background · text #0e0e10 · radius 8px · padding 0px 12px · 400 14px Inter · shadow rgba(50, 50, 57, 0.62) 0px 0px 0px 1px inset
- **Card** (“Volume juicedrumandbass DJs 2.2K viewers”): background #330c6e · text #0e0e10 · radius 0px · padding 0px · 400 14px Inter · shadow rgba(0, 0, 0, 0.22) 0px 6px 16px 0px, rgba(0, 0, 0, 0.08) 0px 0px 4px 0px
- **Badge** (“46.4K viewers”): background #636363 · text #ffffff · radius 2px · padding 0px 4px · 400 14px Inter
- **Navigation item** (“Skip to... Alt P Browse 36 Log In Sign U”): transparent background · text #0e0e10 · radius 0px · padding 0px · 400 14px Inter

## Do

- Keep the live broadcast as the main visual focal point.
- Use Twitch purple for identity bands, links, and selected actions.
- Preserve a light, neutral browsing canvas around video content.
- Keep creator names and viewer counts easy to scan.
- Use real, varied stream imagery without a uniform color filter.
- Separate the sidebar and central feed with clear alignment.

## Don't

- Do not replace the light content canvas with a fully dark theme.
- Do not spread saturated purple across every surface.
- Do not make stream cards heavily rounded.
- Do not bury the featured broadcast beneath dense copy.
- Do not standardize creator thumbnails with a brand overlay.
- Do not make secondary channel metadata compete with stream imagery.

## Agent prompt

Build a new Twitch-style discovery page with a light browsing canvas in Canvas Mist (#f7f7f8), dark Twitch Ink (#0e0e10) text, and a clear purple identity accent. Use Deep Twitch (#330c6e) and Banner Purple (#451093) sparingly for brand bands, Link Violet (#5c16c5) for interactive text, and Action Purple (#9147ff) for the main signup action. Arrange a compact navigation bar above a persistent live-channel rail and a wide central content feed. Give one featured live video clear visual priority, then show smaller stream previews in a row. Use Inter for interface text and compact metadata, with restrained Roobert-like headings. Keep cards mostly flat and square, use soft elevation only to distinguish the featured stream, and preserve the natural color and variety of creator imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Top consent banner and navigation frame a left channel rail and wide central carousel with a live preview row. | Persistent channel discovery, Featured broadcast carousel, Search and account actions | Purple consent banner, Light navigation bar, Live badges, Stream thumbnail cards |

## Source CSS custom properties (selected)

```css
--border-width-default: 1px;
--border-width-button: 2px;
--border-width-checkbox: 2px;
--border-width-drop-zone: 2px;
--border-width-marked: 3px;
--border-width-selectable: 2px;
--border-width-spinner: 2px;
--border-width-tag: 2px;
--border-radius-none: 0;
--border-radius-small: 0.2rem;
--border-radius-medium: 0.4rem;
--border-radius-large: 0.6rem;
--border-radius-extra-large: 1rem;
--border-radius-extra-extra-large: 1.6rem;
--border-radius-rounded: 9000px;
--color-brand-accent-barrel: #f7262d;
--color-brand-accent-crash: #ff6905;
--color-brand-accent-cuddle: #fa1ed2;
--color-brand-accent-dragon: #8205b3;
--color-brand-accent-edgeworth: #bd0078;
--color-brand-accent-grass: #00991a;
--color-brand-accent-jiggle: #f195f9;
--color-brand-accent-junimo: #00fa04;
--color-brand-accent-mana: #56bde6;
--color-brand-accent-ooze: #bfff00;
--color-brand-accent-peach: #ea7179;
--color-brand-accent-pylon: #00fafa;
--color-brand-accent-rozetta: #94ffd4;
--color-brand-accent-rune: #68edc1;
--color-brand-accent-scourge: #a81a26;
--color-brand-accent-star: #fafa19;
--color-brand-accent-surf: #00c7b0;
--color-brand-accent-tangy: #fdb212;
--color-brand-accent-twitch-purple: #9147ff;
--color-brand-accent-widow: #c0adff;
--color-brand-accent-zero: #1f69ff;
--color-deprecated-brand-muted-ice: #d6e4ff;
--color-deprecated-brand-muted-cupcake: #ffa3ee;
--color-deprecated-brand-muted-mint: #5cffbe;
--color-deprecated-brand-muted-sky: #7aa7ff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/twitch-tv