iOS Design Spec

# The black screen the world queues up.

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.

View Design Tokens Explore Surfaces
9:41
Search games, shows, movies
Top Searches
Stranger Things
The Crown
Wednesday
Breaking Bad
Squid Game
Money Heist
Home
New & Hot
Search
My Netflix
Search
9:41
N
TV Shows Movies Categories ▾
STRANGER
THINGS
97% Match· 2024 · TV-14
Sci-Fi Thriller Mystery
Play
My List
Top 10 in your country
1
2
3
Continue Watching
Home
New & Hot
Search
My Netflix
Home
9:41

## Who's watching?

J
Jiang Shu
M
Maya
K
Kai
+
Add Profile
Profiles
iOS Surface Anatomy

## Three surfaces. Pure black. One red.

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.

### Home

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.

### Search

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.

### Profile Picker

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.

Top 10 ranked card

### The numeral is the artwork.

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`
1
65%
Downloading · 240MB / 370MB · Wi-Fi only
Downloads

### The plane mode pact.

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`
Profile switch

### A bounce, then the curtain rises.

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`
J
Jiang Shu
M
Maya
K
Kai
+
Add
Design System Reference

## The vocabulary of one red, one black.

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.

View Source ↗

### Color

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.

Primary Brand
Netflix Red
#E50914
Red Dim
#B00710
True Black
#000000
Pure White
#FFFFFF
Match Green
#46D369
Text
Ink
#FFFFFF
Soft
#F5F5F5
Muted
#A3A3A3
Dim
#737373
Top 10 Stroke
#5A5A5A
Surface
Surface 1
#141414
Surface 2
#181818
Card
#1F1F1F
Card Alt
#262626
Border
#303030
Semantic
Progress / CTA
#E50914
% Match
#46D369
Premium
#54B9C5
My List Btn
gray/.60
Tag Pill
black/.78

### Typography

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

### Radius

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.

Square
0px
Tag
2px
Top10
3px
Standard
4px
Modal
6px
Max
8px
Screen
38px
Icon
50%

### iOS Spec Strip

The constants Home, Search, Downloads, and the Profile picker agree on.

Tab bar height
83pt
4 tabs. Active tab is white + 600.
Hero poster
2:3
Artwork-embedded title. 12pt internal padding.
Top 10 numeral
200pt
Bebas Neue compressed. Hollow + 3pt stroke.
Row tile width
78pt
2:3 ratio. 6pt horizontal gap.
Progress bar
3pt
Continue Watching. Bottom edge, red fill.
Avatar tile
84pt
Square, 4pt radius. 18pt grid gutter.
Profile bounce
1.18x
Spring scale on tap, 250ms.
Animation curve
spring
damping .85, response .35.

### Components

Square corners, weighted typography, the white Play button as the brightest object on every screen.

##### Buttons

Play
My List Get Netflix Edit Profiles

##### Inputs

New Episode #1 in TV 4K UHD

##### Cards

Stranger Things
STRANGER
THINGS
View source ↗