---
title: "BRAND Spotify 2026 · Page: login"
url: https://memocore.ai/memos/6ae42fd8cb977478f04eb833
project: "Brand Styles"
tags: "brand-spotify"
updated_at: "2026-10-30T06:30:49.309Z"
---

# BRAND Spotify 2026 · Page: login

HEADER
brand: Spotify; design_date: 2026-10; page_type: login; variants: signup
region: login NOT PROVEN: accounts.spotify.com via proxy has no country, market or currency marker in HTML or page state; locale "en" only. signup is US: https://www.spotify.com/us/signup via proxy with "geoCountry":"US", "countryCode":"US", "market":"us".
example_urls: https://accounts.spotify.com/en/login, https://www.spotify.com/us/signup; evidence: measured via proxy 2026-10-30 unless marked
purpose: sign in or start an account
skeleton: single centered column, no header, no footer, height 100vh
overrides: no global chrome

SECTIONS
S1 content / form
  background: #121212; padding: top 48 (--encore-spacing-looser-5); page bottom 32
  layout: column width 324 + 32 x 2 padding, centered; gap 8 in form groups
  elements: logo 32; H1 centered, Title font 700-800, 48 desktop (est), 40 at 390 (est); label 14/700 "Email"; input 324 x 48; green pill 324 x 48 "Continue"; "or" 14 #b3b3b3; 3 social pills 324 x 48, radius 9999, 1px solid #7c7c7c, icon left, text 16/700; "Don't have an account?" 14-16 #b3b3b3; "Sign up" 16/700 white; bottom 12 grey reCAPTCHA note with underlined links
  copy: "Welcome back", "Continue", "Continue with Google", "Continue with Facebook", "Continue with Apple"; signup: "Sign up to start listening", "Email address", "name@domain.com", "Next", "Sign up with Google", "Sign up with Apple", "Already have an account?", "Log in"
  media: none
  motion: see INTERACTIONS
  responsive: at 390 column stretches to 100% minus padding 32; same elements

PAGE COMPONENTS
Input: bg #121212, inset 0 0 0 1px #7c7c7c, radius 4, 16/400. Focus and error from Overview. Form never submitted in capture.

INTERACTIONS
- id: login.input
  element: email input
  trigger: hover
  open: box-shadow inset colour #7c7c7c -> #fff, 50ms, cubic-bezier(.3,0,0,1)
  switch: focus on the empty required field was seen once as inset #ed2c3f, 100ms, same curve; this was a script focus on the proxy page, where a proxy dialog also appears, so treat it with caution. Normal focus is 3px white inset by token (code, not recorded)
- id: login.continue
  element: green pill
  trigger: hover
  open: scale 1.04 and #1ed760 -> #3be477, 50ms, same curve
  close: 150ms, same curve
- id: login.social
  element: social pills (secondary)
  trigger: hover
  open: border #7c7c7c -> #fff and scale 1.04, 50ms, same curve
  close: 150ms, same curve
- id: login.signup-link
  element: "Sign up" (tertiary)
  trigger: hover
  open: scale 1.04, 50ms, same curve
Continue moves to a password or code step (not captured; no text was entered).

STATES
Error line under the input; not captured. Press and keyboard focus: not recorded here, Overview state table applies by component.

SCREENSHOTS
- file: spotify_2026_login_d1440_form.jpeg
  shows: login at 1440x900
  source: live via proxy, country not proven, 2026-10-30
  key values: input 324 x 48; pill 324 x 48
  do not copy: logo
- file: spotify_2026_login_m390_form.jpeg
  shows: login at 390x844
  source: live via proxy, country not proven, 2026-10-30
  key values: full width with 16-32 sides
  do not copy: logo
- file: spotify_2026_login_d1440_signup.jpeg
  shows: signup at 1440x900
  source: live, US via proxy, 2026-10-30
  key values: "geoCountry":"US"
  do not copy: logo
- file: spotify_2026_login_m390_signup.jpeg
  shows: signup at 390x844
  source: live, US via proxy, 2026-10-30
  key values: same pattern
  do not copy: logo