Twitch — Browse directory

Media & SocialSee it livetwitch.tv

A native ad slots into the category grid at the exact same size and shape as real content, distinguished only by a tiny 'Ad' chip — the grid doesn't make room for advertising, it disguises it as content.

Twitch — Browse directory — captured interface — Page excerpt · scroll inside to explore

Source capture · 2026-08-01Open full image ↗

Search & discovery Navigation Content & media

Why this pattern works

The ad-as-grid-tile pattern: same poster shape, same size, same caption stack as legitimate content, with a small 'Ad' + info-icon chip as the only tell — worth stealing for any content-supported grid. Also the oversized category pills, solid purple with icon art that bleeds past the pill's own rounded edge, which reads far more ownable than a plain icon-plus-label button row.

Design notes

Surface: Browse / directory root, Categories tab, logged out
Navigation: Three tiers. A top bar with a wordmark and a global search pill centered in it. A collapsible live-channels rail on the far left, independent of the page content beside it. And a two-tab sub-nav (Categories / Live Channels) inside the content area, plus a five-pill category shortcut row sitting above that tab strip.
Layout: Fixed top bar, fixed/collapsible left rail (~240px), fluid content grid to the right. A purple signup banner is pinned to the bottom of the viewport over the content, the same mechanism as Spotify's bottom bar.
Density: Medium-dense sidebar — channel rows at ~56px with an avatar, two lines of text and a viewer count — against a looser content grid with real gutters between poster tiles. Two densities coexisting in one view.
Color: White/light-grey canvas, black text, and one purple used everywhere on purpose: the logo, primary buttons, the active tab underline, the category pills, live-status dots and the bottom banner. A single-hue system, not a rainbow, even though it touches nearly every component.
Type: One sans. The page title 'Browse' is oversized (~48px bold black) and stands alone with no supporting subtitle. Channel and category names run ~14-16px bold; viewer counts and tags sit ~12-13px grey. Hierarchy is size-driven at the top and weight-driven everywhere else.
Pattern: The category shortcut pills: large rounded-rect buttons in solid purple with bold white labels, each carrying a decorative icon illustration that overflows the pill's own boundary on one side. Five plain nav links become a visually distinct, ownable row.
States: Logged out: the sidebar still shows a full live-channels list — content isn't gated — but a persistent purple banner pinned to the bottom pushes account creation on every screen. The notification bell shows a live count badge (39) even logged out, implying platform-wide activity rather than a personal inbox.
Don't: Don't caption the ad tile differently from real content — no bigger badge, no different corner treatment, no separate section. The instant an ad tile looks structurally different from its neighbors, the placement stops working and reads as an ad instead of as browsing.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withI want to

Tech stack

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text

# My project
[Describe the product, audience, and screen you want to improve]

Stack: Use the existing project stack
Task: Implement the interface and verify the result in the existing project.

## Tool guidance (Any AI tool)
Use available project tools to inspect, implement, and test. State any unavailable capabilities.

# Design reference: Twitch — Browse directory
Source: https://www.twitch.tv/directory
Swipefile reference: https://swipefile.design/ref/twitch-directory/
Captured: 2026-08-01. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- surface: Browse / directory root, Categories tab, logged out
- nav: Three tiers. A top bar with a wordmark and a global search pill centered in it. A collapsible live-channels rail on the far left, independent of the page content beside it. And a two-tab sub-nav (Categories / Live Channels) inside the content area, plus a five-pill category shortcut row sitting above that tab strip.
- layout: Fixed top bar, fixed/collapsible left rail (~240px), fluid content grid to the right. A purple signup banner is pinned to the bottom of the viewport over the content, the same mechanism as Spotify's bottom bar.
- density: Medium-dense sidebar — channel rows at ~56px with an avatar, two lines of text and a viewer count — against a looser content grid with real gutters between poster tiles. Two densities coexisting in one view.
- color: White/light-grey canvas, black text, and one purple used everywhere on purpose: the logo, primary buttons, the active tab underline, the category pills, live-status dots and the bottom banner. A single-hue system, not a rainbow, even though it touches nearly every component.
- typography: One sans. The page title 'Browse' is oversized (~48px bold black) and stands alone with no supporting subtitle. Channel and category names run ~14-16px bold; viewer counts and tags sit ~12-13px grey. Hierarchy is size-driven at the top and weight-driven everywhere else.
- pattern: The category shortcut pills: large rounded-rect buttons in solid purple with bold white labels, each carrying a decorative icon illustration that overflows the pill's own boundary on one side. Five plain nav links become a visually distinct, ownable row.
- states: Logged out: the sidebar still shows a full live-channels list — content isn't gated — but a persistent purple banner pinned to the bottom pushes account creation on every screen. The notification bell shows a live count badge (39) even logged out, implying platform-wide activity rather than a personal inbox.
- dont: Don't caption the ad tile differently from real content — no bigger badge, no different corner treatment, no separate section. The instant an ad tile looks structurally different from its neighbors, the placement stops working and reads as an ad instead of as browsing.

Useful for: The ad-as-grid-tile pattern: same poster shape, same size, same caption stack as legitimate content, with a small 'Ad' + info-icon chip as the only tell — worth stealing for any content-supported grid. Also the oversized category pills, solid purple with icon art that bleeds past the pill's own rounded edge, which reads far more ownable than a plain icon-plus-label button row.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

Twitch — Browse directory

Make it your own

Keep exploring