--- title: "BRAND Starbucks 2026 · Page: category-listing" url: https://memocore.ai/memos/6ab9efa2af51aac421da8b10 project: "Brand Styles" tags: "brand-starbucks" updated_at: "2026-09-28T04:45:31.959Z" --- # BRAND Starbucks 2026 · Page: category-listing HEADER brand: Starbucks; design_date: 2026-09; page_type: category-listing; variants: menu hub (/menu, category tiles), category page (/menu//, product tiles), featured and previous lists use the same shell (inf) example_urls: https://www.starbucks.com/menu, https://www.starbucks.com/menu/coffee-espresso/hot-coffee-espresso; evidence: measured from ordering-menu.36000f70986f593fa436.css, ordering-crust.8010884fdc8efd304089.css, patternLibStyles and computed styles 2026-09-28 at 1440x900 and 390x844 unless marked purpose: browse the menu by category and open a product skeleton: header 99px, subnav 53px, then side nav 150px + content column, fixed crust 94px at the bottom; total height ~4065px (hub) / ~6640px (Hot Coffee) desktop, ~4150px hub mobile; sidebar: left (>=1024) overrides: header active item Menu (6px green bar); footer gets extra bottom padding (frapPaddingDouble, 146px) so the crust never covers it SECTIONS S1 header - as Overview, Menu active S2 subnav / sticky - menu sections background: #f9f9f9; border: 1px #dbd9d7 bottom (plus 1px #edebe9 frame); height: 53px; sticky top 0 at >=1024 layout: starts at the logo offset (x 131 at 1440), items in one scrolling row elements: 4 links "Menu", "Featured", "Previous", "Favorites" 13px 400 rgba(0,0,0,0.87), 32px apart (margin-right 16px mobile, 32px >=480), padding 16px 0; active has a 1px underline 12px above the bottom responsive: horizontal scroll if needed on mobile S3 side nav (>=1024 only) - category index layout: column 150px wide starting at x 131, padding 16px 0; hidden below 1024 elements: 9 groups: group title 19px 600 rgba(0,0,0,0.87) (margin-top 24px), under it 1-5 links 16px 400 rgba(0,0,0,0.58), 16px vertical margin each copy: "The Latest: Trending, Pumpkin Picks", "Coffee & Espresso: Hot Coffee & Espresso, Cold Coffee & Espresso", "Tea: Chai, Matcha, Hot Tea, Iced Tea", "Food: Breakfast, Bakery, Treats, Lunch, Snacks" ... motion: link hover color change (inf) S4 content column - list layout: flex 1; at >=1024 padding-left calc(400px - 150px - 131px) = 119px (the heading starts at x 400) and padding-right 9% (18% at >=1280); padding-top 40px (lg-pt6), 32px mobile; side padding 16px mobile elements (hub): H1 "Menu" 28px 700 line-height 1.385 (24px mobile), padding-bottom 48px (lg-pb7); then 9 sections, each: H2 24px 700 (19px mobile) padding-bottom 16px, 1px rule rgba(0,0,0,0.1) with 32px padding below, then a category tile grid; section padding-bottom 40px (lg-pb6) category tile grid: CSS grid, 2 columns at >=768 (1 column mobile), column gap 48px, row gap 32px, max width 720px (1024px at >=1024); tile = 112px circle image (72px below 1024) + 16px gap + label 19px 400; the whole tile is a link overlay elements (category page): breadcrumbs 16px rgba(0,0,0,0.58) ("Menu / Hot Coffee & Espresso", separators "/"), margin-bottom 8px; H1 category name 28px 700; sections per drink family ("Brewed Coffee (5)", "Latte (12)", "Cortado (4)" ...); product tile grid: 2 columns mobile, repeat(auto-fill, minmax(220px, 1fr)) at >=768 (3 columns of 243px at 1440), gap 32px product tile: padding 16px, text centered; 148px circle image (max width 148px, radius 50%, overflow hidden) with 16px below; name 19px 400 rgba(0,0,0,0.87); link overlay covers the tile; optional quick add: 40px Green Accent circle button bottom right of the image (right 12px) or a green pill stepper (-, qty, +) (seen in code, not on the US pages at capture) media: cut-out product images; category thumbs include a dark green circular backdrop inside the image; placeholder [CIRCLE PRODUCT IMAGE] motion: images fade in 300ms ease-in; no hover effect on tiles responsive: below 1024 side nav hidden, content padding 16px (menu column offset 99px at >=768); product grid 2 columns on mobile S5 footer - as Overview, bottom padding 146px S6 crust (fixed bottom bar) - store picker and bag as Recipe frap-button (crust): 94px (74px below 1024) #1e3932, picker at x 400, bag icon at the right content edge responsive: <1024 the picker label stacks to the left and the bag moves to the far right, padding 0 16px PAGE COMPONENTS category tile, product tile, breadcrumbs (see S4); featured collection tiles (variant A: square rounded 16px image tiles 320-395px wide with a 38-48px headline over the image and a button at the bottom; variant B carousel tiles 165-330px) and carousel page dots (8px circles, active 22x8px pill black) exist in the menu CSS for featured pages (not captured) INTERACTIONS - subnav: sticky at >=1024 (position sticky, top 0) - side nav: plain links, route change in the SPA without a visual transition - crust picker: opens the store locator - tile click: opens the product page (Page: product-detail) STATES loading: images show a #d9d9d9 circle fallback at 0.5 opacity; empty or unavailable items not seen SCREENSHOTS - file: starbucks_2026_menu_d1440_top.jpg shows: menu hub first screen at 1440x900, live https://www.starbucks.com/menu 2026-09-28: Menu active in the nav (6px green bar), subnav 53px #f9f9f9, side nav at x 131, H1 "Menu" at x 400, category tiles with 112px circles, crust at the bottom do not copy: product images, logo - file: starbucks_2026_menu_d1440_full.jpg shows: full hub at 1440 (4065px): 9 sections of category tiles, footer, crust - file: starbucks_2026_menu_m390_full.jpg shows: full hub at 390 (stored at 1x): no side nav, 72px circles in one column, crust 74px - file: starbucks_2026_category_d1440_full.jpg shows: /menu/coffee-espresso/hot-coffee-espresso at 1440 (6637px): breadcrumbs, H1, 10 sections of 3-column product tiles with 148px circles