Twitch

Twitch presents a vibrant, high-energy streaming platform built on a light canvas. Its visual identity balances functional clarity with dynamic accents. The dominant bright purple, used for primary CTAs and key highlights, injects brand personality into an otherwise neutral interface. A subtle use of layered grays and crisp typography ensures content remains the focal point, while bold status indicators ('LIVE' badge) cut through the visual noise. Use Nightfall Text (#0e0e10) for all primary text elements on Cloud Canvas (#efeff1) or Ghost White (#ffffff) backgrounds. Apply Twitch Purple (#5c16c5) or Call-to-Action Purple (#9147ff) exclusively to primary interactive elements, active states, and brand signifiers. Employ the 9000px border-radius for all interactive buttons, user avatars, and categorical tags to create a consistent soft, approachable feel. Use a Live Red (#eb0400) background combined with Ghost White (#ffffff) text for any 'LIVE' status indicators to ensure immediate visual recognition. Maintain a default elementGap of 8px (or multiples thereof like 16px) for consistent vertical and horizontal spacing between discrete UI elements. Utilize Roobert font with -0.01em letter-spacing for prominent headings and key links to leverage its distinct, compact character. Structure information using a subtle Ghost White (#ffffff) background for primary content cards and Cloud Canvas (#efeff1) for general page areas to create clear visual separation. Do not use highly saturated colors for large background areas or extensive text blocks, except for designated brand banners. Avoid using drop shadows on most UI elements; instead, rely on variations in background color for surface differentiation. Do not introduce additional font families or weights beyond Inter (400, 600) and Roobert (400, 500, 600) to maintain typographic consistency. Never apply a border-radius of less than 4px, except for the 2px on specific video overlay labels, as most UI elements use 4px or 9000px. Do not use red or other semantic colors for primary CTA buttons, as this is exclusively reserved for the Live Red status indicator. Avoid large, impactful hero sections that dominate the viewport; prioritize content visibility through dense, card-based layouts. Do not use dark backgrounds for the main canvas; the design system operates predominantly on a light theme with specific dark content sections.