BRAND Starbucks 2026 · Recipe: frap-button

HEADER brand: Starbucks; design_date: 2026-09; kind: component; used_in: BRAND Starbucks 2026 · Page: product-detail (S3 options, fixed Add to Order), BRAND Starbucks 2026 · Page: category-listing (crust); evidence: measured from patternLibStyles.b9fc59b961422a074705.css, ordering-pdp.3402528c178837219b1c.css, ordering-crust.8010884fdc8efd304089.css and computed styles on https://www.starbucks.com/menu/product/873068625/hot 2026-09-28 unless marked LOOK The frap is the Starbucks floating action button: a fat fully rounded pill with a soft two-layer drop shadow, 19px semibold white label, sitting over the page like a physical button. On the product page a green Add to Order frap floats fixed at the bottom right, just above a full-width dark House Green bar (the crust) that holds the store picker and the bag. A House Green Customize frap with a small gold magic-wand icon sits inline beside the size options. Pressing a frap pushes it 4px down and removes its lower shadow, as if it was pressed into the surface. Hover does nothing. STRUCTURE - crust (fixed, bottom 0, full width, z-index 2): bg #1e3932; left block at the menu content column: store picker link (two lines: "For item availability" 16px #ffffffb3, "Choose a café" 16px 700 white) with a chevron 24px, underlined by an inset 1.5px line rgba(255,255,255,0.3), min width 240px; right: 32px bag icon button - frap wrapper (fixed, right 0, bottom = crust height): right aligned column, padding 16px 40px (py3 lg-py5 + global gutters) - frap: pill with label (and optional 24px icon on the left, 8px gap) KEY PARAMETERS frap: display inline-block; padding 18px 24px; height 60px with icon (58.8px text only); font 19px (--textSize4) / 1.2 / 600 SoDoSans; color #ffffff; radius 500px; overflow hidden; z-index 1 frap colors: default bg #00754a (--frapBgColor = Green Accent); --houseGreen bg #1e3932; --white and --darkTheme bg #ffffff text rgba(0,0,0,0.87); --rewardsDefault bg #000000; disabled opacity 0.5 frap shadow: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14) frap mini: bg #ffffff, text rgba(0,0,0,0.87), 16px, padding 10px 16px; invisible touch area extends 8px on each side (::before inset -8px) frap circular: 56px square (--frapHeight 5.6rem), mini circular 40px; icon centered loading: width and height collapse to a circle, spinner ring 3px rgba(255,255,255,0.2) with a white right segment, 75% size, spin 0.75s linear infinite sizes on the product page: Customize 177x60px (houseGreen, gold wand icon #cba258), Add to Order 168x59px (default green) crust: height 74px (<1024) / 94px (>=1024); padding 0 16px; at >=1024 left padding 400px (--menuContentAlign) and right padding 9% (18% at >=1280) so its content aligns with the menu column; html scroll-padding-bottom equals the crust height frap wrapper bottom: 74px / 94px (sits right on top of the crust) bag icon: 32px, empty and highlighted SVG states; add-to-order notification: 50px white teardrop bubble (radius 50% 50% 50% 0, rotated -45deg, shadow 0 0 3px #000) with a 40px round product image, scales in from 0.1 at the bag, 200ms ease-in MOTION trigger: press (active) - active: transform translateY(4px); box-shadow drops the second layer (0 8px 12px transparent); transition-property transform, box-shadow, width, height; 200ms cubic-bezier(0.25,0.1,0.25,1) - hover: no change (no :hover rule; verified live) - loading: width and height animate to the circle over the same 200ms transition - appear: the Add to Order frap is wrapped in the fadeGrow animator: from opacity 0 scale(0.75) to 1 / scale(1), 300ms cubic-bezier(0.25,0.1,0.25,1); exit to scale(0.75) opacity 0 in 200ms - add to order: bag notification bubble enter 200ms ease-in (opacity 0 -> 1, scale 0.1 -> 1, origin bottom center); exit 200ms to scale(0.1) translateY(10px) STATES focus-visible: box-shadow 0 0 0 5px #ffffff added in front of the two shadows plus the global outline 2px solid #00754a (offset 2px): a white gap and a green ring (the product page focuses the Customize frap after load, see screenshot); dark theme: 5px #1e3932 gap and 2px white outline disabled: opacity 0.5, no press motion touch and mobile: same size; on the product page at 390 the Add to Order frap floats bottom right above the 74px crust; Customize becomes centered under the size selector reduced motion: not handled specially (inf); keep the press as an instant state change HOW TO BUILD A fixed bottom bar (74/94px, #1e3932) with the picker and bag; a fixed right-aligned container whose bottom equals the bar height holds the pill button. The pill is a plain button with 18px 24px padding, 500px radius, the two-layer shadow and a 200ms transform/box-shadow transition; :active moves it down 4px and removes the second shadow. No hover styles. PITFALLS Do not add a hover color change or lift; the only feedback is the press. Keep the label 19px semibold (larger than normal buttons, which are 14-16px). Use Green Accent #00754a for the default frap, not Starbucks Green #006241. Keep the frap above the crust, never overlapping it. The shadow is neutral black at 24% and 14%, not tinted. SCREENSHOTS - file: starbucks_2026_frap-button_d1440_default.jpg shows: Customize (House Green, gold wand) and Add to Order (Green Accent) fraps at rest, 1440x900 crop, live https://www.starbucks.com/menu/product/873068625/hot 2026-09-28 key values: 60px / 59px tall pills, 19px 600 white, shadows 0 0 6px #0000003d + 0 8px 12px #00000024 do not copy: wand icon asset; use a generic icon - file: starbucks_2026_frap-button_d1440_focus.jpg shows: the same crop with Customize in focus-visible (white 5px gap + green #00754a 2px outline) - file: starbucks_2026_frap-button_d1440_crust.jpg shows: the crust bar at 1440: 94px #1e3932, "For item availability / Choose a café" picker with underline and chevron at x 400, bag icon right do not copy: bag icon asset