BRAND Netflix 2026 · Overview

HEADER brand: Netflix; domain: netflix.com; industry: video streaming subscription (logged-out marketing and sign-up pages); design_date: 2026-09 captured: US site, English (lang en, requestCountry US, prices in USD): https://www.netflix.com/ (home), /login, /title/80057281 (title page), /browse/genre/839338 (genre page), 2026-09-30. netflix.com picks the country by IP only (a /us/ path or cookie is ignored and redirects to the visitor's country), so the US pages were loaded through a US-egress proxy (Google Translate website proxy, source language auto -> English, which leaves the text untouched; its toolbar and form-warning dialog were hidden by script) evidence: measured from the server HTML and emotion CSS of the pages above (Hawkins design system, component variables --hcw--local-design--*), the nmhpFrameworkClient JS bundle and computed styles in the live pages unless marked note: three front ends share the Hawkins tokens but differ in shape: (1) the home page (NMHP) uses 4px radii and a 148px side margin; (2) content landing pages (LODP title pages and LOCP genre/collection pages) use pill buttons (radius 100px), 16px glass panels and a floating rounded hero card; (3) the login flow (CLCS) uses 4px radii and a 440px form column. The home hero headline and hero CTA are A/B tested (see COMPONENTS) style_tags: dark-first, card-ui, glassmorphism (LOCP panels only) viewports: desktop 1440, mobile 390; breakpoints (Hawkins, min-width): xs <600, s 600, m 960, l 1280, xl 1600, xxl 1920, xxxl 2560 pages: BRAND Netflix 2026 · Page: home; BRAND Netflix 2026 · Page: product-detail (title page, variant category-listing for genre pages); BRAND Netflix 2026 · Page: login recipes: BRAND Netflix 2026 · Recipe: top10-shelf; BRAND Netflix 2026 · Recipe: title-modal; BRAND Netflix 2026 · Recipe: hero-arc rebuild check: passed 2026-09-30 (details at the end) RECOGNITION KEYS 1 Pure black canvas (#000000 on home, #0f0f0f on title pages) with white text and 70% white secondary text; no light mode anywhere. 2 One saturated red, Netflix Red #e50914, for the logo and every primary button (Sign In, Get Started, Join Now, Continue); hover darkens to #c11119, press to #99161d. 3 Heroes are full-bleed walls of tilted poster key art (collage) under heavy black gradients, with a centered bold headline and an inline email field + big CTA. 4 Netflix Sans everywhere: bold 700 headlines (56px at 1440 on home, 48px/900 on genre heroes), 500 for section titles and buttons, 400 body. 5 Poster rows are horizontal shelves of 2:3 portrait posters with 8-16px radii that scale to 1.05 on hover, paged by a slim 24px-wide rounded paddle; the Top 10 row adds huge outlined rank numerals (black fill, 4px white stroke) overlapping each poster. 6 Below the home hero a wide elliptical arc edged by a 4px red-to-pink gradient line with a blue glow underneath separates the hero from the content. 7 Dark tinted cards with diagonal navy-to-maroon gradients (149deg #192247 -> #210e17) and 16px radii for feature and plan cards; grey #2d2d2d bars for the FAQ accordion. 8 Title pages float the hero inside a rounded card (20px top, 16px bottom corners, curved bottom edge) over an ambient, blurred copy of the key art that tints the whole page. GUARDRAILS no light backgrounds or light mode; no second accent color for actions (red only; the purple-red gradient CTA is an A/B variant of the home hero button only); no drop shadows on buttons or cards (only the modal and the sticky jump-link pill have shadows); no serif or condensed display fonts in UI text (condensed type appears only inside title logos and key art); no uppercase headlines (caps only in the 13px "TRAILER" eyebrow); no icons inside primary buttons except the trailing chevron on Get Started; no outlined (ghost) buttons except the white/grey header language select; no hover color change on footer links (they stay underlined 70% white); no scroll-reveal or parallax animations; older netflix.com elements not in this design: the 2019-2023 "Unlimited movies, TV shows, and more" layout with alternating text/device-mockup feature rows separated by 8px #232323 bands and the TV and phone mockups with looping video (ext); do not bring those back TOKENS /* rem base 16px */ /* color: core */ --color-red: #e50914; --color-red-hover: #c11119; --color-red-pressed: #99161d; --color-red-disabled: rgba(229,9,20,0.4); --color-black: #000000; --color-page-lodp: #0f0f0f; --color-surface-1: #161616; --color-surface-2: #232323; --color-surface-faq: #2d2d2d; --color-surface-3: #414141; --color-white: #ffffff; --color-text: #ffffff; --color-text-muted: rgba(255,255,255,0.7); --color-text-faint: rgba(255,255,255,0.5); --color-text-disabled: rgba(255,255,255,0.4); --color-field-bg: rgba(22,22,22,0.7); --color-field-border: rgba(128,128,128,0.7); --color-field-border-disabled: rgba(128,128,128,0.4); --color-modal-border: rgba(128,128,128,0.4); --color-grey-button: rgba(128,128,128,0.4); --color-grey-button-hover: rgba(128,128,128,0.3); --color-grey-button-disabled: rgba(128,128,128,0.2); --color-glass: rgba(255,255,255,0.1); --color-glass-border: rgba(255,255,255,0.04); --color-hero-card: rgba(255,255,255,0.15); --color-overlay: rgba(0,0,0,0.7); --color-badge-bg: rgba(0,0,0,0.9); --color-chip-bg: #414141; --color-error: #eb3942; --color-success: #2bb871; --color-warning: #d89d31; --color-link-help: #448ef4; --color-focus: #ffffff; /* color: gradients */ --grad-cta-ab: linear-gradient(87deg, #8c11c1 2.49%, #f21722 97.51%); /* hover linear-gradient(87deg, #9d13d8 2.49%, #ff1a26 97.51%); pressed linear-gradient(87deg, #760ea2 2.49%, #cb131d 97.51%) */ --grad-feature-card: linear-gradient(149deg, #192247 0%, #210e17 96.86%); /* <600: 99.08% */ --grad-promo-banner: linear-gradient(91deg, #261733, #151a3f); --grad-plan-ads: linear-gradient(149deg, #1c4072 6.96%, #172b47 40.17%, #120c1f 73.39%); --grad-plan-standard: linear-gradient(149deg, #59216e 6.96%, #251743 40.17%, #120c1f 73.39%); --grad-plan-premium: linear-gradient(149deg, #6c1e41 6.96%, #251743 40.17%, #120c1f 73.39%); --grad-arc-line: linear-gradient(to right, #210d16 16%, #b82869, #e50914, #b82869, #210d16 84%); --grad-arc-glow: radial-gradient(50% 500% at 50% -420%, rgba(64,97,231,0.4) 80%, rgba(0,0,0,0.1) 100%); --grad-header-scrim: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%); /* eased, 120px tall */ --grad-hero-scrim: linear-gradient(7deg, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.82) 32%, rgba(0,0,0,0.76) 46%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.3) 100%); /* eased (est for the stops after 46%) */ --grad-hero-side-glow: radial-gradient(11% 56% at 17% 50%, #461518 0%, transparent 100%), radial-gradient(11% 56% at 83% 50%, #461518 0%, transparent 100%); --grad-login-bg: linear-gradient(180deg, #45151a 0%, #2c0b0c 17%, #120203 43%, #020000 70%, #000000 100%); /* sampled from a texture image (est) */ /* font */ --font-text: "Netflix Sans", "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, sans-serif; --font-mono: "Netflix Sans Mono", monospace; /* loaded, not seen in use */ /* type scale: size / line-height / weight / tracking; values xs | m(960) | l(1280) | xxl(1920) */ --type-display: 32px/1.25/700 | 40px | 56px | 64px; /* home hero H1 */ --type-display-locp: 48px/normal/900; /* genre hero H1 at 1440 (est 32px mobile) */ --type-h2-home: 18px/normal/500 | 24px (>=960) | 32px (>=1920); --type-h2-locp: 20px/normal/700 (mobile) | 32px (>=960); --type-h3-card: 20px/normal/500 | 24px (>=1280); --type-lead: 16px/normal/400 | 20px/500 (>=1280); /* hero subline */ --type-faq: 18px/normal/400 | 24px (>=960); --type-body: 16px/normal/400; --type-body-long: 16px/24px/400; --type-small: 14px/21px/400; --type-small-strong: 14px/21px/500; --type-caption: 13px/normal/400; --type-eyebrow: 13px/24px/700 caps 0.16em; --type-button-sm: 14px/1/500; --type-button-md: 16px/1/500; --type-button-lg: 18px/1/500; --type-button-xl: 24px/1/500; --type-rank: 64px | 80px (>=960) | 100px (>=1280) | 120px (>=1920) /1/700; /* space */ --space: 2 4 8 12 16 24 32 40 48 64 96; --page-margin-home: 24px | 32px (>=600) | 80px (>=960) | 148px (>=1280) | 354px (>=1920); --page-max: 1920px; --page-margin-locp: 24px (mobile) | 48px outer + 104px body inset (>=1280, content 1136px at 1440); --section-gap: 56px (<960) | 64px; /* home, margin-bottom of each block */ --section-gap-locp: 40px; /* shape */ --radius-button: 4px; --radius-pill: 100px; --radius-input: 4px; --radius-card-poster: 8px (home) | 16px (LOCP); --radius-card: 16px; --radius-modal: 8px; --radius-banner: 16px; --radius-home-link: 25px; --radius-hero-card: 20px 20px 16px 16px; --radius-badge: 4px; --radius-paddle: 8px (home) | 256px (LOCP); --border-field: 1px solid rgba(128,128,128,0.7); --border-glass: 2px solid rgba(255,255,255,0.04); --border-plan: 2px solid rgba(255,255,255,0.1); /* depth */ --shadow-modal: 0 4px 8px rgba(0,0,0,0.8); --shadow-jump-links: 8px 8px 16px rgba(0,0,0,0.5); --shadow-rank: 0 0 24px rgba(0,0,0,0.5); /* text-shadow on rank numerals */ --blur-glass: blur(16px) on rgba(255,255,255,0.1) (LOCP panels); blur(12px) on rgba(0,0,0,0.7) (jump links); blur(30px) on feature cards; /* motion */ --ease-exit: cubic-bezier(0.4,0,0.68,0.06); /* Hawkins default: rest state, disabled, pressed */ --ease-enter: cubic-bezier(0.32,0.94,0.6,1); /* Hawkins hover, icon rotation, panels, modal */ --ease-banner: cubic-bezier(0.33,0,0,1); --dur-control: 250ms; --dur-pressed: 0ms; --dur-card: 200ms ease-in-out; --dur-paddle: 400ms ease-in-out; --dur-modal-scale: 533ms; --dur-banner: 500ms; --dur-floating-cta: 1000ms ease-in-out; /* focus */ --focus-ring: outline 2px solid #ffffff, offset 2px (all Hawkins controls and links; poster cards also get radius 8-16px on focus) dark_mode: none (dark only) FONTS text and headings: Netflix Sans (custom Netflix typeface, proprietary (ext)), served as one variable woff2 from occ.a.nflxso.net/genc/hawkins/5.30.0 (netflix-sans-core-variable-full), weights in use 400, 500, 700, 900; Netflix Sans Mono variable also preloaded but not seen in use. Fallback stack "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, sans-serif. Alternative: Inter (OFL) 400/500/700/900, tracking -0.01em on sizes >= 32px (est), or Figtree for a slightly rounder look. Material Symbols Outlined is loaded from Google Fonts but UI icons are Hawkins SVG masks. figures: default; prices written as "$8.99". TYPOGRAPHY RULES Home hero H1: 2-3 lines centered, max width 588px at 1440 (content column), weight 700, line-height 125%; subline 20px 500 directly below (16px mobile), then a 16px/24px prompt line above the email form. Section titles on home are small (24px 500 at 1440), left aligned, 16px above their row; on title/genre pages they are 32px 700. Card titles 24px 500; card body 16px at 70% white. FAQ questions and answers are the same size (24px, 400). Footer: 16px "Questions? Call ..." line, then 14px/21px links underlined in 70% white. Sentence case everywhere; title case for section titles on home ("More Reasons to Join", "Frequently Asked Questions"). No text-wrap balance; no letter-spacing except the 0.16em caps eyebrow. COLOR RULES Backgrounds: #000000 (home, login lower half), #0f0f0f (title and genre pages) tinted by the ambient key art at 15% opacity; raised surfaces #161616 (modal, login footer), #232323 (poster placeholders), #2d2d2d (FAQ bars, hover #414141). Red #e50914 only for the wordmark, primary buttons and the center of the arc line; never for text or backgrounds of sections. Secondary text always rgba(255,255,255,0.7); legal and captions rgba(255,255,255,0.5). Colored gradients only in cards and banners: navy-to-maroon feature cards, indigo promo banner, plan cards tinted blue / purple / magenta by plan, maroon login backdrop. Share of the home page: ~70% black, ~20% imagery, ~8% dark tinted cards, red under 2%. LAYOUT container: full width up to 1920px centered; side margins home 24 / 32 (>=600) / 80 (>=960) / 148 (>=1280) / 354px (>=1920) -> content 1129px at 1440 (1425 viewport minus scrollbar); title/genre pages 48px outer padding + 104px inner body padding (content 1136px at 1440), 24px on mobile; login content column 440px centered, header and footer inset 120px + 48px padding grid: flex rows, no fixed column grid; feature cards 4 equal columns with 16px gap (>=1280), 2 columns (960-1279), 1 column (<960); footer link list 4 columns (>=960), 2 columns (600-959), 1 column (<600), 12px gaps section rhythm: home blocks stacked with 64px bottom margin (56px <960), first block pulled up 32px (48px mobile) under the hero arc; title pages 40px between sections density: comfortable; alignment: centered hero, everything below left aligned typical composition: full-bleed hero collage -> contained rows (banner, poster shelf, 4 cards, accordion, repeated email CTA) -> link footer SHAPE AND DEPTH radius: 4px buttons and inputs on home and login; pill 100px buttons, inputs, select and Sign In on title/genre pages; 8px Top 10 posters, modal, trailer thumbnails, paddles; 16px feature cards, promo banner, plan cards, glass panels, episode cards and LOCP posters; 20px/16px hero card on LOCP; 25px bottom link banner borders: 1px rgba(128,128,128,0.7) on fields and selects; 2px rgba(255,255,255,0.04) on glass panels and episode cards; 2px rgba(255,255,255,0.1) on plan cards; 1px rgba(128,128,128,0.4) on the modal shadows: modal 0 4px 8px rgba(0,0,0,0.8); jump-link pill 8px 8px 16px rgba(0,0,0,0.5); rank numerals text-shadow 0 0 24px rgba(0,0,0,0.5); nothing else materials: backdrop blur on LOCP panels (16px) and the jump-link pill (12px); feature cards declare blur(30px) over black (no visible effect) textures: login backdrop is a dark maroon image with a faint pattern (est) COMPONENTS button (Hawkins Button, all variants): inline-flex, centered, label 500 weight, line-height 1, no text-decoration (Sign In is a link but never underlined), 1px transparent border drawn by ::after, pressed state instant (0ms) primary red: bg #e50914, text #ffffff; hover bg #c11119 250ms cubic-bezier(0.32,0.94,0.6,1); pressed bg #99161d, text rgba(255,255,255,0.7), 0ms; rest transition 250ms cubic-bezier(0.4,0,0.68,0.06); disabled bg rgba(229,9,20,0.4), text rgba(255,255,255,0.4) sizes: small 32px, padding 4px 16px, 14px (Sign In); medium 40px, padding 6px 16px, 16px (Learn More, LOCP Join Now 40px min); large 48px, padding 8px 16px, 18px (Continue, modal Get Started, mobile hero CTA); x-large 56px, padding 12px 24px, 24px with a 24px chevron 12px after the label (home hero CTA at >=1280) radius: 4px on home and login; 100px on LOCP pages (Join Now 240x48, padding 8px 32px, 18px) hero CTA A/B variants on home: (a) solid red 4px; (b) gradient --grad-cta-ab, hover and pressed gradients in TOKENS; (c) white pill: bg #ffffff, text #000000, radius 9999px, with the email field radius 12px; all keep size 56px and the chevron grey: bg rgba(128,128,128,0.4), text white; hover rgba(128,128,128,0.3); pressed rgba(128,128,128,0.3) with 70% text; disabled rgba(128,128,128,0.2) (Learn More) white pill (LOCP Sign In): bg #ffffff, text #000000, 14px 500, 32px, radius 100px; hover rgba(255,255,255,0.7); pressed rgba(255,255,255,0.5) dark pill (LOCP "More About Netflix"): bg rgba(22,22,22,0.7), text white, 32px, radius 100px (hover est rgba(22,22,22,0.5)) focus-visible (all): outline 2px solid #ffffff, offset 2px icon button: 40px circle (radius 20px), 24px icon, bg rgba(22,22,22,0.7) with 1px rgba(128,128,128,0.7) border on video controls, transparent in the modal close; same Hawkins timings text link: inherits color, underline; footer links rgba(255,255,255,0.7) underlined with no hover change; active color #e00000 (Hawkins default); focus 2px white outline offset 2px radius 2px input (Hawkins Input, floating label): height 56px, bg rgba(22,22,22,0.7), 1px rgba(128,128,128,0.7) border, radius 4px (100px on LOCP, 12px in the white-pill A/B), padding 24px 16px 8px, text 16px/24px white; label 16px/24px rgba(255,255,255,0.7) centered vertically when empty, moves up and shrinks to 12px/18px when focused or filled (top, font-size, line-height 250ms cubic-bezier(0.32,0.94,0.6,1)); error border and message #eb3942 13px, success #2bb871, warning #d89d31; focus-visible 2px white outline offset 2px (est); disabled border rgba(128,128,128,0.4), bg rgba(22,22,22,0.2) select (language picker): 32px tall (40px in the LOCP season selector), bg rgba(22,22,22,0.7), 1px rgba(128,128,128,0.7) border, radius 4px (100px on LOCP), padding 6px 36px 6px 34px, 16px/20px white; 16px translate icon at left 12px, 10px caret at right 12px; mobile shows the icon only (62px wide) poster card: 2:3 portrait image (180x252 home Top 10 at 1440, 184x258 LOCP rows), bg #232323 placeholder, radius 8px (home) / 16px (LOCP), whole card clickable; hover scale(1.05) and z-index 2, transform 200ms ease-in-out; focus-visible 2px white outline offset 2px; reduced motion: no scale, white outline on hover (Recipe top10-shelf) feature card (home "More Reasons to Join"): --grad-feature-card, radius 16px, padding 24px 16px 128px, title 24px 500, text 16px 70% white; a 72x76 glossy 3D icon at the bottom right; no hover promo banner (ad plan): 77px tall, --grad-promo-banner, radius 16px, padding 16px 32px, 96px popcorn illustration at scale 0.8 hanging over the left edge; title 20px 500, text 16px; grey Learn More button right; hover scale 1.03, 500ms cubic-bezier(0.33,0,0,1) glass panel (LOCP metadata, details, episode cards): bg rgba(255,255,255,0.1), 2px rgba(255,255,255,0.04) border, radius 16px, padding 24px 32px, backdrop blur 16px plan card (LOCP): 371x220 at 1440, radius 16px, 2px rgba(255,255,255,0.1) border, plan gradient, padding 24px; name 24px 500, quality 18px 500 70%, check-list 16px 70% with 24x16 check icons, price 18px 500 70% ("$8.99 /month") chip / badge: runtime badge 13px 500 70% on rgba(0,0,0,0.9), radius 4px, padding 0 12px 2px, bottom right of thumbnails; genre chips in the modal 14px 500 on #414141, radius 4px, padding 3px 4px, 8px apart accordion (FAQ): question bar #2d2d2d, padding 24px, 24px text, 36px plus icon right; hover bg #414141 250ms cubic-bezier(0.32,0.94,0.6,1); open: icon rotates -45deg (plus becomes x) 250ms cubic-bezier(0.32,0.94,0.6,1), answer panel #2d2d2d appears 1px below with padding 24px, height 250ms cubic-bezier(0.32,0.94,0.6,1); items 8px apart; one open at a time (inf) modal: Recipe title-modal toast: Hawkins notification group exists in the modal (not seen) skeleton: poster placeholders #232323 plus a per-poster dominant color layer (e.g. #2a2a2a, #393939) before the image loads GLOBAL CHROME header (home): transparent over the hero, not sticky; height 80px (<1280), 88px (>=1280); a 120px black scrim (rgba(0,0,0,0.8) -> 0) behind it; red NETFLIX wordmark 148x40 at the left margin (89x24 below 960); right side: language select (translate icon + "English" + caret) 12px before a red Sign In button 32px header (title and genre pages): 72px, linear-gradient to top from #000000, padding 16px 48px, wordmark 147x40 (89x24 mobile), white pill Sign In; below it a sticky "jump links" pill (Trailers, Episodes, More to Watch, Plans) centered, top 20px, 41px tall, bg rgba(0,0,0,0.7) with 12px blur, radius 100px, shadow 8px 8px 16px rgba(0,0,0,0.5), links 14px 500 70% white with 20px side padding header (login): 92px, wordmark only, padding 24px 48px inside a 120px inset mobile menu: none (logged-out pages have no navigation menu; the header keeps logo, language icon select and Sign In) footer (home): black, padding-bottom 96px; "Questions? Call 1-844-569-7700" 16px 70% with the number underlined; 36px below, links in 4 columns (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, Ad Choices) 14px/21px underlined 70% white, 12px gaps; language select; reCAPTCHA note 13px 50%; mobile: one column footer (login): #161616 band, padding 72px 0, same line and a shorter 4-column link list other: no cookie banner in the US (the "Cookie Preferences" link opens OneTrust (inf)); floating Join Now pill slides up from the bottom on title pages (bottom transition 1s ease-in-out) IMAGERY AND ICONS hero media (home): one wide collage image of tilted Netflix posters (about -15deg rotation, 3-4 rows, bright key art) filling the hero with object-fit cover, darkened by a 7deg black scrim (85% at the bottom-left to ~30%) and two maroon side glows #461518; responsive srcset 959 / 1279 / 2000w hero media (title pages): autoplaying muted trailer video in a rounded hero card with a key-art poster fallback; the same key art blurred and fixed behind the page at 15% opacity (video copy at 25%) masked to fade out at 79-100% height posters: official 2:3 key art with the red N badge and "TOP 10" red badges at top right on genre rows feature icons: glossy 3D illustrations (TV, download arrow in a pink circle, telescope, masks), purple-magenta palette, about 72px promo art: 3D popcorn bucket with a red star UI icons: Hawkins SVG icons drawn with CSS masks in currentColor: chevron right 24px, plus/close 36px, translate 16px, caret 10px, play 36px circle, check 24x16 image radius: 8px (home posters, trailers), 16px (LOCP posters, episode stills), 20px/16px (LOCP hero) density: image-led hero, text-led lower page MOTION intensity: functional hover policy: buttons change background in 250ms cubic-bezier(0.32,0.94,0.6,1) (no scale); poster cards scale to 1.05 in 200ms ease-in-out; paddles brighten bg rgba(255,255,255,0.1) -> 0.2 and icon 70% -> 100% in 200ms ease-in-out; promo banner scales 1.03 in 500ms cubic-bezier(0.33,0,0,1); FAQ bars lighten #2d2d2d -> #414141 in 250ms; footer links do not animate press policy: pressed colors apply instantly (0ms), no scale scroll reveal: none signature motion: poster shelf hover and paging (Recipe top10-shelf); title preview modal scale-in from 0.88 (Recipe title-modal); hero arc glow line is static (Recipe hero-arc) component motion: floating labels 250ms; accordion 250ms; modal overlay fade 250ms delay 67ms; title-page hero image fade 400ms; floating CTA slide 1s ease-in-out page transitions: hard page loads between pages; client-side step changes in the login flow fade (opacity and transform 200ms) reduced motion: Hawkins controls drop transitions; poster hover replaces the scale with a 2px white outline; promo banner hover scale disabled RESPONSIVE >=1920: margins 354px, H1 64px/80px, H2 32px, rank numerals 120px, posters 214x300 1280-1919: margins 148px, header 88px, H1 56px/70px, hero subline 20px 500, CTA 56px 24px text inline with the field, feature cards 4 across, posters 180x252 960-1279: margins 80px, header 80px, logo 148x40, H1 40px/50px, H2 24px, CTA 56px with 18px text, form 508px, feature cards 2x2, posters 140x196, rank 80px 600-959: margins 32px, logo 89x24, H1 32px/40px, H2 18px, feature cards stacked, posters 112x157, rank 64px, footer 2 columns <600: margins 24px, hero 664px tall, email field full width (326px) with the red Get Started (48px, 18px) centered below it, language select icon only, promo banner stacks (illustration above the card, button below the text), footer 1 column CONTENT AND VOICE headline style: short benefit or price line, 4-7 words, often with the price ("Endless entertainment starts at $8.99/mo", "In the mood for great entertainment?", "All the hits you keep hearing about"; A/B tested) body: one plain sentence, 8-20 words ("New arrivals weekly. Cancel anytime.", "Ready to watch? Enter your email to create or restart your membership.") CTA labels: "Get Started", "Sign In", "Join Now", "Learn More", "Continue", "More About Netflix" case: sentence case for copy, title case for section titles and buttons; prices "$8.99", "$19.99 /month" SUBSTITUTIONS Netflix Sans -> Inter (400/500/700/900); NETFLIX wordmark -> a red condensed placeholder wordmark [LOGO] in #e50914; poster collage and posters -> generic 2:3 poster placeholders with varied dark colors; trailer video -> a looping muted placeholder video or still; 3D feature icons -> any glossy 3D icon set in purple-magenta; Hawkins icons -> Lucide chevron-right, plus, x, languages, check at the same sizes TECH React with emotion CSS-in-JS (class names default-ltr-<hash>-cache-<id>, data-emotion style tags inlined in SSR HTML), Hawkins design system (Hawkins Components for Web, CSS variables --hcw--local-design--<Component>-<Property>, focus ring variables --hcw--focus-ring--*), landing page bundle nmhpFrameworkClient.js, fonts and art from assets.nflxext.com, occ.a.nflxso.net; data-uia attributes on every element; reCAPTCHA SCREENSHOTS - file: netflix_2026_home_d1440_top.jpg shows: home first screen at 1440x900 (1424 wide without scrollbar), scroll 0, gradient A/B variant of the hero CTA source: live https://www.netflix.com (US, via US-egress proxy) 2026-09-30 key values: header 88px, wordmark 148x40 at x 148; language select 129x32 and red Sign In 77x32 radius 4px; H1 56px/70px 700 white centered in a 588px column; subline 20px 500; email field 367x56 + Get Started 213x56 24px 500 with chevron; arc with red-pink 4px line at y ~790 do not copy: wordmark, poster collage; use placeholders - file: netflix_2026_home_m390_top.jpg shows: home first screen at 390x844 @2x: 80px header with 89x24 wordmark, icon-only language select, red Sign In; H1 32px/40px on 3 lines; full-width field; red Get Started 48px centered; arc; promo banner with popcorn above - file: netflix_2026_overview_d1440_states.png shows: Get Started gradient default and hover (lighter gradient); white-pill A/B variant with focus-visible ring (2px white, offset 2px); Sign In default, hover #c11119, focus-visible; Learn More default and hover (the whole promo banner scales 1.03 on hover); Top 10 row with card 2 hovered (scale 1.05) and the right paddle; FAQ with item 1 open (x icon) and 1px gap to the answer panel mobile menu screenshot: n/a (no mobile menu on logged-out pages) REBUILD CHECK result: passed 2026-09-30 after fixes. A plain HTML rebuild of the home first screen, promo banner, Top 10 row and feature cards made only from these memos (Inter instead of Netflix Sans, placeholder collage and posters) was compared with the live screenshots at 1440 and 390. Fixed in the memos: Sign In must not be underlined; rank numeral position (bottom 13px above the poster bottom, not below); mobile promo banner layout. Remaining known differences: Inter runs slightly wider than Netflix Sans (H1 wraps may differ by a word); the collage needs real poster-like art to match the brightness of the original.