---
title: "BRAND Starbucks 2026 · Page: landing-campaign"
url: https://memocore.ai/memos/6ab9efe7af51aac421da8b14
project: "Brand Styles"
tags: "brand-starbucks"
updated_at: "2026-09-28T04:45:39.147Z"
---

# BRAND Starbucks 2026 · Page: landing-campaign

HEADER
brand: Starbucks; design_date: 2026-09; page_type: landing-campaign (loyalty program landing, /rewards); variants: other NGL-styled marketing pages (inf)
example_urls: https://www.starbucks.com/rewards; evidence: measured from coreApp.ebe831e7d69e573d5e2d.css (NGL tokens), patternLibStyles and computed styles 2026-09-28 at 1440x900 and 390x844 unless marked
purpose: explain the program and get sign-ups ("Join now")
skeleton: centered column 1264px (--nglColumnWidth), 9 sections + footer, total height ~6720px desktop, ~8270px mobile; sidebar: none
overrides: page background #fffcf7 (surfacePrimary1); headings #2c3d28, body #474542; header active item Rewards (6px green bar); cards use 24-40px radii (bigger than the main site 12px)

SECTIONS
S1 header - as Overview, Rewards active

S2 hero / split-media-right - promise and sign-up
  background: #f3e9d9; height: 675px desktop; padding: 48px 20px (lg-py7 lg-px5), 64px 0 mobile (py9)
  layout: row centered at >=1024 (text column + image column), column on mobile; text centered
  elements: eyebrow H1 "Starbucks® Rewards" 19px 700 caps, letter-spacing 1.9px (0.1em), #7a5231, margin-bottom 16px; H2 50px/60px 700, letter-spacing 2px, #2c3d28, max width 616px (28px/33.6px mobile); paragraph 19px/28.5px #1e3932, max width 488px, padding 24px 16px; filled green pill "Join now" 16px, 35px tall; image column 448px wide, image aspect 1:1.29 (max height 579px), cup of iced coffee with a large rounded arch crop (est)
  copy: H2 "Free coffee is just the beginning" (6 words); body "Join now to start enjoying exclusive benefits and unlocking more of what you love." (14 words)
  responsive: mobile stacks text first, image below (margin-top 40px)

S3 how it works / feature-grid 3 cols - steps
  background: #fffcf7; width 1264px; padding 64px 0 20px (pt9 pb5; lg-py9)
  elements: H2 "How it works" 28px 700 #2c3d28 centered; sub 14-16px #474542 ("Start sipping your way to delicious Rewards."); 3 items 425px wide with 24px gap: square line-illustration icon (~64px, est), H3 16-19px 700 ("Collect Stars", "Enjoy free treats", "Unlock benefits"), p 14-16px #474542 centered
  responsive: items stack in one column below 1024

S4 membership tiers / cards 3 cols - status levels
  padding 64px 0; H2 "Get rewarded for your routine" 28px 700; sub "As your status grows, so do your benefits." 14-16px
  cards: 3 cards 411x654px, gap 16px, radius 32px, overflow hidden, padding 40px 24px 72px (lg-pt6 lg-px4), text 600 centered head:
    Green status: bg #006242, text #f7f0e4
    Gold status: bg #cba258, text #2c3d28
    Reserve status: bg #171717, text #f7f0e4
    inside: H3 24-28px 700 ("Green status"), sub "Less than 500★ earned each year" 14-16px, then 6-10 benefit rows: 24px check icon + 14px text, left aligned, 16px apart; a decorative leaf/texture image pinned to the bottom
  responsive: mobile shows the cards in a horizontal row (319x602px each, 16px gap) that scrolls sideways (inf)

S5 redeemable treats / tabs - what stars buy
  Recipe reward-tabs (cream box #f3e9d9 radius 24px, six star tabs, panel #f1ece4)

S6 partnerships / cards 2 cols - linked accounts
  elements: H2 "Partnerships" 28px 700; sub 14-16px; 2 cards 411px wide, bg #f1ece4, radius 32px, padding 24px, gap 16px, centered: partner logo image (max height 96px), text 14-16px #474542 with a footnote superscript, outline-green pill "View details" with an 18px external-link icon (hover bg rgba(0,117,74,0.1))
  responsive: cards stack on mobile (<768)

S7 get started / cta card - sign-up paths
  card: bg #f3e9d9, radius 40px (>=768; 0 on mobile), padding 80px 24px (md 40px sides), row at >=1024 with image left and content right
  elements: square illustration (inf), H2 "Free to join, easy to get started" 28px 700; line "or Join now / download the app" with green 600 links (#006241); 3 steps 115x124 each (72px icon, H3 14-16px 700: "Create an account", "Order and pay your way", "Earn Stars, get Rewards"), gap 48px (>=1024)

S8 FAQs / text - help link
  H2 "Questions?" 28px 700 centered; p "We have answers. Check out the FAQs" with a green 600 external link

S9 download app / split - app promo
  background: #e8e8d5 (surfacePrimary5), full width; at >=1024 row with 136px gap, padding 72px 88px
  elements: H2 "It's even better in the app" 28px 700; p 16px #474542; QR code image (~120px); photo of a phone and drinks on a table (rounded, est)

S10 terms / rich-text - program terms
  background: #f9f9f9; padding 40px 0 64px (pt6 pb9 + py6); text 13-14px rgba(0,0,0,0.87); H3 14-16px 600 rgba(0,0,0,0.58) ("Earn Rate", "Redeeming Rewards", "Birthday Reward"); two columns at >=768 (md-size6of12 with 40px gap); disc lists; green underlined links

S11 footer - as Overview

PAGE COMPONENTS
tier card, partner card, action step (above); star glyph "★" always followed by a visually hidden "Stars"

INTERACTIONS
reward tabs (Recipe reward-tabs); external links open in a new window with an 18px icon

STATES
signed-in users see a different page (star balance) (inf)

SCREENSHOTS
- file: starbucks_2026_rewards_d1440_full.jpg
  shows: full page at 1440 (6721px), live https://www.starbucks.com/rewards 2026-09-28, cookie banner hidden
  key values: hero #f3e9d9 675px; H2 50px 700 #2c3d28; tier cards 411x654 radius 32 (#006242, #cba258, #171717); tabs box #f3e9d9 radius 24; partner cards #f1ece4 radius 32; app band #e8e8d5; terms #f9f9f9
  do not copy: photos, illustrations, partner logos, QR code; use placeholders
- file: starbucks_2026_rewards_m390_full.jpg
  shows: full page at 390 (8268px, captured @2x, stored at 1x): hero stacked, H2 28px, tier cards in a sideways row