What is Twitch's primary brand color?

Twitch Purple is '#9147ff' — the universal primary-CTA fill, used on the 'Sign Up' top-right pill and the active toggle states. A deeper grape '#5c16c5' (416 declarations on the page) carries link text, the active background of the top-nav, brand accent borders, and visited-link runs — it shoulders far more of the on-page workload than '#9147ff' does. A third purple '#772ce8' lives in the hover-and-focus rail: button-brand-hover, link-hover, input-focus border. The triple-purple ladder ('#9147ff' → '#772ce8' → '#5c16c5') is the entire chromatic chrome rhythm; the rest of the page is achromatic '#ffffff' / '#0e0e10' / '#adadb8' plus the red LIVE accent.

What typography does Twitch use, and what should I substitute?

Twitch ships two faces in a single declared stack — Inter for chrome and Roobert for display headings. The on-page CSS family declaration is 'Inter, "Noto Sans Arabic", Roobert, "Helvetica Neue", Helvetica, Arial, sans-serif' for body and 'Roobert, Tajawal, Inter, "Helvetica Neue"' for h2 / heading anchors. Inter handles every 14px chrome label at weights 400 and 600 with 19.6px line-height and zero letter-spacing; Roobert covers the 18px h2 heading at weight 500 with -0.18px tracking and the 'Live on Twitch' anchor labels. Inter is the structural workhorse (46 instances at 14/400 alone); Roobert is reserved for headings (5 instances at 18/500). If Roobert is unavailable, Inter Medium at -0.2px tracking is the closest open-source substitute.

Does Twitch run a dark mode?

The Twitch application ships a full dark mode (the in-product viewer chrome is famously dark when watching a stream), but the public logged-out homepage captured here runs the light canvas: '#ffffff' surface, '#0e0e10' text, '#adadb8' hairlines. The light surface is a deliberate choice for the marketing / signed-out browse view — it pushes the eye into the video carousel where every thumbnail is a high-saturation gameplay screenshot. The in-product dark canvas (dominated by '#0e0e10' background with '#9147ff' purple and '#adadb8' secondary text) reverses the contract: dark chrome, lit video. Both surface modes share the pill geometry, the purple voltage, and the LIVE-red token.

What does Twitch's shape vocabulary look like?

The radius scale is 2px, 4px, 6px, 8px, and 9000px. Every button, tag pill, search input, and notification pill renders at 9000px (80 declarations on the page) — effectively fully-rounded but expressed as a large absolute value rather than 9999px. Video cards and category tiles render at 4px (25 declarations), a subtle softening rather than a poster-corner curve. Badges and tag inserts use 2px. Inputs sit at 6px. The chrome has no 0px sharp corners and no 12-16px middle tier — the geometry skips from 6px directly to 9000px, producing a visible binary between 'card surface' (4-6px) and 'interactive pill' (9000px).

How does the LIVE red work, and where else can I use '#eb0400'?

Vivid red '#eb0400' has 18 background renders on the page and zero text or border roles. It tags exclusively the LIVE pill on video thumbnails, the corner notification number badge ('21' in the captured view), and the destructive-action alert state ('--color-fill-alert', '--color-fill-error', '--color-background-button-alert'). It is never used as a fill for buttons that aren't destructive, never as a link color, and never as a hairline. The discipline is strict: red on Twitch means either 'broadcasting now' or 'this will delete something'. Even error toasts use this hex via the '--color-error' and '--color-fill-ribbon' aliases.

Can I use this DESIGN.md to build a Twitch-style React project?

Yes — feed it to Claude, Cursor, or Copilot and the agent will produce React components that match Twitch's logged-out browse aesthetic: light-canvas chrome, '#9147ff' purple primary pills at 9000px radius, '#5c16c5' grape link text, '#eb0400' LIVE indicators, Inter 14px chrome labels, and Roobert 18px heading anchors. Or reference tokens directly: every hex, every typography level, every radius and spacing step is a quoted value ready to paste into Tailwind config or CSS custom properties. The 18 component recipes cover the marketing / browse surface — top nav, sidebar channel rail, video card, LIVE badge, tag pill, primary pill, community banner — not the in-product video player or chat dock.

Twitch Design System

Twitch's design system as a DESIGN.md file.

About Twitch DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source twitch.tv

Music, Video & Streaming
Gaming & Entertainment

Twitch's logged-out homepage is unusual for a gaming brand. The chrome runs on a light canvas — "#ffffff" body, "#0e0e10" near-black text, "#adadb8" structural greys for hairlines and borders — and the saturation budget is parked entirely inside the video thumbnails, category art, and avatar avatars filling the carousel. The Twitch Purple "#9147ff" appears as a single primary CTA fill (the "Sign Up" pill in the top-right) and as the bottom "Join the Twitch community!" community banner. Deeper grape "#5c16c5" carries every link text run, including "Live on Twitch" anchor titles and the violet hover state on streamer names. Vivid red "#eb0400" tags every LIVE pill — and only LIVE pills, plus the corner notification badge — eighteen background renders and zero text or border roles. The chrome is quiet; the content carousel is loud. This file packages the public homepage system as a single Google Labs DESIGN.md spec. Inside: 22 color tokens covering the two-purple voltage, the off-white surface stack, the structural greys, and the alert reds plus the Prime cerulean and success green for in-product status; 9 typography styles all built on the Inter + Roobert + Helvetica Neue stack with the chrome-running Inter at 14px and the heading-only Roobert at 18px; a four-step radius scale where every pill renders at 9000px, cards at 4px, badges at 2px, and inputs at 6px; 6 spacing steps tuned to a 2-4-8-16 rhythm; and 18 component recipes covering the primary purple pill, ghost pill, tag pill, LIVE badge, top nav, sidebar channel row, video card, search input, and the bottom community banner. Feed this file to Claude, Cursor, or GitHub Copilot and the AI will produce React components that read as Twitch — a light-canvas application chrome with one purple voltage, fully-rounded 9000px pills, red LIVE indicators, and an Inter-on-Roobert typographic split where Roobert only appears on h2 and primary anchor labels. Or reference the tokens directly when building streaming, creator-tool, or community-app surfaces: every hex is quoted, every component recipe ready to paste into Tailwind config or CSS custom properties. The system is worth studying because it proves a gaming-adjacent brand can hold a light canvas without losing its energy — let the video carousel do the shouting and let the chrome whisper one purple.

What makes it distinct

Two-purple voltage hierarchyTwitch Purple '#9147ff' fills primary CTAs while deeper grape '#5c16c5' carries link text and accent borders, never swapped
Single LIVE red '#eb0400'the red appears in 18 background renders, exclusively on live indicators, notification badges, and destructive alerts
9000px pill geometryevery button, tag, search field, and pill marker renders at 9000px corner radius (80 declarations) for a fully-rounded silhouette
Inter for chrome, Roobert for displaychrome labels at Inter 14px weight 400-600, h2 headings at Roobert 18px weight 500 with -0.18px tracking
Light-canvas chrome, dark-content imagerythe application surface is '#ffffff' with '#0e0e10' text, and the saturation budget belongs to video thumbnails and category covers

Live at twitch.tv

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

twitch.tv

Explore Twitch

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Twitch design system FAQ

Common questions about Twitch's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Twitch — official site

Live streaming platform for gaming, entertainment, music, sports, and creator communities.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Twitch in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→