Design teardown
Twitch
Light catalog shell with a white bar, gray sidebar, square media, and one purple pill action.
twitch.tv
Design character
Light media catalog
A signed-out light page: a 50px white bar, a 240px gray channel list, a featured preview row, then tight rows of square stream tiles and portrait category tiles. Interface copy is a few words. Section titles are short, with a linked word and a plain continuation. Buttons are one or two words. Tile titles are long, casual, and cut to a single line, followed by a name, a category, and a tiny language label.
Typography
Inter carries the interface at 14px with 1.4 leading and no tracking. Roobert is reserved for section titles at 18px, medium weight, with a slight negative track. Semibold marks buttons, live labels, and names. Secondary lines drop to a muted gray at the same size.
Color system
The page is a cool light gray with white chrome and near-black text. Purple is limited to the filled action, text links, and two deep purple bands. Red is only the live mark. A pink pill marks new category art.
Spacing and geometry
A 4px step set, packed tight in the catalog. Controls are 32px or 36px tall. Tiles sit 10px apart. Content starts 24px after the sidebar.
Layout
Fixed top bar over a persistent left list and a scrolling catalog. The first row is a center-weighted preview with neighbors peeking at the sides. Below that, equal stream cards, then a row of portrait category covers.
Motion
Motion is short and local. The featured row swaps by fading, side previews grow slightly on hover, and some thumbnails play a stepped sprite. Controls ease color in a tenth of a second.
UI fingerprint
- One purple pill The only filled brand button is a 32px purple pill. Other actions are gray pills or purple text.
- Red live mark Live is a 4px red chip plus an 8px dot, not a large banner.
- Square tiles, round controls Media corners are 0. Buttons, avatars, and the search cap are pills or 8px.
- Split light chrome White bar over a gray list, with the catalog on a slightly different gray page.