Design System inspired by Twitch

Live streaming. Purple brand, dark interface, content-forward grid.

Usage

npx getdesign@latest add twitch

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Twitch design system. A curated starting point for building Twitch-like UIs with your AI coding agent.

Live streaming. Purple brand, dark interface, content-forward grid.

Preview

twitch.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF TWITCH

Live streaming. Purple brand, dark interface, content-forward grid.

Explore the system View tokens

Color Palette

Live streaming. Purple brand, dark interface, content-forward grid.

Primary

Twitch Purple

#9146ff

Brand color

Dark BG

#0e0e10

Brand color

Surface

#18181b

Brand color

Border

#2f2f35

Brand color

White

#efeff1

Brand color

Gray

#adadb8

Brand color

Accent

#bf94ff

Brand color

Typography

A type system inspired by Twitch.

Inter

Inter, Inter

Roobert

Roobert, Inter

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Twitch.

Not detected on this URL

Components

Other component primitives mapped from the Twitch spec.

Not detected on this URL

Design System Inspired by Twitch

1. Visual Theme & Atmosphere

Live streaming. Purple brand, dark interface, content-forward grid.

Key Characteristics:

Twitch Purple (#9146FF) as dominant brand

Dark interface (#0E0E10) optimized for streams

Content-forward thumbnail grid layout

Live indicator red dot pattern

Chat sidebar as core interaction model

2. Color Palette & Roles

Primary

Twitch Purple (#9146FF): Brand color
Dark BG (#0E0E10): Brand color
Surface (#18181B): Brand color
Border (#2F2F35): Brand color
White (#EFEFF1): Brand color
Gray (#ADADB8): Brand color
Accent (#BF94FF): Brand color

3. Typography Rules

Font Family

Display & UI: Inter, Roobert

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth communicated through background color shifts, subtle shadows, or border treatments.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Twitch Purple: #9146FF
Dark BG: #0E0E10
Surface: #18181B
Border: #2F2F35
White: #EFEFF1
Gray: #ADADB8

Typography

Font: Inter, Roobert