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

# BRAND Starbucks 2026 · Page: home

HEADER
brand: Starbucks; design_date: 2026-09; page_type: home; variants: seasonal CMS landing pages built from the same blocks (inf)
example_urls: https://www.starbucks.com; evidence: measured from the Next.js HTML and CSS (9005c839d7a61f5d.css, ee527ecf1201ebec.css) and computed styles on https://www.starbucks.com 2026-09-28 at 1440x900 and 390x844 unless marked
purpose: send visitors to order (menu), gift, or join Rewards with 3-4 seasonal promos
skeleton: full width up to 1440px (blocks are edge to edge at 1440: xlarge column with px0), 5 sections + footer, total height ~2520px desktop, ~2590px mobile; sidebar: none
overrides: header is position relative (scrolls away) on home; all block colors are inline CMS values

SECTIONS
S1 header - as Overview (99px, active item none)

S2 announcement strip / cta-band simple - one-line greeting with an order CTA
  background: #32462f (CMS inline); height: 110px desktop, 105px mobile; padding: 32px 0 (py5); margin-bottom 32px
  layout: centered flex, inner max width 60% (>=768), text centered
  elements: H2 19px 600 white (16px/28px mobile) "It's a great day for coffee" followed inline by a pill link "Start an order" (outline white, same size, 12px gap (est))
  copy: 5 words + 3-word CTA
  motion: none
  responsive: the line wraps on mobile and the pill drops under the text (est)

S3 promo / split-media-left - seasonal menu launch
  background: photo left, #006242 panel right (CMS inline); height: 420px at 1440 (image 720x420, source 1440x840, 12:7); margin 32px 0 (my5)
  layout: two halves md-size6of12; text panel is a centered column: padding 32px 0 (py5), side padding 48px (>=1280; 40px >=1024, 24px >=768, 16px mobile), copy block max width 83%
  elements: H2 24px 600 white line-height 36px, margin-bottom 24px; body 19px/33.25px (1.75) white, max 46em; outline-white pill 16px 600, padding 7px 16px, height 35px, 32px above
  copy: H2 "Fall is here. Cue the hits." (6 words); body "The fall menu is live, with all your favorites and a few delicious surprises. Pumpkin, pecan, banana bread and chaider, here we come." (25 words); CTA "Order now"
  media: warm lifestyle photo, drinks on a wooden table with hands, object-fit fills the half; placeholder [LIFESTYLE PHOTO 12:7]
  motion: image fades in on load (300ms ease-in); no scroll animation
  responsive: <768 stacks: image full width 228px high on top, green panel below (block ~497px); H2 22px/33px, body 16px/28px

S4 promo / split-media-right - gift card promo
  as S3 with the halves reversed (image-content-block flexRowReverse at >=768): green panel left, image right
  copy: H2 "Great Pumpkin, great gift"; body "Celebrate the 60th anniversary of The Great Pumpkin™ with an exclusive eGift made to surprise your favorite Peanuts™ fans." (19 words); CTA "Send an eGift"
  media: two illustrated gift cards tilted on a green background (same #006242), bleeding off the bottom right; placeholder [GIFT CARD ILLUSTRATION]
  responsive: on mobile the image is still on top (column order), panel below

S5 promo / split-media-left - product benefit
  as S3
  copy: H2 "Nondairy. No extra."; body "Enjoy your beverage with your choice of nondairy milk—like oat, almond, coconut or soy—for no additional charge." (18 words); CTA "Start an order"
  media: close-up of milk being poured into a glass, dark green background

S6 footer - as Overview (desktop five 190px columns at x 32 with 1424 viewport; social row; stacked legal links; copyright)

PAGE COMPONENTS
promo block (image-content-block): two equal halves, no gap, no radius, no shadow; text panel uses the CMS color and white text; the only interactive element is the outline-white pill
outline-white pill on green: text and 1px border #ffffff, transparent; hover bg rgba(0,0,0,0.2); active scale(0.95); focus 2px #00754a outline + 5px white gap

INTERACTIONS
none beyond button hover and press; no carousel, no autoplay

STATES
loading: images use a #d9d9d9 fallback and fade in (300ms ease-in)

SCREENSHOTS
- file: starbucks_2026_home_d1440_full.jpg
  shows: full home at 1440 (1424 wide without scrollbar), live https://www.starbucks.com 2026-09-28, cookie banner hidden
  key values: header 99px; strip 110px #32462f; three 420px blocks with 32px white gaps; footer from y 1597, 935px tall
  do not copy: photos, gift card art, logo; use placeholders
- file: starbucks_2026_home_m390_full.jpg
  shows: full home at 390 (captured @2x, stored at 1x): stacked blocks 497px each (image 228px + green panel)