BRAND Netflix 2026 · Page: home

HEADER brand: Netflix; design_date: 2026-09; page_type: home; variants: none (logged-out landing page, "NMHP") example_urls: https://www.netflix.com/ (US); evidence: measured on https://www.netflix.com/ (US, English, via US-egress proxy) 2026-09-30 unless marked purpose: make a visitor type an email and press Get Started (start sign-up), with the ad plan price as the hook skeleton: max width 1920px, side margins 148px at 1440 (content 1129px); 9 sections; total height desktop ~3170px, mobile ~3890px; sidebar: none overrides: none (uses the home values of the Overview: 4px radii, 148px margins, black #000000 page) SECTIONS S1 header / transparent-over-hero - brand and sign-in entry background: transparent over the hero; a 120px black scrim linear-gradient(rgba(0,0,0,0.8) -> 0) behind it; height: 88px (80px <1280); padding: none, aligned to the page margins layout: space-between: wordmark left, controls right (12px gap) elements: red NETFLIX wordmark 148x40 (89x24 <960); language select 129x32 (translate icon 16px at left 12px, "English" 16px, 10px caret; bg rgba(22,22,22,0.7), 1px rgba(128,128,128,0.7), radius 4px); red Sign In button 77x32, 14px 500, radius 4px, not underlined copy: "English", "Sign In" motion: button and select hovers only responsive: <600 select collapses to the translate icon + caret (62x32) S2 hero / full-bleed-image with centered form - state the price and collect the email background: collage image of tilted posters, object-fit cover, full width; scrim --grad-hero-scrim (7deg, 85% black bottom-left); behind the image two maroon radial side glows #461518 and a vertical band linear-gradient(0deg, transparent, #6f181d 50%, transparent) (visible only at the sides on very wide screens); height: 888px at 1440 (760 at 1024, 664 mobile, 989 at 1920); padding: 100px top, content bottom-aligned 32px above the arc layout: one centered text column: max 588px at 1440 (664px at 1920, 508px at 1024, full width minus 32px on mobile), text centered elements: H1 --type-display (56px/70px 700 at 1440), margin-bottom 16px; subline p 20px 500 (16px 400 <1280), margin-bottom 32px; form: prompt h3 16px/24px 400; 16px below a row of email field (367x56, floating label "Email address") + 8px gap + Get Started button (213x56, 24px 500, chevron 24px 12px after the label) copy: H1 A/B variants "Endless entertainment starts at $8.99/mo" | "In the mood for great entertainment?" | "All the hits you keep hearing about"; sublines "New arrivals weekly. Cancel anytime." | "Starts at $8.99. Cancel anytime."; prompt "Ready to watch? Enter your email to create or restart your membership." media: [POSTER COLLAGE 16:9+] one wide image, poster tiles rotated about -15deg, 3-4 staggered rows, bright saturated key art; use a generated collage of placeholder posters motion: none on load (image simply appears); CTA hover per Overview responsive: <960 the form stacks: field full width, button below; on mobile the button is 48px, 18px, red, centered (A/B variants apply only to the >=960 hero CTA (inf)); H1 32px/40px on 3 lines S3 hero-arc / divider - soft transition from the hero into the page background: see Recipe hero-arc; height: 100px, overlapping the bottom of the hero elements: elliptical top edge 130% of the viewport wide with a 4px gradient line (dark maroon -> pink -> red -> pink -> dark maroon) and a blue glow under the line fading to black motion: static responsive: same shape, scaled with the viewport (on mobile the arc is flatter and still 100px tall) S4 promo-banner / ad plan - push the $8.99 ad plan background: page black; card --grad-promo-banner radius 16px; height: 77px card (content); padding: card 16px 32px; block pulled up 32px (margin-top -32px on the main container) and 64px below layout: popcorn illustration 96x100 scaled 0.8 at left overlapping the card edge, card starts 100px from the left edge of the content; text left, button right, space-between elements: h3 20px 500 "The Netflix you love for just $8.99."; p 16px 400 "Get our most affordable, ad-supported plan."; grey Learn More button 40px (16px 500, padding 6px 16px, radius 4px) motion: whole banner scales 1.03 on hover, 500ms cubic-bezier(0.33,0,0,1) responsive: <600 the popcorn (65x60 visible) sits above the card at left 16px and overlaps the card top by ~16px (est); the card spans the full content width (margin-left 0), padding 16px, text stacked and left aligned (title 20px 500 on 2 lines, body 16px on 2 lines), Learn More 40px left aligned 16px below the text S5 poster-shelf / Top 10 "Trending Now" - show what is popular now in the US background: black; padding: title then 16px gap then row; 64px below layout: h2 24px 500 left; row of 10 cards, each li 224px wide (padding 8px 22px), 5 visible at 1440, overflow scrolls horizontally with scroll-snap, row clipped with radius 8px elements: 10 posters 180x252 radius 8px with rank numerals 1-10 (100px 700, black fill, 4px white stroke, shadow 0 0 24px rgba(0,0,0,0.5)) overlapping the lower-left corner; right paddle 24x120 (Recipe top10-shelf) copy: "Trending Now"; titles are the current US Top 10 (e.g. "Why Did I Get Married Again?", "A Different World", "Beauty in Black", "Monster: The Lizzie Borden Story", "Outer Banks") media: [POSTER 2:3] x10 motion: Recipe top10-shelf; click opens Recipe title-modal responsive: 1920: posters 214x300, rank 120px; 1024: 140x196, rank 80px; <960: 112x157, rank 64px, li padding 5px 10px, 2.5 posters visible on mobile, touch swipe S6 feature-grid / 4 cols "More Reasons to Join" - list membership benefits background: black; 64px below layout: h2 24px 500; 16px below a row of 4 equal cards (270x320 at 1440), 16px gaps elements: 4 feature cards (--grad-feature-card, radius 16px, padding 24px 16px 128px): h3 24px 500, p 16px 70% white 16px below, glossy 3D icon 72x76 at the bottom right (16px from the edges) copy: "Enjoy on your TV" / "Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more."; "Download your shows to watch offline"; "Watch everywhere"; "Create profiles for kids" media: 4 glossy 3D icons (TV, download arrow, telescope, kids masks) motion: none responsive: 960-1279 2x2; <960 one column, cards full width ~200px tall, h3 20px S7 faq / accordion - answer objections (price, cancel, devices) background: black; 64px below layout: h2 24px 500 "Frequently Asked Questions"; 16px below 6 items full content width, 8px apart elements: question bars 84px (padding 24px, 24px 400 text, 36px plus icon at right, bg #2d2d2d); answer panel #2d2d2d 1px below the bar, padding 24px, 24px text, paragraphs separated by one empty line copy: "What is Netflix?", "How much does Netflix cost?", "Where can I watch?", "How do I cancel?", "What can I watch on Netflix?", "Is Netflix good for kids?"; answer sample "Watch Netflix on your smartphone, tablet, Smart TV, laptop, or streaming device, all for one fixed monthly fee. Plans range from $8.99 to $26.99/month (pre-tax)." motion: Overview accordion (250ms, icon -45deg) responsive: <960 text 18px, bars ~72px, icon 24px (est) S8 cta-band / email form - second chance to sign up background: black; 64px below layout: centered column max 783px elements: prompt 16px/24px centered; email field (562x56) + Get Started (213x56) in one row, same variant as the hero CTA motion: none responsive: <600 field full width, button left aligned below (not centered, unlike the hero) S9 footer / sitemap-columns - as Overview (home footer) PAGE COMPONENTS rank numeral: see S5; each rank is a span with -webkit-text-stroke 4px #ffffff, color #414141 plus a ::before copy of the digit with fill #000000 and no stroke, so the visible digit is black with a white outline; 2-digit "10" is 122px wide at 100px promo banner and feature card: see Overview COMPONENTS INTERACTIONS - id: top10.hover and paging: Recipe top10-shelf - id: faq.toggle element: FAQ question bar trigger: click open: icon rotate 0 -> -45deg, 250ms cubic-bezier(0.32,0.94,0.6,1); answer panel height 0 -> content, padding 0 24px -> 24px, 250ms cubic-bezier(0.32,0.94,0.6,1) children: none close: reverse, same timing switch: opening another item closes the open one (inf) keyboard: Tab to the bar button, Enter or Space toggles, aria-expanded touch and mobile: same reduced motion: instant - id: title.preview: Recipe title-modal (opened by any Top 10 poster) - id: email.submit: Get Started validates the email on submit; invalid shows a red #eb3942 border and a 13px message under the field (Hawkins Input error) (inf) STATES loading: posters show #232323 plus a per-poster dominant color layer until the image loads error: email field error state (Overview input) A/B: the hero headline and the hero CTA style change between visits (solid red / purple-red gradient / white pill with 12px field radius) SCREENSHOTS - file: netflix_2026_home_d1440_full.jpg shows: full home page at 1440 (1424x3166), gradient CTA variant, headline "In the mood for great entertainment?" source: live https://www.netflix.com (US) 2026-09-30 key values: hero 888px; arc at y ~790; promo banner 77px radius 16px; Top 10 posters 180x252; 4 feature cards 270x320 radius 16px; FAQ bars 84px #2d2d2d 8px apart; footer 4 columns 14px underlined do not copy: wordmark, posters, 3D icons, popcorn art; use placeholders - file: netflix_2026_home_m390_full.jpg shows: full home page at 390 @2x: stacked hero form with centered red Get Started, stacked promo banner, 2.5 posters visible, one-column feature cards and FAQ, bottom form with left-aligned button, one-column footer - file: netflix_2026_title-modal_d1440_open.jpg (attached to Recipe title-modal) shows: the overlay used on this page