---
title: "BRAND Netflix 2026 · Page: login"
url: https://memocore.ai/memos/6abc972357d33af4d5247570
project: "Brand Styles"
tags: "brand-netflix"
updated_at: "2026-09-30T05:01:37.825Z"
---

# BRAND Netflix 2026 · Page: login

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