{ "schema": "brand-kit@2", "palette": { "paper": "#121212", "surface": "#242424", "ink": "#FFFFFF", "ink_muted": "#B3B3B3", "accent": "#1ED760", "on_accent": "#000000", "accent_secondary": "#7358FF", "night": "#000000", "on_night": "#FFFFFF", "extras": [ { "name": "Spotify Green", "hex": "#1ED760", "role": "Published core color (RGB 30/215/96, CMYK 86/0/80/0), Spotify's \"resting color\". On the page: every primary CTA pill, the Individual plan name and its badge, feature-grid icons.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" }, { "name": "White", "hex": "#FFFFFF", "role": "Published core color. All headline and body type on the dark page; logo on dark grounds.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" }, { "name": "Black (published)", "hex": "#121212", "role": "Published core color (RGB 18/18/18). The page ground of every band between the nav and the footer, and the hero mask color.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" }, { "name": "Spotify color (player fallback)", "hex": "#191414", "role": "Published fallback background for playing views when artwork color cannot be extracted. Not used on the marketing page.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#playing-views" }, { "name": "Pure black", "hex": "#000000", "role": "Nav bar and footer ground (observed), one step darker than the #121212 page.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Locale bar blue", "hex": "#1D75DE", "role": "55px locale-suggestion bar above the nav (shown to US visitors as \"Estados Unidos (Español)\").", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Plan card grey", "hex": "#242424", "role": "Plan cards in the pricing grid.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Social grey", "hex": "#222326", "role": "54px round social buttons in the footer.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Outline grey", "hex": "#7F7F7F", "role": "1px border of the secondary \"View all plans\" pill on dark.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Nav muted", "hex": "#D9DADC", "role": "\"Sign up\" and \"Log in\" nav links (one step dimmer than the white product links).", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Legal grey", "hex": "#B3B3B3", "role": "12px legal/offer fine print under CTAs, its underlined \"Terms apply\" link.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Plan sub grey", "hex": "#A7A7A7", "role": "\"$12.99 / month after\" lines and fine print inside plan cards.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Footer grey", "hex": "#919496", "role": "Footer column heads (12px, 900, uppercase) and the legal link row.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Student mint", "hex": "#91EEDA", "role": "Student plan name, badge and button fill.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Duo peach", "hex": "#FFA178", "role": "Duo plan name and button fill.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Family lilac", "hex": "#D8A3FF", "role": "Family plan name and button fill.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Audiobooks sage", "hex": "#C9E3DB", "role": "Audiobooks Access title and its \"Learn more\" pill.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Reserved periwinkle", "hex": "#576DD6", "role": "Ground of the Reserved feature card.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "DJ blue", "hex": "#0D72EA", "role": "Ground of the DJ feature card.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Video orange", "hex": "#D64000", "role": "Ground of the video feature card.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Daylist violet", "hex": "#7358FF", "role": "Ground of the daylist feature card.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Jam magenta", "hex": "#CC2FAF", "role": "Ground of the Jam feature card.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Blend green", "hex": "#088569", "role": "Ground of the Blend feature card.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Content card green", "hex": "#035341", "role": "Ground of the three Fitness / Audiobooks / Podcasts cards.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Content icon green", "hex": "#10B28E", "role": "88px line icons inside the content cards.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Guide example yellow", "hex": "#FCE54F", "role": "Example of a \"surprising color combination\" behind a #121212 icon in the guide; not on the page.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" }, { "name": "Guide example lavender", "hex": "#D9D5E3", "role": "Example combination tile in the guide; not on the page.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" }, { "name": "Guide example cyan", "hex": "#00FFFF", "role": "Example combination tile in the guide; not on the page.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" } ] }, "typography": { "display": { "family": "Unbounded", "weight": 900, "tracking": -0.01, "line_height": 1.297, "italic_keyword": "synthetic oblique (font-style: italic) on the cycling keyword line only", "fallback_stack": "\"Arial Black\", system-ui, sans-serif", "google_fonts": "Unbounded:wght@200..900", "real": "Spotify Mix Title (SpotifyMixUITitleVariable), proprietary, set at font-stretch 156.25% and weight 900 for the hero", "stand_in": true, "use": "ONLY the hero headline. Set it at font-size 118px (desktop) / 37px (phone), letter-spacing -0.01em, font-weight 900, and transform: scaleX(1.162) on each line (transform-origin left at 1440, center at 390). Line pitch stays 153px desktop / 48px phone (line-height 1.297 at the stand-in size). Put the scaleX on an inline-block / width: fit-content span per line, or the transform widens the page. This optical correction makes Unbounded's rendered line match the real stretched Mix Title: width 1.00, ink 0.96, ink height 1.00, letters nearly touching. NEVER set it at 128px with open tracking (round 2 used +0.04em: too round, letters too separated).", "optical": { "font_size_desktop": 118, "font_size_phone": 37, "letter_spacing_em": -0.01, "scale_x": 1.162, "prov": "observed", "date": "2026-10-30", "why": "Rendered against SpotifyMixUITitleVariable 900 at font-stretch 156.25% from spotify.com's own @font-face: 'The ultimate home for' real 1935px wide, 103px ink height; Unbounded 118px -0.01em scaleX(1.162) 1934px, 103px." } }, "heading": { "family": "Bricolage Grotesque", "weight": 800, "tracking": -0.02, "line_height": 1.2, "fallback_stack": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif", "google_fonts": "Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800", "real": "Spotify Mix Title (SpotifyMixUITitleVariable 800 for h2, 400 manifesto, 300 subs)", "stand_in": true, "use": "Spotify Mix Title roles except the hero: section h2 at font-size 66px desktop / 50px phone (stand-in optical size for the site's 64/48px; line box 77px / 58px), weight 800, -0.02em; the manifesto statement (48/32px, 400, -0.02em); the manifesto body, every section sub/h3 under an h2 (24px and 32px, weight 350, -0.01em) and the moments photo captions (16px, 300). Everything else is Hanken Grotesk. Never Outfit." }, "body": { "family": "Hanken Grotesk", "weight": 450, "line_height": 1.375, "scale": 1, "fallback_stack": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif", "google_fonts": "Hanken+Grotesk:wght@100..900", "real": "Spotify Mix (SpotifyMixUI), proprietary; falls back to CircularSp, Helvetica, Arial on the site", "stand_in": true }, "calibration": "CURRENT (round 4, 2026-10-30): round 3 grader said Bricolage h2 read narrower and less substantial, subs thin. H2 now Bricolage 800 at 66px -0.02em = 1.01 width / 1.01 ink / 0.98 height against Mix Title 800 at 64px (64px was 0.99 / 0.95 / 0.95). Subs 24px weight 350 -0.01em = 1.02 / 1.22 (300 was 1.13 on white but read thin on #121212 three rounds running, so this follows the consistent signal). PREVIOUS (round 3) RE-CALIBRATION 2026-10-30 (round 2 grader: hero letterforms rounder and more separated than the real; Outfit 900 h2 'too rounded and heavy'; manifesto 'thinner and more neutral'). Visual sheet plus width / ink / ink-height against the real faces: HERO Unbounded 900 at 118px, -0.01em, scaleX(1.162) = 1.00 / 0.96 / 1.00 (128px +0.04em was 1.00 / 0.97 / 1.08 with visibly open fitting). H2 64px: Bricolage Grotesque 800 -0.015em = 0.99 / 0.95 / 0.95 and the same compact, sharply fitted shapes (chosen); Rethink Sans 800 0.90 / 0.89; Outfit 900 dropped. MANIFESTO 48px Mix Title 400: Bricolage 400 -0.02em = 1.00 / 1.01 / 0.95 (Hanken 450 read thin). SUB 24px Mix Title 300: Bricolage 300 -0.01em = 1.01 / 1.13 / 0.91. Body, buttons, card titles stay Hanken Grotesk (body 1.00 / 1.01 / 1.00). Measured matches; do not chase the grader further. HISTORY, SUPERSEDED (do not use these picks): Calibrated 2026-10-29 by rendering the same line in the real face on spotify.com/us/premium (the page's own @font-face) and in open candidates, white ground, black text, headless Chromium. Ratios are stand-in / real for line width, ink (summed darkness) and ink height. HERO 'The ultimate home for', 128px, SpotifyMixUITitleVariable 900 at font-stretch 156.25%: Unbounded 900 +0.01em 0.96 / 0.97 / 1.08 (best); Archivo 900 wdth 125 0.94 / 0.81; Montserrat 900 0.80 / 0.77. SECTION H2 'Introducing Reserved', 64px, Mix Title 800: Outfit 900 -0.02em 0.99 / 1.04 / 1.02 (chosen); Outfit 800 1.01 / 0.95; Figtree 800 1.03 / 0.92; Hanken Grotesk 0.99 / 0.80; DM Sans 0.99 / 0.83. CARD TITLE 32px Mix Title 700: Outfit 700 -0.02em 1.01 / 1.08 / 1.00. SUBHEAD 24px Mix Title 300: Outfit 300 0.99 / 1.03 / 0.96. BODY 16px SpotifyMixUI 400: Outfit 400 0.97 / 1.02 / 1.07; Figtree 1.01 / 0.94; Hanken 1.00 / 0.95. BUTTON 16px 700: Outfit 700 1.01 / 1.10. Outfit carries every non-hero role so the page has one text family like the real one; Unbounded is used only for the 128px stretched hero. Both are on the Steal shelf font list. ROUND 2 RE-CALIBRATION (grader: Outfit read too round in the manifesto and subs; hero too narrow): HERO Unbounded 900 at +0.04em = 1.00 width / 0.97 ink / 1.08 height (was 0.96 at +0.01em). Hanken Grotesk (a grotesque, closer to Mix's straight-sided forms than geometric Outfit): body 16px at weight 450 = 1.00 / 1.01 / 1.00; button 16px 750 = 1.01 / 0.95; subhead 24px 350 = 1.00 / 1.07; manifesto 48px 450 -0.01em ~1.02 / 0.95; card title 32px 800 -0.02em ~1.01 / 0.99. Section h2 stays Outfit 900 -0.02em (0.99 / 1.04).", "published_rule": { "text": "The partner guide recommends the platform default sans-serif, then Helvetica Neue, Helvetica, Arial, for third-party integrations. Spotify's own marketing uses its proprietary Spotify Mix.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#fonts" } }, "style": { "button_shape": "pill (9999px) everywhere", "radius": "cards 24px, plan cards 10px, photos 16px", "motion": "functional 0.15s presses; brand motion lives in the video, Rive card art and the cycling keyword", "density": "one idea per band, 256px black gaps between bands" }, "voice": { "tone": [ "warm", "fan-centred", "short", "exact about offers" ], "notes": [ "Homepage voice (observed 2026-10-29): sentence case, plain benefit lines, feature names used with verbs (\"Soundtrack your mood with daylist\"), numbers only where verifiable (2,000 devices, 24-bit/44.1 kHz).", "Never put the corporate mission or boilerplate into page copy; use the verbatim section copy in the page anatomy." ], "rules": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence" }, { "id": "link-cta", "kind": "guidance", "text": "Partner link labels: GET SPOTIFY FREE when the app is absent; OPEN SPOTIFY, PLAY ON SPOTIFY or LISTEN ON SPOTIFY when installed.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#linking-to-spotify" }, { "id": "offer-fine-print", "kind": "guidance", "text": "Every price CTA is followed by its 12px eligibility line and \"Terms apply\".", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" } ], "approved": { "words": [ "Try 2 months for $0", "View all plans", "GET SPOTIFY FREE", "LISTEN ON SPOTIFY", "Premium" ] }, "banned": [ "product names containing \"Spotify\" (published partner rule)", "title-case headlines" ] }, "spec": { "source": "https://www.spotify.com/us/premium/", "how": "computed styles and bounding boxes at 1440 and 390 in headless Chromium after a slow scroll (scroll-revealed sections at rest), 2026-10-29; fonts calibrated by rendering on the live page; images downloaded from wwwmarketing.scdn.co; feature-card art is a Rive canvas captured at rest.", "provenance": "observed", "layout": { "container_max": 1120, "page_margin": { "desktop": 160, "phone": 16, "note": "Section content is a 1120px column centered at 1440 (x 160-1280). Hero text sits at x 100 (100px padding). Nav and footer run wider (nav x 32-1408)." }, "nav_height": 72, "nav_height_phone": 54, "locale_bar_height": 55, "section_padding": { "desktop": 256, "phone": 96, "note": "Each section header starts 256px below the previous section's last card at 1440 (about 96px at 390). This big black gap is the rhythm." }, "header_to_content": 80, "feature_card": { "width": 1120, "height": 509, "radius": 24, "gap": 32, "art_col": 636, "text_x_in_card": 700, "text_width": 356 }, "feature_grid": { "cols": 4, "width": 256, "gutter": 32, "xs": [ 160, 448, 736, 1024 ] }, "content_cards": { "cols": 3, "width": 352, "height": 340, "gutter": 32, "xs": [ 160, 544, 928 ], "radius": 24, "padding": 24 }, "plan_cards": { "cols": 3, "width": 353, "gutter": 32, "xs": [ 159, 544, 928 ], "radius": 10, "padding_x": 16, "note": "4th card (Family) centers alone in a second row." }, "columns": 12, "columns_phone": 1, "gutter": 32, "gutter_phone": 16, "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "rhythm": "Section gaps vary; the measured list is kit.spec.page.checkpoints.band_gaps_1440: 256 for most, 160 after the crew cards, 512 before 'Listen to Spotify anywhere', 378 before 'Shaping', 250 from the moments row to the spotlight still. The manifesto has two 256px gaps (its own bottom padding, then Reserved's top padding across a hard edge). Phone: 96px between most sections, h2 to h3 24px. Land every h2 within 24px of the checkpoints." }, "type": [ { "role": "Hero headline (h1)", "face": "display", "size": { "desktop": 118, "phone": 37 }, "line_height": 1.297, "tracking_px": -1.18, "weight": 900, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Unbounded 900 at 118px (37px phone), letter-spacing -0.01em, transform scaleX(1.162) per line, line pitch 153px (48px phone). Optical match for Spotify Mix Title 900 at stretch 156.25% set at 128px/40px on the site; see kit.typography.display.optical. Letters nearly touch; never open tracking. 3 lines: \"The ultimate\" / \"home for\" / italic keyword." }, { "role": "Hero keyword (h1 3rd line)", "face": "display", "size": { "desktop": 118, "phone": 37 }, "line_height": 1.297, "tracking_px": -1.18, "weight": 900, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Unbounded 900 at 118px (37px phone), letter-spacing -0.01em, transform scaleX(1.162) per line, line pitch 153px (48px phone). Optical match for Spotify Mix Title 900 at stretch 156.25% set at 128px/40px on the site; see kit.typography.display.optical. Letters nearly touch; never open tracking. font-style italic, resting word \"music\"." }, { "role": "Section headline (h2)", "face": "heading", "size": { "desktop": 66, "phone": 50 }, "line_height": 1.167, "tracking_px": -1.32, "weight": 800, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Bricolage Grotesque 800 at 66px (50px phone), -0.02em, line box 77px (58px phone): the optical match for Spotify Mix Title 800 at 64/48px. One line at 1440, 2-3 lines at 390, centered (left at x 160 for 'Shaping the big moments')." }, { "role": "Section sub (h3)", "face": "heading", "size": { "desktop": 24, "phone": 24 }, "line_height": 1.2, "tracking_px": -0.24, "weight": 350, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Bricolage Grotesque 350, -0.01em (Mix Title 300 on the site). White, centered, 40px below the h2 box at 1440 (24px at 390); one line at 1440 (max 1120)." }, { "role": "Manifesto headline", "face": "heading", "size": { "desktop": 48, "phone": 32 }, "line_height": 1.2, "tracking_px": -0.96, "weight": 400, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Bricolage Grotesque 400, -0.02em (Mix Title 400). Left aligned, 822px box at x 88. Exact breaks at 1440: \"As the world's music hub, Spotify is\" / \"where fans and artists come together.\"" }, { "role": "Manifesto body", "face": "heading", "size": { "desktop": 32, "phone": 24 }, "line_height": 1.15, "tracking_px": -0.32, "weight": 350, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Bricolage Grotesque 300, -0.01em (Mix Title 300). 709px max, 3 lines at 1440, 44px gap below the statement's box (statement y 1538, body y 1698 at 1440)." }, { "role": "Feature card title", "face": "body", "size": { "desktop": 32, "phone": 32 }, "line_height": 1.2, "tracking_px": -0.64, "weight": 800, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. Mix 700 -0.02em; 2 lines in a 356px column (39px pitch)." }, { "role": "Eyebrow \"Premium\" (with icon)", "face": "body", "size": { "desktop": 20, "phone": 20 }, "line_height": 1.2, "tracking_px": 0, "weight": 750, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. Spotify icon 16px + \"Premium\" / \"Premium Individual\", Mix 700." }, { "role": "Feature grid / card label", "face": "body", "size": { "desktop": 20, "phone": 20 }, "line_height": 1.2, "tracking_px": 0, "weight": 750, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. Ad-free music listening, Fitness, etc. (content cards 24px on phone)." }, { "role": "Body", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.375, "tracking_px": 0, "weight": 450, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. Mix 400 white; card body 16px; feature-grid body 16px weight 300; content-card body 16px at 70% white." }, { "role": "Button label", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.375, "tracking_px": 0, "weight": 750, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. Mix 700, black on green / white on outline." }, { "role": "Plan name", "face": "body", "size": { "desktop": 32, "phone": 32 }, "line_height": 1.45, "tracking_px": 0, "weight": 750, "color": "#1ED760", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. Individual #1ED760, Student #91EEDA, Duo #FFA178, Family #D8A3FF." }, { "role": "Legal fine print", "face": "body", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.42, "tracking_px": 0, "weight": 450, "color": "#B3B3B3", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. #B3B3B3 (#A7A7A7 inside plan cards), \"Terms apply\" underlined." }, { "role": "Footer column head", "face": "body", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.4, "tracking_px": 0.96, "weight": 900, "color": "#919496", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. UPPERCASE, #919496." }, { "role": "Footer link", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 450, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. White, 40px row pitch." }, { "role": "Nav link", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 750, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Hanken Grotesk. White (product links) / #D9DADC (Sign up, Log in)." }, { "role": "Moments photo caption", "face": "heading", "size": { "desktop": 16, "phone": 13 }, "line_height": 1.2, "tracking_px": 0, "weight": 300, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Bricolage Grotesque 300 (Mix Title 300 on the site), 16px at 1440, white, 8px under each photo, wraps at the photo width." }, { "role": "Offer timer label", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.43, "tracking_px": 0, "weight": 450, "color": "#FFFFFF", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Hanken Grotesk 14px (Mix 400 14px on the site). Badge 160x28, padding 4px 8px, 16px bell icon then 4px then the label (124px wide)." } ], "components": { "button_primary": { "fill": "#1ED760", "text": "#000000", "radius": "pill", "height": 48, "padding_x": 32, "font_size": 16, "weight": 700, "use": "Every primary CTA (\"Try 2 months for $0\"). 206x48 at 1440. Hover: scale 1.04 and lighter green; transition background-color, transform 0.15s cubic-bezier(0.3,0,0,1).", "states": { "hover": { "css": { "background": "#3BE477", "transform": "scale(1.04)" }, "prov": "inferred", "why": "Hover was seen to scale and lighten; the exact hover hex was not captured" } } }, "button_nav": { "fill": "#1ED760", "text": "#000000", "radius": "pill", "height": 38, "padding_x": 32, "font_size": 16, "weight": 700, "use": "Nav CTA, 206x38 at 1440; 156x28 with 14px text and 16px padding at 390." }, "button_outline": { "fill": "#121212", "text": "#FFFFFF", "border": "1px solid #7F7F7F", "radius": "pill", "height": 48, "padding_x": 32, "font_size": 16, "weight": 700, "use": "\"View all plans\" beside the green pill, 16px gap.", "ring_px": 1, "ring": "#7F7F7F" }, "button_plan": { "fill": "#1ED760", "text": "#000000", "radius": "pill", "height": 48, "width": "100% of card (321)", "font_size": 16, "weight": 700, "padding_x": 16, "note": "fill is the plan color: #1ED760 Individual, #91EEDA Student, #FFA178 Duo, #D8A3FF Family" }, "button_sage": { "fill": "#C9E3DB", "text": "#000000", "radius": "pill", "height": 48, "padding_x": 40, "font_size": 16, "weight": 700, "use": "Audiobooks Access \"Learn more\"." }, "offer_timer": { "fill": "rgba(255,255,255,0.1)", "text": "#FFFFFF", "radius": 4, "height": 28, "padding": "4px 8px", "font_size": 14, "weight": 400, "use": "Label verbatim \"Offer ends in 4 days\" (observed 2026-10-29; the count changes daily, so on another day use the true count to November 1, 2026). 160x28 badge at x 100, y 715 (1440): padding 4px 8px, 16px bell icon (blue outline), 4px gap, label 14px. 24px above the CTAs. Bell icon is a blue outline (exact hex not captured).", "date": "2026-10-30" }, "play_pause": { "fill": "rgba(255,255,255,0.1)", "text": "#FFFFFF", "radius": 999, "size": 48, "size_phone": 32, "use": "Pause glyph, bottom-right of the hero, 20px from the right edge and bottom of the viewport." }, "plan_badge": { "fill": "plan color", "text": "#000000", "radius": 6, "height": 30, "padding": "8px 16px", "font_size": 16, "weight": 700, "use": "Flush to the top-left corner of the plan card: \"$0 for 2 months\" (green), \"$0 for 1 month\" (mint). Corners: border-radius 6px 0 6px 0.", "corners": "6px on the top-left and bottom-right corners only (border-radius: 6px 0 6px 0)" }, "plan_card": { "fill": "#242424", "text": "#FFFFFF", "radius": 10, "padding": "0 16px", "divider": "1px rgba(255,255,255,0.1)", "use": "Built as four stacked blocks, all #242424, 353px wide (342px at x 24 on phone): HEAD (radius 10 10 0 0): badge flush top-left (Individual, Student) then 16px, eyebrow 24px icon + 4px + \"Premium\" 16/400, plan name 32/700 (46px line) in plan color, 4px, price 16/700, sub 14/400 #A7A7A7, 16px, 1px rgba(255,255,255,0.1) divider. No-badge cards (Duo, Family) start the eyebrow 16px from the top. BULLETS: 16/400 white, 22px line pitch, 16px marker column, padding 20px 16px (0 16px 20px when there is no badge). BUTTON: full-width 48px pill, then 16px. FINE PRINT (radius 0 0 10 10): 12/400 #A7A7A7 centered, 16px line, 12px top padding, 16px bottom padding. Element tops from the card top at 1440. Individual and Student: badge 0, eyebrow 56, name 85, price 135, sub 157, divider 193, first bullet 214, button 324, fine print text ~400, card bottom 512. Duo (no badge, no sub): eyebrow 16, name 45, price 95, divider 153, first bullet 194, button 324, bottom 512. Family (row two): eyebrow 16, name 45, price 96, divider 134, first bullet 155, button 351, fine print 415, bottom 475. Bullet text column 305px wide.", "heights": "At 1440 the three row-one cards share grid rows, so each block lines up across cards: head 194, bullets 130, button 64, fine print 124 (= 512 tall). The button sits directly under the bullets row: no margin-top: auto, no empty space between the last bullet and the button beyond the 20px padding. Family (row two, centered, 40px below): 154 / 196 / 64 / 60. Phone cards stack with 40px between.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "offsets": "Element tops from the card top at 1440. Individual and Student: badge 0, eyebrow 56, name 85, price 135, sub 157, divider 193, first bullet 214, button 324, fine print text ~400, card bottom 512. Duo (no badge, no sub): eyebrow 16, name 45, price 95, divider 153, first bullet 194, button 324, bottom 512. Family (row two): eyebrow 16, name 45, price 96, divider 134, first bullet 155, button 351, fine print 415, bottom 475. Bullet text column 305px wide." }, "feature_card": { "fill": "card color", "text": "#FFFFFF", "radius": 24, "height": 509, "use": "Card 1120x509, radius 24, overflow hidden. Art column 636px wide with the art at its native box size, never scaled up or cropped: Reserved art 540x509, all others 636x509 (the image already contains its own inset and the card color around the artwork). Text column: x 668 (Reserved) or 700 (others) inside the card, max-width 356px, right padding 64px, vertically centered as one block: eyebrow (16px icon + \"Premium\" 20/750, 0px gap to title), title 32/800 with the exact line breaks in title_breaks, 16px gap, body 16/450 (Reserved only, 315px wide, 3 lines). Reserved legal 12px pinned 24px above the card bottom at the same x. Reserved: the 540x509 art sits inside the 636px column with 48px padding each side (card x 48). Phone: radius 20, art on top with 24px top padding and object-fit: contain (never cover); Reserved 358x530, other cards about 358x500 with a 318px art area. Top of the text group from the card top at 1440 (do not vertically center by flex; use these): Reserved eyebrow +163, title +187; DJ eyebrow +188, title +212; video title +200 (no eyebrow); daylist title +200 (no eyebrow); Jam eyebrow +168, title +192; Blend title +200 (no eyebrow). Only Reserved, DJ and Jam carry the Premium eyebrow.", "title_breaks": "Reserved: Concert tickets, / saved for real fans; DJ: DJ spins tracks / just for you; video: Watch where you / listen with just one tap; daylist: Soundtrack your / mood with daylist; Jam: Play any song / with friends in / real time with Jam; Blend: Discover your taste / match with Blend", "text_offsets": "Top of the text group from the card top at 1440 (do not vertically center by flex; use these): Reserved eyebrow +163, title +187; DJ eyebrow +188, title +212; video title +200 (no eyebrow); daylist title +200 (no eyebrow); Jam eyebrow +168, title +192; Blend title +200 (no eyebrow). Only Reserved, DJ and Jam carry the Premium eyebrow." }, "content_card": { "fill": "#035341", "text": "#FFFFFF", "radius": 24, "padding": 24, "height": 340, "use": "Top-left eyebrow (icon + \"Premium\" 16/700, omitted on Podcasts), 88px #10B28E line icon centered, title 20/700, body 16/400 at 70% white. Phone 358x320, radius 20, 16px apart." }, "social_button": { "fill": "#222326", "text": "#FFFFFF", "radius": 999, "size": 54, "gap": 24, "use": "Instagram, X, Facebook glyphs 24px, top-right of the footer." }, "text_link": { "fill": "transparent", "text": "#FFFFFF", "underline": true, "font_size": 14, "use": "\"Or sign up to Spotify for free.\" and every \"Terms apply\"." } }, "signature": [ { "id": "logo-mask-hero", "name": "The icon is the hero frame", "where": "hero, top of the page", "spec": "A #121212 layer with the Spotify icon cut out of it: the icon's circle shows the hero video (supplied still), the three sound waves stay solid #121212. The layer is the media box x 0, y 55, 1440x845 (390x789 phone), not the hero box. CSS on that #121212 div: mask-image: linear-gradient(#000,#000), url(data:image/png;base64,); mask-composite: exclude (-webkit-mask-composite: xor); mask-repeat: no-repeat; desktop mask-size: 100% 100%, 763px; mask-position: 0 0, 630px 41px (page x 630-1393, y 96-859; the site writes it as size 53% at position 93.06% / 50%); phone mask-size 100% 100%, 312px; mask-position 0 0, 50% 62px (page y 117-429). The 72px nav sits above and hides the circle's top 31px at 1440. The mask PNG MUST be an inline data URI: a file:// mask silently fails. The 118px headline (see type) overlaps the circle's left third.", "dont": "No rectangle or rounded photo in the hero, no gradient scrim, no green circle", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30" }, { "id": "stretched-black-hero", "name": "One stretched black headline, then a plain grotesque", "where": "hero vs everything else", "spec": "Only the hero h1 uses the ultra-wide 900 face (128px, three lines, last line italic and cycling). Every other headline is the normal-width heading face at 64px/800, centered, tight.", "dont": "Never use the wide hero face for section heads or cards", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "id": "color-cards-on-black", "name": "Saturated rounded cards on a black page", "where": "Reserved, Made for how you listen, crew sections", "spec": "1120x509 cards, 24px radius, 32px apart, each its own flat saturated ground (#576DD6, #0D72EA, #D64000, #7358FF, #CC2FAF, #088569) with frosted product UI art on the left and white text on the right. The page itself never changes from #121212.", "dont": "No gradients on the card grounds, no white or light sections anywhere", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "id": "green-pill", "name": "Green is the action", "where": "nav, hero, feature grid, plans", "spec": "#1ED760 appears as pill buttons with black 700 text, the Individual plan name/badge and the 4 feature-grid icons; nothing else is green.", "dont": "No green text links, no green section grounds", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" } ], "bands": [ { "label": "Locale bar", "ground": "#1D75DE", "content": "announcement", "desktop": "y 0-55, link left, close X right", "phone": "same, 55px", "anatomy": [ "Language suggestion, 12px white underlined link" ] }, { "label": "Nav", "ground": "#000000", "content": "nav", "desktop": "y 55-127: logo x 32, links right, green CTA ends x 1408", "phone": "y 55-109: icon, small green pill, hamburger", "anatomy": [ "Product links white, account links #D9DADC, 1x16 divider between" ] }, { "label": "Hero", "ground": "#121212", "content": "hero", "desktop": "y 127-1027: 128px headline over the icon-shaped video window", "phone": "circle on top, centered headline below", "anatomy": [ "See page.hero" ] }, { "label": "Manifesto", "ground": "#000000", "content": "statement", "desktop": "y 1027-1522 gradient spacer, y 1522-2051 solid rgba(0,0,0,0.75) band with the left-aligned 48px statement; hard edge at 2051", "phone": "x 32, 32px statement", "anatomy": [ "rgba(0,0,0,0.75) solid at the text; hard edge into Reserved, no fade back" ] }, { "label": "Introducing Reserved", "ground": "#121212", "content": "Centered section header + one periwinkle feature card", "desktop": "Reserved has its OWN 256px top padding on #121212, added after the manifesto band's 256px: band edge y 2051, h2 at y 2307. h2 64 centered, h3 24/300 centered 40px below; card 1120x509 at x 160, y 2533 (80px after the sub). Card #576DD6 radius 24 is two columns: an art column 636px wide with 48px left and right padding, holding the 540x509 ticket art at card x 48-588 (page x 208-748), native size, never scaled or cropped; then a 484px text column (card x 636-1120) with 32px side padding, so text starts at card x 668 (page x 828): eyebrow, title 2 lines, body 3 lines (315px), and 12px legal pinned 24px above the card bottom.", "phone": "Band padding-top 96px (h2 y 1943). h2 48 two lines, h3 24 three lines, 24px between. Card 358x530 at y 2250, radius 20: art area 358x288 with 24px top padding holding the art at 358x264, object-fit: contain (never cover: the tickets keep their periwinkle margin and the top ticket sits ~40px below the card top); text block below with 16px padding.", "anatomy": [ "Eyebrow: 16px Spotify icon + \"Premium\" 20/700", "Title \"Concert tickets, saved for real fans\" 32/700 in 2 lines" ] }, { "label": "Premium Individual feature grid", "ground": "#121212", "content": "Eyebrow + h2, four icon columns, two CTAs, fine print, floating 3D illustration", "desktop": "256px top gap. Eyebrow (icon + \"Premium Individual\" 20/700) centered, h2 64 \"With music that never stops\" directly under it; 80px; 4 columns 256px wide at x 160/448/736/1024: 48px green icon, label 20/700, body 16/300 (2-3 lines). 128px below: centered green pill + outline pill (16px gap), 12px #B3B3B3 fine print 3 lines centered (520px). Then a 320x320 3D illustration (supplied PNG, transparent) centered ~280px below, then 256px gap.", "phone": "Eyebrow and h2 centered (2 lines). Items stack in one column, left aligned at x 16: 24px icon, label, body; 40px between. CTAs stacked centered (190 wide), fine print, illustration 200px.", "anatomy": [ "Icons: ad-free (megaphone with x), lossless (sound bars), offline (download arrow in circle), any order (shuffle) - supplied SVGs, fill #1ED760" ] }, { "label": "Made for how you listen", "ground": "#121212", "content": "Centered header + three stacked feature cards", "desktop": "Header as Reserved (h2 + h3). Three 1120x509 cards stacked with 32px gaps: DJ (#0D72EA, eyebrow Premium, \"DJ spins tracks just for you\"), video (#D64000, \"Watch where you listen with just one tap\"), daylist (#7358FF, \"Soundtrack your mood with daylist\"). Art 636x509 flush left; text column x 860 (700px into the card), title only, vertically centered.", "phone": "Cards full width, art top, title bottom-left 32/700, 16px padding.", "anatomy": [ "Cards stack sticky while scrolling (animation only); resting = three cards one below another", "No body text on these three cards" ] }, { "label": "The best place to listen with your crew", "ground": "#121212", "content": "Centered header + two feature cards", "desktop": "h2 64 one line \"The best place to listen with your crew\" (1120 wide), h3 24/300. Cards: Jam (#CC2FAF, eyebrow Premium, 3-line title) and Blend (#088569, 2-line title), same geometry as above.", "phone": "h2 three lines; cards stack.", "anatomy": [] }, { "label": "Everything you love, right here", "ground": "#121212", "content": "Centered header + three dark-green content cards", "desktop": "h2 64 + h3 24/300 centered; 80px; three 352x340 cards (#035341, radius 24, padding 24) at x 160/544/928; 256px bottom padding.", "phone": "Cards stack full width (358x~320), 12px gaps, title 24/700.", "anatomy": [ "Fitness: eyebrow Premium, dumbbell icon", "Audiobooks: eyebrow Premium, open-book icon", "Podcasts: no eyebrow, podcast-mic icon", "Body at rgba(255,255,255,0.7), 16px, 2 lines" ] }, { "label": "Listen to Spotify anywhere", "ground": "#121212", "content": "Centered header + three staggered rounded photos with captions", "desktop": "h2 64 + body 24/400 one line. Three photos edge to edge: 437x327 at x 0 (bleeds off the left), 445x334 at x 457 dropped 115px, 518x368 at x 922 (bleeds off the right) dropped 9px; 16px radius. Under each, 8px gap, title 24/700 and 16/400 body (2 lines).", "phone": "h2 two lines; photos become a horizontal scroll row of 300px cards at x 16 / 340 / 664 (third clipped), caption 20/700 + 13px body.", "anatomy": [ "Titles: On the road, At home, On the go (in that left-to-right order)" ] }, { "label": "Shaping the big moments in music", "ground": "#121212", "content": "Left-aligned header + a horizontal marquee of event photos with captions", "desktop": "Header x 160: h2 64 one line, 24/300 sub. 80px below, a row of six uncropped photos of varying size (700x474, 607x405, 456x570, 340x600, 700x467, 320x400) with 32px gaps, top edges staggered within 150px, each with a 16px/300 white caption 8px below. Resting state: first photo starts at x -169 (clipped by the left edge) and the row runs off the right edge.", "phone": "Header x 16 three lines; row of photos about 240px tall, clipped both sides.", "anatomy": [ "Row scrolls continuously (animation only)", "Square corners on these photos" ] }, { "label": "The world is listening here (spotlight + plans)", "ground": "#121212", "content": "Full-width glowing-icon still, centered closing headline, the four plan cards, Audiobooks Access, sign-up link", "desktop": "A 1440x900 still of a glowing 3D Spotify icon (supplied) on #121212; the h2 64 \"The world is listening here.\" and 24/300 sub sit centered over its lower half (h2 at 544px into the image). Plans start 260px below the h2: 3 cards in a row (Individual, Student, Duo) at x 159/544/928, 353 wide; Family alone centered beneath, 32px gap. 230px below: Audiobooks Access centered (24/700 #C9E3DB title, 14px body 440 wide 3 lines, sage pill, 12px fine print), then 48px, \"Or sign up to Spotify for free.\" 14px underlined.", "phone": "Still crops to a 300px icon above the h2 (two lines). Plan cards stack full width (358), 24px apart. Audiobooks block 20/700 title, 13px body.", "anatomy": [ "Plan bullets: 16px white, 22px pitch, disc markers", "Prices verbatim: Individual $0 for 2 months then $12.99 / month after; Student $0 for 1 month then $6.99 / month after; Duo $18.99 / month; Family $21.99 / month" ] }, { "label": "Footer", "ground": "#000000", "content": "footer", "desktop": "y +80: logo, 4 columns, socials; legal row", "phone": "stacked columns", "anatomy": [ "Padding 80px top, 50px bottom; content x 163-1280", "Logo white full 96x32 at x 179, top aligned with the column heads (y +80)", "Columns at x 365 / 530 / 696 / 861: COMPANY: About, Jobs, For the Record; COMMUNITIES: For Artists, For Creators, For Authors, Developers, Advertising, Investors, Vendors; USEFUL LINKS: Support, Web Player, Free Mobile App, Import your music; SPOTIFY PLANS: Premium Individual, Premium Duo, Premium Family, Premium Student, Spotify Free, Audiobooks Access", "Heads 12/900 uppercase #919496 0.96px tracking, links 16/400 white, 40px pitch (long labels wrap at 125px)", "Socials: Instagram, X, Facebook in 54px #222326 circles at x 1068 / 1146 / 1224, top aligned with heads", "Bottom row at +463: legal links 12px #919496 from x 163, 16-24px apart: Legal, Safety & Privacy Center, Privacy Policy, Cookies, About Ads, Accessibility, Notice at Collection, Cookies Settings (with a small blue toggle glyph)", "Right: globe icon + \"USA\" 12px above \"© 2026 Spotify AB\" 12px #919496, right-aligned to x 1280" ] } ], "responsive": { "measured_at": [ 390, 1440 ], "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "prov": "observed", "rows": [ { "what": "hero headline", "values": { "390": "40px on the site (stand-in Unbounded 37px, -0.01em, scaleX 1.162), centered, 3 lines", "1440": "128px on the site (stand-in Unbounded 118px, -0.01em, scaleX 1.162), left, 3 lines" } }, { "what": "hero icon window", "values": { "390": "312px centered above the text", "1440": "763px right, behind the text" } }, { "what": "section headline", "values": { "390": "48px, 2-3 lines", "1440": "64px, 1 line" } }, { "what": "feature card", "values": { "390": "art on top, text below", "1440": "art left, text right, 1120x509" } }, { "what": "feature grid", "values": { "390": "1 column", "1440": "4 columns" } }, { "what": "plans", "values": { "390": "1 column", "1440": "3 + 1 centered" } }, { "what": "nav", "values": { "390": "icon + small CTA + hamburger, 54px", "1440": "full logo + links + CTA, 72px" } }, { "what": "page width", "values": { "390": "exactly 390: off-edge rows clipped", "1440": "exactly 1440: off-edge rows clipped" } } ] }, "motion": [ { "name": "button-press", "easing": "cubic-bezier(0.3, 0, 0, 1)", "duration_ms": 150, "use": "background-color and transform (scale up ~4%) on pill buttons", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Only the 150ms button press is measured; other easings/durations are our reading of the animation." }, { "name": "keyword-cycle", "easing": "ease-out", "duration_ms": 1500, "use": "hero third line slides up through music / artists / fans / live events / videos; resting state \"music\"", "prov": "inferred", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Only the 150ms button press is measured; other easings/durations are our reading of the animation.", "why": "Animation seen on the live page; duration and easing are our reading, not measured" }, { "name": "word-rise", "easing": "ease-out", "duration_ms": 600, "use": "manifesto words rise 80px and fade in on scroll; resting state fully visible", "prov": "inferred", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Only the 150ms button press is measured; other easings/durations are our reading of the animation.", "why": "Animation seen on the live page; duration and easing are our reading, not measured" }, { "name": "card-stack", "easing": "ease-out", "duration_ms": 600, "use": "feature cards stick and stack; resting state = stacked list", "prov": "inferred", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "note": "Only the 150ms button press is measured; other easings/durations are our reading of the animation.", "why": "Animation seen on the live page; duration and easing are our reading, not measured" } ], "icons": { "grid": "not published", "stroke": "Encore UI glyphs: 16px viewBox filled glyphs scaled to 48px (feature grid, #1ED760) and 88px line icons (content cards, #10B28E); 16px Spotify icon in eyebrows", "sizes": [ { "name": "s", "px": 16 }, { "name": "m", "px": 24 }, { "name": "l", "px": 48 }, { "name": "xl", "px": 88 } ], "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, "page": { "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "prov": "observed", "measured_page": "https://www.spotify.com/us/premium/ (the signed-out root www.spotify.com redirects into the web player, so the Premium marketing page is Spotify's homepage for this book)", "announcement": { "summary": "A 55px #1D75DE locale bar: \"Estados Unidos (Español)\" 12px white underlined at x 15, a 24px white close X at the right edge (x 1411). It is a language suggestion for US visitors and sits above the nav.", "ground": "#1D75DE", "height": 55 }, "nav": { "summary": "Black 72px bar, not sticky at rest: white full logo left, product links and account links right, green pill CTA at the far right.", "ground": "#000000", "height": { "desktop": 72, "phone": 54 }, "border": "none", "logo": { "variant": "white full logo (icon + wordmark)", "px": "118x32", "position": "x 32, vertically centered" }, "links": { "count": 5, "labels": [ "Premium plans (opens a dropdown, chevron-less)", "Support", "Download", "| (1x16px white divider)", "Sign up", "Log in", "Try 2 months for $0 (green pill)" ], "size": 16, "weight": 700, "color": "#FFFFFF for Premium plans / Support / Download, #D9DADC for Sign up / Log in", "alignment": "right group: Premium plans x 614, Support x 764, Download x 865, divider x 982, Sign up x 1022, Log in x 1118, CTA x 1202-1408" }, "actions": "CTA pill \"Try 2 months for $0\" 206x38", "sticky": false, "phone": "Icon only (white, 32px) at x 16; green CTA pill 156x28 (14px text) right of center ending at x 343; hamburger (3 white bars, 24px) at x 352." }, "hero": { "summary": "The Spotify icon cut out of a #121212 layer reveals a full-bleed video; a 128px ultra-wide white headline overlaps it on the left, then an offer timer, two pill CTAs and fine print.", "desktop": "Hero box y 127-1027 (900 tall, 100px padding). h1 lines at y 248 / 401 / 554 (153px pitch), x 100, 1240 max width: \"The ultimate\" / \"home for\" / italic keyword. Circle cut-out 763px, x 630-1393, y 96-859. Timer at y 715 (x 100, 161x28). CTAs at y 767: green 206x48 at x 100, outline 167x48 at x 322. Fine print y 839, 300px wide, 4 lines 12px #B3B3B3. Pause button 48px circle at x 1372, y 832.", "phone": "Hero box y 109-953. The icon window is a 312px circle centered (x 39-351) at y 117-429, so it starts 8px below the nav; there is no video outside the circle on phone (solid #121212 around it). h1 centered, 3 lines at y 430 (48px pitch): the site sets 40px; the stand-in is Unbounded 37px, -0.01em, scaleX(1.162) from the center; timer centered y 582; CTAs stacked and centered: green 190x48 at y 630, outline 151x48 at y 690; fine print centered 300px at y 750 (3 lines); pause 32px at x 342 y 792. Phone fine print breaks exactly: \"Premium Individual only. Free for 2 months, then $12.99 per\" / \"month after. Offer only available if you haven't tried Premium\" / \"before. Terms apply. Offer ends November 1, 2026.\" (3 lines; if Hanken wraps to 4, set letter-spacing -0.02em on this paragraph). Desktop (300px, 4 lines): \"... then $12.99\" / \"per month after. Offer only available if you haven't tried\" / \"Premium before. Terms apply. Offer ends November 1,\" / \"2026.\"", "at_rest": "Video paused on the supplied frame; keyword line reads \"music\" (it cycles music / artists / fans / live events / videos, animation only).", "media": "hero-frame.jpg (object-fit: cover) in a media layer at x 0, y 55 (directly under the locale bar, NOT under the nav), 1440x845 at desktop / 390x789 at phone. On the live site this layer is position: fixed; build it position: absolute at page y 55 (its resting, top-of-page state). Over it, a #121212 div of the same box with the icon cut out (see signature logo-mask-hero). The 72px nav (z-index above) covers the circle's top 31px at 1440. Load the mask PNG as an inline data: URI (base64), never a file:// URL: a CSS mask from file:// is blocked as cross-origin and the hero renders as a flat #121212 box.", "type": "h1 128/900 display face, white; keyword italic", "cta": "Try 2 months for $0 + View all plans", "proof": "none" }, "sections": [ { "name": "Manifesto", "summary": "Big left-aligned statement that fades in on scroll under the hero", "ground": "Two parts. (1) Spacer 495px (422px phone) directly under the hero box: background linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75)) over #121212. (2) The text band: solid rgba(0,0,0,0.75) over #121212 (renders near-black), padding 16px 16px 256px (16px 16px 160px phone). It ENDS WITH A HARD EDGE onto the #121212 Reserved band. Never fade back to #121212.", "desktop": "Spacer y 1027-1522 (495px). Text band y 1522-2051: statement at x 88, y 1538, Bricolage 48/400 -0.02em, 2 lines in 822px; body 32/300 at y 1698, 3 lines, 709px. 256px bottom padding inside the band, then the hard edge at y 2051.", "phone": "Spacer y 953-1375 (422px). Text band y 1375-1847: statement x 32, y 1391, Bricolage 32/400, 4 lines in 326px; body 24/300 at y 1591, 4 lines; 160px bottom padding, hard edge at y 1847.", "anatomy": [ "Resting state = fully visible (words animate up 80px and fade in; animation only)", "Left aligned, not centered, unlike every later header", "Copy, verbatim from the page: h2: As the world's music hub, Spotify is where fans and artists come together. | body: It's the place to discover the perfect song for the moment. The place that brings music to your whole life." ], "components": [], "copy": [ "h2: As the world's music hub, Spotify is where fans and artists come together.", "body: It's the place to discover the perfect song for the moment. The place that brings music to your whole life." ] }, { "name": "Introducing Reserved", "summary": "Centered section header + one periwinkle feature card", "ground": "#121212", "desktop": "Reserved has its OWN 256px top padding on #121212, added after the manifesto band's 256px: band edge y 2051, h2 at y 2307. h2 64 centered, h3 24/300 centered 40px below; card 1120x509 at x 160, y 2533 (80px after the sub). Card #576DD6 radius 24 is two columns: an art column 636px wide with 48px left and right padding, holding the 540x509 ticket art at card x 48-588 (page x 208-748), native size, never scaled or cropped; then a 484px text column (card x 636-1120) with 32px side padding, so text starts at card x 668 (page x 828): eyebrow, title 2 lines, body 3 lines (315px), and 12px legal pinned 24px above the card bottom.", "phone": "Band padding-top 96px (h2 y 1943). h2 48 two lines, h3 24 three lines, 24px between. Card 358x530 at y 2250, radius 20: art area 358x288 with 24px top padding holding the art at 358x264, object-fit: contain (never cover: the tickets keep their periwinkle margin and the top ticket sits ~40px below the card top); text block below with 16px padding.", "anatomy": [ "Eyebrow: 16px Spotify icon + \"Premium\" 20/700", "Title \"Concert tickets, saved for real fans\" 32/700 in 2 lines", "Copy, verbatim from the page: h3: Get exclusive access to live shows near you, with the artists you love most. | card body: With Reserved, you can get exclusive access to select tours for your favorite artists. | card legal: Limited eligibility; tickets not guaranteed; select tours; purchase required. Terms apply." ], "components": [ "feature_card" ], "copy": [ "h3: Get exclusive access to live shows near you, with the artists you love most.", "card body: With Reserved, you can get exclusive access to select tours for your favorite artists.", "card legal: Limited eligibility; tickets not guaranteed; select tours; purchase required. Terms apply." ] }, { "name": "Premium Individual feature grid", "summary": "Eyebrow + h2, four icon columns, two CTAs, fine print, floating 3D illustration", "ground": "#121212", "desktop": "256px top gap. Eyebrow (icon + \"Premium Individual\" 20/700) centered, h2 64 \"With music that never stops\" directly under it; 80px; 4 columns 256px wide at x 160/448/736/1024: 48px green icon, label 20/700, body 16/300 (2-3 lines). 128px below: centered green pill + outline pill (16px gap), 12px #B3B3B3 fine print 3 lines centered (520px). Then a 320x320 3D illustration (supplied PNG, transparent) centered ~280px below, then 256px gap.", "phone": "Eyebrow and h2 centered (2 lines). Items stack in one column, left aligned at x 16: 24px icon, label, body; 40px between. CTAs stacked centered (190 wide), fine print, illustration 200px.", "anatomy": [ "Icons: ad-free (megaphone with x), lossless (sound bars), offline (download arrow in circle), any order (shuffle) - supplied SVGs, fill #1ED760", "Copy, verbatim from the page: Ad-free music listening: All the music, without all the ads. Just nonstop beats. | Lossless music: Lose yourself in music with sound quality up to 24-bit/44.1 kHz. | Offline listening: Download thousands of songs, or let Offline Backup do it automatically. | Play songs in any order: Repeat songs, play albums in any order, and skip as many times as you want. | fine print (also under the hero CTAs and on the Individual card): Premium Individual only. Free for 2 months, then $12.99 per month after. Offer only available if you haven't tried Premium before. Terms apply. Offer ends November 1, 2026." ], "components": [ "button_primary", "button_outline" ], "copy": [ "Ad-free music listening: All the music, without all the ads. Just nonstop beats.", "Lossless music: Lose yourself in music with sound quality up to 24-bit/44.1 kHz.", "Offline listening: Download thousands of songs, or let Offline Backup do it automatically.", "Play songs in any order: Repeat songs, play albums in any order, and skip as many times as you want.", "fine print (also under the hero CTAs and on the Individual card): Premium Individual only. Free for 2 months, then $12.99 per month after. Offer only available if you haven't tried Premium before. Terms apply. Offer ends November 1, 2026." ] }, { "name": "Made for how you listen", "summary": "Centered header + three stacked feature cards", "ground": "#121212", "desktop": "Header as Reserved (h2 + h3). Three 1120x509 cards stacked with 32px gaps: DJ (#0D72EA, eyebrow Premium, \"DJ spins tracks just for you\"), video (#D64000, \"Watch where you listen with just one tap\"), daylist (#7358FF, \"Soundtrack your mood with daylist\"). Art 636x509 flush left; text column x 860 (700px into the card), title only, vertically centered.", "phone": "Cards full width, art top, title bottom-left 32/700, 16px padding.", "anatomy": [ "Cards stack sticky while scrolling (animation only); resting = three cards one below another", "No body text on these three cards", "Copy, verbatim from the page: h3: Where new music finds you first, and fandom goes deeper." ], "components": [ "feature_card" ], "copy": [ "h3: Where new music finds you first, and fandom goes deeper." ] }, { "name": "The best place to listen with your crew", "summary": "Centered header + two feature cards", "ground": "#121212", "desktop": "h2 64 one line \"The best place to listen with your crew\" (1120 wide), h3 24/300. Cards: Jam (#CC2FAF, eyebrow Premium, 3-line title) and Blend (#088569, 2-line title), same geometry as above.", "phone": "h2 three lines; cards stack.", "anatomy": [ "Copy, verbatim from the page: h3: Your friends and family are already here. Collaborating, sharing, and listening together." ], "components": [ "feature_card" ], "copy": [ "h3: Your friends and family are already here. Collaborating, sharing, and listening together." ] }, { "name": "Everything you love, right here", "summary": "Centered header + three dark-green content cards", "ground": "#121212", "desktop": "h2 64 + h3 24/300 centered; 80px; three 352x340 cards (#035341, radius 24, padding 24) at x 160/544/928; 256px bottom padding.", "phone": "Cards stack full width (358x~320), 12px gaps, title 24/700.", "anatomy": [ "Fitness: eyebrow Premium, dumbbell icon", "Audiobooks: eyebrow Premium, open-book icon", "Podcasts: no eyebrow, podcast-mic icon", "Body at rgba(255,255,255,0.7), 16px, 2 lines", "Copy, verbatim from the page: h3: Dive into audiobooks, podcasts, and workouts too, all in one place. | Fitness: Take your workouts further with 1.4k additional classes, powered by Peloton. | Audiobooks: Discover over 700,000 titles available in our audiobooks subscriber catalog. | Podcasts: Watch and listen to millions of shows across topics for every listener." ], "components": [ "content_card" ], "copy": [ "h3: Dive into audiobooks, podcasts, and workouts too, all in one place.", "Fitness: Take your workouts further with 1.4k additional classes, powered by Peloton.", "Audiobooks: Discover over 700,000 titles available in our audiobooks subscriber catalog.", "Podcasts: Watch and listen to millions of shows across topics for every listener." ] }, { "name": "Listen to Spotify anywhere", "summary": "Centered header + three staggered rounded photos with captions", "ground": "#121212", "desktop": "h2 64 + body 24/400 one line. Three photos edge to edge: 437x327 at x 0 (bleeds off the left), 445x334 at x 457 dropped 115px, 518x368 at x 922 (bleeds off the right) dropped 9px; 16px radius. Under each, 8px gap, title 24/700 and 16/400 body (2 lines). Each caption block (title 24/700 Hanken, body 16/450) is inset 16px from its photo's left edge (padding-left 16px); 8px below the photo.", "phone": "h2 two lines; photos become a horizontal scroll row of 300px cards at x 16 / 340 / 664 (third clipped), caption 20/700 + 13px body.", "anatomy": [ "Titles: On the road, At home, On the go (in that left-to-right order)", "Copy, verbatim from the page: sub: Spotify is compatible with over 2,000 devices. So wherever you listen, your music is right there. | On the road: Connect Spotify to Apple CarPlay, Android Auto, or your car's built-in system and listen hands-free. | At home: Listen on smart speakers, your TV, game console, and more. Plus switch between devices without missing a beat. | On the go: Spotify runs on smartwatches and wearables, so your music comes with you without your phone having to." ], "components": [], "copy": [ "sub: Spotify is compatible with over 2,000 devices. So wherever you listen, your music is right there.", "On the road: Connect Spotify to Apple CarPlay, Android Auto, or your car's built-in system and listen hands-free.", "At home: Listen on smart speakers, your TV, game console, and more. Plus switch between devices without missing a beat.", "On the go: Spotify runs on smartwatches and wearables, so your music comes with you without your phone having to." ] }, { "name": "Shaping the big moments in music", "summary": "Left-aligned header + a horizontal marquee of event photos with captions", "ground": "#121212", "desktop": "Header x 160: h2 at y 10408, one line; sub one line at y 10525. 80px below, a row of six uncropped photos with 32px gaps, in this order with these sizes and top offsets (px below the row top): Miley Cyrus 700x474 at x -169 (+145), Shaboozey 607x405 at x 563 (+107), Selena & Benny 456x570 at x 1202 (+0), Clipse 340x600 at x 1690 (+0, off-screen), Marshmello 700x467 (+76), Addison Rae 320x400 (+0). Each has its caption 16px/300 white (heading face), 8px below, max the photo width. Square corners. The row runs off both edges; resting = this offset. The row spans y 10634-11288; the spotlight still starts 250px below it (y 11538).", "phone": "Header x 16 three lines; row of photos about 240px tall, clipped both sides.", "anatomy": [ "Captions verbatim: Miley Cyrus celebrates her greatest hits at Billions Club Live in Paris. | Shaboozey electrifying the Spotify House stage during CMA Fest this year. | Selena Gomez and Benny Blanco discuss making their album on an episode of Spotify's Countdown To. | Marking the countdown to Clipse's new album with an exclusive video. | Marshmello pumping up the crowd at Spotify House in Nashville. | Celebrating Addison Rae's new album with her top listeners on Spotify.", "Row scrolls continuously (animation only)" ], "components": [], "copy": [ "h3: Spotify is where music breaks and culture moves. Be here when history hits play." ] }, { "name": "The world is listening here (spotlight + plans)", "summary": "Full-width glowing-icon still, centered closing headline, the four plan cards, Audiobooks Access, sign-up link", "ground": "#121212", "desktop": "A 1440x900 still of a glowing 3D Spotify icon (supplied) on #121212; the h2 64 \"The world is listening here.\" and 24/300 sub sit centered over its lower half (h2 at 544px into the image). Plans start 260px below the h2: 3 cards in a row (Individual, Student, Duo) at x 159/544/928, 353 wide; Family alone centered beneath, 40px gap. 230px below: Audiobooks Access centered (24/700 #C9E3DB title, 14px body 440 wide 3 lines, sage pill, 12px fine print), then 48px, \"Or sign up to Spotify for free.\" 14px underlined.", "phone": "Still crops to a 300px icon above the h2 (two lines). Plan cards stack full width (358), 24px apart. Audiobooks block 20/700 title, 13px body.", "anatomy": [ "Plan bullets: 16px white, 22px pitch, disc markers", "Prices verbatim: Individual $0 for 2 months then $12.99 / month after; Student $0 for 1 month then $6.99 / month after; Duo $18.99 / month; Family $21.99 / month", "Copy, verbatim from the page: h3: Join the party with Premium. | Individual card: badge \"$0 for 2 months\"; price \"$0 for 2 months\"; sub \"$12.99 / month after\"; bullets: 1 Premium account / 15 hours/month of listening time from our audiobooks subscriber catalog / Cancel anytime; button \"Try 2 months for $0\"; fine print as the hero (5 lines centered). | Student card: badge \"$0 for 1 month\"; price \"$0 for 1 month\"; sub \"$6.99 / month after\"; bullets: 1 verified Premium account / Discount for eligible students / Access to Hulu / Cancel anytime; button \"Try 1 month for $0\"; fine print: $0 for 1 month, then $6.99 per month after. Spotify Premium Student offer currently includes access to Hulu plan on us, subject to eligibility. Offer available only to students at an eligible accredited higher education institution and if you haven't tried Premium before. Terms apply. | Duo card (no badge; content starts 16px from the top): price \"$18.99 / month\"; bullets: 2 Premium accounts / 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only) / Cancel anytime; button \"Get Premium Duo\"; fine print: For couples who reside at the same address. Terms apply. | Family card (no badge): price \"$21.99 / month\"; bullets: Up to 6 Premium accounts / Parental controls over all plan members / 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only) / Plan members under 13 get Premium benefits / Cancel anytime; button \"Get Premium Family\"; fine print: For up to 6 family members residing at the same address. Terms apply. | Audiobooks Access: Get 15 hours/month of audiobook listening time from our audiobooks subscriber catalog. Your music listening experience will be on our free, ad-supported service. / button \"Learn more\" / Audiobooks Access plan only. Terms apply. / link \"Or sign up to Spotify for free.\"" ], "components": [ "plan_card", "plan_badge", "button_plan", "button_sage" ], "copy": [ "h3: Join the party with Premium.", "Individual card: badge \"$0 for 2 months\"; price \"$0 for 2 months\"; sub \"$12.99 / month after\"; bullets: 1 Premium account / 15 hours/month of listening time from our audiobooks subscriber catalog / Cancel anytime; button \"Try 2 months for $0\"; fine print as the hero (5 lines centered).", "Student card: badge \"$0 for 1 month\"; price \"$0 for 1 month\"; sub \"$6.99 / month after\"; bullets: 1 verified Premium account / Discount for eligible students / Access to Hulu / Cancel anytime; button \"Try 1 month for $0\"; fine print: $0 for 1 month, then $6.99 per month after. Spotify Premium Student offer currently includes access to Hulu plan on us, subject to eligibility. Offer available only to students at an eligible accredited higher education institution and if you haven't tried Premium before. Terms apply.", "Duo card (no badge; content starts 16px from the top): price \"$18.99 / month\"; bullets: 2 Premium accounts / 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only) / Cancel anytime; button \"Get Premium Duo\"; fine print: For couples who reside at the same address. Terms apply.", "Family card (no badge): price \"$21.99 / month\"; bullets: Up to 6 Premium accounts / Parental controls over all plan members / 15 hours/month of listening time from our audiobooks subscriber catalog (plan manager only) / Plan members under 13 get Premium benefits / Cancel anytime; button \"Get Premium Family\"; fine print: For up to 6 family members residing at the same address. Terms apply.", "Audiobooks Access: Get 15 hours/month of audiobook listening time from our audiobooks subscriber catalog. Your music listening experience will be on our free, ad-supported service. / button \"Learn more\" / Audiobooks Access plan only. Terms apply. / link \"Or sign up to Spotify for free.\"" ] } ], "footer": { "summary": "Black footer: logo left, four link columns, three round socials right, legal row and copyright at the bottom.", "ground": "#000000", "anatomy": [ "Padding 80px top, 50px bottom; content x 163-1280", "Logo white full logo 96px wide (renders 96x26; the measured 32px box includes padding) at x 179, top aligned with the column heads (y +80)", "Columns at x 365 / 530 / 696 / 861: COMPANY: About, Jobs, For the Record; COMMUNITIES: For Artists, For Creators, For Authors, Developers, Advertising, Investors, Vendors; USEFUL LINKS: Support, Web Player, Free Mobile App, Import your music; SPOTIFY PLANS: Premium Individual, Premium Duo, Premium Family, Premium Student, Spotify Free, Audiobooks Access", "Heads 12/900 uppercase #919496 0.96px tracking, links 16/400 white, 40px pitch (long labels wrap at 125px)", "Socials: Instagram, X, Facebook in 54px #222326 circles at x 1068 / 1146 / 1224, top aligned with heads", "Bottom row at +463: legal links 12px #919496 from x 163, 16-24px apart: Legal, Safety & Privacy Center, Privacy Policy, Cookies, About Ads, Accessibility, Notice at Collection, Cookies Settings (with a small blue toggle glyph)", "Right: globe icon + \"USA\" 12px above \"© 2026 Spotify AB\" 12px #919496, right-aligned to x 1280" ], "phone": "Logo at x 20, columns stack (head then links, 32px between groups), socials row of three 40px circles, legal links wrap into 3 lines, copyright below." }, "dark_ground": { "secondary_button": "transparent pill, 1px #7F7F7F border, white 16/700 text", "link": "white, underlined", "muted_text": "#B3B3B3", "hairline": "rgba(255,255,255,0.1)", "logo_variant": "white full logo (the green logo is published for black or white grounds only; the site uses white)" }, "checkpoints": { "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-30", "note": "Page-y of each section's first line on the live page (top of the h2 box unless named). Use these to set padding; your build must land each within 24px. Page heights: 14651 at 1440, 15094 at 390. Measured at the top-of-page resting state (after a slow scroll, back at the top), the state of the reference capture. Round 3's Shaping value (10698) was a scrolled state and was wrong; it is 10408.", "desktop_1440": { "hero h1": 248, "manifesto statement": 1538, "manifesto band ends (hard edge)": 2051, "Introducing Reserved h2": 2307, "Reserved card top": 2533, "Premium Individual eyebrow": 3298, "With music that never stops h2": 3322, "Made for how you listen h2": 4707, "The best place to listen with your crew h2": 6780, "Everything you love h2": 8216, "Listen to Spotify anywhere h2": 9262, "Shaping the big moments h2": 10408, "Moments photo row top": 10634, "Moments photo row bottom (tallest photo + caption)": 11288, "Spotlight still top (900 tall)": 11538, "The world is listening here h2": 12082, "plan names (Individual / Student)": 12425, "Family name": 12937, "Audiobooks Access title": 13594, "footer top": 14104, "page bottom": 14651 }, "phone_390": { "hero h1": 430, "spacer (gradient) starts": 953, "manifesto band starts": 1375, "manifesto statement": 1391, "manifesto band ends (hard edge)": 1847, "Introducing Reserved h2": 1943, "Reserved card top": 2250, "With music that never stops h2": 2900, "Made for how you listen h2": 4206, "The best place to listen with your crew h2": 6128, "Everything you love h2": 7613, "Listen to Spotify anywhere h2": 8995, "Shaping the big moments h2": 9799, "spotlight still (390x366)": 10709, "The world is listening here h2": 10949, "first plan card top": 11163, "Audiobooks Access title": 13258, "footer top": 13767, "page bottom": 15094 }, "band_gaps_1440": { "note": "The gaps are not all 256. Measured edge to edge at 1440:", "manifesto band edge -> Reserved h2": 256, "Reserved card bottom -> Premium Individual eyebrow": 256, "Made for: last card bottom -> crew h2": 256, "crew: last card bottom -> Everything h2": 160, "content cards bottom -> Anywhere h2": 512, "Anywhere captions bottom -> Shaping h2": 378, "Moments row bottom -> spotlight still top": 250, "Audiobooks sign-up link -> footer": 230 } } } }, "system": { "fixed": [ "#121212 ground for every band, #000000 nav and footer", "Green #1ED760 only on action pills (and the Individual plan accent)", "White full logo in the nav, green logo only on black or white", "One ultra-wide hero headline; 64px centered section heads", "Pill buttons, 24px card corners" ], "flex": "which saturated color each feature card takes", "traits": [ { "is": "Fan-first", "not": "Corporate", "text": "Headlines talk about how you listen and your crew.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "is": "Colorful", "not": "Monochrome", "text": "The guide asks for surprising color combinations.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" }, { "is": "Recognizable", "not": "Anonymous", "text": "Green is the resting color when the voice must be known.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors" }, { "is": "Exact about offers", "not": "Vague", "text": "Every price CTA is followed by its eligibility line.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" } ] }, "proportion": { "note": "Not published. Our reading of the Premium page at 1440: near-black ground dominates, saturated card colors next, white type, green only on actions.", "source": "https://www.spotify.com/us/premium/", "prov": "inferred", "why": "Estimated from band areas measured on 2026-10-29, not a published ratio", "parts": [ { "name": "Black", "hex": "#121212", "n": 70 }, { "name": "Card colors", "hex": "#7358FF", "n": 18 }, { "name": "White type", "hex": "#FFFFFF", "n": 9 }, { "name": "Green", "hex": "#1ED760", "n": 3 } ] }, "tone_by_state": { "note": "Two voices. The partner guide is precise and rule-bound; the Premium page is warm and fan-centred. Levels are our reading.", "source": "https://www.spotify.com/us/premium/", "states": [ { "state": "Partner guidelines", "level": 1 }, { "state": "Premium marketing page", "level": 3 } ] }, "formats": [ { "format": "Landing page", "level": 3, "must": "Locale bar optional; black 72px nav with white full logo, product links, one green pill; #121212 hero with a 128px ultra-wide white headline over an icon-shaped photo window; centered 64px section heads with 24/300 subs and 256px gaps; full-width 24px-radius feature cards in flat saturated colors; green pill CTAs with fine print; black footer with four uppercase-headed columns and round socials", "flex": "which feature cards and which photos follow the hero" }, { "format": "Deck", "level": 3, "must": "#121212 slides, white Mix-style heads, one saturated color per slide, green only for the ask", "flex": "photo vs UI art" }, { "format": "Social post", "level": 4, "must": "One saturated ground, white type, logo per colorway rule", "flex": "color combination" }, { "format": "Partner UI", "level": 1, "must": "Full logo attribution, unaltered artwork with 4px/8px corners, link labels per guide", "flex": "layout" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the logo. It should still read as Spotify: a #121212 page, a green pill, a wide black headline and saturated rounded cards." }, { "name": "Swap test", "text": "Put another company's name on it. If nothing else changed, the icon-window hero, green-only actions and card colors are missing." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Try 2 months for $0", "button": true }, "do_caption": "On #121212, the action is a green pill with black text.", "dont": { "ground": "paper", "text": "Try 2 months for $0", "ink": "accent" }, "dont_caption": "Green is for actions, not for body text or links." }, { "chapter": "logo", "do": { "ground": "night", "text": "Spotify" }, "do_caption": "White logo on dark grounds; green only on black or white.", "dont": { "ground": "accent_secondary", "text": "Spotify", "ink": "accent" }, "dont_caption": "Never the green logo on a colored ground." }, { "chapter": "voice", "do": { "ground": "paper", "text": "Made for how you listen" }, "do_caption": "Sentence case, about the listener.", "dont": { "ground": "paper", "text": "The Most Advanced Audio Platform" }, "dont_caption": "No title case, no superlative claims." }, { "chapter": "type", "do": { "ground": "paper", "text": "The ultimate home for music" }, "do_caption": "The wide black cut for the one hero line.", "dont": { "ground": "paper", "text": "With music that never stops" }, "dont_caption": "Section heads stay in the normal-width face." } ], "make_it_yours": { "note": "Everything above transfers. These are Spotify's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "To deliver creativity to the world, one note, one voice, one idea at a time.", "prov": "published", "source": "https://newsroom.spotify.com/company-info/", "use": "Corporate line: never use it in landing-page copy. Page copy is the listener-benefit lines in the anatomy." }, "story": { "text": "The partner guide states the shift: a more colorful brand language, with Spotify Green kept as the resting color for when the voice must be recognizable.", "prov": "published", "source": "https://developer.spotify.com/documentation/design#using-our-colors", "paraphrase": true }, "values": [] }, "positioning": { "statement": { "text": "Spotify is the world's most popular audio streaming subscription service, with music, podcasts and audiobooks.", "prov": "published", "source": "https://newsroom.spotify.com/company-info/", "paraphrase": true }, "category": { "text": "Audio and video streaming: music, podcasts, audiobooks, live events.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, "audience": { "text": "Listeners deciding on Premium; the page also speaks to fans of live music and families.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, "promise": { "text": "Spotify is where fans and artists come together.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29", "paraphrase": false }, "differentiators": [ { "text": "Lossless sound up to 24-bit/44.1 kHz in Premium", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "text": "Compatible with over 2,000 devices", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "text": "Social listening: Jam and Blend", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" } ] }, "messaging": { "taglines": [ { "text": "The ultimate home for music", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "where": "Premium page H1 (cycling keyword)", "date": "2026-10-29" }, { "text": "The world is listening here.", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "where": "closing H2", "date": "2026-10-29" } ], "attributes": [ "Fan-first", "Social", "Bold in color", "Plainspoken about offers" ], "key_messages": [ { "text": "Ad-free, lossless, offline, any order", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "text": "Live events and concert tickets with Reserved", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" } ], "boilerplate": { "text": "Launched in 2008; the world's most popular audio streaming subscription service, with 788 million users and 306 million subscribers in 184 markets (company-info page, read 2026-10-29).", "prov": "published", "source": "https://newsroom.spotify.com/company-info/", "paraphrase": true }, "pillars": [ { "name": "Listen your way", "claim": "Premium features: ad-free, lossless, offline, any order", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Made for how you listen", "claim": "DJ, video, daylist", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Listen together", "claim": "Jam and Blend", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "name": "Everywhere", "claim": "Car, home, wearables", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" } ], "proof_points": [ { "text": "Over 2,000 compatible devices", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "text": "Over 700,000 audiobook titles in the subscriber catalog", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" } ], "claim_boundaries": [ { "text": "A price or free-trial offer without its eligibility fine print and \"Terms apply\" directly under the CTA", "prov": "observed", "source": "https://www.spotify.com/us/premium/", "date": "2026-10-29" }, { "text": "Endorsement of, or co-branding with, another brand", "prov": "published", "source": "https://developer.spotify.com/documentation/design#logos-and-naming-restrictions" } ] } } } }