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

# BRAND Starbucks 2026 · Page: product-detail

HEADER
brand: Starbucks; design_date: 2026-09; page_type: product-detail; variants: food and at-home coffee items use the same layout without the size selector or with the whole-bean size (inf)
example_urls: https://www.starbucks.com/menu/product/873068625/hot; evidence: measured from ordering-pdp.3402528c178837219b1c.css, patternLibStyles and computed styles 2026-09-28 at 1440x900 and 390x844 unless marked
purpose: pick a size, customize and add the drink to the order
skeleton: header 99px, breadcrumb bar 53px, dark product header 332px, options, summary band, footer, fixed crust; total height ~2305px desktop, ~2335px mobile; sidebar: none
overrides: header active item Menu; content starts at the logo offset (x 131); two 420px columns centered with 88px gap on each side of the middle (>=1206)

SECTIONS
S1 header - as Overview

S2 breadcrumb bar - location
  background: #f9f9f9 (subnav style); height: 53px; text 13-14px (text-xxs) rgba(0,0,0,0.87), current item 600; separators " / "
  copy: "Menu / Hot Coffee & Espresso / Blonde Roast - Starbucks® Sunsera"

S3 product header / split-media-left - identify the drink
  background: #1f3933 (House Green); height: 332px at 1440, 480px mobile; padding: 16px 0 (py3) around the image
  layout: two columns max 420px each; left image column margin-right 88px (>=1206; 44px >=1100, 24px >=1024), right column margin-left 88px; vertically centered (lg-flex items-center); mobile: image on top, text centered below with 32px bottom padding
  elements: circular image block 300px (180px when viewport height < 600) with the cut-out cup and a faint round glow; H1 product name 36px/1.29 700 white (28px at 375-767, 22px <375); calories line "5 calories" 36px 700 white (same class as the name) with a 16px info icon button rgba(255,255,255,0.7) raised at the top right
  copy: product name 3-6 words
  media: cut-out drink photo, no background; placeholder [CUP CUTOUT IN 300px CIRCLE]

S4 options - size and customization
  background: #ffffff; padding-top 32px
  layout: same two 420px columns
  left column:
    H2 "Size Options" 24px 600 with a 4px #d4e9e2 bar under it (sb-heading__bottomBorder: padding 0 8px 12px, bar radius 12px, full column width), margin-bottom 32px
    size selector: 4 radio items in a row, each 72x104px: cup icon 24x40px (outline SVG, green-filled SVG when selected, background-image swap 250ms ease-in-out, 50ms delay), label 14-16px 600 ("Short"), sub label "8 fl oz" 16px; the selected item gets a 56px circle behind the icon: bg #d4e9e2, 2px #006241 border, transition all 250ms ease-in-out
    availability line: 20px pin icon rgba(0,0,0,0.6) + "Select a café to view availability" 16px rgba(0,0,0,0.58), padding-bottom 32px
  right column: Customize frap (House Green, gold wand icon), padding-top 32px; centered on mobile, left at >=768
  Add to Order frap: fixed bottom right above the crust (Recipe frap-button)

S5 product summary band - description and nutrition
  background: #1e3932; padding 32px 0; margin-top 64px (mt9)
  layout: left column 420px
  elements: star cost badge "100★ item" (14px #cba258, 1px #cba258 border, radius 6px, padding 0 8px, margin-bottom 16px); description 14px/21px rgba(255,255,255,0.7), pre-line ("Notes of bright citrus and toasted almond..."); nutrition summary: 1px rule rgba(255,255,255,0.1), three values (Calories, Total Fat, Sugar) in a spaced row, label 14px, value 14px 600 white; outline-white pill "Full nutrition & ingredients list" 16px, margin-top 16px
  responsive: full width with 16px gutters on mobile

S6 footer - as Overview; S7 crust - as Recipe frap-button

PAGE COMPONENTS
size selector item (above); star cost badge; nutrition summary (values animate font-size 300ms cubic-bezier(0.35,0,0,1) when enlarged, "Nutrition updated" notice slides up and fades over 4s); quick-mod cards in the customize view (radius 16px, bg #f9f7f3, 2px border that flashes #00754a for 1.5s when changed; topping chips 64px tall, radius 16px, 3px border #f9f7f3, selected bg #cad4c3 700)

INTERACTIONS
- size select: click a size: the 56px circle and the filled cup icon appear (250ms ease-in-out); calories and nutrition update
- Customize: opens the customization view (full overlay, fixed, scrollable) (inf)
- Add to Order: bag notification bubble (Recipe frap-button)
- calories info button: opens a disclaimer tooltip

STATES
initial: Grande preselected; the page moves keyboard focus to the Customize frap after load (focus-visible ring visible)
store not selected: availability line with pin; out of stock: not seen

SCREENSHOTS
- file: starbucks_2026_product-detail_d1440_top.jpg
  shows: first screen at 1440x900, live https://www.starbucks.com/menu/product/873068625/hot 2026-09-28: breadcrumb bar, 332px #1f3933 header, 300px cup, H1 36px white, size selector with Grande active, Customize frap in focus-visible state, Add to Order frap above the crust
  key values: header #1f3933; active size circle 56px #d4e9e2 / 2px #006241; frap 60px 19px 600
  do not copy: product photo, cup icons, logo
- file: starbucks_2026_product-detail_d1440_full.jpg
  shows: full page at 1440: summary band #1e3932 with gold star badge, description, nutrition row, outline-white pill
- file: starbucks_2026_product-detail_m390_full.jpg
  shows: full page at 390 (stored at 1x): header 480px stacked, name 28px centered, fraps and 74px crust