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

More readings

All readings