Media & Entertainment / iOS / Android / Web

Twitch

Twitch keeps the directory calm so the thumbnails carry the color: a pale gray page, near-black ink, one vivid purple for the action, and fully round pills at a compact 32 high.

Download
  • #9147FF
  • #5C16C5
  • #451093
  • #0E0E10
  • #3B3B44
  • #EFEFF1
  • #EB0400

Color

Every color token in the file, grouped by role.

Brand

  • primary#9147FF
  • on primary#FFFFFF
  • primary deep#5C16C5
  • primary band#451093

Surfaces

  • canvas#F7F7F8
  • surface#FFFFFF
  • surface alt#EFEFF1

Text

  • ink#0E0E10
  • ink muted#3B3B44
  • ink inverse#FFFFFF

More

  • live#EB0400
  • dark#18181B

Typography

Each style is set with the file's own family, size, weight and spacing.

  • RoobertRoobert is private and not available in open fonts. Shown in Albert Sans, the closest open match.
  • InterOpen font, shown as published.
  • display60px / 500 / 60px

    Twitch

  • heading24px / 500 / 26.4px

    Pack my box with five dozen liquor jugs

  • subheading18px / 500 / 19.8px

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 19.6px

    The quick brown fox jumps over the lazy dog

  • label14px / 600 / 15.4px

    Continue to checkout

  • meta12px / 400 / 16.8px

    The quick brown fox jumps over the lazy dog

  • button14px / 600 / 19.6px

    Continue to checkout

Shape

Corner radius tokens.

  • none0
  • small3.2px
  • medium6.4px
  • field8px
  • large9.6px
  • xl16px
  • xxl25.6px
  • pill9000px

Spacing

The spacing scale, drawn to size.

  • xs2px
  • sm4px
  • base8px
  • md10px
  • lg16px
  • xl24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button secondary
    button-secondary
  • search field
    search-field
  • card title
    card-title
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 111 lines
version: alpha
name: Twitch-design-analysis
description: "A live streaming directory drawn on a pale gray page: one vivid purple (#9147ff), near-black ink, Roobert for headings with Inter at 14px for the interface, and fully round pill buttons 32 high."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#9147ff"
  on-primary: "#ffffff"
  primary-deep: "#5c16c5"
  primary-band: "#451093"
  ink: "#0e0e10"
  ink-muted: "#3b3b44"
  ink-inverse: "#ffffff"
  canvas: "#f7f7f8"
  surface: "#ffffff"
  surface-alt: "#efeff1"
  live: "#eb0400"
  dark: "#18181b"

typography:
  # Font note: "Roobert" is a private font and is not available in open fonts. Closest open alternative: "Albert Sans".
  display:
    fontFamily: "Roobert, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 60px
    letterSpacing: -1.2px
  heading:
    fontFamily: "Roobert, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 26.4px
    letterSpacing: -0.24px
  subheading:
    fontFamily: "Roobert, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 19.8px
    letterSpacing: -0.18px
  body:
    fontFamily: "Inter, Roobert, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
  label:
    fontFamily: "Inter, Roobert, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 15.4px
  meta:
    fontFamily: "Inter, Roobert, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
  button:
    fontFamily: "Inter, Roobert, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 19.6px

rounded:
  none: 0
  small: 3.2px
  medium: 6.4px
  large: 9.6px
  xl: 16px
  xxl: 25.6px
  field: 8px
  pill: 9000px

spacing:
  xs: 2px
  sm: 4px
  base: 8px
  md: 10px
  lg: 16px
  xl: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 32px
    padding: 0 12px
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 32px
    padding: 0 12px
  search-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.field}"
    height: 40px
    padding: 0 16px
  card-title:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    height: 20px
    padding: 0

Overview

Twitch is a live streaming service. Its public directory is drawn on a pale gray page with near-black ink, one vivid purple for everything branded or clickable, and fully round pill buttons at a compact 32 high. [Observed]

What defines the look:

  1. One vivid purple. #9147ff fills the sign up button and marks the brand. A deeper #5c16c5 carries link and nav text, and #451093 fills the dark promotional band. [Measured]
  2. A pale gray page, not white. The body sits on #f7f7f8 with white cards and #efeff1 panels, so cards lift without borders. [Measured]
  3. Fully round pills. The rounded radius token is 9000px and it is the most used corner on the page, applied to buttons, tags and avatars. [Measured]
  4. Two faces with clear jobs. Roobert sets headings and nav labels with tight negative tracking. Inter sets the interface at 14px and the counts at 12px. [Measured]
  5. A compact 14px interface. Body, links, buttons and channel names all sit at 14px, so the card grid stays dense. [Measured]

Source for this file: the Twitch browse directory and the Just Chatting category page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The 220 custom properties published on the page were read as a cross-check for the color ramp and for the radius and breakpoint names. No app captures were used. See Known Gaps.

Core

Colors

Twitch exposes a numbered purple ramp in the page itself, which gives the exact role names. [Measured]

