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)