Twitch Mobile — design system & UI screens

Entertainment · 4 screens · twitch.tv

Live streaming and video content discovery platform where viewers browse and watch live channels across gaming, creative, and entertainment categories. The layout uses a tabbed navigation between "Categories" and "Live Channels", displaying channel cards in a grid with thumbnail images, channel names, viewer counts (shown in red), and category tags below each card.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/twitch-mobile.

Decoded design system

Twitch Mobile's decoded design system: background #0E0E10, text #FFFFFF, accent #008D8F, link #008D8F, primary #008D8F; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #008D8F — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#0E0E10`
surface	`#1C1C1E`
border	`#323233`
text	`#FFFFFF`
text_muted	`#A3A3A4`
primary	`#008D8F`
accent	`#008D8F`
link	`#008D8F`
button_bg	`#008D8F`
button_text	`#0E0E10`

Using these colors

Action color #008D8F — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #008D8F — one role, not several (the action color).
accent #008D8F — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

h1: 34px
h2: 22px
body: 17px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 5px, 6px, 8px, 12px, 15px, 16px, 20px

Radii

base: 12px
button: 12px

Shadows (elevation)

subtle: rgba(0, 0, 0, 0.13) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px
card: rgba(0, 0, 0, 0.22) 0px 6px 16px 0px, rgba(0, 0, 0, 0.08) 0px 0px 4px 0px

Motion

Micro-interactions run at 100ms (dominant) with ease.

durations: 100ms · 200ms · 150ms
easings: ease · ease-in
animated properties: transform, opacity, none, border

Native design tokens

Token	Value
`--color-brand-accent-barrel`	`#f7262d`
`--color-brand-accent-crash`	`#ff6905`
`--color-brand-accent-cuddle`	`#fa1ed2`
`--color-brand-accent-dragon`	`#8205b3`
`--color-brand-accent-edgeworth`	`#bd0078`
`--color-brand-accent-grass`	`#00991a`
`--color-brand-accent-jiggle`	`#f195f9`
`--color-brand-accent-junimo`	`#00fa04`
`--color-brand-accent-mana`	`#56bde6`
`--color-brand-accent-ooze`	`#bfff00`

…and 110 more measured on the page.

Button states (measured)

primary hover: background #772CE8
primary focus: box-shadow rgb(119, 44, 232) 0px 0px 6px 0px · background #772CE8 · outline 1px auto rgb(16, 16, 16)

Layout (measured)

nav: 50px

Motion choreography (measured)

Load order: div.shell-loader__spinner → div.shell-loader → div.ScLoadingSpinnerCircle-s×2 → span.ScPlaceholderFill-sc-wb1×69 → div.ScLoadingSpinner-sc-bvza → div.ScTransitionBase-sc-hx4q×10

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Input (measured)

height 36px · radius 8px 0px 0px 8px · focus ring rgb(119, 44, 232) 0px 0px 0px 2px, rgb(119, 44, 232) 0px 0px 0px 2px inset

Responsive (measured)

breakpoints: 768px · 1440px
mobile (390px): hero 18px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →