Skip to content
Back to extractor

Overview

Twitch employs a dark-first design language anchored by a signature purple (#9147ff) that signals brand identity across interactive and decorative elements. The system pairs two custom typefaces — Roobert for display and Inter for UI text — with a tightly controlled spacing scale to maintain density and legibility in complex, information-rich layouts. Elevation and layering are handled through z-index tiers and semi-transparent overlays rather than heavy box-shadows, creating depth without visual noise.

Signature traits: purple brand accent with dark-theme default, custom Roobert display font, rem-based spacing scale rooted at 62.5%, skeleton/shimmer loading states, gradient overlays for video player chrome, pill and minimal-radius shape vocabulary.

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --color-background | #fafafa | Light mode page background | | Background Dark | --color-background-dark | #000000 | Dark mode page background | | Surface Light | --color-surface-light | #efeff1 | Side nav, card backgrounds (light) | | Surface Dark | --color-surface-dark | #18181b | Nav bar, panel backgrounds (dark) | | Surface Mid | --color-surface-mid | #26262c | Side nav background (dark mode) | | Text Primary Light | --color-text-primary-light | #0e0e10 | Headings, body copy (light) | | Text Primary Dark | --color-text-primary-dark | #efeff1 | Headings, body copy (dark) | | Text Secondary | --color-text-secondary | #f7f7f8 | Collection top bar, overlay text | | Border | --color-border | #18181b | Extension dock card borders | | Accent Primary | --color-accent | #9147ff | Logo, CTAs, active indicators, icons | | Accent Dark | --color-accent-dark | #a970ff | Dark-mode hover/active accent | | Accent Deep | --color-accent-deep | #5c16c5 | Navigation links, logo background hover | | Accent Deeper | --color-accent-deeper | #451093 | Logo background, border states | | Accent Darkest | --color-accent-darkest | #772ce8 | Settings focus border, notification borders | | Purple Light | --color-purple-light | #bf94ff | Dark-mode navigation active, hype train icon | | Error | --color-error | #e91916 | Red banner, beta badge background | | Error Dark | --color-error-dark | #eb0400 | Error icon background | | Success | --color-success | #00f593 | Success icon, extension success text | | Info Blue | --color-info-blue | #1e69ff | Token attr-name, hype train community | | White | --color-white | #ffffff | Volume slider, social button icons |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | Roobert, serif | 18px | 700 | 1.5 | normal | Hero headlines, bonus round text | | Heading | Roobert, serif | 1.6rem | 600 | 1.5 | normal | Section titles, embed code headers | | Body | Inter, sans-serif | 1.2rem | 400 | 1.6rem | normal | Paragraph text, UI labels | | Caption | Inter, sans-serif | 1rem | 400 | normal | 0.1em | Badge text, metadata, beta badge copy | | Mono | monospace | 1.6rem | 400 | normal | normal | Embed code examples |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 0.5rem | Inline icon gaps, mini avatar margins | | Spacing SM | 1rem | Component padding, search margin | | Spacing MD | 1.5rem | Section padding, disclosure tool margin | | Spacing LG | 2rem | Top-bar padding, nav link padding | | Spacing XL | 4rem | Section separators, scroll offsets | | Spacing 2XL | 8rem | Other VODs bottom margin, reposition animation | | Nav Height | 5rem | Shell nav, top nav bar height | | Side Nav Width | 24rem | Expanded side nav | | Side Nav Collapsed | 5rem | Collapsed side nav | | Right Column Width | 34rem | Chat/right column width | | Max Width Content | 200rem | Home header sticky, lower content | | Max Width Search | 40rem | Search tray, search box | | Max Width About | 120rem | About section container |

Responsive strategy: Three primary breakpoints observed — max-width: 767px hides nav link lists for mobile, max-width: 768px adjusts home channel info margins, and min-width: 920px / max-width: 919px control chat-beside layout. A max-width: 1023px breakpoint hides the search input. Theatre mode and fullscreen states use dedicated z-index layers (3000+) rather than responsive layout shifts.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | sm | box-shadow: 0 3px 10px -2px | Social button link hover shadow | | md | z-index: 1000 | Top navigation bar | | lg | z-index: 5000 | Modal backdrop overlay | | xl | z-index: 5010 | Snackbar/toast list container | | theatre | z-index: 3000 | Theatre mode right column, video player overlay | | error | z-index: 4000 | Red banner, consent banner | | inspector | z-index: 9999 | Twilight inspector outline (dev tool) |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Flat utility containers, video player backgrounds | | sm | 2px | Buttons, search input, nav links, seekbar bar, border-radius on shell nav search | | md | 5px | Extension dock card image, avatar-like borders | | lg | 50% | Avatar images, spinner, user card avatar, seekbar thumb | | full | 9999px | Pill badges, rounded status indicators |

Components

Navigation Bar: Fixed 5rem height, white (light) / #18181b (dark) background. Logo SVG filled #9147ff in both themes. Nav links use ::after pseudo-element underlines (0.4rem height) as active indicators rather than borders. Link widths are hardcoded per item (e.g., discovery: 6.9rem, browse: 5.9rem, follow: 7.6rem).

Side Nav: 24rem wide (collapsed: 5rem), background #efeff1 light / #26262c dark. Cards have hover background shifts and support offline (grayscale filter), sponsored, promoted, and drop-in variants. Collapse toggle animates via transition: transform .25s.

Buttons: Auth buttons use fixed widths (login: 5.2rem, signup: 6.1rem) with a ::after shimmer bar. Auth buttons are 3rem tall with 0.8rem padding. Border-radius: 2px.

Video Player: Black (#000) background. Controls use a bottom-to-top gradient (linear-gradient(0deg, #000 0, rgba(0,0,0,0.5) 60%, transparent)). Player captions are centered at 50% width with pointer-events: none.

Modals: z-index: 5000, backdrop rgba(0,0,0,0.85), content color #0e0e10 light / #efeff1 dark. Close button positioned absolutely at inset-inline-start: 100%.

Loading Spinner: 2.2rem circle, border-left: 2px solid #19171c (light) / #d9d8dd (dark), animated with shell-loading-spinner keyframes at 1s linear infinite.

Seekbar: Bar height 0.4rem, background hsla(0,0%,100%,.35). Thumb is 1.4rem white circle with border-radius: 50%.

Social Buttons: Two sizes — default (3rem) and large (5rem). Hover lifts with transform: translate3d(0, -0.3rem, 0). Each platform has a dedicated shadow color (e.g., Facebook #3b5998, Reddit #ff4500, Twitter #000).

Gradient Accents: Hype train and gift callouts use multi-stop linear gradients. Gift gradient: linear-gradient(#be0078, #8205b4). Bonus round: linear-gradient(#6e31df, #74f6fa, #6e31df).

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use #9147ff as the primary accent for interactive elements | Use arbitrary purple shades outside #9147ff, #a970ff, #5c16c5, #772ce8, #451093 | | Apply Roobert for display/promo copy, Inter for all UI text | Mix display and UI fonts within the same component type | | Use the 62.5% root font-size rem scale for all sizing | Use px values for spacing/sizing except where explicitly pixel-defined (e.g., border widths) | | Apply border-radius: 2px as the default component radius | Use large or inconsistent border radii on non-pill, non-avatar elements | | Use border-radius: 50% exclusively for avatars and circular indicators | Apply circular radius to non-circular containers | | Implement dark/light theme via .tw-root--theme-dark / .tw-root--theme-light class selectors | Hardcode theme colours without providing both light and dark variants | | Use semi-transparent overlays (rgba(0,0,0,0.5–0.85)) for video and modal backdrops | Use solid black for overlay backgrounds — transparency is required for layering | | Reserve z-index: 5000+ for modals and snackbars only | Assign high z-index values to static layout components |

Agent Prompt Guide

You are working within the Twitch design system. Key constraints:

  • —Colors: background #fafafa (light) / #000 (dark), surface #efeff1 (light) / #18181b (dark), text #0e0e10 (light) / #efeff1 (dark), accent #9147ff (light) / #a970ff (dark), deep accent #5c16c5, error #e91916, success #00f593
  • —Typography: Roobert (serif fallback) for display/promo headings at weight 600–700; Inter (sans-serif) for all UI body text at weight 400–600; monospace for code blocks at 1.6rem
  • —Spacing: use the rem scale rooted at 62.5% — xs=0.5rem, sm=1rem, md=1.5rem, lg=2rem, xl=4rem, 2xl=8rem
  • —Radius: 2px for buttons/inputs/cards, 50% for avatars/circles, 9999px for pills/badges only
  • —Themes: always provide both .tw-root--theme-dark and .tw-root--theme-light variants
  • —Z-index tiers: content=0–10, nav=1000, theatre=3000, banners=4000, modals=5000, toasts=5010, devtools=9999
  • —Never use colours, fonts, spacing, or radius values outside this design system
  • —Video/overlay backgrounds must use rgba transparency, never solid fills except #000 for video containers