Twitch Design System Reference

Live Streaming Community Platform

Twitch Design System

Bold, modern, and community-driven — tokens and components that power the world's leading live streaming platform.

8 Color tokens 10 Type styles 2 Shadow levels 7 Radius tokens Inter & Roobert

Foundation

Color Tokens

The full color palette extracted from Twitch's design system, including brand primary, accent, neutrals, and functional colors for UI and content.

Primary Purple

#9147FF

Primary CTA · Brand accent · Active states

Accent Purple

#5C16C5

Hero sections · Secondary emphasis

On Primary

#0E0E10

Headings · Primary text · Labels

Body Text

#3B3B44

Body copy · Descriptions · Secondary text

Canvas

#F7F7F8

Page background · Light neutral foundation

Surface

#ADADB8

Card backgrounds · Panel surfaces

White

#FFFFFF

Decorative contrast · Layer separation

Black

#000000

Highest contrast · Overlay emphasis

Typography

Type Scale

Inter for UI and body copy provides excellent screen rendering; Roobert anchors primary headings and link text to establish hierarchy.

Primary Inter UI · Body · Buttons · Labels

Headings Roobert Headlines · Primary links · Display text

Display Build what matters 18px · 500 · −0.18px

Heading XS The quick brown fox 14px · 600 · 1.4

Heading XS (Inter) The quick brown fox jumps 14px · 600 · 1.4

Body Sm The quick brown fox jumps over the lazy dog 14px · 400 · 1.4

Body Sm (Inter) The quick brown fox jumps over the lazy dog 14px · 400 · 1.4

Body Sm Bold The quick brown fox jumps over the lazy dog 14px · 600 · 1.1

Button Get started 14px · 600 · 1

Label Form input label 14px · 400 · 1.5

Caption XS Small metadata 12px · 600 · 1.4

Caption XS Uppercase CATEGORY LABEL 12px · 600 · uppercase

Layout

Spacing & Shapes

4px base grid — every spacing token is a multiple of 4. Border radii range from sharp (0) to pill (9999px) to create the system's approachable modern aesthetic.

Spacing Scale

4px xxs

8px xs

16px sm

24px md

Border Radius

None 0px

Partial 8px

Full 9999px

Shadows

Flat No elevation

Lifted Featured cards · dropdowns

Opacity Levels

Full 100%

Disabled 50%

Minimal 1%

Z-index / Layering

Base 1–3

Dropdown 10–11

Modal 1000–9999

Elevation

Depth & Surfaces

Depth comes primarily from color blocking and semi-transparent backgrounds. A single, minimal shadow applies only when a component must visually float.

Canvas

Default page background · Light neutral foundation

#F7F7F8

Surface

Card and panel backgrounds · Mid-tone neutral

#ADADB8

Surface (Translucent)

Semi-transparent overlay for grouping · Allows background content to show through

rgba(173, 173, 184, 0.22)

Canvas #F7F7F8

Surface #ADADB8

Primary #9147FF

Accent #5C16C5

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #9147FF bg · #FFFFFF text · 9999px radius · 0px horizontal padding · 32px height. Secondary: transparent bg · #ADADB8 border. Ghost: link-style, transparent background.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #ADADB8 border · 6px radius · 32px height. Focus: #9147FF border · 3px focus ring rgba(145,71,255,.15).

Card

Content container — elevated surface with shadow

.card

Stream title

A brief description of this stream. It's live and has 12k viewers.

#1F2328 bg · #ADADB8 border · 8px radius · lifted shadow. Title: 14px/600/#F0F6FC. Body: 14px/#656C76. CTA: primary purple button.

Badges

Status indicators — Primary, Error, Info

.badge

LIVE Offline Featured

12px/600 · 4/8px padding · 9999px radius (pill-shaped). Primary: #9147FF. Error: #CF222E. Info: #1F6FEB.

Guidelines

Do's & Don'ts

Principles for consistent application of the Twitch design language across surfaces and contexts.

Do — Embrace

Use brand purple (#9147FF) for all primary CTAs, sign-up buttons, and brand-defining elements
Compose spacing on the 4px grid — all padding, margins, and gaps must be multiples of 4px
Apply pill-shaped borders (9999px radius) to all primary buttons and badges to reinforce the approachable brand identity
Use semi-transparent backgrounds and overlay gradients to create perceived depth — flat, color-blocked layouts are the primary aesthetic
Reserve shadows for emphasis — apply the single-tier shadow only to featured cards, dropdowns, or modals

Don't — Avoid

Do not invent new colors — every UI element must use a color from the defined palette
Do not mix rounded and sharp edges arbitrarily — buttons are pill-shaped, containers are sharp
Do not stack shadows — multiple shadow layers contradict the flat, modern aesthetic
Do not exceed two font families — Inter for UI, Roobert for headings. Limit font mixing.
Do not create ad-hoc spacing values — all padding and margins must align to the 4px scale

Twitch

Preview

Remixes of Twitch