# Twitch — Design Specification

## Overview
Twitch's interface is energetic and content-dense, built around Twitch Purple (#9146FF). It supports native light (#f7f7f8) and dark (#0e0e10) modes. The UI is maximalist by design — cards overlay LIVE badges, viewer counts, category tags, and metadata. A sidebar lists followed channels while the main area is a dense grid of stream thumbnails.

## Color Architecture
- **Brand**: Twitch Purple oklch(0.440 0.233 290.9) — buttons, active states, links
- **LIVE badge**: Red (destructive role) — signals active streams
- **Text hierarchy**: Dark foreground (#0e0e10) on light, white on dark, grey for metadata

## Typography
**Roobert** (proprietary), fallback **Inter**. Compact scale, bold headings (800), small body (0.875rem). Content density is prioritized.

## Layout
Full-width card grid (min 300px columns), compact spacing. Left sidebar for followed channels, top bar with search. Horizontal scroll for category rows.

## Agent Prompt Guide
> Lively streaming UI with Twitch Purple accent. Dense card grid with LIVE badges and viewer counts. Sidebar navigation. Compact spacing, small radius. Energetic and social.

## Known Gaps
- Roobert font is proprietary (Inter fallback)
- Stream preview autoplay on hover not representable in static tokens
- Content modals (mature content warnings) simplified