BRAND Netflix 2026 · Page: login

Brand Styles

1 follower

Design descriptions of websites for AI agents. System memos (tag design-system, start at "README"): Rules, Brand Memo Templates, Extraction Procedure & Screenshots, Components Motion & Recipes, Vocabularies, Media Assets & Legal, plus CJK & RTL and Legacy Web add-ons. Brand memos (titles "BRAND <Brand> <year> · Overview | Page: <type> | Recipe: <name>", tag brand-<slug>) describe one brand design: Overview with tokens and components, one Page memo per page type, Recipe memos for complex effects, with screenshots attached. Use when asked to build a site or page "in the style of <brand>" or to analyze, describe and save any website's design.

HEADER brand: Netflix; design_date: 2026-09; page_type: login; variants: signup (the /signup steps use the same CLCS layout and stylesheet, not captured in detail) example_urls: https://www.netflix.com/login (US); evidence: measured on https://www.netflix.com/login (US, English, via US-egress proxy) 2026-09-30 unless marked purpose: identifier-first sign in: enter email or phone, press Continue (password or code comes on the next step) skeleton: full-height page, content column 440px centered (480px with 20px padding), 3 sections; total height desktop ~1170px, mobile ~1060px; sidebar: none overrides: background is a dark maroon image (--grad-login-bg, est) on #000000 instead of plain black; footer band #161616; header 92px SECTIONS S1 header / simple - brand only background: part of the page backdrop; height: 92px; padding: 24px 48px inside a 120px side inset (max width calc(83.33% - 96px)) elements: NETFLIX wordmark 148x40 (89x24 mobile) linking home; nothing on the right S2 form / centered column - sign in background: backdrop image: maroon at the top (#45151a) fading to black by ~70% of the height, faint pattern (est); padding: 32px 20px, 48px below layout: 440px column, left aligned text elements: h1 32px 700 "Enter your info to sign in"; 8px below h2 18px 400 70% "Or get started with a new account."; 24px below the field "Email or mobile number" 440x56 (radius 4px, floating label); 12px below red Continue 440x48 (18px 500, radius 4px, full width); 24px below "Get Help" 16px white with a 16px chevron-down (expands a help menu); 24px below the reCAPTCHA note 13px 50% white motion: step changes fade and move (opacity, transform 200ms) responsive: <600 column 350px (20px side padding), h1 32px on 2 lines, same element order S3 footer / sitemap-columns on a band - legal links background: #161616; padding: 72px 0; inset like the header elements: "Questions? Call 1-844-569-7700 (Toll-Free)" 16px 70%; 4-column list: FAQ, Help Center, Netflix House, Netflix Shop, Terms of Use, Privacy, Cookie Preferences, Corporate Information, Do Not Sell or Share My Personal Information, Ad Choices (14px, 70%, underlined, 8px 6px padding); language select 32px 18px below responsive: <600 one column PAGE COMPONENTS Get Help toggle: text button 16px white with a chevron, expands a list of help links (not captured) INTERACTIONS - id: continue: validates the identifier on submit; invalid shows the Hawkins error border #eb3942 and a 13px message (inf) STATES error: field error state; loading: Continue shows a spinner (inf) SCREENSHOTS - file: netflix_2026_login_d1440_full.jpg shows: full login page at 1440: maroon-to-black backdrop, 440px form, #161616 footer band source: live https://www.netflix.com/login (US) 2026-09-30 key values: h1 32px 700; subheader 18px 70%; field 440x56 radius 4px; Continue 440x48 #e50914 radius 4px 18px 500; footer #161616 - file: netflix_2026_login_m390_full.jpg shows: login at 390 @2x: 350px column, same order