RoleTokenValueWhere
Brand purple--color-twitch-purple-9#9147ffSign up button, brand mark
Deep purple--color-twitch-purple-7#5c16c5Nav and link text
Band purple--color-twitch-purple-6#451093Dark promotional band
Text#0e0e10Titles, channel names
Secondary text#3b3b44Viewer counts, meta
Page#f7f7f8Body behind the grid
Card#ffffffSearch field, cards
Panel#efeff1Section panels, tags
Live#eb0400Live indicator

The full purple ramp runs from #040109 at step 1 to #f3ebff at step 15, with #772ce8 at step 8 and #a970ff at step 10 flanking the brand step. [Measured]

Typography

Roobert carries display and headings: 60 on 60 at 500 with -1.2px tracking for the page title on desktop, 32 on 44.8 at 400 on mobile, 24 on 26.4 at 500 with -0.24px for a category title, and 18 on 19.8 at 500 with -0.18px for nav labels. Inter carries the interface: 14 on 19.6 at 400 for body and links, 14 on 15.4 at 600 for channel names and buttons, and 12 on 16.8 at 400 for viewer counts. Roobert is loaded at 400, 500, 600 and 700 and Inter at 400, 600 and 700. [Measured]

Shape and spacing

The page publishes its radius scale: none 0, small 0.2rem, medium 0.4rem, large 0.6rem, extra large 1rem, extra extra large 1.6rem and rounded 9000px. In use the rounded pill dominates, with 86 pill corners counted on the directory page, and 6, 4, 10, 8 and 2 appearing on cards and thumbnails. Search fields use 8. Border widths are published as 1px default and 2px for buttons, checkboxes and tags. [Measured]

Iconography and motion

Icons are inline shapes sized to the 14px interface. Motion was not measured. [Observed for the icons, Inferred for motion]

Themes

The public directory renders in the light theme, with the pale gray page and near-black ink. A dark theme exists in the product but was not reachable on the logged out pages, so no dark values are given. [Observed]

Breakpoints

Published as --break-xs 480, sm 768, md 1024, lg 1200, xl 1440 and xxl 1600. [Measured]

Platform: iOS

The Twitch iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title with the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of a streaming service. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A purple button to follow or subscribe, carried over from the web. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. The web pills are 32 high, which is below the 44pt minimum, so the app is expected to use taller targets. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the purple, the ink and the pill shapes with the web. [Inferred]

Platform: Android

The Twitch Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Chevron plus previous title with the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of a streaming service. [Inferred]

Main action

Expected on Android: Floating action button.

A purple button to follow or subscribe. No floating action button was seen on the web, and none is assumed. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. The web pills are 32 high, which is below the 48dp minimum, so the app is expected to use taller targets. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Account deletion and data safety entries were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the purple, the ink and the pill shapes with the web. [Inferred]

Platform: Web

The Twitch browse directory and the Just Chatting category page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. The category page carries a nav label at 18px in deep purple that returns to the directory. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar holding the brand mark, a browse link, a search field 40 high with an 8px corner, and Log In and Sign Up pills. A left rail lists recommended channels on desktop and collapses at 390. [Observed]

Main action

Expected on Web: Page-level button.

The Sign Up pill: #9147ff fill, white Inter 14 at 600, fully round, 81 by 32. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured on the public pages. [Inferred]

Controls

Expected on Web: Native or custom.

Pill tags under each card, a search field 36 to 40 high, and card tiles with small 4 to 10 corners. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that change at the published breakpoints. The page title drops from 60 to 32 between 1440 and 390. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons and pills measure 32 high and the search field 36 to 40. A skip link comes first in the tab order. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Inline shapes sized to the 14px interface. [Observed]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Log In and Sign Up sit in the top bar of every public page. The directory itself reads without an account. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps the type faces and the purple and re-flows the card grid, dropping the left rail and shrinking the title at 390. [Measured]

Cross-platform consistency

Consistent across platforms: the brand purple, the near-black ink, the pill shapes and the two type faces. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use the brand purple for the one main action and the deeper step for nav and link text.
  • Keep buttons and tags fully round.
  • Sit white cards on the pale gray page instead of drawing borders.
  • Keep the interface at 14px and the counts at 12px.
  • Set headings in the display face with tight negative tracking.

Don't

  • Don't use the brand purple for body text.
  • Don't give buttons a small square corner.
  • Don't put the page on pure white.
  • Don't use the live red for anything other than the live state.

Known Gaps

  • The dark theme was not measured, because the public pages render in the light theme and the toggle sits behind an account.
  • The signed-in product, the channel page, the video player and chat were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Motion, the exact spacing steps and the icon set were not measured.
  • Account deletion and store policy rules were not verified.
  • Roobert is private. Albert Sans was chosen as the open alternative after rendering the real face next to candidates at 60px/500 and 18px/500, where it matched the measured line width within 0.4 percent at both sizes and shares the geometric grotesque structure. DM Sans and Instrument Sans were close behind, so this is a judgement call.