# Netflix: brand book and build spec

A black page where the content is the brand: a tilted wall of title art, Netflix Red only on the wordmark and the buttons, Netflix Sans at three quiet weights, and one glowing red arc. Plain second-person copy that sells one membership.

From unfairly.ai/brand-guidelines/netflix, checked 2026-10-29. Unofficial study; not affiliated with Netflix.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Netflix lets the catalogue be the decoration. The system is almost nothing (black, one red, one typeface, one curve) so that thousands of titles, each with its own art, can sit in it and still read as Netflix. Based on: From the guide's two-colour, logo-first public chapter, the homepage built entirely from poster art on black, and Netflix Sans being designed to favour art over distraction (It's Nice That, 2018).

## Purpose

Mission: We are here to entertain the world, one fan at a time. (published; https://about.netflix.com/en)

## Fixed and flexible

Never changes:
- Netflix Red #E50914 for the logos and primary actions
- Black grounds and white type
- Netflix Sans (stand-in Geist) at Regular, Medium and Bold
- The N Symbol in its two reds, never on red
- Clear space: one N leg, or the width of the T

The one thing that varies: The art: every page is coloured by the titles it shows, so the only variable is which posters and key art fill the frame

## Positioning

- **Statement**: Unlimited movies, TV shows, and more (observed)
- **Category**: Subscription streaming entertainment: series, films and games (observed)
- **Audience**: Anyone with an internet-connected screen; kids through profiles (our reading)
- **Promise**: Watch anywhere, anytime, and cancel when you like (our reading)
- **Differentiators**: A catalogue of originals shown as a ranked top 10; No contract: cancel online

## Messaging

Taglines:
- Unlimited movies, TV shows, and more (homepage H1)
- Starts at $8.99. Cancel anytime. (homepage price line)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Unlimited | Everything, as much as you want, for one monthly price | Plans from $8.99 to $26.99 a month (pre-tax), US, 2026-10-29 | observed |
| Everywhere | Every screen, online or downloaded | Smart TVs, game consoles, phones, tablets, laptops; downloads on iOS and Android | observed |
| No commitment | Cancel online, no fees | Cancel online; no cancellation fees | observed |

They never claim:
- Prices are regional and dated: quote them only with the market and date
- Title art belongs to each title; don't imply a title is available everywhere

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Unlimited movies, TV shows, and more" | homepage | https://www.netflix.com/ |
| "Starts at $8.99. Cancel anytime." | homepage | https://www.netflix.com/ |
| "Ready to watch? Enter your email to create or restart your membership." | homepage | https://www.netflix.com/ |
| "The Netflix you love for just $8.99." | homepage | https://www.netflix.com/ |
| "Get our most affordable, ad-supported plan." | homepage | https://www.netflix.com/ |
| "Trending Now" | homepage | https://www.netflix.com/ |
| "More Reasons to Join" | homepage | https://www.netflix.com/ |
| "Enjoy on your TV" | homepage | https://www.netflix.com/ |
| "Download your shows to watch offline" | homepage | https://www.netflix.com/ |
| "Watch everywhere" | homepage | https://www.netflix.com/ |
| "Create profiles for kids" | homepage | https://www.netflix.com/ |
| "Frequently Asked Questions" | homepage | https://www.netflix.com/ |
| "Welcome to the Netflix Brand Site" | brand site | https://brand.netflix.com/en/ |
| "We are here to entertain the world, one fan at a time." | corporate site | https://about.netflix.com/en |

## Voice

Tone words: plain, confident, inviting, brief.

Traits:
- Confident, but not loud (published)
- Universal, but not local (published)
- Cinematic, but not decorative (published)
- Plainspoken, but not clever (observed)
- Generous, but not salesy (observed)

- Homepage voice (observed 2026-10-29): short declaratives and questions in second person; the price sits in the second line; FAQ answers are friendly and literal. A landing page follows this voice.
- Guide voice: the public logo page writes in first person plural with confident short claims ("We're a confident brand."). The full voice chapter (brand.netflix.com strategy/voice) is behind partner sign-in.

Rules a copy check enforces:
- Write as "we", to "you"
- Sentence case headlines
- American spelling
- Section headings are two to four plain words in Title Case on netflix.com (Trending Now, More Reasons to Join); everything else is sentence case
- Lead with what you get, then the price and the out: "Starts at $8.99. Cancel anytime." pattern
- Never write the word Netflix in the style of the logo, and never use the logo inside a sentence (published)

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Signing up (homepage, forms, FAQ) 1, Title launches and fan events 4. Our reading: the homepage stays plain everywhere; title marketing runs louder.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Netflix Red | #E50914 | accent | The Wordmark, the N Symbol and primary buttons (Sign In, Get Started). RGB 229 9 20, CMYK 0 96 93 2, PMS 1795 C (published). |
| Symbol Dark Red | #B20710 | accent_secondary | The folded leg of the N Symbol only. RGB 178 7 16, CMYK 18 100 100 10, PMS 7627 C (published). |
| Black | #000000 | paper | The page ground under every band of netflix.com (observed). |
| White | #FFFFFF | ink | All headline and body type (observed). |
| FAQ grey | #2D2D2D | surface | FAQ rows and panels (observed). |
| Poster well | #232323 | surface | Behind poster cards; phone carousel arrows (observed). |
| White 70% | #B3B3B3 | ink_muted | Secondary text, labels, footer (rgba(255,255,255,0.7) on black, observed). |
| Red hover | #C11119 | state | Button hover and focus (observed). |
| Night navy | #192247 | gradient | Benefit card gradient start (observed). |
| Plum | #210E17 | gradient | Benefit card gradient end (observed). |
| Promo violet | #261733 | gradient | Promo banner gradient start (observed). |
| Promo navy | #151A3F | gradient | Promo banner gradient end (observed). |
| Arc magenta | #B82869 | glow | Shoulders of the hero arc (observed). |

Proportion (our reading; Our reading of the homepage at 1440: black ground, white type, and red only on the wordmark, two buttons and the arc. Not published.): Black 85%, White 12%, Netflix Red 3%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Netflix Sans | Proprietary (Netflix, made with Dalton Maag, 2018); not licensed for third parties | Geist | "Helvetica Neue", Helvetica, Arial, sans-serif |
| body | Netflix Sans | Proprietary (Netflix, made with Dalton Maag, 2018); not licensed for third parties | Geist | "Helvetica Neue", Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline | --text-hero-headline-* | display | 56px | 32px | 1.25 | -0.56px | 700 |
| Hero subline | --text-hero-subline-* | body | 20px | 16px | 1.25 | 0px | 560 |
| Form prompt | --text-form-prompt-* | body | 16px | 16px | 1.5 | 0px | 400 |
| Section headline | --text-section-headline-* | display | 24px | 18px | 1.25 | 0px | 560 |
| Promo title | --text-promo-title-* | display | 20px | 20px | 1.25 | 0px | 560 |
| Card title | --text-card-title-* | display | 24px | 20px | 1.25 | 0px | 560 |
| Card body | --text-card-body-* | body | 16px | 16px | 1.25 | 0px | 400 |
| FAQ question | --text-faq-question-* | body | 24px | 18px | 1.25 | 0px | 400 |
| FAQ answer | --text-faq-answer-* | body | 24px | 18px | 1.25 | 0px | 400 |
| Rank numeral | --text-rank-numeral-* | display | 100px | 64px | 1 | 0px | 700 |
| Button large | --text-button-large-* | body | 24px | 18px | 1 | 0px | 560 |
| Button small | --text-button-small-* | body | 14px | 14px | 1 | 0px | 560 |
| Button medium | --text-button-medium-* | body | 16px | 16px | 1 | 0px | 560 |
| Footer phone line | --text-footer-phone-line-* | body | 16px | 16px | 1.25 | 0px | 400 |
| Footer link | --text-footer-link-* | body | 14px | 14px | 1.5 | 0px | 400 |
| Legal note | --text-legal-note-* | body | 13px | 13px | 1.5 | 0px | 400 |

## Layout

Measured on https://www.netflix.com/: computed styles, pseudo-elements and bounding boxes at 390, 768, 1024 and 1440px wide on 2026-10-29 (signed-out US page, Chromium); hover and focus states by hovering in Playwright.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 148px | 24px |
| Section padding | 64px | 48px |
| Container max width | 1144px | full |
| Hero text width | max 588px | full |
| Grid columns | 4 | 1 |
| Gutter | 32px | 8px |
| Card gap | 16px | 16px |
| Navigation height | 88px | 88px |

At every width (observed, 2026-10-29):
| What | 390px | 768px | 1024px | 1440px |
|---|---|---|---|---|
| page margin | 24px | 32px | 80px | 148px |
| wordmark | 89x24 | 89x24 | 148x40 | 148x40 |
| hero headline | 32/40 | 32/40 | 40px | 56/70 |
| hero text column | 326px | 432px | 508px | 588px |
| Get Started | 161x48, 18px | 181x56, 18px | 181x56, 18px | 213x56, 24px |
| section headline | 18px | 18px | 24px | 24px |
| poster card | 112x157 scroll rows | 112x157 scroll rows | 129x180, 5 across | 185x259, 5 across |
| rank numeral | 64px | 64px | 80px | 100px |
| reason cards | 1 column, 342px | 1 column, 704px | 2 columns, 426px | 4 columns, 274px |
| FAQ question | 18px, 72px row | 18px, 72px row | 24px, 84px row | 24px, 84px row |

Breakpoints from Netflix's CSS: 600, 960, 1280, 1600, 1920px.

Homepage bands, top to bottom (observed):
1. Hero: poster-wall collage under a black scrim, floating wordmark nav, centered Bold headline and email form
   - Desktop: 0-788px; text column 588px centered; form row y 511-567
   - Phone: 0-564px; 326px column
   - Nav floats on the image: red wordmark 148x40 left, language select + red Sign In right
   - Headline 56/70 Bold two lines, price line 20px Medium, prompt 16/24, email field 367x56 + Get Started 213x56
2. Glowing arc edge: red-to-magenta 4px arc over a navy glow
   - Desktop: 1872x100 strip at y 788, half-ellipse top
   - Phone: 780x100 strip at y 564
   - linear-gradient(to right, #210D16 16%, #B82869, #E50914, #B82869, #210D16 84%) line, 4px
   - Navy glow radial rgba(64,97,231,0.4) under the arc, fading to black
3. Promo banner: one 77px purple gradient card with a popcorn icon outside it
   - Desktop: card 1044x77 at x 248, y 856; icon 77x77 at x 158
   - Phone: card 342x210, icon on its top edge
   - Title 20px Medium + one 16px line, Learn More 117x40 translucent grey button at right
4. Trending Now: ranked top 10, two rows of five posters with outlined numerals
   - Desktop: cards 185x259, 229px pitch from x 170; rows y 1051 and 1342
   - Phone: two scroll rows of 112x157 cards with arrow tabs
   - Numerals 100px Bold, #414141 fill, 4px white stroke, drawn over each card's lower-left corner, 22px hanging outside it
5. More Reasons to Join: four gradient benefit cards with glossy icons
   - Desktop: 274x308 cards, 16px gaps, y 1718-2026
   - Phone: stacked 342px cards, 8px gaps
   - Card gradient 149deg #192247 to #210E17, radius 16
   - 72x72 icon bottom-right
6. Frequently Asked Questions: six open items in two columns
   - Desktop: two 556px columns, 32px gap, 16px between items
   - Phone: one 342px column, 8px between items
   - #2D2D2D rows 84px with a thin X, answers 24/30 on #2D2D2D below a 1px black line
7. Closing email form
   - Desktop: prompt centered, field 562x56 + Get Started 213x56
   - Phone: left-aligned, field full width, button below
   - Exactly the hero prompt and form, no headline
8. Footer: grey underlined link grid
   - Desktop: phone line, 4 columns x 6 rows of 14px links, language select, reCAPTCHA note
   - Phone: one column of links
   - No logo, no socials, no copyright in the footer

## Page anatomy

How Netflix's own landing pages are built, part by part (observed; https://www.netflix.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: No bar: the red wordmark at left and two small controls at right float over the top of the hero collage, on a 120px black-to-clear scrim
- ground: transparent over the hero image; linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%) 120px tall across the top
- height: 88px zone (logo y 24-64 at 1440); not sticky, scrolls away with the hero
- border: none
- logo: the red NETFLIX wordmark SVG (netflix-wordmark-site.svg, #E50914), 148x40 at x 148, y 24 at 1440 and 1024; 89x24 at x 24, y 28 on phones (x 32 at 768). Never the N Symbol here
- links: 0: no navigation links
- actions: right edge at x 1292: the language select (129x32, x 1071, y 28) then Sign In (77x32, x 1212, y 28), 12px apart
- sticky: no
- phone: wordmark 89x24 left (x 24, y 28); at right the language select as glyph and caret only (62x32, x 212, y 24) and Sign In 77x32 (x 286, y 24). No menu

**Hero**
- summary: A full-bleed tilted wall of poster art under a heavy black scrim, with a centered two-line Bold headline, a Medium price line, a prompt and an inline email form; it ends in a glowing red arc
- desktop: Band 0-788px at 1440, then a 100px arc strip (788-888). The poster-wall image covers 1440x888 (object-fit cover, centered). Text column 588px wide, centered (x 426-1014): headline top y 258, two lines of 70px (to 398), 16px gap; price line y 414 (25px tall), 32px gap; prompt y 471 (24px); 16px gap; form row y 511-567: email field 367x56 then 8px then Get Started 213x56
- phone: Band 0-564 then the arc strip 564-664. Everything centered in a 326px column (x 32): headline y 150, 32/40, two lines; price line y 238 16px Regular; prompt y 274, two lines 16/24; email field 326x48 at y 338 full width; Get Started 161x48 centered at y 402, 16px below the field
- at rest: static: the collage does not move; the email label sits inside the field until focused
- media: poster-wall photo-collage (hero-collage-large.jpg, 2000x1125; hero-collage-small.jpg on phones) of title key art in rows tilted about 8-10 degrees, shot in perspective; over it linear-gradient(7deg, rgba(0,0,0,0.85) 10% ... rgba(0,0,0,0.6) 97%) on desktop and linear-gradient(0deg, rgba(0,0,0,0.9) 0% ...) on phones, so the art reads at about 40% brightness. The scrim is neutral black only: no red or burgundy wash anywhere in the hero (netflix.com has red gradients layered behind the opaque image, so they never show). Red appears in the hero only in the wordmark, Sign In and Get Started
- type: headline Bold 56/70 white centered (32/40 phones, 40px at 1024); price line Medium 20px white (16px Regular phones); prompt Regular 16/24 white
- cta: the inline email capture: field + red Get Started with a chevron. The same form repeats once, after the FAQ
- proof: none: no ratings, logos or numbers beyond the price
- headline breaks: Force the break with <br>: line 1 "Unlimited movies, TV", line 2 "shows, and more", at every width (1440 and 390). Do not use text-wrap: balance on it (balance moves "TV" to line 2). Line 1 is the wider line (about 575px at 56px)

**Hero arc**
- summary: The edge between the hero and the black page: a thin glowing arc, bright red at the centre, fading to magenta then dark at the ends, with a blue glow under it
- ground: #000000
- desktop: a strip 1872px wide (x -216 to 1656, overflowing the page and clipped), 100px tall at y 788; its top edge is a half-ellipse (border-radius 50% 50% 0 0 / 100% 100% 0 0), so the arc peaks at y 788 in the centre and reaches about y 823 at the page edges
- phone: the same strip 780px wide (x -195), 100px tall at y 564; arc peaks at 564 and is only about 13px lower at the screen edges (the same half-ellipse, centred on the screen)
- anatomy:
  - Line: a 4px band drawn with linear-gradient(to right, #210D16 16%, #B82869, #E50914, #B82869, #210D16 84%) following the arc
  - Under the line: #000000 filled with radial-gradient(50% 500% at 50% -420%, rgba(64,97,231,0.4) 80%, rgba(0,0,0,0.1) 100%), a navy glow fading to black within about 60px
  - Above the line: the hero collage and scrim
- components: none

**Promo banner**
- summary: One slim gradient card announcing the cheapest plan, with a popcorn illustration outside it at the left
- ground: #000000
- desktop: card x 248-1292, y 856-933 (1044x77), overlapping the bottom of the arc strip; popcorn icon 77x77 at x 158, y 848; text at x 280: title 20px Medium y 872, line 16px Regular y 897; Learn More 117x40 right-aligned 32px inside (x 1143, y 875)
- phone: card 342x210 at x 24, y 644; popcorn 67x67 at x 38, y 596 straddling the card's top edge; title 20px Medium in two lines at x 40, line 16px, Learn More 117x40 left-aligned below (y 782)
- anatomy:
  - Title is a price offer in one sentence; the second line names the plan
  - Phones: let the title fill the card width (no text-wrap: balance): "The Netflix you love for just / $8.99." with only the price on line 2
  - Card: radius 16px, 91deg purple-to-navy gradient, 1px gradient edge
  - No close button
- components: promo_banner, button_secondary

**Trending Now**
- summary: A ranked top 10: ten vertical posters, each with a huge outlined rank numeral tucked behind its lower-left corner
- ground: #000000
- desktop: heading 24px Medium at x 148, y 997 (64px below the promo card); cards start 24px below the heading at y 1051. Two rows of five: cards 185x259 at x 170, 399, 628, 856, 1085 (229px pitch); row 2 at y 1342 (32px row gap). Numerals 1-10, 100px, left edge at x 148 / 377 / 606 / 834 / 1063, bottom 13px above the card bottom. Section ends y 1601
- phone: heading 18px Medium at x 24, y 910; two horizontal scroll rows (1-5 and 6-10), cards 112x157 at x 34, 166, 298 (132px pitch, 20px gaps), rows at y 950 and 1128 (21px row gap). The row viewport is clipped at x 330 so the third card shows 32px; black gutter 330-342; a 24x120 #1A1A1A arrow tab at x 342-366 centred on the row; numerals 64px over each card's lower-left
- anatomy:
  - Ranks 1 to 10 in reading order; "10" is two digits wide (122px at 1440)
  - Each poster has the red N Symbol in its top-left corner, part of the poster art itself
  - No titles, ratings or captions under the posters
  - At 1440 the reference shows the two-row grid with no arrows
- components: title_card, rank_numeral, carousel_arrow

**More Reasons to Join**
- summary: Four benefit cards in a row, each a dark navy-to-plum gradient with a heading, a muted line and a glossy illustrated icon in the bottom-right corner
- ground: #000000
- desktop: heading 24px Medium at x 148, y 1672 (71px below the posters); cards y 1718-2026, 274x308 at x 148, 438, 728, 1018 (16px gaps). Inside: title 24px Medium at x+16, y+24; body 16px rgba(255,255,255,0.7) 16px under the title; icon 72x72 bottom-right
- phone: heading 18px at x 24, y 1346; four stacked cards 342px wide, 177-202px tall, 8px apart; title 20px Medium, body 16px; icon 63x63 bottom-right
- anatomy:
  - Titles in order: TV, offline downloads, watch everywhere, kids profiles (one benefit each, 2-5 words)
  - Body: one literal sentence listing what you get, 2-4 lines in a 242px measure, no adjectives of feeling. Their lines: "Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more." / "Save your favorites easily and always have something to watch." / "Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV." / the kids line sends kids on adventures with favourite characters, free with membership (4 lines)
  - Icons: a TV screen, a pink download disc, a red telescope with sparkles, two stacked smiley profile tiles (supplied SVGs, use as-is)
  - Titles wrap: "Download your / shows to watch / offline" sets in 3 lines, "Create profiles for / kids" in 2
- components: reason_card

**Frequently Asked Questions**
- summary: Six FAQ items on #2D2D2D, every one shown open, in two independent columns at desktop and one column on phones
- ground: #000000
- desktop: heading 24px Medium at x 148, y 2090; items start y 2136. Two columns 556px wide (x 148 and x 736, 32px gap), filled top to bottom: left column What is Netflix?, How much does Netflix cost?, Where can I watch?; right column How do I cancel?, What can I watch on Netflix?, Is Netflix good for kids?. 16px between items. Question rows 84px; answers 24/30. Left column runs to about y 3376 (1240px of items), the right column ends about 300px higher (about y 3077)
- phone: heading 18px at x 24; one column 342px, the same six in order What is, cost, where, cancel, what can I watch, kids; question rows 72px 18px; answers 18px; 8px between items; all open
- anatomy:
  - Answer lengths at 1440: What is Netflix? 2 paragraphs (4 + 5 lines); cost 4 lines; where 2 paragraphs (7 + 5 lines); cancel 4 lines; what can I watch 4 lines; kids 2 paragraphs (4 + 4 lines)
  - Close icon: two crossing 1px white lines, about 22px square, right-aligned 24px in from the row edge
  - Answers are plain sentences: no links, bullets or bold
  - What each answer says (paraphrase): What is: a streaming service with award-winning shows, films, anime and documentaries on thousands of devices; watch as much as you want for one monthly price, new titles every week. Cost: one fixed monthly fee on any device, plans from $8.99 to $26.99 a month pre-tax. Where: sign in on the web or any device with the app (smart TVs, phones, tablets, players, consoles); download on iOS or Android to watch offline. Cancel: cancel online in two clicks, no cancellation fees. What can I watch: films, documentaries, shows, anime and Netflix originals. Kids: a kids experience included in membership; PIN-protected kids profiles with maturity ratings and title blocks
- components: faq_item

**Closing email form**
- summary: The hero form again, alone and centered, with no headline
- ground: #000000
- desktop: about 72px below the taller FAQ column: prompt 16/24 centered (783px measure, x 329); 16px below, a row: email field 562x56 + 8px + Get Started 213x56 (x 329-1112)
- phone: prompt 16/24 left-aligned in two lines at x 24; field 342x48 full width; Get Started 161x48 left-aligned 16px below
- anatomy:
  - Same prompt line as the hero, word for word
  - Nothing else in the band: no headline, no image
- components: email_field, button_primary

**Footer**
- summary: A plain black footer of small grey underlined links in four columns, a phone line, a language select and a reCAPTCHA note. No logo, no social icons, no copyright line
- ground: #000000
- anatomy:
  - Starts about 87px below the closing form at 1440. Content x 148-1292; the link block is inset 4px (links at x 152)
  - Line 1: "Questions? Call 1-844-569-7700", 16px Regular rgba(255,255,255,0.7); the number is an underlined link
  - Links, 63px below: a 4-column grid, columns at x 152, 439, 726, 1013 (287px pitch), rows 33px apart, 14/21 Regular underlined rgba(255,255,255,0.7). Filled row by row in this order: FAQ, Help Center, Account, Netflix House / Media Center, Investor Relations, Jobs, Netflix Shop / Redeem Gift Cards, Buy Gift Cards, Ways to Watch, Terms of Use / Privacy, Cookie Preferences, Corporate Information, Contact Us / Speed Test, Legal Notices, Only on Netflix, Do Not Sell or Share My Personal Information (wraps to 2 lines) / Ad Choices
  - Language select 129x32 (with "English"), 78px below Ad Choices, at x 151
  - Then "This page is protected by Google reCAPTCHA to ensure you're not a bot." 13/19.5 rgba(255,255,255,0.5), about 40px below the select; then about 96px of black to the page end
- phone: x 24-28; phone line, then the 21 links in one column in the same order (33px pitch), the language select, the reCAPTCHA note in two lines

**On dark grounds**
- secondary button: button_secondary: rgba(128,128,128,0.4) fill, white 16px Medium, radius 4
- link: underlined, rgba(255,255,255,0.7) (#B3B3B3 rendered); no hover colour change measured
- muted text: #B3B3B3 (white at 70%) for card body copy, field labels, footer; #808080 (white at 50%) for the legal note
- hairline: 1px #000000 between FAQ question and answer; field borders 1px rgba(128,128,128,0.7)
- logo on dark: the red #E50914 wordmark on black or on the scrimmed collage. Never white on the homepage (the guide reserves white for special use with approval)

## Components

- **button primary** (observed): fill #E50914, text #FFFFFF, radius 4, height 56, padding x 24, font size 24, weight 560, face body, icon chevron right 24px after the label, 12px gap (assets: icon-chevron-right.svg, currentColor). Box size wins over padding: Get Started is fixed at 213x56 at 1440 (24px Medium, padding 12px 24px); 161x48 and 18px on phones (padding 8px 16px). It sits 8px right of the email field on desktop and 16px below it on phones. Leaving hover uses cubic-bezier(0.4, 0, 0.68, 0.06)
  - hover (observed): fill #C11119, transition background-color 0.25s cubic-bezier(0.32, 0.94, 0.6, 1)
  - focus (observed): fill #C11119, outline 2px solid #FFFFFF
- **button small** (observed): fill #E50914, text #FFFFFF, radius 4, height 32, padding x 16, font size 14, weight 560, face body. Sign In in the nav: 77x32, padding 4px 16px
  - hover (observed): fill #C11119
- **button secondary** (observed): fill rgba(128,128,128,0.4), text #FFFFFF, radius 4, size 117x40, padding x 16, font size 16, weight 560, face body. Learn More in the promo banner: 117x40, translucent grey on the purple banner
  - hover (observed): fill rgba(128,128,128,0.3)
- **email field** (observed): fill rgba(22,22,22,0.7), border 1px solid rgba(128,128,128,0.7), radius 4, height 56 desktop / 48 phone, label "Email address" 16/24 rgba(255,255,255,0.7), inset 16px, vertically centred at rest (floats up when typing: animation only), width 367px in the hero, 562px in the closing form at 1440; full width (326px hero, 342px closing) on phones
- **language select** (observed): fill rgba(22,22,22,0.7), border 1px solid rgba(128,128,128,0.7), radius 4, height 32, content translate glyph (A with a character) 16px at left, "English" 16px Regular white, a small down caret at right; padding 6px 36px 6px 34px; 129x32, phone in the phone nav it collapses to the glyph and caret only, 62x32; the footer copy keeps the word "English"
- **title card** (observed): radius 8, fill #232323, size 185x259 at 1440, 129x180 at 1024, 112x157 at 768 and 390, content one vertical poster image covering the card (background-size cover), title artwork already in the image; no caption text under it
  - hover (observed): transform scale(1.05), transition transform 0.2s ease-in-out
- **rank numeral** (observed): font display 700, 100px/100px at 1440 (80px at 1024, 64px at 768 and 390), fill #414141, stroke 4px #FFFFFF (-webkit-text-stroke), position IN FRONT of its card (higher z-index), overlapping the poster's lower-left corner: at 1440 the numeral box is x 148-209 (one digit, 61px) for a card at x 170-355, so 22px hangs left of the card and 39px sits over the art; box y 1197-1297 for a card y 1051-1310 (bottom 13px above the card bottom). The whole numeral is visible: dark #414141 fill with a full white outline over the poster art. Phones: 64px numerals, left edge 10px left of the card, same overlap rule
- **reason card** (observed): radius 16, fill linear-gradient(149deg, #192247 0%, #210E17 96.86%), size 274x308 at 1440 (4 across, 16px gaps); 342 wide stacked on phones, 177-202px tall, padding 24px 16px, title then body 16px below, 72x72 illustration pinned bottom-right (12px from the right, 16px from the bottom). Phones: body only 8px below the title; 63x63 illustration 4px from the card's right edge (x 299-362 in a 24-366 card)
- **faq item** (observed): question row #2D2D2D, 84px tall at 1440 (72px on phones), padding 24px, question 24px Regular white (18px phones), a thin 1px-stroke X close icon about 24px at the right (a + when closed), divider 1px #000000 line between the question row and the answer panel, answer #2D2D2D panel, padding 24px, 24/30 white (18px phones); paragraphs separated by one blank line (30px), gap 16px between items at 1440, 8px on phones
- **promo banner** (observed): radius 16, fill linear-gradient(91deg, #261733, #151A3F), edge 1px gradient edge linear-gradient(91deg, #482566 0%, #161D52 99.51%) drawn as a ::before behind the card, size 1044x77 at 1440 (x 248-1292), padding 16px 32px; phone 342x210 with the button below the text, icon 77x77 popcorn illustration outside the card at the left (x 158, y 848 at 1440); on phones 67x67 sitting on the card's top edge at x 38
- **footer link** (observed): font 14/21 Regular, color rgba(255,255,255,0.7), decoration underline at rest, radius 2
- **carousel arrow** (observed): fill #232323, radius 8, size 24x120 tab, icon chevron right 24px white, rendered fill #1A1A1A, where phones only (and 768): each Trending row is a scroll viewport x 24-330 (posters clipped at x 330, the third poster shows only 32px); then 12px of black; the tab at x 342-366, vertically centred on the row (y 968-1088 for cards y 950-1107); then 24px black margin. The tab never overlaps a poster

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-hover-in | cubic-bezier(0.32, 0.94, 0.6, 1) | 250ms | background-color change into hover/focus on every button | observed |
| button-hover-out | cubic-bezier(0.4, 0, 0.68, 0.06) | 250ms | background-color change back to rest | observed |
| poster-lift | ease-in-out | 200ms | title card scales to 1.05 on hover and focus | observed |

## Signature moves

### The glowing arc

Where: once on netflix.com, at the foot of the hero, where the poster wall meets the black page (observed 2026-10-29).
Do: a 4px line along a shallow half-ellipse wider than the page (1872px at 1440, peaking at the hero bottom and dropping about 35px at the edges), coloured left to right #210D16, #B82869, #E50914, #B82869, #210D16, with a navy glow (rgba(64,97,231,0.4)) under it fading to black. Once per page, under the hero.
Don't: use a straight rule, a wave or a full red bar; the red is brightest only at the centre and the line stays thin.
Example: "A red arc of light closes the hero".

### Outlined rank numerals

Where: Trending Now on netflix.com.
Do: a Bold numeral at about 0.4x the card height (100px on a 259px card), filled #414141 with a 4px white stroke, drawn ON TOP of the lower-left corner of each poster (z-index above the card), hanging 22px out past the card's left edge, fully visible.
Don't: hide the numerals behind the posters, colour them red, or use them without a ranked list.
Example: "1 2 3 behind the posters".

### The poster wall under a scrim

Where: the netflix.com hero.
Do: dozens of title key-art tiles in tilted perspective rows filling the band edge to edge, darkened to about 40% by a black gradient so white type reads; the art is the catalogue, never a single hero photo.
Don't: use a lifestyle photo or a flat red background behind the hero headline.
Example: "Unlimited movies, TV shows, and more".

### Red means the brand or the next step

Where: every netflix.com band.
Do: Netflix Red #E50914 appears only in the wordmark, the N Symbol inside poster art, the arc and the Sign In and Get Started buttons. Everything else is black, white, grey and the deep navy-plum gradients.
Don't: set headlines or body copy in red, or put the red logo on a red ground (the guide forbids the N on red).
Example: "Get Started".

## Messaging: rules

The signed-out homepage sells one thing: membership. Headline = breadth ("Unlimited movies, TV shows, and more"), second line = price and the exit ("Starts at $8.99. Cancel anytime."), then a single action (enter your email). The FAQ repeats the three pillars: unlimited, everywhere, cancel anytime.

Why it works: Every objection a visitor has (what is it, how much, where, can I leave) is answered in the order they ask it, and the only action is the same form twice.

- Headline names the breadth, not a title
- Price and cancel-anytime always travel together
- One action per page: the email form, shown twice

Sources: https://www.netflix.com/

## Voice: rules

Second person, short, literal. Questions as prompts ("Ready to watch?"), Title Case two-to-four word section headings, friendly plain FAQ answers. The guide's own prose is first person plural and assured ("We're a confident brand.").

Why it works: A global service writes for translation: short literal sentences localise cleanly into every market.

- Write to "you", speak as "we"
- Sentence case for lines, Title Case for section headings
- No jargon, no exclamation marks in UI copy (one appears inside an FAQ answer)

Sources: https://www.netflix.com/, https://brand.netflix.com/en/assets/logos/

## Logo: rules

Two marks. The N Symbol (a folded red ribbon N in Netflix Red with a Symbol Dark Red fold) leads in high-awareness markets; the NETFLIX Wordmark carries recognition in low-awareness markets or when production limits colour. The symbol always appears in its signature colour. netflix.com uses the red Wordmark in the nav and the N Symbol only inside poster art.

- Lead with the N Symbol where Netflix is well known; use the Wordmark where it is not
- The N Symbol is always Netflix Red with Symbol Dark Red; the Wordmark is Netflix Red
- Clear space: one leg of the N around the Symbol; the width of the T around the Wordmark
- Contrast behind a logo: 2.25:1 or higher (published scale: 0% black 4.8:1 down to 50-60% black 1.2:1)
- White or black Wordmark only for production limits or video bugs, and only with Brand Team approval
- Co-branding: Netflix first, equal size and prominence, separated by a red rule by default; Symbol with a partner symbol, Wordmark with a partner logo
- Don't change the gradient, stretch, add effects, rotate or recolour either mark
- Don't place a logo over busy backgrounds or inside a shape or container
- Don't use the N Symbol on a red background
- Don't flatten the N Symbol to one colour or make ribbons from it
- Don't flip the N Symbol (the curve stays at the bottom)
- Don't use the symbol to replace a letter, or substitute the Wordmark's N for it
- Don't lock up words with the N Symbol (reserved for product category labels)
- Don't use the Wordmark and the N Symbol in the same layout
- Don't write words in the style of the logo or use the logo in a sentence
- Don't use an old version
- Don't place either mark on the ground or on food

Do and don't:
- Do: "NETFLIX". The red Wordmark on black, with clear space the width of the T.
- Don't: "N". The guide forbids the N Symbol on a red background.

Real examples, to look at on Netflix's own pages (not for reuse):
- The N Symbol in Netflix Red and Symbol Dark Red on black: https://brand.netflix.com/en/assets/logos/
- The Wordmark in Netflix Red: https://brand.netflix.com/en/assets/logos/
- Clear space around the N Symbol: one leg of the N: https://brand.netflix.com/en/assets/logos/
- Clear space around the Wordmark: the width of the T: https://brand.netflix.com/en/assets/logos/
- Readability: aim for 2.25:1 contrast or more behind a logo: https://brand.netflix.com/en/assets/logos/
- Special use: the white Wordmark, only with Brand Team approval: https://brand.netflix.com/en/assets/logos/
- Special use: the black Wordmark, only with Brand Team approval: https://brand.netflix.com/en/assets/logos/
- Co-branding: N Symbol, red rule, partner symbol: https://brand.netflix.com/en/assets/logos/
- Co-branding: Wordmark, red rule, partner logo: https://brand.netflix.com/en/assets/logos/
- Avoid: changing the N Symbol's gradient: https://brand.netflix.com/en/assets/logos/
- Avoid: the N Symbol on a red background: https://brand.netflix.com/en/assets/logos/
- Avoid: the Wordmark and the N Symbol in one layout: https://brand.netflix.com/en/assets/logos/

Sources: https://brand.netflix.com/en/assets/logos/, https://web.archive.org/web/20220223165412/https://brand.netflix.com/en/api/brand_assets/?format=json

## Color: rules

The guide publishes two colours, both for the logos: Netflix Red #E50914 (PMS 1795 C) and Symbol Dark Red #B20710 (PMS 7627 C). netflix.com builds everything else from black: a #000000 page, #2D2D2D and #232323 greys, white type with 70% and 50% white for secondary text, and two deep navy-to-plum gradients for cards and the promo banner. Red is the logo and the buttons.

Why it works: With a black page, red reads as the brand and the next step at once; the cool navy gradients keep cards from competing with poster art.

- Netflix Red is the brand's signature colour: logo and primary actions
- Symbol Dark Red only inside the N Symbol
- Grounds are black; secondary text is white at 70%, legal at 50%
- Cards and promos use the deep gradients (149deg #192247 to #210E17; 91deg #261733 to #151A3F)
- Never put the N Symbol on red

Not published: the full colour palette and textures chapters (brand.netflix.com/en/assets/color and /textures are behind partner sign-in).

Do and don't:
- Do: "Get Started". Red on black is the action: the Netflix Red button with white Medium text.
- Don't: "Unlimited movies". A full red band: red is the logo and the button, not a ground.

Real examples, to look at on Netflix's own pages (not for reuse):
- Logos in context: logos on solid colour grounds: https://brand.netflix.com/en/assets/logos/

Sources: https://brand.netflix.com/en/assets/logos/, https://www.netflix.com/

## Typography: rules

Netflix Sans, a proprietary geometric grotesque made with Dalton Maag (2018, replacing Gotham), in thin to black. netflix.com uses three weights: Bold 700 for the hero headline, Medium 500 for section heads, card titles, buttons and the price line, Regular 400 for everything else. No uppercase styling, normal tracking, line height 1.25.

Why it works: One family at three weights keeps a text-light page calm; the art carries the drama.

- Font smoothing: leave it at the browser default (-webkit-font-smoothing: auto). netflix.com does not set antialiased; antialiased renders every weight visibly thinner than the reference
- Stand-in calibration: Geist 400 = Netflix Sans Regular; Geist 560 = Netflix Sans Medium (Geist 500 is too light: 89-91% of the ink); Geist 700 with -0.01em tracking = Netflix Sans Bold. Load Geist as a variable font (wght 100..900)
- Bold only for the hero headline (56px desktop, 32px phones)
- Medium for section heads (24px, 18px phones) and buttons
- Regular for body, FAQ and footer
- Sentence case, no all-caps, normal tracking
- Stand-in: Geist, with Medium set at 560 (see calibration)
- Don't set the wordmark lettering as a font or imitate it in headlines
- Don't use all caps for headings
- Don't use more than three weights on a page

Do and don't:
- Do: "Unlimited movies, TV shows, and more". Bold, sentence case, white, two centered lines.
- Don't: "UNLIMITED MOVIES". All caps in red reads as a fake logo; the guide says never write words in the logo's style.

Sources: https://www.netflix.com/, https://itsnicethat.com/news/netflix-sans-typeface-dalton-maag-graphic-design-210318

## Iconography: rules

Two kinds on netflix.com: small 24px solid UI glyphs (chevron, caret, translate, a thin 1px X for FAQ), and glossy illustrated 72px spot icons (TV, download disc, telescope, profile tiles, popcorn) with pink-magenta-red gradients.

- UI glyphs are white, 24px, single colour
- Spot illustrations sit bottom-right in cards, never as bullets
- One spot illustration per card
- Don't outline the spot icons or flatten them to one colour
- Don't use emoji in their place

Real examples, to look at on Netflix's own pages (not for reuse):
- Spot illustration: download disc, from the More Reasons cards: https://www.netflix.com/
- Spot illustration: popcorn bucket beside the promo banner: https://www.netflix.com/

Sources: https://www.netflix.com/

## Photography: rules

netflix.com has no brand photography: its imagery is title key art. The hero is a tilted wall of posters under a dark scrim and Trending Now shows ten vertical posters. This art is studio-owned and credited here as Netflix's homepage imagery, not as photography rules. The guide's application examples show the N Symbol set against title art on posters and billboards.

- On the homepage, show the catalogue (many titles), darkened behind type
- Poster cards keep the title art untouched with an 8px radius

Not published: photography rules (brand.netflix.com/en/assets/photography is behind partner sign-in).

Real examples, to look at on Netflix's own pages (not for reuse):
- Netflix's homepage imagery: the poster-wall hero (title art is studio-owned): https://www.netflix.com/
- Netflix's homepage imagery: a Trending Now poster (studio-owned): https://www.netflix.com/
- Guide application example: billboards with title art and the N Symbol: https://brand.netflix.com/en/assets/logos/

Sources: https://www.netflix.com/, https://brand.netflix.com/en/assets/logos/

## Motion: rules

The guide names a Motion + Sonic Toolkit and shows partnership end cards (stacked single and sequential lockups) as videos; the toolkit itself is gated. Since February 2019 originals open with an animated N: the ribbon N then a zoom into coloured bands, with the TUDUM sound unchanged. On netflix.com motion is small: buttons change colour in 0.25s and posters scale to 1.05 in 0.2s.

- UI motion is quick and small: colour fades and a 5% lift
- The animated N and TUDUM sound belong to title openings and end cards, not UI

Not published: easing curves and durations for brand animation (the Motion + Sonic Toolkit is gated).

Sources: https://brand.netflix.com/en/assets/logos/, https://mobilesyrup.com/2019/02/01/new-netflix-logo-animation/, https://about.netflix.com/en/news/netflix-announces-tudum-a-global-fan-event-live-from-brazil, https://www.netflix.com/

## Interface and layout: rules

One centered container (1144px at 1440, 148px margins; 24px on phones) on a black page. A full-bleed hero, then content bands 64-72px apart, each led by a 24px Medium heading at the left. Grids are even: five posters, four cards, two FAQ columns.

- Black page, one 1144px container
- Each band: left-aligned 24px heading, 24px gap, content
- Rounded corners scale with size: 4px controls, 8px posters, 16px cards and banner, 0 on FAQ rows

Do and don't:
- Do: "Trending Now". A plain 24px Medium heading at the left, posters below.
- Don't: "Our amazing catalogue!". Hype and red headings: the homepage stays literal and lets the art speak.

Sources: https://www.netflix.com/

## Rules: rules

- Red is the logo and the action
- Black grounds; white type
- One family (Netflix Sans), three weights
- Show the catalogue, not a stock photo
- Logos keep their clear space and contrast
- Don't use the N Symbol and the Wordmark together
- Don't put the N Symbol on red
- Don't imitate the logo lettering in copy
- Don't use the white Wordmark without approval
- Don't invent new brand colours

Sources: https://brand.netflix.com/en/assets/logos/, https://www.netflix.com/

## Campaigns

### Netflix Sans: a typeface of its own (2018)

Netflix replaced its licensed Gotham with Netflix Sans, drawn in-house with Dalton Maag, in thin to black weights. Reported in March 2018 as a cost and ownability move.

How the system shows: Launch images set title treatments (House of Cards, Okja, Ozark, Stranger Things) in Netflix Sans; the lowercase t carries an arched cut taken from the wordmark's curve.
Why it works: One owned face across thousands of titles and every market makes the catalogue read as one brand without adding colour or ornament.
Channels: identity system, key art, product UI. Source: https://itsnicethat.com/news/netflix-sans-typeface-dalton-maag-graphic-design-210318

### The new animated N before every original (2019)

From February 1, 2019, Netflix originals open with a new logo animation: the red ribbon N, then a zoom into a spectrum of coloured bands, with the familiar sound kept. Netflix said it worked on it for almost two years with an outside agency.

How the system shows: The N Symbol is the hero; the coloured bands echo the streak textures seen on the guide's business cards and tote.
Why it works: A few seconds of motion before every title turns the N into a cinema ident, repeated billions of times.
Channels: title openings, social. Source: https://mobilesyrup.com/2019/02/01/new-netflix-logo-animation/

### TUDUM: the global fan event (2023)

A two-hour fan event streamed live from Ibirapuera Park, São Paulo, on June 17, 2023, with a three-day convention around it; named after the sound before every Netflix title.

How the system shows: The sonic logo becomes the event's name, so the brand's most recognisable sound is also its fan destination.
Why it works: It turns a four-note ident into a place fans go, without adding a new mark.
Channels: live event, YouTube livestream, fan site. Source: https://about.netflix.com/en/news/netflix-announces-tudum-a-global-fan-event-live-from-brazil

## Applications

| Format | What | Source |
|---|---|---|
| business cards | Black card with the red wordmark; reverse cards in colour-streak textures with the N Symbol. | https://brand.netflix.com/en/assets/logos/ |
| mobile wallet card | N Symbol centered over a red-and-blue streak texture card on a phone. | https://brand.netflix.com/en/assets/logos/ |
| wild posting | Extraction 2 posters in a row with a large N Symbol between them. | https://brand.netflix.com/en/assets/logos/ |
| billboards | Queen Charlotte billboards on Sunset Blvd with the N Symbol at the left of each board. | https://brand.netflix.com/en/assets/logos/ |
| tote bag | Black-to-red streak tote with a small N Symbol low on the side. | https://brand.netflix.com/en/assets/logos/ |
| co-branding | Netflix mark first, a red vertical rule, then the partner mark at equal size. | https://brand.netflix.com/en/assets/logos/ |
| website | netflix.com signed-out page: poster-wall hero, ranked top 10, benefit cards, open FAQ, email capture twice. | https://www.netflix.com/ |

## By format

How our engine applies Netflix's system to each format. This is our recipe built from their public rules and homepage, not something Netflix publishes. Level = how loud the signature moves are. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Black page, red wordmark floating over a scrimmed poster-wall hero, centered Bold two-line headline, price line, inline email + red Get Started, the glowing arc, then left-headed bands (ranked posters, gradient benefit cards, open FAQ), the form again, grey underlined footer links | which titles fill the wall and the top 10; the promo banner offer |
| Deck | 2 | Black slides, white Netflix Sans (Geist), red only on the logo and the ask | title art as full-bleed backgrounds under a scrim |
| Proposal page | 1 | Homepage voice: plain, priced, one next step as a red button | a poster row as proof |
| Social post | 4 | Title art first, N Symbol small in a corner with clear space | streak textures behind the symbol |
| Email | 1 | Black, white type, one red button | one poster row |
| Out of home | 4 | Key art plus the N Symbol, never the Wordmark and Symbol together | which title |

## Checks before anything ships

- **Logo hidden**: Cover the wordmark. It should still read as Netflix: black page, a wall of posters, one red button, a thin red arc.
- **Red count**: Count the red things. More than the logo, the buttons and the arc means red has turned into decoration; take it back out.
- **Logo rules**: Symbol and Wordmark never together, N never on red, clear space at least one N leg or one T width.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Netflix's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Colour palette beyond the two logo reds: not published publicly (brand.netflix.com color and textures pages need partner sign-in)
- Typography rules and Netflix Sans files: not published publicly; Netflix Sans is proprietary, Geist stands in (calibrated)
- Photography, iconography and illustration rules: not published publicly (gated)
- Voice and brand strategy pages (strategy/voice, promise, playbook): gated
- Motion + Sonic Toolkit easing and durations: gated; only the two end-card videos are public
- Logo minimum sizes: not published on the public page
- netflix.com A/B tests its layout: Trending Now and the FAQ change shape between loads (see page.variants_note)
- The close-icon glyph, translate glyph and caret were not supplied as files; draw them as thin white 24px glyphs

Logos and reference images belong to Netflix. Look at them on Netflix's own pages; don't reuse them.