A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
23tokens
9type steps
1radius steps
12pxspacing base
Netflix, in one page
Netflix's iOS app is a cinematic dark canvas where poster art does all the heavy lifting. From the moment you pick a profile, you're dropped into a screen that feels less like a traditional app and more like a black-box theater: the canvas is #141414 (a warm true-dark charcoal used across every Netflix surface since the brand's modern refresh), and every row of content is a horizontal strip of 2:3 vertical poster tiles separated only by titles and the faintest of whitespace. The top of every Home screen is a full-bleed hero — no app-logo header, no search bar at the top — where a trailer auto-plays muted over the selected title's key art, fading from the full landscape bleed at the top into the dark canvas via a vertical gradient that eats away at the bottom third of the image. You scroll, and rows of posters flow under your thumb like film strips.
The accent system is singular and sacred: Netflix Red (#E50914). It appears in exactly three places — the word "NETFLIX" at the top of the feed (the only header element, a wordmark), the large red Play button on the hero and every detail page, and the notification badges. Nothing else in the UI is red. Everything else — text, surface elevation, buttons that aren't Play — lives in a narrow monochrome palette: white (#FFFFFF), muted white (#AAAAAA), a near-black deep gray (#1F1F1F) for raised surfaces, and the canvas (#141414) itself. When Netflix wants to signal a different profile, it rotates a small palette of saturated accent colors (red, blue, yellow, green) on the circular avatars of the profile picker — but those never leak into the main app chrome.
Typography is Netflix Sans, a proprietary sans-serif designed in 2018 by Dalton Maag to replace Gotham across the product. It's a humanist geometric with tight tracking, designed to read as brand-owned and cinematic. The hierarchy is display-heavy because Netflix has a habit of putting 24–48pt titles on top of poster art, and compact at the UI level because content takes the focus. The most expressive moment is on the title detail page, where the show's logo artwork — rendered as an image, not type — sits at the top at 60%+ width, tightly followed by descriptive metadata in 14–15pt regular. Netflix Sans plays a supporting role; the art is the headline.
Key Characteristics:
- True-dark canvas (
#141414) — a warm charcoal, not pure black; behind hero art it goes#000000 - Dark mode only — no light mode; Netflix has never shipped a light-mode iOS app
- Netflix Red (
#E50914) reserved for the logo wordmark, Play button, and notification badges — nothing else - Full-bleed hero at the top of Home with muted trailer auto-play and a gradient fade into canvas
- Horizontal rows of 2:3 portrait poster tiles — 60+ rows on a typical Home
- "Top 10" numbered row — giant side-profile numerals (1, 2, 3, …) rendered as a background layer with the poster sitting in front
- "Continue Watching" row shows a red progress bar at the bottom of each poster
- Netflix Sans (proprietary) paired with Graphik fallback, weights 400 / 500 / 700
- Profile selector on launch — circular avatars, colored rotation, "Who's watching?" prompt
- Mobile tab bar: Home, New & Hot, My Netflix, Downloads (if offline content exists)
- Scrubber with full-size preview thumbnails on video playback
- "Are you still watching?" inactivity modal during extended playback
Do's and don'ts
Do
- Use
#141414as the canvas — warm dark charcoal, not pure black (except behind hero art) - Reserve Netflix Red (
#E50914) for the NETFLIX wordmark, Play button, and Continue Watching progress bar — nothing else - Use the red wordmark as the ONLY header on Home — no text title, no search bar in the top app bar
- Render posters at a 2:3 aspect ratio with a 4pt corner radius — Netflix's signature tile
- Use the vertical gradient from canvas to transparent to fade hero images into the background
- Use
#AAAAAAfor all metadata / secondary text — never gray-blue or warm gray - Use Netflix Sans for all type, weights 400 / 500 / 700 only
- Auto-play muted hero trailers after a 2s idle delay
- Show the big outlined numerals behind Top 10 posters
- Show the red progress bar on Continue Watching tiles at the bottom edge
- Use the rounded 4pt corner on the Play button (soft corner, not pill)
- Use a 1:4 profile picker grid with colored circular avatars on app launch
- Use "Are you still watching?" modal after 3+ hours of continuous autoplay
Don't
- Don't use pure black
#000000as the canvas —#141414is warmer and the Netflix standard - Don't ship a light mode — Netflix has always been dark-only
- Don't use green for success (downloaded, checkmark states) — Netflix uses gray
- Don't use a full-pill corner on the Play button — 4pt is signature
- Don't use red anywhere other than the defined brand moments — no red borders, no red text, no red accent on metadata
- Don't put a title text header on the Home screen — the NETFLIX wordmark image replaces it
- Don't use shadows on poster tiles — they sit flat on the canvas
- Don't auto-play hero trailers with sound — they must start muted with user-controlled unmute
- Don't forget the outlined numerals on the Top 10 row — that visual is the row's defining feature
- Don't animate aggressively — Netflix motion is subtle, 250–400ms springs
- Don't show episode numbers before title — format is "Episode 1: Chapter 1" (episode then title)
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Netflix design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Netflix Red: #e50914
- Netflix Red Pressed: #b7070f
- Netflix Red Dimmed: #831010
- Canvas: #141414
- Deep Black: #000000
- Surface 1: #1f1f1f
- Surface 2: #2a2a2a
- Surface 3: #3a3a3a
- Divider: #2b2b2b
- Input Field: #333333
Type:
- families: Netflix Sans, Graphik, Fallback Stack
- scale: 10, 11, 12, 13, 14, 15, 17, 20, 32
- weights: 400, 500, 700
Shape:
- radius: 4
- elevation: Image: full-bleed within the tile, no border, no shadow
Spacing: 12, 14
Rules:
- Use `#141414` as the canvas — warm dark charcoal, not pure black (except behind hero art)
- Reserve Netflix Red (`#E50914`) for the NETFLIX wordmark, Play button, and Continue Watching progress bar — nothing else
- Use the red wordmark as the ONLY header on Home — no text title, no search bar in the top app bar
- Render posters at a 2:3 aspect ratio with a 4pt corner radius — Netflix's signature tile
- Use the vertical gradient from canvas to transparent to fade hero images into the background
- Use `#AAAAAA` for all metadata / secondary text — never gray-blue or warm gray
Avoid:
- Don't use pure black `#000000` as the canvas — `#141414` is warmer and the Netflix standard
- Don't ship a light mode — Netflix has always been dark-only
- Don't use green for success (downloaded, checkmark states) — Netflix uses gray
- Don't use a full-pill corner on the Play button — 4pt is signature
- Don't use red anywhere other than the defined brand moments — no red borders, no red text, no red accent on metadata
- Don't put a title text header on the Home screen — the NETFLIX wordmark image replaces it
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Netflix Red (
#E50914): The iconic saturated red — logo wordmark at top of Home, the main Play button, notification badges, "LIVE" event indicators, Continue Watching progress bar fill. Not used for secondary actions, borders, or generic accents. - Netflix Red Pressed (
#B7070F): Pressed / active-state variant for red CTAs. - Netflix Red Dimmed (
#831010): Very occasionally used for inactive or loading-state placeholders on red elements.
Canvas & Surfaces
- Canvas (
#141414): Primary dark canvas — Netflix's signature "warm dark," used across Home, browse, profile, settings, everywhere. - Deep Black (
#000000): Full-bleed background behind title art, player background, loading-state fills. - Surface 1 (
#1F1F1F): Card backgrounds when a card appears in front of the canvas, genre-picker grid tiles. - Surface 2 (
#2A2A2A): Bottom sheets, modal backgrounds, pressed states on rows. - Surface 3 (
#3A3A3A): Elevated sheets, context menus, sign-in fields. - Divider (
#2B2B2B): 1pt hairlines between rows inside settings / profile screens. - Input Field (
#333333): Sign-in / search input backgrounds.
Text
- Text Primary (
#FFFFFF): Titles, headlines, primary UI text. - Text Secondary (
#AAAAAA): Metadata — rating, year, runtime, genres, "Season 1 · 10 episodes". - Text Tertiary (
#777777): Disabled text, lowest-emphasis labels. - Text on Red Button (
#FFFFFF): White text on the red Play button. - Text on Gray Button (
#000000): On the white/gray "My List" secondary button, text goes black (intentional contrast).
Profile Accent Rotation
Profiles cycle through a small set of saturated hues on their circular avatar backdrops:
- Profile Red (
#E50914) — primary - Profile Blue (
#3E3E91) — warm navy - Profile Yellow (
#F5D85C) — mustard yellow - Profile Green (
#4B8A3E) — forest green - Kids Profile Orange (
#F8981D) — kids profile signature
These colors appear only on the profile-picker screen; they never bleed into the main app chrome.
Semantic
- Info / Link (
#54B9C5): Rarely used; Netflix prefers underlined text for links. - Error (
#E50914): Same token as brand red for playback errors. - Success / Downloaded (
#AAAAAA): Downloaded indicator on My Netflix uses gray, not green — Netflix avoids green semantics entirely.
Dark-Only
Netflix iOS has no light mode. The app has been dark-only since its modern launch; even system light mode preference is ignored and the app remains #141414.
Type scaleRead the full spec
Font Family
- Primary:
Netflix Sans(proprietary, designed in 2018 by Dalton Maag — replaced Gotham across Netflix's product, marketing, and UI) - Fallback Web / Secondary:
Graphik(Netflix's prior display workhorse, still referenced in some older marketing assets) - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Graphik', 'Helvetica Neue', Helvetica, Arial, sans-serif - CJK / Non-Latin: System — PingFang SC, Hiragino Sans, Apple SD Gothic Neo, Noto Sans Arabic / Hebrew / Devanagari / Thai
- Netflix Sans ships with Regular, Medium, Bold, and Black weights; the app uses Regular, Medium, and Bold
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Title Detail Hero | Netflix Sans | 32pt | 700 | 1.1 | -0.4pt | Show / movie title below the hero art (when art logo not available) |
| Section Row Header | Netflix Sans | 17pt | 700 | 1.2 | -0.1pt | "Continue Watching", "Trending Now" row headers |
| Screen Title | Netflix Sans | 20pt | 700 | 1.2 | -0.2pt | "My Netflix", "Search", "Downloads" |
| Episode Title | Netflix Sans | 17pt | 500 | 1.2 | 0pt | "Episode 1: Chapter 1" on episode list |
| Body | Netflix Sans | 14pt | 400 | 1.45 | 0pt | Synopsis, description, about sections |
| Metadata | Netflix Sans | 13pt | 400 | 1.3 | 0pt | "2024 · 2h 15m · TV-MA" on title detail |
| Metadata Secondary | Netflix Sans | 12pt | 400 | 1.3 | 0pt | Genre tags, "Watched 5 days ago" |
| Button (Primary Play) | Netflix Sans | 17pt | 700 | 1.0 | 0pt | Red Play button label |
| Button (Secondary) | Netflix Sans | 15pt | 500 | 1.0 | 0pt | My List, Info, Download |
| Badge | Netflix Sans | 11pt | 700 | 1.0 | 0.4pt | "NEW SEASON", "TOP 10" chips, UPPERCASE |
| Tab Label | Netflix Sans | 10pt | 500 | 1.0 | 0.2pt | Bottom tab labels |
| Rating / Cert | Netflix Sans | 12pt | 700 | 1.0 | 0pt | "TV-MA", "HD", "Dolby Atmos" badges |
| Progress Time | Netflix Sans | 12pt | 400 | 1.0 | 0pt | Time remaining below Continue Watching |
Principles
- Weights at 400 / 500 / 700: Regular for body, Medium for episode titles and secondary buttons, Bold for headlines and Play button
- Display moments use show artwork, not type: Title detail hero prefers the show's branded logo-image; Netflix Sans type kicks in only when the image is unavailable
- Negative tracking on titles: Title detail hero is -0.4pt, other titles -0.1 through -0.2pt
- Dynamic Type respected on reading surfaces: Synopsis, settings, about, profile info; fixed on row headers, buttons, and badges
- Badges and certificates stay all-caps: "NEW", "TOP 10", "HD", "DOLBY ATMOS" — uppercase 11–12pt weight 700 with +0.4pt tracking
- No italic, no underlines: Netflix Sans does not have italic in the app's usage; links use red underline only on web, not iOS
Components and layoutRead the full spec
Buttons
Primary Play Button (The Iconic Red Pill)
- Shape: Full-width pill, 48pt tall, corner radius 4pt (NOT full pill — Netflix uses soft 4pt corners, a signature)
- Background:
#E50914 - Icon: SF Symbol
play.fillin#FFFFFF, 20pt weight 700, leading the text - Text: "Play" or "Resume" in Netflix Sans 17pt weight 700,
#FFFFFF - Padding: 14pt vertical, 24pt horizontal
- Pressed: background
#B7070F, scale 0.98, medium haptic - Width: typically full-width on title detail below the hero, or 160pt on an inline CTA
- This button is the app's visual anchor — it's almost always the single most saturated element on any screen
Secondary Button ("My List", "Info", "Trailer")
- Background:
rgba(255,255,255,0.15)(semi-transparent white for glass-like effect on dark canvas) OR solid#2A2A2Adepending on context - Text:
#FFFFFFNetflix Sans 15pt weight 500 - Leading SF Symbol glyph 16pt (
plusfor My List,info.circlefor Info,play.rectanglefor Trailer) - Corner radius: 4pt (same as Play button)
- Padding: 12pt vertical, 20pt horizontal
- Pressed:
rgba(255,255,255,0.25)/#3A3A3A
Download Button
- Shape: icon-only button (no background)
- Default: SF Symbol
arrow.down.to.line24pt#FFFFFF - Downloading: animated progress arc around the icon, cyan
#54B9C5accent - Downloaded: SF Symbol
checkmark.circle.fill24pt#AAAAAA(intentionally gray — not green — Netflix's color choice) - Tap while downloaded: opens actions menu (Delete, Watch)
My List Plus Button (Add/Remove)
- Default (not added): SF Symbol
plus24pt#FFFFFF - Added: SF Symbol
checkmark24pt#FFFFFF(NOT green — plain white) - Animation: plus rotates 90° + cross-fades to checkmark over 200ms
- Haptic: success on add
Icon Only (Share / Rate / Rate Down / More)
- Glyph: 24pt white SF Symbol
- Hit area: 44pt × 44pt
- Default:
#FFFFFF - Pressed:
#AAAAAA - Labels below icons: Netflix Sans 12pt weight 400
#AAAAAA
Cards & Containers
Poster Tile (THE atomic unit)
- Aspect: 2:3 portrait (key art — the vertical poster format)
- Standard tile width: 130pt on iPhone, 120pt on SE, 160pt on Pro Max, 200pt on iPad
- Corner radius: 4pt (Netflix's signature soft-but-not-rounded corner)
- Background:
#1F1F1F(shows while art loads) - Image: full-bleed within the tile, no border, no shadow
- Gap between tiles in a row: 8pt
- Tap: fade-to-detail transition with shared-element of the poster
- Preload: fetch a trailer thumbnail along with the poster art for instant-play on hover / detail open
Hero Card (Top of Home)
- Full-width, positioned directly below the "NETFLIX" wordmark at the top
- Height: ~70% of screen height on Home (varies by device)
- Image: full-bleed landscape key art OR auto-playing muted trailer video
- Overlay at bottom: a vertical gradient from
rgba(0,0,0,0)(top) to#141414(bottom) across the lower 40% — makes the hero fade into the canvas - Below-gradient content (inside the hero frame):
- Title logo image (if available) at 60% width, centered or left-aligned
- Genre chips row: inline pills "Gripping · Dramas · Thrillers" in 13pt weight 500
#FFFFFFseparated by• - Button row: [My List (secondary)] [▶ Play (red primary)] [Info (secondary)]
- Trailer auto-play: starts muted after 2s delay on scroll-stop, pauses when off-screen
- Audio toggle (small speaker icon 20pt) floats top-right of hero area
Row (Horizontal Scroll of Posters)
- Section header: Netflix Sans 17pt weight 700
#FFFFFF, 16pt leading, 8pt top / 12pt bottom margin - Row content: horizontal scroll of 2:3 poster tiles, 8pt gap
- End of row peek: last tile is partially visible off-screen to signal scroll
- Row height: driven by tile size (e.g. 130pt × 1.5 = 195pt for tiles)
- Most rows show 20–40 titles; the row does not typically loop
"Top 10" Row (Signature Component)
- Structurally like any other row but with a giant numeral rendered to the left of each tile
- Numerals are displayed in a heavy outlined style (2pt stroke) at ~160pt tall, colored
#141414with a slight opacity gradient, positioned behind the poster so the poster "covers" the inner edge of the numeral - Numerals: 1, 2, 3, …, 10 — always the Top 10 in the user's country
- Typography: special condensed display face (sometimes referred to as "Top 10 Bebas" in Netflix's internal materials) — a compressed heavy sans with exaggerated stroke contrast
- This is visually the most distinctive row in the app
Continue Watching Tile
- Same 2:3 poster format but with:
- Red progress bar at the bottom of the tile: 2pt tall, track
rgba(255,255,255,0.3), fill#E50914, width = % watched - Title text below the poster (14pt weight 500 white) — one of the few rows with text labels under tiles
- Optional "Episode X of Y" metadata in 12pt weight 400 secondary
Title Detail Screen
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Poster tiles 120pt wide; hero image scales to 260pt tall |
| iPhone 13/14/15 | 390pt | Standard 130pt posters; 400pt hero height |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated at top of wordmark |
| iPhone 15/16 Pro Max | 430pt | 160pt posters; 460pt hero; Top 10 numerals at 200pt tall |
| iPad portrait | 768pt | 3-tile visible rows; wordmark left, chips right |
| iPad landscape | 1024pt | 4–5 tile rows visible; hero at 720pt tall |
Dynamic Type
- Synopsis, settings, About: full scale
- Title detail hero title: scales to 40pt max
- Row headers, Play button label: fixed size
- Poster titles (Continue Watching only): fixed size (tile-sensitive)
- Tab labels: fixed
- Metadata: scales up to 20% max
Orientation
- Home / Browse / Profile / Search / My Netflix: portrait-locked
- Video player: rotates to landscape for fullscreen
- Title detail: portrait-locked
- Trailer preview: portrait on title detail (embedded), landscape in full player
Touch Targets
- Play button: 48pt tall — exceeds 44pt minimum
- Poster tile: full tile tappable (~130pt × 195pt)
- Overflow / more icons: 44pt hit
- Tab bar icons: 24pt glyph with 44pt hit
- Scrubber thumb: 24pt draggable
Safe Area Handling
- Top: Wordmark respects safe area / Dynamic Island — positioned 12pt below Island on Pro devices
- Bottom: Tab bar respects home indicator
- Player (landscape fullscreen): ignores safe area for video, respects for controls
- Hero image: extends under Dynamic Island (content behind glass); NETFLIX wordmark sits above
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-netflix {--page-bg: #141414;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #f8981d;
--link-hover-color: #db7e07;
--border-color: #3e3e3e;
--card-bg: #141414;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #272727;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #141414;
--footer-text-color: #adadad;
--button-bg: #f8981d;
--button-text-color: #000000;
--button-hover-bg: #db7e07;
--button-border: none;
--button-border-radius: 4px;
--button-secondary-bg: #222222;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #303030;
--button-secondary-border: 1px solid #3e3e3e;
--prompt-bg: #202020;
--prompt-text-color: #ffffff;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 4px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- abema 85.4%
- happn 82.6%
- lemon8 80.1%
- keyence 79.1%
- soundcloud 79.0%
Where this came from
- Source document
ios/design-md/video/netflix/DESIGN.md· 31.3 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.