Netflix's iOS app, dissected. Pure black canvas. A single Netflix Red. Artwork that carries its own title. And those impossible, page-tall numerals on Top 10.
Every Netflix screen is a black void with artwork on it. There are no soft pills, no pastels, no warm grays. The chrome disappears so the poster can be the message.
2:3 hero poster with title burned into the artwork. White Play and outlined My List buttons share width. Rows below hold Top 10 (with the giant numerals), Continue Watching (with red progress), and Trending.
Single 4pt-radius input bar; below it a vertical stack of horizontal 16:9 cards with the artwork on the left and title text right-aligned to a play affordance.
4 square (84×84, 4pt radius) avatars in a 2-column grid plus a hollow "+ Add Profile" slot. Tapping fires a bouncy 1.0 → 1.18 → 1.0 zoom before the home screen loads.
Each Top 10 cell is a 2:3 poster with a transparent #000-fill, #5a5a5a-stroked numeral planted to its left, scaled to 200px in Bebas Neue style. The poster sits on top with a -24pt horizontal overlap.
The numeral never gets a fill color — it's always a hollow extrusion against the black canvas. The single most identifiable shape Netflix ever shipped.
numeral: 200pt
stroke: 3pt #5A5A5A
poster: 2:3
overlap: -24pt
Tapping the download glyph on a title turns it into a circular progress ring — #3a3a3a track, #E50914 fill, 6pt stroke, animated from strokeDashoffset. When complete, the ring snaps to a filled red circle with a white check.
Downloads only resume on Wi-Fi unless the user explicitly toggles cellular. The completed state lives forever in the My Netflix → Downloads tab.
ring: 80pt
stroke: 6pt
track: #3A3A3A
fill: #E50914
Tap a profile avatar and Netflix runs a 0.25s spring scale (1.0 → 1.18 → 1.0) on the cell, then crossfades to the home screen with that profile's recommendations already loaded behind the splash.
This single bounce — paired with the iconic ta-dum — is Netflix's signature transition. It exists nowhere else in the app.
scale: 1.18x
duration: 250ms
curve: spring
Netflix's iOS app token set: pure black canvas, the unrepentant #E50914, a strict gray ladder, and a 4pt corner radius that almost never bends.
A pure-black canvas, a single brand red, and a tight neutral ladder. No warm tones, no pastels, no soft pills — every color carries weight.
Netflix Sans in production — substituted with Inter. Heavy 800–900 for everything title-related; bodies stay at 400–500. Bebas Neue stands in for the iconic compressed title and Top 10 numerals.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --hero-title | STRANGER THINGS | 32 / 2.00rem | 900 cmp | -1px |
| --top10-numeral | 3 | 200 / 12.5rem | 900 stroked | -12px |
| --screen-title | Who's watching? | 20 / 1.25rem | 800 | -0.4px |
| --row-title | Top 10 in your country | 15 / 0.94rem | 800 | -0.3px |
| --btn-play | ▶ Play | 13 / 0.81rem | 700 | normal |
| --meta-line | 97% Match · 2024 · TV-14 | 12 / 0.75rem | 500 | normal |
| --tab-label | New & Hot | 9.5 / 0.59rem | 500 | normal |
| --profile-name | Jiang Shu | 13 / 0.81rem | 500 | normal |
4pt is the law. Thumbnails 4pt, buttons 4pt, search input 4pt, profile avatars 4pt. The only exceptions: 3pt on Top 10 tiles (tighter to read against the stroke), 50% on circular icons, and 38pt on the phone screen mask.
The constants Home, Search, Downloads, and the Profile picker agree on.
Square corners, weighted typography, the white Play button as the brightest object on every screen.