@hex-core/themes 0.1.1 → 0.2.0

package/dist/presets/_briefs/starbucks.js

@@ -0,0 +1,586 @@
+// src/presets/_briefs/starbucks.ts
+var starbucksBrief = `# Design System Inspired by Starbucks
+
+## 1. Visual Theme & Atmosphere
+
+Starbucks' design system is a **warm, confident retail flagship** wearing the green of their storefront apron across every surface. The canvas alternates between a neutral-warm cream (\`#f2f0eb\`) and a ceramic off-white (\`#edebe9\`) \u2014 colors that reference actual store materials: the paper napkins, the caf\xE9 walls, the wood finishes \u2014 while the signature **Starbucks Green** (\`#006241\`) anchors the brand moment on hero bands, CTAs, and the Rewards experience. The greens come in four calibrated shades (Starbucks, Accent, House, Uplift) each mapped to a specific surface role, and gold (\`#cba258\`) appears only around Rewards-status ceremony \u2014 not as a general accent.
+
+Typography carries most of the brand voice. The proprietary **SoDoSans** typeface (custom to Starbucks) sits across nearly every surface with a tight \`-0.16px\` letter-spacing \u2014 it reads confident and friendly rather than fashion-magazine severe. What's unusual: the Rewards page switches to a warm serif (\`"Lander Tall", "Iowan Old Style", Georgia\`) for specific headline moments, subtly echoing the nostalgic feel of a coffeehouse chalkboard. And the Careers pages use a handwritten script (\`"Kalam", "Comic Sans MS", cursive\`) for personal cup-name touches. Three typefaces, three contexts \u2014 the system is disciplined about when each appears.
+
+The surfaces breathe through rounded geometry. Every button is a 50px full-pill. Cards take a 12px rounded-rectangle. The "Frap" floating CTA \u2014 a 56px circular order button in Green Accent (\`#00754A\`) \u2014 is the product's signature depth move: it floats bottom-right with a layered shadow stack (\`0 0 6px rgba(0,0,0,0.24)\` base + \`0 8px 12px rgba(0,0,0,0.14)\` ambient) and compresses via \`scale(0.95)\` on press. Elevations are otherwise restrained \u2014 card shadows stay at a whispered \`0.14/0.24\` alpha, global nav gets a quiet three-layer shadow stack. The whole system feels like clean caf\xE9 signage: legible, warm, and never shouting.
+
+**Key Characteristics:**
+- Four-tier green brand system (Starbucks / Accent / House / Uplift) each mapped to a distinct surface role \u2014 not a single "brand green"
+- Gold reserved for Rewards-status moments only; never a general-purpose accent
+- Warm-neutral canvas (\`#f2f0eb\` / \`#edebe9\`) instead of cold white \u2014 references caf\xE9 materials
+- Custom proprietary typeface (SoDoSans) with tight \`-0.16px\` letter-spacing as the universal voice
+- Context-specific type switches: serif (Lander Tall) for Rewards, script (Kalam) for Careers cup-names
+- Full-pill buttons (\`50px\` radius) universal, \`scale(0.95)\` active press the signature micro-interaction
+- Floating "Frap" circular CTA (\`56px\`, Green Accent fill, layered shadow stack) \u2014 the product's signature elevation element
+- Gift-card surfaces designed as **photographed physical product** \u2014 every card is a distinct illustrated photograph rather than a generated graphic
+- 12px card radius + whisper-soft shadows keep content cards flat-plus-hint-of-lift
+- Rem-based spacing scale anchored at 1.6rem (~16px) = \`--space-3\`, stepping to 6.4rem (~64px)
+
+**Color-block page rhythm:** Cream hero \u2192 White content sections \u2192 Dark-green (\`#1E3932\`) feature band with white text \u2192 Cream utility zone \u2192 Dark-green (\`#1E3932\`) footer with gold / white text \u2014 an espresso-dark bookend around the bright body.
+
+## 2. Color Palette & Roles
+
+**Source pages analyzed:** homepage, rewards, gift cards, product detail (Pink Energy Drink), product nutrition (Cold Brew).
+
+### Primary
+
+- **Starbucks Green** (\`#006241\`): The historic brand green. Used on h1 headings, primary section headers on the Rewards page, and as the main brand signal wherever a single dominant color is needed.
+- **Green Accent** (\`#00754A\`): A slightly brighter, more luminous green. The primary filled-CTA color ("Explore our afternoon menu", "See the spring menu") and the fill of the floating Frap circular button.
+- **House Green** (\`#1E3932\`): The deep near-black brand green. Footer surface, feature-band backgrounds, reward-status dark surfaces, and the headline "Free coffee is just the beginning" hero band on Rewards.
+- **Green Uplift** (\`#2b5148\`): A secondary mid-dark green used sparingly on decorative accents and dark-gradient moments.
+- **Green Light** (\`#d4e9e2\`): A pale mint wash used for form-valid-state tints and light green utility surfaces.
+
+### Secondary & Accent
+
+- **Gold** (\`#cba258\`): Reserved almost exclusively for Rewards-status ceremony \u2014 Gold-tier callouts, partnership badges (SkyMiles, Bonvoy), and premium-feeling accents. Never a general-purpose brand color.
+- **Gold Light** (\`#dfc49d\`): Softer gold for background washes on gold-tier sections.
+- **Gold Lightest** (\`#faf6ee\`): Cream-gold page-surface wash used under partnership sections on the Rewards page \u2014 ties the gold accent back into the warm neutral system.
+
+### Surface & Background
+
+- **White** (\`#ffffff\`): Primary card and modal surface. Also card fill on gift-card tiles.
+- **Neutral Cool** (\`#f9f9f9\`): Subtle cool-gray surface used on dropdown menus ("Account" dropdown), form-card wraps, and quiet utility containers.
+- **Neutral Warm** (\`#f2f0eb\`): The warm cream **primary page canvas** for Rewards utility zones and hero bands.
+- **Ceramic** (\`#edebe9\`): A slightly warmer/darker cream for zone separators, soft page-section washes, and Rewards partnership band.
+- **Black** (\`#000000\`): Deep ink reserved for the dark top-of-page CTA strip ("Join now") and high-contrast top-nav sign-in buttons.
+
+### Neutrals & Text
+
+- **Text Black** (\`rgba(0, 0, 0, 0.87)\`): Primary heading and body text color on light surfaces. Not pure black \u2014 an 87%-opacity black that reads warmer.
+- **Text Black Soft** (\`rgba(0, 0, 0, 0.58)\`): Secondary/metadata text on light surfaces.
+- **Text White** (\`rgba(255, 255, 255, 1)\`): Primary heading/body text on dark green surfaces.
+- **Text White Soft** (\`rgba(255, 255, 255, 0.70)\`): Secondary text on dark-green surfaces \u2014 footer link descriptions, caption text.
+- **Rewards Green** (\`#33433d\`): A dedicated muted slate-green used only on Rewards-page text blocks \u2014 a slightly "dustier" reading color than Text Black that signals "reward surface" without using full Starbucks Green.
+
+### Semantic & Accent
+
+- **Red** (\`#c82014\`): Error and destructive state (form invalid, destructive actions).
+- **Yellow** (\`#fbbc05\`): Warning state, legacy brand touch.
+- **Green Light** (\`#d4e9e2\` at 33% opacity = \`hsl(160 32% 87% / 33%)\`): Form valid-field tint background.
+- **Red Tint** (\`hsl(4 82% 43% / 5%)\`): Invalid-field tint on forms.
+
+### Black / White Alpha Ladders
+
+Two parallel translucent scales for overlay and secondary-text use:
+- \`rgba(0,0,0,0.06)\` through \`rgba(0,0,0,0.90)\` in 10% steps \u2014 for dark overlays on light surfaces
+- \`rgba(255,255,255,0.10)\` through \`rgba(255,255,255,0.90)\` in 10% steps \u2014 for light overlays on dark surfaces
+
+### Gradient System
+
+No structural gradient tokens observed. Surface hierarchy is solid-color-block throughout \u2014 the system relies on its five-tier cream/green surface palette rather than gradients.
+
+## 3. Typography Rules
+
+### Font Family
+
+- **Primary:** \`SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif\` \u2014 Starbucks' proprietary corporate typeface, used across nearly every surface
+- **Loading Fallback:** \`"Helvetica Neue", Helvetica, Arial, sans-serif\` \u2014 what users see before SoDoSans loads
+- **Rewards Serif:** \`"Lander Tall", "Iowan Old Style", Georgia, serif\` \u2014 used on specific Rewards-page headline moments for a warm editorial feel
+- **Careers Script:** \`"Kalam", "Comic Sans MS", cursive\` \u2014 used exclusively for Careers-page "cup name" decorative touches, referencing the hand-written names on Starbucks cups
+
+No OpenType stylistic sets explicitly activated at \`:root\`.
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display (text-10) | 5.0rem / 80px | 400\u2013600 | 1.2 | -0.16px | Largest Rewards/hero display |
+| Jumbo (text-9) | 3.6rem / 58px | 400\u2013600 | 1.2 | -0.16px | Secondary hero headings |
+| Hero Large (text-8) | 2.8rem / 45px | 400\u2013600 | 1.2\u20131.5 | -0.16px | Landing section headlines |
+| H1 | 24px | 600 | 36px | -0.16px | Starbucks-Green primary heading |
+| H2 | 24px | 400 | 36px | -0.16px | Regular-weight section title in Text Black |
+| Body Large | 19px | 400\u2013600 | 33.25px (~1.75) | -0.16px | Hero intro copy, feature-band body |
+| Body (text-3) | 1.6rem / 16px | 400 | 1.5 (24px) | -0.01em | Default body copy |
+| Small (text-2) | 1.4rem / ~14px | 400\u2013600 | 1.5 | -0.01em | Button label, metadata, form labels |
+| Micro (text-1) | 1.3rem / ~13px | 400 | 1.5 | -0.01em | Active float-label state, caption micro-copy |
+| Button Label | 14\u201316px | 400\u2013600 | 1.2 | -0.01em | All pill-button labels |
+
+**Letter-spacing tokens:**
+- \`letterSpacingNormal\`: \`-0.01em\` (default \u2014 tight, characteristic)
+- \`letterSpacingLoose\`: \`0.1em\` (emphasized caps)
+- \`letterSpacingLooser\`: \`0.15em\` (uppercase-style labels, extreme emphasis)
+
+**Line-height tokens:**
+- \`lineHeightNormal\`: \`1.5\` (body)
+- \`lineHeightCompact\`: \`1.2\` (display/buttons)
+
+### Principles
+
+- **Tight negative tracking (\`-0.01em\`)** is applied almost universally \u2014 the entire product reads slightly compressed, which gives SoDoSans its confident presence without feeling squeezed.
+- **Weight shifts carry hierarchy, not size shifts.** H1 and H2 share the same 24px/36px size; only weight (600 vs 400) and color (Starbucks-Green vs Text Black) separate them.
+- **Size tokens use rem, anchored to \`1rem = 10px\`** on this site (via a \`font-size: 62.5%\` root trick). So \`1.6rem\` = 16px, \`2.4rem\` = 24px, etc. The scale is semantic (textSize-1 through textSize-10), not arbitrary pixel values.
+- **Context-specific typeface swaps** \u2014 serif on Rewards, script on Careers \u2014 are deliberate and localized. Never mix them with the primary sans within the same surface.
+- **Body text never goes pure black** \u2014 it sits at \`rgba(0,0,0,0.87)\` to match the warm-neutral canvas temperature.
+
+### Note on Font Substitutes
+
+SoDoSans is proprietary to Starbucks (licensed from House Industries, not publicly available). Reasonable open-source substitutes:
+- **Inter** (Google Fonts) \u2014 similar humanist geometric proportions, wide weight range
+- **Manrope** \u2014 slightly rounder, similar confident feel
+- **Nunito Sans** \u2014 warmer, good for a "caf\xE9" brand substitute
+
+If substituting, verify the tight \`-0.01em\` / \`-0.16px\` tracking still reads well; some open-source fonts need \`-0.005em\` instead.
+
+Lander Tall (the Rewards serif) is custom \u2014 open-source substitutes: **Iowan Old Style** (already in fallback), **Lora**, or **Source Serif Pro**. Kalam (Careers script) is available on Google Fonts directly.
+
+## 4. Component Stylings
+
+### Buttons
+
+**1. Primary Filled \u2014 "Explore our afternoon menu / Sign up for free"**
+- Background: \`#00754A\` (Green Accent)
+- Text: \`#ffffff\`
+- Border: \`1px solid #00754A\`
+- Radius: \`50px\` (full pill)
+- Padding: \`7px 16px\`
+- Font: SoDoSans, 16px, weight 600, letter-spacing \`-0.01em\`
+- Active state: \`transform: scale(0.95)\` via \`--buttonActiveScale\`
+- Transition: \`all 0.2s ease\`
+
+**2. Primary Outlined \u2014 "Give them a try / Start an order"**
+- Background: transparent
+- Text: \`#00754A\` (Green Accent)
+- Border: \`1px solid #00754A\`
+- Same radius/padding/active/transition as Primary Filled
+
+**3. Black Filled \u2014 "Join now"**
+- Background: \`#000000\`
+- Text: \`#ffffff\`
+- Border: \`1px solid #000000\`
+- Radius: \`50px\`, Padding: \`7px 16px\`
+- Font: 14px, weight 600
+- Used on the top-of-page join strip and similar conversion moments
+
+**4. Dark Outlined \u2014 "Sign in"**
+- Background: transparent
+- Text: \`rgba(0, 0, 0, 0.87)\` (Text Black)
+- Border: \`1px solid rgba(0, 0, 0, 0.87)\`
+- Radius: \`50px\`, Padding: \`7px 16px\`
+- Font: 14px, weight 600
+
+**5. Green-on-Green Inverted \u2014 "See the spring menu"**
+- Background: \`#ffffff\`
+- Text: \`#00754A\`
+- Border: \`1px solid #ffffff\`
+- Used when the surface behind the button is the dark green House Green band \u2014 white button with green text instead of a filled green pill on green bg
+
+**6. Outlined on Dark \u2014 "Learn more / Order now"**
+- Background: transparent
+- Text: \`#ffffff\`
+- Border: \`1px solid #ffffff\`
+- Used on dark-green feature bands for secondary action paired with a white filled CTA
+
+**7. Consent Agree (dark-green variant)**
+- Background: \`rgb(0, 130, 72)\` (a specific variant green used in the cookie-consent module)
+- Text: \`#ffffff\`
+- No border, \`50px\` radius, \`7px 16px\` padding, 14px / weight 400
+- Slightly brighter than Green Accent \u2014 reserved for the consent-banner Agree action
+
+**8. Frap \u2014 Floating Circular Order Button**
+- Background: \`#00754A\` (Green Accent)
+- Icon: \`#ffffff\`
+- Size: \`5.6rem / 56px\` (standard), \`4rem / 40px\` (mini variant)
+- Radius: \`50%\` (full circle)
+- Fixed bottom-right, \`-0.8rem\` touch offset for extra tap comfort
+- Shadow stack: base \`0 0 6px rgba(0,0,0,0.24)\` + ambient \`0 8px 12px rgba(0,0,0,0.14)\`
+- Active state: ambient shadow fades to \`0 8px 12px rgba(0,0,0,0)\`
+- This is the product's signature elevation element \u2014 it floats over every scrolled surface
+
+**9. Full-width Feedback Tab \u2014 "Provide feedback"**
+- Background: \`#00754A\`
+- Text: \`#ffffff\`
+- Radius: \`12px 12px 0px 0px\` (top-rounded only)
+- Padding: \`8px 16px\`
+- Font: 14px, weight 400
+- Positioned fixed bottom-right-inside, attached to the viewport edge
+
+### Cards & Containers
+
+**Content Card (default)**
+- Background: \`#ffffff\` (\`--cardBackgroundColor\`)
+- Radius: \`12px\` (\`--cardBorderRadius\`)
+- Shadow: \`0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24)\` (\`--cardBoxShadow\`)
+- Used for: feature cards, menu-item tiles, reward-status panels
+
+**Gift Card Tile**
+- Background: illustrated photography fills the card (no solid bg)
+- Radius: similar to cards (\`~12px\`, slightly tighter on corners)
+- Shadow: lighter than default card \u2014 these are treated like physical cards laid on the canvas
+- Labeled by category above the card grid (Spring, Thank You, Birthday, Celebration, Mother's Day, Appreciation, Encouragement, Milestones, Anytime)
+
+**Rewards Status Cards (Rewards page signature)**
+- Three-column grid: Bronze / Gold / Silver-ish \u2014 each a dark-green (\`#1E3932\`) panel with:
+  - Colored gradient/color header ring
+  - Numbered "Level" badge
+  - Status title in large SoDoSans weight 600
+  - Stars / benefits list in white/translucent-white text
+  - Bottom "As you earn more stars\u2026" progression caption
+
+**Partnership Card (Rewards)**
+- Background: \`#faf6ee\` (Gold Lightest) warm-cream surface
+- Content: partner logos ("SkyMiles", "Bonvoy") centered, with descriptive text below
+- Radius and shadow follow default card spec
+
+**Dropdown Menu (Account dropdown, top-nav)**
+- Background: \`#f9f9f9\` (Neutral Cool)
+- Menu items at \`24px / weight 400\` in Text Black
+- No border \u2014 just background surface shift against white nav
+
+**Modal**
+- Padding: \`2.4rem\` (\`--modalPadding\`)
+- Top padding: \`8.8rem\` (\`--modalTopPadding\`) \u2014 leaves room for close button / header
+- Combined vertical padding: \`11.2rem\`
+- Radius inherits from card spec (\`12px\`)
+
+### Inputs & Forms
+
+**Floating Label Input**
+- Label floats above the input border when focused/filled
+- Desktop label font size: \`1.9rem\` default, animates to \`1.4rem\` when active
+- Mobile label font size: \`1.6rem\` default, animates to \`1.3rem\` active
+- Label horizontal offset: \`12px\` from left
+- Active label translate: up to \`-12px\` with \`-50%\` Y translation
+- Field padding: \`12px\`
+- Form horizontal padding: \`1.6rem\`
+- Validation: valid-field gets \`rgba(green-light, 0.33)\` tint; invalid-field gets \`rgba(red, 0.05)\` tint
+- Transition: \`0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27)\` on checked-input
+
+**Option Icon (checkbox/radio)**
+- Padding: \`3px\` inner
+- Uses the checked-input cubic-bezier animation above (a slightly "springy" 2.32 overshoot curve)
+
+### Navigation
+
+**Global Nav (top bar)**
+- Fixed position with progressive heights: \`64px\` xs \u2192 \`72px\` mobile \u2192 \`83px\` tablet \u2192 \`99px\` desktop
+- Shadow stack: \`0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)\` \u2014 three-layer soft lift
+- Left: Starbucks wordmark logo, offsetting by \`99px\` (md) / \`131px\` (lg) from left edge
+- Primary links inline in SoDoSans weight 400\u2013600: Menu \xB7 Rewards \xB7 Gift Cards
+- Right: Find a store link + Sign in (outlined) + Join now (black filled)
+
+**Sub-nav (second bar, e.g., Rewards internal)**
+- Height: \`53px\` (global subnav) / \`48px\` (internal subnav)
+- Typically horizontal tab group beneath the global nav
+
+**Mobile Nav**
+- Collapses to a hamburger drawer below tablet breakpoint
+- Frap floating button persists at bottom-right regardless of nav state
+
+### Image Treatment
+
+- **Hero photography**: Product photos (beverages in clear glass with colored backgrounds \u2014 coral, sage, warm amber) occupy ~40vw of a split-hero layout; text occupies the other 60vw (\`--headerCrateProportion: 40vw\` / \`--contentCrateProportion: 60vw\`)
+- **Gift card illustrations**: Each card is a distinct illustrated photograph (painted-feel, hand-drawn-looking, warm color palette). Never generic generated graphics.
+- **Rewards ceremony imagery**: Photographs of Starbucks Rewards App screens held in-hand, angled compositions \u2014 product-in-context photography.
+- **Menu thumbnails**: Square or 4:3 product photography with clean white/cream backdrops, slight soft drop-shadow around the glass.
+- **Image fade-in**: \`opacity 0.3s ease-in\` transition on image load (\`--imageFadeTransition\`).
+
+### Feature Band (dark-green hero strip)
+
+Full-width \`#1E3932\` (House Green) band with:
+- Left: white headline + subhead + CTA row
+- Right: product photography or illustration
+- Split ratio ~40/60 or 50/50 depending on section
+- White text throughout with \`rgba(255,255,255,0.70)\` for secondary copy
+- CTAs follow Green-on-Green Inverted (white filled) + Outlined on Dark (white outline) pairing
+
+### Expander / Accordion
+
+- Duration: \`300ms\` (\`--expanderDuration\`)
+- Timing curve: \`cubic-bezier(0.25, 0.46, 0.45, 0.94)\` \u2014 a measured ease-out
+- Used for FAQ sections on Rewards and gift page
+
+### Cookie Consent Module
+
+Dark-green modal card at top of page with "Agree" (green-filled) and "Manage preferences" (outlined) buttons. Appears on first visit; dismissible.
+
+### Product Detail Components (PDP signature cluster)
+
+A repeating component cluster used on menu product pages (e.g., \`/menu/product/40498/iced\` for a drink detail, \`/menu/product/.../nutrition\` for nutrition facts). These extend the component inventory without changing tokens.
+
+**Size Options Selector**
+- Horizontal row of 4 cup-icon buttons (Tall / Grande / Venti / Trenta)
+- Each item: cup silhouette icon on top, size name below (16/700 in Starbucks-Green), fluid-ounce caption (13/400 in Text Black Soft)
+- Active state: a green circular ring outline (\`2px solid #00754A\`) around the selected cup icon
+- Inactive: no ring, same typography
+- Full-width row, equal spacing
+- Radius of container: \`12px\` or flat; individual icons are \`50%\` circular
+- Padding: \`16px 24px\` internal
+
+**Add-in / Milk Select (outlined rectangle)**
+- Background: \`#ffffff\`
+- Border: \`1px solid #d6dbde\` (Input Border)
+- Radius: \`4px\`
+- Full-width in its column
+- Floating label above top border: "Add-ins" / "Milk" / "Add-ins" \u2014 13/700 in Text Black, uppercase, \`0.325px\` letter-spacing
+- Value displayed centered (e.g., "Ice", "Coconut", "Strawberry Fruit Inclusions scoop"): 16/400 Text Black
+- Chevron-down icon right side in Text Black Soft
+- Focus: border shifts to Green Accent (\`#00754A\`)
+
+**Numeric Stepper**
+- Embedded inside an Add-in row when a quantity is required (e.g., Strawberry Fruit Inclusions scoop)
+- \`\u2212\` minus button + count number + \`+\` plus button, all inline right of the label
+- Buttons: circular \`32\xD732px\` with \`1px solid #d6dbde\` border, neutral gray icon
+- Count number: 16/700 Text Black centered
+
+**Customize Button**
+- Background: \`#ffffff\`
+- Text: \`#00754A\` (Green Accent)
+- Border: \`1.5px solid #00754A\`
+- Radius: \`50px\` (full pill)
+- Padding: \`14px 40px\` (generously larger than default pills \u2014 this is a secondary primary action)
+- Label: "Customize" with a gold sparkle \u2728 icon inset left
+- Used for: entering the drink-customization flow after size/milk selection
+
+**Add to Order Button (PDP)**
+- Background: \`#00754A\` (Green Accent)
+- Text: \`#ffffff\`
+- Radius: \`50px\`
+- Padding: \`14px 32px\`
+- Pinned top-right of product card and/or aligned right within the store-availability band
+- Same scale(0.95) active behavior as other primary CTAs
+
+**Rewards Cost Pill \u2014 "200\u2605 item"**
+- Background: transparent
+- Border: \`1px solid #cba258\` (Gold)
+- Text: \`#cba258\` (Gold)
+- Radius: \`50px\` (full pill)
+- Padding: \`4px 12px\`
+- Content: "200\u2605 item" where \`\u2605\` is a small filled star glyph \u2014 indicates the Rewards Stars required to redeem this item
+- Font: Proxima Nova 13/700 with \`0.5px\` letter-spacing
+- Used only on products that are Rewards-redeemable
+
+**Product Description Band**
+- Full-width dark-green band (\`#1E3932\` House Green)
+- Contains top-to-bottom:
+  1. Rewards Cost Pill (gold) if applicable
+  2. Product description body copy in white (16/400/1.5)
+  3. Nutritional summary inline ("140 calories, 25g sugar, 2.5g fat") with info-icon tooltip \u2014 14/700 white
+  4. "Full nutrition & ingredients list" outlined-white-on-green pill button
+- Padding: \`32px\` vertical
+- Appears beneath the primary product header band
+
+**Ingredients / Nutrition Table**
+- Two-column layout on the Nutrition page
+- Left column: "Ingredients" header + list or "Not available for this item" placeholder text block with an explanatory paragraph in Text Black Soft 14/400
+- Right column: "Nutrition" header + label/value rows
+- Each row: nutrient label (Proxima Nova 14/400) on the left, value (e.g., "140 calories", "25g", "205 mg**") on the right, separated by a \`1px solid #e7e7e7\` hairline below
+- Footnote for caffeine/asterisk markers in 13/400 Text Black Soft at the bottom
+- Reusable pattern for nutrition facts regulation-compliant tables
+
+**Store Availability Selector**
+- Appears on dark-green feature band above the size-options row
+- Full-width rounded rectangle with transparent-white interior
+- Text: "For item availability, choose a store" in white, 14/400
+- Right side: chevron-down affordance + shopping-bag SVG icon in white outline
+- Radius: \`4px\`
+- Height: ~48px
+
+**PDP Breadcrumb**
+- "Menu / Refreshers / Pink Energy Drink" trail above the product title
+- Separator: \`/\` slash character in Text Black Soft
+- Current page is unlinked, prior pages are underlined green-accent links
+- Font: 14/400 Proxima Nova
+- Appears on all PDP pages
+
+**Back Chevron Link (PDP nutrition / detail sub-pages)**
+- "\u2190 Back" text link above section headings on the nutrition page
+- Text in Green Accent (\`#00754A\`) 14/700 Proxima Nova
+- Left chevron \`<\` in the same green
+- Alternative to full breadcrumb on deep sub-pages
+
+## 5. Layout Principles
+
+### Spacing System
+
+Rem-based semantic scale (anchored \`1rem = 10px\`):
+
+| Token | Rem | Pixels | Typical Use |
+|-------|-----|--------|-------------|
+| \`--space-1\` | \`0.4rem\` | 4px | Tightest inline padding |
+| \`--space-2\` | \`0.8rem\` | 8px | Small gap, button vertical padding |
+| \`--space-3\` | \`1.6rem\` | 16px | Default \u2014 card padding, outer gutter xs |
+| \`--space-4\` | \`2.4rem\` | 24px | Section inner spacing, outer gutter md |
+| \`--space-5\` | \`3.2rem\` | 32px | Major between-section spacing |
+| \`--space-6\` | \`4rem\` | 40px | Large gaps, outer gutter lg, header crate |
+| \`--space-7\` | \`4.8rem\` | 48px | Section-to-section spacing |
+| \`--space-8\` | \`5.6rem\` | 56px | Very large breathing \u2014 Frap height |
+| \`--space-9\` | \`6.4rem\` | 64px | Widest section padding |
+
+**Gutter tokens:**
+- \`--outerGutter: 1.6rem\` (16px, default / mobile)
+- \`--outerGutterMedium: 2.4rem\` (24px, tablet)
+- \`--outerGutterLarge: 4.0rem\` (40px, desktop)
+
+**Universal rhythm constant:** \`1.6rem\` (16px) appears across every page as the default outer gutter, card padding baseline, and text size 3 body \u2014 the system's most frequent spacing unit.
+
+### Grid & Container
+
+- Column width scale: \`--columnWidthSmall: 343px\` / \`Medium: 500px\` / \`Large: 720px\` / \`XLarge: 1440px\`
+- Gift-card grid uses a 3-5-up responsive grid of \`~343px\` tiles
+- Rewards status section: 3-up dark-green panels at \`lg+\` breakpoints
+- Hero: asymmetric split 40% (image) / 60% (content) via \`--headerCrateProportion\` / \`--contentCrateProportion\`
+
+### Whitespace Philosophy
+
+Whitespace carries the feeling of "plenty of space in the caf\xE9." Section padding leans generous (40\u201364px). Content blocks are separated by whitespace rather than dividers. The cream canvas (\`#f2f0eb\`) is itself a visual breath between white cards and green feature bands.
+
+### Border Radius Scale
+
+| Value | Use |
+|-------|-----|
+| \`12px\` | Cards, modals, menu-item tiles (\`--cardBorderRadius\`) |
+| \`12px 12px 0 0\` | Full-width feedback tab (top-rounded only) |
+| \`50px\` | All buttons \u2014 full-pill radius (\`--buttonBorderRadius\`) |
+| \`50%\` | Circular icons, Frap floating button, avatar thumbnails |
+| Specialty | \`3.3333%/5.298%\` elliptical for Starbucks-Visa-Card mockups (\`--svcRoundedCorners\`) |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Card | \`0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)\` | Default content cards \u2014 a whisper-soft dual-shadow |
+| Global Nav | \`0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)\` | Triple-layer soft lift on the fixed top bar |
+| Frap Base | \`0 0 6px rgba(0,0,0,0.24)\` | Base halo around the floating circular CTA |
+| Frap Ambient | \`0 8px 12px rgba(0,0,0,0.14)\` | Stacked directional ambient \u2014 floats the Frap forward |
+| Gift Card | Light drop shadow around illustrated photograph | Physical-card feel for gift tiles |
+| Starbucks Card (SVC) | \`drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24))\` | Stacked SVG drop shadows for Starbucks Card visuals |
+
+**Shadow philosophy:** Whisper-soft, layered over solid \u2014 the system never reaches for a single heavy drop shadow. Instead, it stacks 2\u20133 low-alpha shadows with different offsets to simulate real-world ambient + direct lighting. The Frap button is the most elevated element on any page.
+
+### Decorative Depth
+
+- **No gradient system** \u2014 surfaces are solid color-block
+- **Color-block banding** carries perceived depth (dark-green bands read as "recessed feature zones" between cream/white body sections)
+- **SVG filter shadows** on Starbucks-Card visuals add a slight 3D physicality without a box-shadow
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Neutral Warm (\`#f2f0eb\`) or Ceramic (\`#edebe9\`) as page canvas instead of pure white \u2014 the warm cream is the signature
+- Map the green tiers to their intended surface role \u2014 Starbucks Green for headings, Green Accent for CTAs, House Green for deep bands, Uplift for decorative
+- Keep tracking tight at \`-0.01em\` / \`-0.16px\` on SoDoSans across the whole system
+- Use 50px full-pill radius on every button without exception
+- Apply \`transform: scale(0.95)\` as the universal button active state
+- Reserve Gold for Rewards-status ceremony moments only
+- Use SoDoSans for nearly everything; switch to Lander Tall serif only for Rewards editorial headlines; reserve Kalam script for Careers "cup name" moments
+- Layer 2\u20133 low-alpha shadows instead of one heavier drop shadow for elevation
+- Use the Frap circular CTA as the persistent floating order entry on every shopping surface
+- Let the cream canvas breathe between content cards \u2014 use whitespace, not dividers
+
+### Don't
+- Don't use pure white as the page canvas \u2014 the warm cream temperature is load-bearing
+- Don't pick "one brand green" \u2014 the four-green system is intentional; using only \`#006241\` everywhere flattens the brand
+- Don't use Gold as a general-purpose accent \u2014 it's a Rewards signal only
+- Don't square the corners on buttons \u2014 the 50px pill is universal
+- Don't introduce gradient fills \u2014 the system is color-block throughout
+- Don't weight-contrast h1 and h2 by size \u2014 the hierarchy comes from weight + color (600 Starbucks-Green vs 400 Text Black)
+- Don't use pure black for body text \u2014 \`rgba(0,0,0,0.87)\` matches the warm canvas
+- Don't skip the \`scale(0.95)\` active feedback on buttons \u2014 it's a signature micro-interaction
+- Don't stack single heavy shadows; always layer 2\u20133 low-alpha ones
+- Don't introduce serifs or scripts into the main shopping flow \u2014 they belong to Rewards and Careers contexts respectively
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+Inferred from component width tokens and progressive nav heights:
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| xs | < 480px | Global nav 64px; hamburger menu; single-column layouts; pill buttons full-width |
+| Mobile | 480\u2013767px | Global nav 72px; gift-card grid 2-up; card padding tightens |
+| Tablet | 768\u20131023px | Global nav 83px; gift-card grid 3-up; hero split begins to appear |
+| Desktop | 1024\u20131439px | Global nav 99px; gift-card grid 4-up; full asymmetric hero 40/60 |
+| XLarge | 1440px+ | Content caps at \`--columnWidthXLarge\`; gift-card grid 5-up; extra cream margin |
+
+### Touch Targets
+
+- Pill buttons at \`7px 16px\` padding measure ~32px tall \u2014 below 44px WCAG AAA minimum for touch-only surfaces. On mobile, button padding may be visually expanded to meet the minimum.
+- Frap floating circular button at \`56px\` is well above minimum.
+- Frap uses \`--frapTouchOffset: calc(-1 * .8rem)\` to extend tap area 8px beyond visual edge.
+- Form float-label inputs grow their label font size on mobile (1.6rem base vs 1.9rem desktop) \u2014 easier to tap and read at arm's-length.
+
+### Collapsing Strategy
+
+- **Global nav height scales progressively**: 64 \u2192 72 \u2192 83 \u2192 99px across breakpoints, not a single value
+- **Hero split collapses**: 40/60 asymmetric split \u2192 stacked (image top, content below) at mobile
+- **Gift-card grid**: 5-up \u2192 4-up \u2192 3-up \u2192 2-up \u2192 1-up across breakpoints with adjusted card widths
+- **Feature bands**: Stay full-width but text + imagery stack vertically on mobile
+- **Outer gutter scales**: 16px \u2192 24px \u2192 40px as viewport grows
+- **Rewards 3-column status panels**: Stack to single column on mobile
+
+### Image Behavior
+
+- Hero product photography crops tighter vertically on mobile; content becomes the visual anchor
+- Gift-card illustrations preserve aspect ratio; card grid reflows
+- \`opacity 0.3s ease-in\` fade-in transition on image load (prevents jarring pop-in)
+- Rewards app-in-hand photography scales proportionally; never stretches
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+
+- Primary CTA: "Green Accent (\`#00754A\`)"
+- Primary CTA text: "White (\`#ffffff\`)"
+- Brand heading: "Starbucks Green (\`#006241\`)"
+- Feature band / footer: "House Green (\`#1E3932\`)"
+- Page canvas: "Neutral Warm (\`#f2f0eb\`)"
+- Card canvas: "White (\`#ffffff\`)"
+- Heading text on light: "Text Black (\`rgba(0,0,0,0.87)\`)"
+- Body text on light: "Text Black Soft (\`rgba(0,0,0,0.58)\`)"
+- Body text on dark-green: "Text White Soft (\`rgba(255,255,255,0.70)\`)"
+- Rewards accent: "Gold (\`#cba258\`)"
+- Rewards text: "Rewards Green (\`#33433d\`)"
+- Destructive: "Red (\`#c82014\`)"
+
+### Example Component Prompts
+
+1. "Create a primary Starbucks CTA pill button with Green Accent (\`#00754A\`) background, white text 'Explore our afternoon menu', SoDoSans font at 16px weight 600 with \`-0.01em\` letter-spacing, \`50px\` border-radius (full pill), \`7px 16px\` padding. Apply \`transform: scale(0.95)\` as the active state with a \`0.2s ease\` transition."
+
+2. "Design a content card with White (\`#ffffff\`) background at \`12px\` border-radius, layered shadow \`0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)\`. Pad contents \`16\u201324px\` (\`--space-3\` to \`--space-4\`). Place on a Neutral Warm (\`#f2f0eb\`) page canvas with \`16px\` gap to siblings."
+
+3. "Build the Frap floating circular order button \u2014 \`56px\` diameter, Green Accent (\`#00754A\`) fill, white shopping-bag icon centered. Layered shadow: \`0 0 6px rgba(0,0,0,0.24)\` + \`0 8px 12px rgba(0,0,0,0.14)\`. Fixed position bottom-right with \`-0.8rem\` touch offset. Active state collapses the ambient shadow to \`0 8px 12px rgba(0,0,0,0)\` with \`scale(0.95)\`."
+
+4. "Build a dark-green feature band \u2014 full-width section with House Green (\`#1E3932\`) background. Left column: white SoDoSans h2 at 24px weight 600, followed by a Text White Soft (\`rgba(255,255,255,0.70)\`) body paragraph and a CTA row with two buttons (White-filled with Green Accent text for primary, Outlined-on-Dark white border for secondary). Right column: product photography. Split ratio 40/60, stacked vertically below \`768px\`."
+
+5. "Create a Rewards status card \u2014 House Green (\`#1E3932\`) panel with \`12px\` border-radius, colored gradient top stripe (Bronze/Silver/Gold tier). Title in SoDoSans 24px weight 600 in white. Benefits list as white bullets with \`rgba(255,255,255,0.70)\` secondary captions. Bottom progression text in Text White Soft. Stack 3 panels in a grid at \`lg+\`, single column on mobile."
+
+6. "Design a gift-card tile \u2014 card radius matches \`12px\`, fills with an illustrated photograph (hand-drawn watercolor-painted feel) as the entire surface. Subtle drop shadow makes it feel like a physical card on the cream canvas. Group under a category label ('Spring', 'Thank You', 'Birthday') in SoDoSans 24px weight 400 above the grid."
+
+7. "Create a Starbucks product-detail header \u2014 House Green (\`#1E3932\`) band with breadcrumb 'Menu / Refreshers / Pink Energy Drink' in 14/400 white above the product title in SoDoSans 32/700 uppercase white. Product photograph centered below title. Below photo: a 4-up size selector row \u2014 each cup-icon button shows a vertical cup silhouette, size name ('Tall' / 'Grande' / 'Venti' / 'Trenta') in 16/700 white, and fluid-ounce in 13/400 Text White Soft. Selected size wraps the cup icon in a \`2px solid #00754A\` circular ring."
+
+8. "Build a Starbucks customize flow \u2014 under the size selector, 3 stacked outlined-rectangle input rows (white bg, \`1px solid #d6dbde\` border, \`4px\` radius). Each has a floating label ('Add-ins', 'Milk', 'Add-ins') above the top border in 13/700 Text Black uppercase. Value centered (e.g., 'Ice', 'Coconut'). Right side: chevron-down in Text Black Soft. For the scoop row, embed a numeric stepper (\`\u2212\` \`1\` \`+\` with circular \`32px\` outlined buttons). Below all three fields: outlined green 'Customize' pill with gold sparkle icon, \`50px\` radius, \`14px 40px\` padding. Pair with a Green Accent filled 'Add to Order' pill in the same row."
+
+9. "Design a Starbucks product description band \u2014 full-width House Green (\`#1E3932\`) below product header. Top: a gold-outlined '200\u2605 item' Rewards Cost Pill (\`50px\` radius, \`4px 12px\` padding, gold \`#cba258\` border and text). Below: product description in white 16/400/1.5. Nutritional inline summary in white 14/700 ('140 calories, 25g sugar, 2.5g fat') with info-icon tooltip. Outlined-white-on-green pill button 'Full nutrition &amp; ingredients list'. 32px vertical padding."
+
+10. "Create a Starbucks nutrition facts table \u2014 two-column layout inside a White card. Left column: 'Ingredients' header (24/400 Text Black), followed by ingredient list or 'Not available for this item' placeholder paragraph in 14/400 Text Black Soft. Right column: 'Nutrition' header, then label/value rows (nutrient name left, value right) separated by \`1px solid #e7e7e7\` hairlines. Typography: labels in 14/400 Text Black, values in 14/700 Text Black right-aligned. Footnote asterisk markers in 13/400 Text Black Soft at the bottom."
+
+### Iteration Guide
+
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes from this document
+3. Use natural language descriptions ("warm cream canvas," "four-tier green system") alongside exact values
+4. Preserve the 50px pill + \`scale(0.95)\` active state universally
+5. Check that greens are mapped to their correct role (Green Accent for CTA, Starbucks Green for heading, House Green for band)
+6. Don't introduce gradients \u2014 the system is color-block
+7. Keep SoDoSans tracking at \`-0.01em\` / \`-0.16px\` across the board
+
+### Known Gaps
+
+- SoDoSans is a proprietary typeface not available on Google Fonts \u2014 when implementing publicly, use Inter or Manrope as a substitute and document the swap
+- Lander Tall (Rewards serif) is also custom \u2014 substitute with Iowan Old Style, Lora, or Source Serif Pro
+- Specific per-component animation timings beyond the few documented (\`--duration: 0.4s\`, \`--iconTransition: all ease-out 0.2s\`, \`--expanderDuration: 300ms\`) are not captured for every interactive surface
+- Form error-state full styling (red border weight, icon placement) visible on the tint token but not exhaustively extracted
+- Careers-page specific components (cup-name card, search radio grid) are referenced in token names but not covered by this extraction
+- Starbucks Visa Card / Starbucks-Card (SVC) detailed mockup specs are hinted at by \`--svcRoundedCorners\` and \`--svcShadowFilter\` tokens but not fully documented
+`;
+export {
+  starbucksBrief
+};
+//# sourceMappingURL=starbucks.js.map