Twitch

---
version: alpha
name: Twitch-design-analysis
description: Twitch's design language is a gamer-centric live platform anchored on the signature purple `#9146ff` against a deep charcoal `#0e0e10` canvas. The interface is dark, dense, and community-driven, with the purple reserved for brand, Go Live, and active states. Typography is bold and playful, and surfaces use layered grays to keep chat, video, and panels legible.

colors:
  primary: "#9146ff"
  primary_dark: "#772ce8"
  primary_light: "#a970ff"
  canvas: "#0e0e10"
  surface: "#18181b"
  surface_2: "#1f1f23"
  surface_3: "#26262c"
  fg_default: "#efeff1"
  fg_muted: "#adadb8"
  fg_faint: "#848494"
  border_default: "#2e2e35"
  accent_success: "#00f593"
  accent_danger: "#eb0400"
  on_primary: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Inter", "Roobert", "Helvetica Neue", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Twitch

## 1. Visual Theme & Atmosphere

Twitch is the home of live communities, and the interface is a dark, dense stage — a deep charcoal `#0e0e10` canvas where the signature purple `#9146ff` signals "live now." Video, chat, and panels layer on top of stepped gray surfaces, keeping the stream bright and the UI unobtrusive. The tone is playful, bold, and unmistakably gamer-first.

## 2. Color System

- **Twitch purple** `#9146ff` — the logo, "Go Live", subscribe, and active states.
- Dark surfaces `#0e0e10` / `#18181b` / `#1f1f23` / `#26262c` with hairlines `#2e2e35`.
- Text `#efeff1`, muted `#adadb8`, faint `#848494`.
- Semantic accents: success `#00f593`, danger `#eb0400` for stream/chat status.

## 3. Typography

Inter / Roobert (system fallback) with a bold, rounded, friendly character. Headlines are heavy and confident; chat is compact monospace-adjacent with colored usernames. Type supports energy and community, with high contrast against the dark canvas.

## 4. Components & Shape

The core layout is the video player flanked by chat — a persistent right-side chat panel with colored name badges and emotes. Buttons are rounded rectangles (8px); the primary "Go Live" is a filled purple pill. Tags and category chips are pill-shaped. The dark purple-to-dark-gray gradient appears in hero and promo surfaces.

## 5. Layout & Spacing

A three-zone layout: left nav (collapsible), center video, right chat. Gutters are tight (8-16px) to keep everything on one screen. The dark theme keeps the stream bright and reduces eye strain for long sessions.

## 6. Motion

Chat scrolls and animates fluidly, "raid" and "follow" alerts pop with celebratory motion, and hover states glow with a purple tint. Motion is energetic and community-celebratory, matching the platform's live, social energy.