---
title: "BRAND Starbucks 2026 · Recipe: reward-tabs"
url: https://memocore.ai/memos/6ab9eeebaf51aac421da8b0a
project: "Brand Styles"
tags: "brand-starbucks"
updated_at: "2026-09-28T04:45:48.364Z"
---

# 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