designmd-forge 1.2.0

package/dist/data/designs/ios-taco-bell.md

@@ -0,0 +1,430 @@
+# Design System Inspiration of Taco Bell (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Taco Bell's iOS app is **a neon, dark-first ordering playground**. Unlike most QSR apps that sit on white, Taco Bell commits to a **purple-tinted near-black canvas (`#0E0A14`)** — the dark isn't neutral gray, it carries a violet bias so the brand purple feels native rather than painted on top. Over that canvas runs the signature **Taco Bell Purple → Electric Magenta gradient (`#702082 → #C72BC8`)**: it's the primary CTA, the active customizer step, the box preview backdrop, and the brand bell plate. The energy color is **Hot Sauce Yellow `#FFC700`** — used for prices, reward chips, and eyebrows — with **Fire Orange `#FF6A1A`** and **Hot Pink `#E928A0`** as occasional heat accents. The mood is bold, playful, slightly rebellious — "Live Más" rendered in pixels.
+
+The signature screen is the **build-your-box customizer**. Taco Bell's product genius is configurability — the Cravings Box, the build-your-own Crunchwrap, "make it a combo," "make it Supreme/Fresco," "add Diablo sauce." The customizer screen is the heart of the app: an **eyebrow + builder title** ("BUILD YOUR BOX" / "Cravings Box"), a **gradient box-preview hero** with a stylized taco illustration, a glow, the box name + item count, and a yellow price; a **horizontally-scrolling numbered step pill row** (Main ✓ → Side ② → Drink ③ → Sweet ④) where the active step glows with the purple-magenta gradient and completed steps go green; then the **option rows** themselves — a food thumbnail, name, description, optional "+$1.00" upcharge, and a control: a magenta **radio** for single-select, or a magenta-outline **stepper** for quantities. A persistent bottom **CTA bar** shows the running box total in yellow and a gradient "Add to Order" button. The second signature surface is the **Cravings menu** — tiles with a purple-gradient food image, name, description, a yellow price, and a gradient "Add" pill that opens the same customizer.
+
+The color system is intentionally loud and gradient-driven. There is no flat single brand color — the purple-to-magenta gradient *is* the brand on screen, and yellow is the spark that draws the eye to value (price, reward, "free"). Everything else is a tightly-controlled neutral on the violet-black so the neon pops. The aesthetic rule: gradients for action and brand presence, yellow for energy/value, deep violet-black for the stage.
+
+Typography is a clean, slightly techy geometric sans (Taco Bell's brand face lineage); on iOS it falls back to SF Pro, and for documentation/catalog **Sora** is the closest free analog. Hierarchy is heavy and confident: screen titles 32pt/800, builder titles 26pt/800, option names 15pt/600, body 16pt/400. Weight (700/800) plus the gradient and yellow carry hierarchy.
+
+**Key Characteristics:**
+- **Dark-first, purple-tinted near-black canvas `#0E0A14`** — violet bias so the brand feels native, never neutral gray
+- **Purple → Magenta gradient `#702082 → #C72BC8`** is the brand on screen — primary CTA, active step, box backdrop, bell plate
+- **Hot Sauce Yellow `#FFC700`** — the energy/value highlight: prices, reward chips, eyebrows, "free"
+- **Build-your-box customizer** — the signature flow: gradient box preview + numbered step pills + radio/stepper option rows
+- **Numbered step pills** — Main / Side / Drink / Sweet; active glows gradient, done turns green `#36C275`
+- **Box-preview hero** — gradient panel with a stylized taco, glow blooms, name + item count + yellow price
+- **Persistent bottom CTA bar** — running box total in yellow + a gradient "Add to Order" button
+- **Cravings menu tiles** — purple-gradient food image, name, yellow price, gradient "Add" pill → opens customizer
+- **Radio + stepper controls** — magenta-tinted single-select radios and magenta-outline quantity steppers
+- **Neon accents** — Fire Orange `#FF6A1A`, Hot Pink `#E928A0` for heat/limited-time energy
+- **Heavy techy-geometric type** — screen titles 32pt/800; gradient + yellow + weight carry hierarchy
+- **Rounded but punchy** — 14pt CTA radius, 20pt box hero, pill chips; bold not soft
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive — Gradient)
+- **Brand Gradient**: `linear-gradient(120deg, #702082 0%, #C72BC8 100%)` — primary CTA, active customizer step, box-preview backdrop, "Add" pills, brand bell. This gradient *is* the brand on screen.
+- **Taco Bell Purple** (`#702082`): Solid fallback / gradient start; flat purple surfaces and outlines.
+- **Purple Bright** (`#8A2BA0`): Hover/secondary purple, mid-gradient.
+- **Electric Magenta** (`#C72BC8`): Gradient end; the single-select radio fill, stepper outline, active-tab tint, focus ring.
+- **Magenta Pressed** (`#A8239F`): Pressed state for magenta controls.
+
+### Energy / Value
+- **Hot Sauce Yellow** (`#FFC700`): Prices, reward chips, eyebrows, "FREE", progress highlights. Text on yellow is `#2A1530` (deep plum-black), never white.
+- **Fire Orange** (`#FF6A1A`): Spicy/heat tags, limited-time flares.
+- **Hot Pink** (`#E928A0`): Promo accents, "new" energy.
+
+### Canvas & Surfaces (Dark — primary)
+- **Purple-Black Canvas** (`#0E0A14`): The primary canvas — near-black with a violet bias.
+- **Dark Surface 1** (`#1A1322`): Cards, step pills, customizer rows base.
+- **Dark Surface 2** (`#261B32`): Elevated tiles, Cravings cards, badge fills.
+- **Dark Divider** (`#34273F`): Hairline dividers between option rows and sections.
+
+### Canvas & Surfaces (Light — secondary)
+Taco Bell is dark-first, but a light theme keeps the same gradient brand on a warm-white stage.
+- **Canvas Light** (`#FFFFFF`): Light canvas.
+- **Surface Light 1** (`#F6F2F8`): Cards, step pills (violet-tinted off-white).
+- **Surface Light 2** (`#EDE6F1`): Elevated tiles.
+- **Divider Light** (`#E3D9EA`): Hairlines.
+
+### Text
+- **Text Primary Dark** (`#F4EFF7`): Primary text on dark — a violet-tinted near-white.
+- **Text Secondary Dark** (`#A99BB6`): Descriptions, metadata, step labels.
+- **Text Tertiary Dark** (`#6E6079`): Disabled, low-emphasis.
+- **Text Primary Light** (`#1F1626`): Primary text on light.
+- **Text Secondary Light** (`#6E6079`): Metadata on light.
+- **Text On Yellow** (`#2A1530`): Mandatory text/icon over `#FFC700`.
+- **Text On Gradient** (`#FFFFFF`): Text/icon over the purple-magenta gradient.
+
+### Roles Summary
+
+| Role | Dark (primary) | Light (secondary) |
+|------|----------------|-------------------|
+| Canvas | `#0E0A14` | `#FFFFFF` |
+| Surface 1 | `#1A1322` | `#F6F2F8` |
+| Surface 2 | `#261B32` | `#EDE6F1` |
+| Divider | `#34273F` | `#E3D9EA` |
+| Text Primary | `#F4EFF7` | `#1F1626` |
+| Text Secondary | `#A99BB6` | `#6E6079` |
+| Brand (gradient) | `#702082 → #C72BC8` | `#702082 → #C72BC8` |
+| Value highlight | `#FFC700` | `#FFC700` |
+| Error | `#FF4D6D` | `#E11D48` |
+
+### Semantic
+- **Success Green** (`#36C275`): Completed customizer step, order placed, "saved".
+- **Error Red** (`#FF4D6D`): Item unavailable, payment failure, destructive delete.
+- **Warning Orange** (`#FF6A1A`): "Few left", "ends tonight" (shares the fire-orange accent).
+- **Info Magenta** (`#C72BC8`): Informational links, hints.
+- **Reward Yellow** (`#FFC700`): Reward chips, points, "FREE" flags (the value highlight).
+
+## 3. Typography Rules
+
+### Font Family
+- **Brand / All UI**: Taco Bell's brand sans lineage — a clean, slightly techy geometric humanist (used across the app's headings and UI). Bundled in the official app.
+- **iOS Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Web/Catalog Fallback**: `Sora` (closest free geometric sans with the same confident weight range)
+- Numerals are tabular in prices, totals, step counts, and timers so values align.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | Brand Sans | 32pt | 800 | 1.2 | -0.4pt | "Live Más", "Menu" large title |
+| Builder Title | Brand Sans | 26pt | 800 | 1.25 | -0.5pt | "Cravings Box" customizer hero |
+| Section Header | Brand Sans | 22pt | 700 | 1.3 | -0.2pt | "Build your box" |
+| Step / Card Title | Brand Sans | 18pt | 800 | 1.3 | -0.3pt | "Choose your side" |
+| Body | Brand Sans | 16pt | 400 | 1.5 | 0pt | Descriptions, paragraph copy |
+| Option Name | Brand Sans | 15pt | 600 | 1.4 | 0pt | "Nacho Fries" |
+| Price / Total | Brand Sans | 15pt | 800 | 1.3 | 0pt | "$5.99" — yellow, tabular |
+| Meta | Brand Sans | 14pt | 400 | 1.4 | 0pt | Option description, "+$1.00" |
+| Eyebrow | Brand Sans | 12pt | 700 | 1.1 | 1.0pt | "BUILD YOUR BOX" — UPPERCASE, yellow |
+| Step Pill | Brand Sans | 12pt | 700 | 1.0 | 0pt | "Main", "Side" + number badge |
+| Button (Primary) | Brand Sans | 15pt | 800 | 1.0 | 0.2pt | Gradient CTA / "Add to Order" |
+| Chip / Badge | Brand Sans | 12pt | 800 | 1.1 | 0.3pt | "STEP 2 OF 4", "FREE REWARD" |
+| Caption | Brand Sans | 12pt | 400 | 1.4 | 0pt | T&C, tiny print |
+| Tab Label | Brand Sans | 10pt | 700 | 1.0 | 0.1pt | Bottom tab labels |
+
+### Principles
+- **Weight + gradient + yellow carry hierarchy**: emphasis lives at 700/800, in the purple-magenta gradient (action), and in Hot Sauce Yellow (value). The builder title and the yellow price are the two anchors of the customizer.
+- **Eyebrows are yellow and UPPERCASE**: every builder/section gets a 12pt/700 +1pt-tracked yellow eyebrow — it's a signature Taco Bell editorial tic.
+- **Tabular numerals for money/steps**: prices, the running box total, "STEP 2 OF 4", and timers all align.
+- **Punchy, not soft**: heavy weights + tight tracking on titles keep the tone bold and a little rebellious.
+- **Dynamic Type**: titles, body, option copy scale; step pills, eyebrows, chips/badges, tab labels stay fixed (layout-critical).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Add to Order / Continue / Checkout)**
+- Shape: Rounded rectangle, 14pt corner radius
+- Background: `linear-gradient(120deg, #702082 0%, #C72BC8 100%)`
+- Text: `#FFFFFF`, Brand Sans 15pt weight 800
+- Padding: 14–15pt vertical, 28pt horizontal (full-width in the bottom CTA bar)
+- Pressed: `filter: brightness(0.95)` + scale 0.98
+- Disabled: `#261B32` fill, text `#6E6079`
+
+**Value Button (Apply Reward / Redeem)**
+- Background: `#FFC700` (Hot Sauce Yellow)
+- Text: `#2A1530` (deep plum-black — never white), Brand Sans 15pt weight 800
+- Corner radius: 14pt
+- Pressed: `filter: brightness(0.95)`
+
+**Outline Button (Customize / Edit)**
+- Background: transparent
+- Border: 1.5pt `#C72BC8` (magenta)
+- Text: `#C72BC8`, Brand Sans 14pt weight 700
+- Corner radius: 12pt
+- Padding: 12pt vertical, 22pt horizontal
+- Pressed: background `rgba(199,43,200,0.12)`
+
+**Text Button (Skip this step / See all)**
+- Text: `#FFC700` (yellow), Brand Sans 14pt weight 800
+- No background, no border
+- Pressed: opacity 0.6
+
+**Add Pill (Cravings tile)**
+- Pill, 999pt radius, brand gradient fill
+- "Add" / "ADD" in `#FFFFFF`, Brand Sans 12pt weight 800 UPPERCASE +0.3pt
+- Padding: 7pt vertical, 16pt horizontal
+- Tapping opens the item customizer
+
+### Core Atoms
+
+**Step Pill**
+- Pill, 999pt radius, 30pt tall
+- Leading 16pt number badge (circle) + label
+- Default: `#1A1322` fill, 1pt `#34273F` border, text/badge `#A99BB6`
+- Active: brand gradient fill, white text, badge `rgba(255,255,255,0.25)`
+- Done: 1pt `#36C275` border, text `#F4EFF7`, badge `#36C275` with a `✓` in `#06210F`
+- Horizontally scrollable row, 8pt gap
+
+**Single-Select Radio**
+- 24pt circle, 2pt border
+- Off: `#34273F` border, transparent
+- On: `#C72BC8` border + a 16pt inset `#C72BC8` filled dot
+- Tap target ≥ 44pt; whole option row is tappable
+
+**Quantity Stepper**
+- `−` / `+` in 26pt circles, 1.5pt `#C72BC8` outline, magenta glyphs
+- Quantity centered, Brand Sans 14pt/800 `#F4EFF7`, tabular
+- Used for add-on quantities (extra sauce, sides)
+
+**Reward / Status Chip**
+- Pill, 999pt radius
+- "STEP 2 OF 4" / "FREE REWARD": brand gradient or yellow `#FFC700` (text `#2A1530`)
+- "DONE": green `#36C275` (text `#06210F`); "CANTINA": magenta-outline transparent
+- Brand Sans 12pt weight 800 UPPERCASE +0.3pt
+
+**Eyebrow**
+- Brand Sans 12pt weight 700, UPPERCASE, +1pt tracking
+- Color `#FFC700` (yellow) above builder/section titles
+
+### Navigation
+
+**Builder Header**
+- Yellow eyebrow ("BUILD YOUR BOX")
+- Builder title — Brand Sans 26pt/800 `#F4EFF7`
+- Sub-line — 13pt `#A99BB6`
+- No heavy chrome; the box-preview hero sits directly beneath
+
+**Bottom Tab Bar**
+- Height: 70pt incl. safe area
+- Background: `rgba(14,10,20,0.96)` with blur, 0.5pt top `#34273F` divider
+- Tabs (5): **Home**, **Menu**, **Rewards**, **Bag**, **Account**
+- Icon 22pt; active = filled glyph in `#C72BC8` (magenta); inactive = stroke `#7A6C86`
+- Labels always shown, 10pt/700
+- Bag shows a count badge (gradient dot, white number)
+
+**Top Nav (Menu / Item detail)**
+- Transparent or `#0E0A14` solid; leading back chevron (circular icon button)
+- Center: screen title, Brand Sans 18pt/800
+- Trailing: search / bag as icon buttons
+- Sticky category strip on the menu once scrolled
+
+**Persistent Bottom CTA Bar**
+- `rgba(14,10,20,0.96)` background, 1pt `#34273F` top divider
+- Left: "Box total" eyebrow + amount (`#F4EFF7` 19pt/800, the amount sometimes yellow in cart)
+- Right: full-width-flexed gradient "Add to Order" button
+- Always visible during a build; total updates live
+
+### Input Fields
+
+**Search Field**
+- Height: 48pt
+- Background: `#1A1322` / `#F6F2F8`
+- Corner radius: 14pt
+- Leading 18pt `magnifyingglass` `#A99BB6`
+- Placeholder: "Search the menu" `#A99BB6` 15pt
+- Focus: 1.5pt `#C72BC8` border + faint magenta glow
+
+**Form Field (address / payment)**
+- Height: 52pt
+- Background: `#1A1322` / `#F6F2F8`
+- Corner radius: 12pt
+- Floating label 11pt `#A99BB6` on focus; text `#F4EFF7` 15pt
+- Focus: 1.5pt `#C72BC8` border
+- Error: 1.5pt `#FF4D6D` border + 12pt red helper text
+
+**Promo Code Field**
+- Inline, dashed `#C72BC8` border, 12pt radius
+- "APPLY" trailing text button in `#FFC700` 13pt/800 UPPERCASE
+
+### Distinctive Components
+
+**Box-Preview Hero**
+- 20pt rounded panel, brand-purple-gradient background with radial magenta + yellow glow blooms
+- Center: stylized food/taco illustration (or product photo)
+- Bottom-left: box name (Brand Sans 13pt/800 white) + item count sub (12pt yellow)
+- Bottom-right: box price in `#FFC700` 20pt/800
+- Updates as the user completes steps (illustration/contents morph)
+
+**Numbered Step Pill Row**
+- Horizontally-scrollable pills representing the build sequence
+- Exactly one **active** (gradient), zero-or-more **done** (green), the rest **default**
+- Tapping a pill jumps to that step (if reachable)
+
+**Customizer Option Row**
+- 46pt rounded food thumbnail + name (15pt/600) + description (12pt secondary) + optional "+$1.00" upcharge (13pt/700 secondary) + control (radio or stepper)
+- 1pt `#34273F` divider between rows
+- Selecting advances the active step pill and updates the running total + box hero
+
+**Cravings Menu Tile**
+- 16pt rounded card on `#261B32`
+- Leading 72pt purple-gradient food image
+- Body: name (15pt/800), description (12pt secondary), then a footer row: yellow price + trailing gradient "Add" pill
+- "Add" opens the customizer for that item
+
+**Make-It-A-Combo Upsell Sheet**
+- Bottom sheet, 28pt top corners
+- "Make it a combo?" gradient header, +$X yellow delta, side/drink quick-pick
+- "Add combo" gradient CTA / "No thanks" text button
+
+**Rewards / Cantina Card**
+- Gradient or dark card with points balance in `#FFC700`, progress toward next reward
+- "FREE REWARD" yellow chip when redeemable
+
+**Sauce Picker**
+- A signature Taco Bell touch — Mild / Hot / Fire / Diablo chips with heat-colored borders (`#FFC700` → `#FF6A1A` → `#FF4D6D`), multi-select with the magenta stepper
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
+- Option row vertical padding: 14pt
+- Screen horizontal inset: 18pt
+- Intra-card content gaps: 2–10pt
+- Section/builder header top margin: 16pt
+
+### Grid & Container
+- iPhone: single-column build flow; step pills in a scrollable row; option rows full-width
+- Box-preview hero spans content width at ~150pt tall
+- Cravings menu: single-column tiles (or 2-up on larger devices)
+- iPad: 2-column (menu list + live box preview/customizer panel), max content 760pt centered, 24pt insets
+- The bottom CTA bar is pinned and full-width
+
+### Whitespace Philosophy
+- **The stage is dark and roomy**: the violet-black canvas + generous gaps let the neon gradient and yellow pop
+- **The box hero owns the top of the customizer**: it's the largest, most colorful block — it shows what you're building
+- **Option rows breathe**: 14pt vertical padding + thin dividers, never boxed-in, so the list scans fast
+- **Gradient = action, yellow = value, violet-black = stage**: a disciplined three-role color logic keeps the loud palette coherent
+
+### Border Radius Scale
+- Square (0pt): dividers, full-bleed edges
+- Subtle (6pt): tiny tags
+- Compact (10pt): inline chips, small controls
+- Standard (12–14pt): buttons, search/form fields, Cravings cards
+- Hero (20pt): box-preview panel
+- Sheet (28pt): bottom sheets (combo upsell, sauce picker)
+- Pill (999pt): step pills, "Add" pills, reward/status chips, steppers
+- Circle (50%): radios, stepper buttons, avatars
+
+## 6. Depth & Elevation
+
+Taco Bell uses glow more than shadow — on a dark stage, a colored bloom reads as "this is the live/active thing."
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, 1pt divider/border | Option rows, default step pills, list cards |
+| Glow (Level 1) | Radial magenta/yellow bloom inside the panel | Box-preview hero, active step pill, focused field |
+| Lifted (Level 2) | `rgba(0,0,0,0.5) 0 4px 14px` | Bottom CTA bar, floating "Add" confirmations |
+| Sheet (Level 3) | `rgba(0,0,0,0.55) 0 -6px 28px` | Bottom sheets (combo upsell, sauce picker) |
+| Modal Overlay | `rgba(8,5,12,0.6)` | Dim behind sheets and dialogs |
+
+**Shadow Philosophy**: Cards are flat (a divider/border defines them). The expressive depth cue is **glow**: the box-preview hero blooms purple-magenta and yellow from its corners; the active step pill and a focused field carry a faint magenta halo. Drop shadow is reserved for the pinned CTA bar and bottom sheets so they detach from the scrolling stage. On the (secondary) light theme, glows soften and a normal soft shadow replaces them on the hero and sheets.
+
+### Motion
+- **Add to Order**: the gradient CTA flashes brighter (brightness 1.0→1.12→1.0, 220ms), the box total rolls up, a soft haptic fires; the item animates into the Bag tab with a magenta trail
+- **Step advance**: when an option is chosen, the completed step pill cross-fades default → gradient → green over 250ms; the row's radio fills with a 150ms scale-in; the box-preview contents morph (200ms ease-out)
+- **Box-preview build**: as steps complete, the illustration/photo updates with a quick crossfade + a subtle glow pulse
+- **Cravings "Add" → customizer**: shared-element gradient image zoom into the customizer, 300ms ease-out
+- **Combo upsell sheet**: slides up 300ms ease-out from the CTA; dim fades; drag-to-dismiss with rubber-banding
+- **Sauce pick**: chip border ignites (color sweep) on select; multi-select stepper bumps with a soft tick
+- **Reward redeem**: yellow chip flips, a confetti-free but bright scale bounce (1.05) + success haptic
+- **Pull-to-refresh**: gradient bell spinner; haptic tick on release
+- **Haptics**: soft impact on add-to-order, light tick on step/radio/sauce select, success notification on order placed / reward redeemed
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the purple → magenta gradient (`#702082 → #C72BC8`) for primary CTAs, the active step, the box hero — it's the brand on screen
+- Keep the canvas a purple-tinted near-black (`#0E0A14`) — dark-first, never neutral gray
+- Use Hot Sauce Yellow (`#FFC700`) for prices, reward chips, and UPPERCASE eyebrows — text on it is `#2A1530`, never white
+- Make the build-your-box customizer the centerpiece: gradient box hero + numbered step pills + radio/stepper rows
+- Show exactly one active step (gradient), mark completed steps green (`#36C275`)
+- Keep a persistent bottom CTA bar with a live-updating total + gradient "Add to Order"
+- Use glow (radial blooms) on the box hero and active step instead of heavy shadows
+- Put a yellow eyebrow above builder/section titles, UPPERCASE with +1pt tracking
+- Use magenta radios for single-select and magenta-outline steppers for quantities
+- Roll the box total and morph the box-preview contents as steps complete
+- Keep food imagery vivid against the neon chrome; use tabular numerals for money/steps
+
+### Don't
+- Don't use a flat single brand color where the gradient belongs — the purple→magenta gradient is the identity
+- Don't put the app on white by default — it's dark-first with a violet bias
+- Don't use a neutral gray dark canvas — `#0E0A14` carries purple
+- Don't put white text on yellow — `#2A1530` deep plum-black only
+- Don't bury the box-preview hero or the running total — they anchor the build
+- Don't show multiple active steps — exactly one gradient-active at a time
+- Don't replace the glow language with flat Material shadows on the hero/active elements
+- Don't desaturate food imagery — the neon stage stays vivid
+- Don't drop the yellow eyebrows — they're a signature editorial tic
+- Don't animate sluggishly — motion is punchy and quick (150–300ms), tied to building/ordering
+- Don't use timid sentence-case chips — step/reward chips are UPPERCASE and bold
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Single column; box hero ~130pt; step pills scroll; compact builder header |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; builder header respects it |
+| iPhone 15/16 Pro Max | 430pt | Taller box hero (~170pt); larger illustration |
+| iPad (portrait) | 768pt | 2-column: menu list + live customizer/box-preview panel; content max 760pt centered |
+| iPad (landscape) | 1024pt+ | Same 2-column; persistent bag/summary on the right |
+
+### Dynamic Type
+- Screen titles, builder titles, section headers, body, option copy: full scale
+- Step pills, eyebrows, chips/badges, tab labels, the box-hero price: FIXED (layout-critical)
+- Prices/totals scale one step then truncate gracefully
+
+### Orientation
+- iPhone: portrait-locked for the build flow (category standard)
+- iPad: supports landscape with a 2-column build + sticky summary
+
+### Touch Targets
+- Step pill: ≥ 30pt tall, full-pill tap, 44pt hit
+- Radio / stepper button: visual ~24–26pt, 44pt hit area
+- Gradient CTA: ≥ 48pt tall
+- Tab bar icon: 22pt glyph, 44pt+ hit
+- Option row: full-row tap toggles the radio
+
+### Safe Area Handling
+- Top: builder header + Dynamic Island respected
+- Bottom: the persistent CTA bar sits above the tab bar, both above the home indicator
+- Keyboard: address/promo forms scroll above keyboard; combo/sauce sheets position above it
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (dark, primary): `#0E0A14`
+- Surface 1 / 2: `#1A1322` / `#261B32`
+- Divider: `#34273F`
+- Text primary: `#F4EFF7` (dark) / `#1F1626` (light)
+- Text secondary: `#A99BB6` (dark) / `#6E6079` (light)
+- Brand gradient: `linear-gradient(120deg, #702082 0%, #C72BC8 100%)`
+- Magenta (controls/focus): `#C72BC8`
+- Value highlight: `#FFC700` — text on it is `#2A1530`
+- Success (step done): `#36C275`
+- Accents: Fire Orange `#FF6A1A`, Hot Pink `#E928A0`
+- Error: `#FF4D6D`
+
+### Example Component Prompts
+- "Build the Taco Bell box-preview hero in SwiftUI: a 20pt rounded panel filled with `linear-gradient(150deg, #702082, #4A1559, #2B0C36)`. Add two radial glow blooms — magenta `rgba(199,43,200,0.35)` top-right and yellow `rgba(255,199,0,0.22)` bottom-left. Center a stylized taco illustration. Bottom-left: box name in Sora 13pt/800 white + an item-count sub in 11pt `#FFC700`. Bottom-right: the box price in `#FFC700` 20pt/800. When a step completes, crossfade the illustration and pulse the glow."
+
+- "Create the Taco Bell numbered step pill row: a horizontally-scrollable HStack, 8pt gap. Each pill is 30pt tall, 999pt radius, with a leading 16pt circular number badge + label in Sora 12pt/700. Default: `#1A1322` fill, 1pt `#34273F` border, `#A99BB6` text. Active (exactly one): brand gradient `#702082 → #C72BC8` fill, white text, badge `rgba(255,255,255,0.25)`. Done: 1pt `#36C275` border, `#F4EFF7` text, badge `#36C275` with a `✓` in `#06210F`."
+
+- "Render a Taco Bell customizer option row: a 46pt rounded food thumbnail, then name in Sora 15pt/600 `#F4EFF7` + a 12pt `#A99BB6` description, an optional '+$1.00' upcharge in 13pt/700 `#A99BB6`, and a trailing control. Single-select uses a 24pt radio (off: 2pt `#34273F` border; on: 2pt `#C72BC8` border + a 16pt inset `#C72BC8` dot). Quantity uses a stepper: `−`/`+` in 26pt circles with a 1.5pt `#C72BC8` outline and magenta glyphs, quantity in Sora 14pt/800 tabular. 1pt `#34273F` divider between rows. Selecting advances the active step pill and updates the running total."
+
+- "Build the Taco Bell persistent bottom CTA bar: `rgba(14,10,20,0.96)` background, 1pt `#34273F` top divider. Left: a 'Box total' eyebrow 11pt `#A99BB6` over the amount in `#F4EFF7` 19pt/800 (tabular). Right: a flex-grow gradient button 'Add to Order' (`linear-gradient(120deg, #702082, #C72BC8)`, white Sora 15pt/800, 14pt radius, 15pt padding). On tap, brighten the gradient 1.0→1.12→1.0 over 220ms, roll the total, soft haptic, and animate the item into the Bag tab."
+
+- "Create a Taco Bell Cravings menu tile: a 16pt rounded card on `#261B32`. Leading 72pt purple-gradient food image. Body: name in Sora 15pt/800 `#F4EFF7`, a 12pt `#A99BB6` description, then a footer row with the price in `#FFC700` 15pt/800 and a trailing gradient 'Add' pill (999pt radius, white Sora 12pt/800 UPPERCASE). Tapping 'Add' shared-element-zooms the gradient image into the customizer over 300ms."
+
+- "Render the Taco Bell bottom tab bar: 5 tabs — Home, Menu, Rewards, Bag, Account. 22pt icons; active = filled glyph in `#C72BC8`; inactive = stroke `#7A6C86`; labels 10pt/700 always shown. The Bag tab has a gradient count badge with a white number. Bar background `rgba(14,10,20,0.96)` blurred with a 0.5pt `#34273F` top divider."
+
+### Iteration Guide
+1. The purple → magenta gradient (`#702082 → #C72BC8`) is the brand on screen — CTAs, active step, box hero
+2. Canvas is a purple-tinted near-black `#0E0A14` — dark-first, never neutral gray
+3. Hot Sauce Yellow `#FFC700` is the value highlight (prices, rewards, eyebrows); text on it is `#2A1530`
+4. The build-your-box customizer is the centerpiece: gradient box hero + numbered step pills + radio/stepper rows
+5. Exactly one step pill is gradient-active; completed steps turn green `#36C275`
+6. A persistent bottom CTA bar shows a live-updating total + a gradient "Add to Order"
+7. Depth is glow (radial blooms on the hero/active step), not heavy shadow — drop shadow only for the CTA bar & sheets
+8. Yellow UPPERCASE eyebrows (+1pt tracking) sit above builder/section titles — a signature tic
+9. Magenta radios for single-select, magenta-outline steppers for quantities
+10. Motion is punchy and quick (150–300ms): step pill cross-fade to green, total roll, box-hero morph, gradient-CTA flash