styles
← 갤러리

Twitch

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

playful-maximalism purple-brandlive-streamingcard-gridbadge-heavycontent-densegamingdual-mode
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

트위치에서 추출한 라이브 스트리밍 플랫폼 UI. 시그니처 퍼플(#9146FF)이 브랜드를 관통하고, 라이트(#f7f7f8)와 다크(#0e0e10) 양 모드를 네이티브로 지원한다. 라이브 뱃지(빨강), 카테고리 태그, 시청자 수 등 메타데이터가 카드에 층층이 쌓이는 playful-maximalism의 전형. 컨텐츠 밀도가 높으면서도 퍼플 악센트가 활력을 불어넣는다.

타입 스케일

hero Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

골든 예제 (exemplar)

Live on Twitch

LIVE 43.4K viewers

SGDQ 2026 — Charity Marathon

GamesDoneQuick

Speedrun English
LIVE 21.4K viewers

Just Chatting

Streamer

Just Chatting

Do

  • Use Twitch Purple (#9146FF) as the dominant brand color
  • Include LIVE badges (red) and viewer count overlays on cards
  • Keep layouts compact and content-dense
  • Use both light and dark modes
  • Add metadata badges and tags

Don't

  • Don't use the purple for large background areas — it's for accents and buttons
  • Don't make the design too clean/minimal — Twitch is content-dense
  • Don't forget the category tags and metadata
  • Don't use overly large radius — keep it tight (4-6px)

컴포넌트 노트

button
Small rounded (4px), purple primary fill or ghost. 'Follow' and 'Subscribe' are key CTAs.
card
Stream thumbnail with overlay badges (LIVE red, viewer count). Title + category + streamer below.
input
Search bar with icon, rounded field.
nav
Top bar with purple logo, search center, user right. Left sidebar with followed channels.