BRAND Starbucks 2026 · Recipe: reward-tabs

HEADER brand: Starbucks; design_date: 2026-09; kind: component; used_in: BRAND Starbucks 2026 · Page: landing-campaign (S4 redeemable treats); evidence: measured from coreApp.ebe831e7d69e573d5e2d.css, patternLibStyles.b9fc59b961422a074705.css, patternLib.e9d8bfb4952c515548cb.js and computed styles on https://www.starbucks.com/rewards 2026-09-28 unless marked LOOK A wide cream box with rounded corners holds a centered bold heading, a row of six star-level tabs ("25★" to "400★") and a panel below. The active tab has a 4px Green Accent bar under it. The panel is a slightly darker cream band with a soft inner top shadow; it shows a product photo on the left and a heading plus one sentence on the right. Switching tabs crossfades the panels; the green bar jumps to the new tab. STRUCTURE - box (contentColumn): bg #f3e9d9, radius 24px (>=768), max width 1264px, centered, padding-top 48px (pt7), margin 32px -> 64px (md-my9) vertical - heading: h2 28px (text-lg at >=768) 700 #2c3d28, padding 0 16px 32px, centered ("Get your favorites for free") - tab list (role tablist): flex, justify-content space-around, max width 540px (>=768), centered, padding 0 16px; 6 tabs - tab: button, flex-grow 1, padding 8px 4px 16px; label = number + ★ in one span, 700, #2c3d28; label size 14px (<480) / 16px (480-767) / 19px (>=768) - active indicator: div inside the active tab, absolute, bottom 0, left 0, width 100%, height 4px, bg #00754a - panels: stacked; the active one is in flow, the others absolute (top 0, left 0, right 0), opacity 0, visibility hidden - panel content: bg #f1ece4, padding 40px 0 (py6), inner shadow inset 0 7px 9px -7px rgba(0,0,0,0.15), radius 0 0 24px 24px (>=768); column on mobile, row with 16px gap and centered on >=768 - image: square product photo (cut-out drinks or food on transparent), ~200px (est) - text column: 375px (>=768); h3 24px (text-md) 700 #2c3d28, padding-bottom 24px, left aligned (centered on mobile); p 16px #2c3d28 (est) ("$1 off a drink customization, including an espresso shot, syrup or cold foam.") KEY PARAMETERS tab count 6: 25, 60, 100, 200, 300, 400 (★ followed by visually hidden "Stars") indicator 4px #00754a, full tab width, no radius box radius 24px, panel bottom radius 24px, panel inner shadow 0 7px 9px -7px #00000026 colors: box #f3e9d9 (surfacePrimary3), panel #f1ece4 (surfacePrimary2), text #2c3d28 (textHeaderOnPrimary) MOTION trigger: click on a tab (or arrow keys, inf) - panels: transition opacity and visibility 300ms ease-out; the old panel fades out while the new one fades in in the same place (crossfade) - indicator: jumps instantly to the new tab (the bar is rendered inside the active tab; no transition in CSS or JS) - no height animation; the box height follows the active panel STATES tab focus-visible: inset box-shadow 0 0 0 2px #00754a, outline none tab hover: no rule (cursor pointer only) mobile: tabs keep one row (six equal columns), labels 14px; panel stacks image above text, text centered reduced motion: not handled (inf) HOW TO BUILD A rounded cream container with a centered heading, a flex row of six equal tab buttons and a 4px green bar absolutely positioned at the bottom of the active tab. Panels stacked in one grid cell (or absolute), switched with a 300ms opacity/visibility fade. Panel background one step darker than the box with an inset top shadow to look recessed. PITFALLS Do not animate the indicator sliding; it jumps. Keep the tab labels bold and dark green-black, not green; only the bar is green. The panel is a recessed band (inset shadow), not a card with a drop shadow. Use the warm cream surfaces, not grey. SCREENSHOTS - file: starbucks_2026_rewards-tabs_d1440_tab25.jpg shows: section at 1440x900, 25★ tab active, live https://www.starbucks.com/rewards 2026-09-28 key values: box #f3e9d9 radius 24px; indicator 4px #00754a; panel #f1ece4 with inset top shadow do not copy: product photos; use square placeholders - file: starbucks_2026_rewards-tabs_d1440_tab100.jpg shows: the same after clicking 100★: indicator moved, new panel crossfaded in