Netflix Mobile — design system & UI screens

Entertainment · 3 screens · netflix.com

A video streaming platform for watching movies, games, and podcasts on demand. The screen displays a featured title with a large hero image, metadata tags (genre, status), and prominent play/add-to-list action buttons. The layout follows a vertical feed with category chips at the top, featured content in the middle, and a bottom tab bar for primary navigation.

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/netflix-mobile.

Decoded design system

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

Color roles

Role	Value
bg	`#000000`
surface	`#0F0F0F`
border	`#262626`
text	`#FFFFFF`
text_muted	`#9E9E9E`
primary	`#1F0103`
accent	`#1F0103`
link	`#1F0103`
button_bg	`#1F0103`
button_text	`#000000`

Using these colors

Action color #1F0103 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #1F0103 — one role, not several (the action color).
accent #1F0103 — 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, 6px, 8px, 10px, 12px, 16px, 22px, 24px

Radii

base: 12px
button: 12px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 250ms (dominant) with ease-in-out.

durations: 250ms · 200ms · 4000ms
easings: ease-in-out · cubic-bezier(0.4, 0, 0.68, 0.06)
animated properties: transform, background-color, border-radius, border-color

Button states (measured)

primary hover: background #C11119
primary focus: outline 2px solid rgb(255, 255, 255)

Layout (measured)

container max-width: 730px
nav: 88px

Motion choreography (measured)

Load order: select → div.default-ltr-iqcdef-cache×10 → input×2 → button.default-ltr-iqcdef-cache → div.default-ltr-iqcdef-cache×2

Stagger: div ×10 — 400ms apart.

Input (measured)

height 56px · radius 0px

Responsive (measured)

mobile (390px): hero 32px · nav inline

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