# Twitch

퍼플(#9146FF) 에너지가 폭발하는 라이브 스트리밍 인터페이스 — 다크/라이트 양 모드에서 생동감 넘치는 카드 그리드와 뱃지가 특징이다.

- taxonomy: playful-maximalism · purple-brand, live-streaming, card-grid, badge-heavy, content-dense, gaming, dual-mode · complexity=high
- page types: app, dashboard, landing
- best for: 라이브 스트리밍·방송 플랫폼, 게이밍 커뮤니티 대시보드, 콘텐츠 디스커버리 그리드, 이벤트·생방송 마케팅
- avoid for: 정적이고 고급스러운 럭셔리 브랜드, 미니멀 포트폴리오, 사무적인 B2B 문서 사이트, 자연 감성 라이프스타일 브랜드
- provenance: website (Twitch) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, dark=computed-css, light=computed-css

## Design rules

# 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


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Twitch — theme.css (generated, do not edit) */
:root {
  --radius: 6px;
  --radius-selector: 4px;
  --radius-field: 4px;
  --font-sans: Inter, Roobert, Helvetica Neue, Helvetica, Arial, sans-serif;
  --font-mono: monospace;
  --spacing: 8px;
  --shadow: 0px 1px 4px 0px color-mix(in oklab, oklch(0 0 0) 10%, transparent);
  --ks-display-weight: 700;
  --background: oklch(0.976 0.001 286.4);
  --foreground: oklch(0.165 0.004 285.9);
  --card: oklch(1.000 0.000 0);
  --card-foreground: oklch(0.165 0.004 285.9);
  --popover: oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.165 0.004 285.9);
  --primary: oklch(0.440 0.233 290.9);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.940 0.010 286);
  --secondary-foreground: oklch(0.300 0.010 286);
  --muted: oklch(0.940 0.010 286);
  --muted-foreground: oklch(0.550 0.010 286);
  --accent: oklch(0.440 0.233 290.9);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.880 0.010 286);
  --input: oklch(0.880 0.010 286);
  --ring: oklch(0.440 0.233 290.9);
}

.dark {
  --background: oklch(0.165 0.004 285.9);
  --foreground: oklch(0.976 0.001 286.4);
  --card: oklch(0.220 0.006 286);
  --card-foreground: oklch(0.976 0.001 286.4);
  --popover: oklch(0.250 0.008 286);
  --popover-foreground: oklch(0.976 0.001 286.4);
  --primary: oklch(0.440 0.233 290.9);
  --primary-foreground: oklch(1.000 0.000 0);
  --secondary: oklch(0.294 0.149 292.3);
  --secondary-foreground: oklch(0.976 0.001 286.4);
  --muted: oklch(0.260 0.008 286);
  --muted-foreground: oklch(0.600 0.010 286);
  --accent: oklch(0.440 0.233 290.9);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.300 0.010 286);
  --input: oklch(0.300 0.010 286);
  --ring: oklch(0.440 0.233 290.9);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section style="background: var(--background); color: var(--foreground); padding: 2rem;">
  <h2 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--primary);">Live on Twitch</h2>
  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem;">
    <div style="background: var(--card); border-radius: 6px; overflow: hidden;">
      <div style="position: relative; width: 100%; aspect-ratio: 16/9; background: var(--muted);">
        <span style="position: absolute; top: 8px; left: 8px; background: var(--destructive); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 700;">LIVE</span>
        <span style="position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem;">43.4K viewers</span>
      </div>
      <div style="padding: 0.75rem;">
        <p style="font-weight: 600; font-size: 0.875rem; margin: 0 0 0.25rem; color: var(--card-foreground);">SGDQ 2026 — Charity Marathon</p>
        <p style="font-size: 0.8125rem; color: var(--muted-foreground); margin: 0 0 0.5rem;">GamesDoneQuick</p>
        <div style="display: flex; gap: 0.5rem;">
          <span style="background: var(--secondary); color: var(--secondary-foreground); padding: 2px 8px; border-radius: 4px; font-size: 0.75rem;">Speedrun</span>
          <span style="background: var(--secondary); color: var(--secondary-foreground); padding: 2px 8px; border-radius: 4px; font-size: 0.75rem;">English</span>
        </div>
      </div>
    </div>
    <div style="background: var(--card); border-radius: 6px; overflow: hidden;">
      <div style="position: relative; width: 100%; aspect-ratio: 16/9; background: var(--accent);">
        <span style="position: absolute; top: 8px; left: 8px; background: var(--destructive); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 700;">LIVE</span>
        <span style="position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem;">21.4K viewers</span>
      </div>
      <div style="padding: 0.75rem;">
        <p style="font-weight: 600; font-size: 0.875rem; margin: 0 0 0.25rem; color: var(--card-foreground);">Just Chatting</p>
        <p style="font-size: 0.8125rem; color: var(--muted-foreground); margin: 0 0 0.5rem;">Streamer</p>
        <div style="display: flex; gap: 0.5rem;">
          <span style="background: var(--secondary); color: var(--secondary-foreground); padding: 2px 8px; border-radius: 4px; font-size: 0.75rem;">Just Chatting</span>
        </div>
      </div>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/twitch.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.