designmd-forge 1.2.0

package/dist/data/designs/ios-chipotle.md

@@ -0,0 +1,340 @@
+# Design System Inspiration of Chipotle (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Chipotle's iOS app is built like a foil-wrapped burrito: warm, hand-made, and stripped to the essentials. The canvas is a cream paper tone (`#FFF5E1`) — not stark white — evoking the kraft-paper bags and butcher-paper liners of the restaurant. Against that warm field, food photography of bowls and burritos sits on clean white cards (`#FFFFFF`), and the entire experience funnels toward one ritual: building your order, ingredient by ingredient, from a vertical list of choices. This is fast-casual design with a craft sensibility — utilitarian, but never cold.
+
+The accent is Chipotle Red (`#A81612`) — a deep, brick-toned red borrowed from the brand's logo and signage. It is reserved exclusively for action: the "Add to Bag" button, the order CTA, the rewards points, selected ingredient checkmarks, and the active tab. A deep espresso brown (`#451400`) carries all primary text, reinforcing the earthy, food-forward palette — there is no black anywhere in the app. The combination of brick red on cream with brown text feels like a menu board chalked on kraft paper.
+
+Typography is the loudest design choice. Headers are set in a bold condensed grotesque (Archivo / Archivo Narrow, with Avenir for body) in ALL CAPS — "BURRITO BOWL", "BUILD YOUR OWN", "ENTRÉES" — echoing the stenciled, industrial type painted on Chipotle's walls. Weights run 400 / 700 / 800, with the condensed bold caps doing the heavy lifting at the top of every screen. Body copy and ingredient names drop to a calmer sentence-case Avenir at 15pt. The contrast between shouting condensed headers and quiet body text is the signature typographic rhythm.
+
+**Key Characteristics:**
+- Cream paper canvas (`#FFF5E1`) — kraft-bag warmth, never stark white
+- Chipotle Red (`#A81612`) as the only accent — Add to Bag, order CTA, rewards, selected state
+- Espresso brown (`#451400`) for all text — no black anywhere
+- ALL-CAPS bold condensed headers (Archivo) — stenciled, menu-board energy
+- Build-your-burrito ingredient stepper — a scrollable list of single/multi-select rows
+- Foil-texture hero — a brushed metallic gradient behind featured items
+- Rewards points ring — circular progress toward the next free entrée
+- Step progress indicator — a slim segmented bar tracking the build flow
+- Sentence-case Avenir body — the quiet counterpoint to the shouting headers
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Chipotle Red** (`#A81612`): Primary CTA ("Add to Bag", "Checkout"), order button, rewards points, selected ingredient checkmark, active tab, progress fill.
+- **Red Pressed** (`#8C1210`): Active/pressed state for red buttons.
+- **Red Tint** (`#F4E2E1`): Light wash behind "added" confirmation chips and selected ingredient rows.
+
+### Canvas & Text
+- **Cream Canvas** (`#FFF5E1`): Primary canvas — the warm kraft-paper field.
+- **Surface White** (`#FFFFFF`): Cards, ingredient list container, sheets, food-photo backgrounds.
+- **Cream Deep** (`#F4E8D0`): Pressed state on cream, alternating list zones.
+- **Divider** (`#E8DCC4`): Hairline dividers between ingredient rows and card sections.
+- **Text Primary** (`#451400`): Headers, ingredient names, prices, primary UI text — espresso brown.
+- **Text Secondary** (`#8A6B4F`): Calorie counts, descriptions, metadata, helper text — milk-chocolate brown.
+- **Text Tertiary** (`#B49A82`): Disabled labels, very low-emphasis captions.
+
+### Brand Support
+- **Adobe Tan** (`#AC8C5B`): Warm tan used in the foil hero gradient and decorative dividers.
+- **Foil Silver** (`#D9D4C9` → `#A8A296`): Brushed-metal gradient for the featured-item hero (evokes burrito foil).
+
+### Semantic
+- **Success Green** (`#3C7A3C`): Order-confirmed state, "ready for pickup" badge.
+- **Calorie Gray** (`#8A6B4F`): Calorie count label (shares secondary brown).
+- **Error Red** (`#A81612`): Validation errors, item-unavailable (shares brand red).
+- **Spice Orange** (`#E07B26`): "Spicy" / hot indicator on salsas.
+
+### Dark Mode (Limited Use)
+Chipotle's iOS app is light-only by design — the cream-paper warmth is core to the brand. A dark variant exists for system dark mode but is not the designed experience.
+- **Dark Canvas** (`#1C1410`)
+- **Dark Surface** (`#2A2018`)
+- **Dark Text** (`#FFF5E1`)
+- Chipotle Red stays identical — the brick tone reads on dark.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Headers**: `Archivo` (and `Archivo Narrow` for the most condensed caps) — bold, used in ALL CAPS
+- **Body / UI**: `Avenir` (Avenir Next) — calm sentence-case for ingredient names and copy
+- **Numerals**: Avenir tabular figures for prices, calories, points (`font-variant-numeric: tabular-nums`)
+- **Fallback Stack**: `'Archivo', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'SF Pro Text', Helvetica, Arial, sans-serif`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Hero Header (CAPS) | Archivo Narrow | 32pt | 800 | 1.05 | 0.4pt | "BUILD YOUR OWN" foil hero |
+| Screen Title (CAPS) | Archivo | 26pt | 800 | 1.1 | 0.3pt | "ENTRÉES", "REWARDS" nav title |
+| Section Header (CAPS) | Archivo | 18pt | 700 | 1.15 | 0.6pt | "RICE", "PROTEIN", "TOPPINGS" |
+| Item Name | Avenir Next | 17pt | 700 | 1.25 | 0pt | Menu item / ingredient title |
+| Body | Avenir Next | 15pt | 400 | 1.45 | 0pt | Descriptions, instructions |
+| Price | Avenir Next | 16pt | 700 | 1.2 | 0pt | Item price, tabular figures |
+| Button (CAPS) | Archivo | 16pt | 800 | 1.0 | 0.8pt | "ADD TO BAG", "CHECKOUT" |
+| Points Value | Archivo | 34pt | 800 | 1.0 | 0pt | Rewards-ring center number |
+| Meta / Calories | Avenir Next | 13pt | 400 | 1.3 | 0pt | "300 Cal", "Add for $2.00" |
+| Badge (CAPS) | Archivo | 11pt | 700 | 1.2 | 0.6pt | "NEW", "SPICY", "LIMITED" |
+| Tab Label | Avenir Next | 11pt | 700 | 1.0 | 0.2pt | Bottom tab bar labels |
+| Caption | Avenir Next | 11pt | 400 | 1.3 | 0pt | Fine print, allergen notes |
+
+### Principles
+- **Headers SHOUT, body whispers**: Display type is ALL CAPS condensed bold (Archivo); body and ingredient names are calm sentence-case Avenir — the contrast is the brand
+- **Positive letter-spacing on caps**: ALL-CAPS headers and buttons carry 0.3-0.8pt tracking so the condensed forms breathe; sentence-case body sits at 0pt
+- **Weights at 400 / 700 / 800**: Regular Avenir for body, bold Avenir for item names and prices, extra-bold Archivo for headers and buttons
+- **Tabular figures for numbers**: Prices, calorie counts, and rewards points use tabular Avenir so they align
+- **Brown, never black**: All text is espresso `#451400` or milk-chocolate `#8A6B4F` — pure black is never used
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA ("ADD TO BAG" / "CHECKOUT")**
+- Background: `#A81612`
+- Text: `#FFFFFF`, Archivo 16pt weight 800, ALL CAPS, 0.8pt tracking
+- Height: 54pt (full-width sheet CTA)
+- Corner radius: 8pt (slightly squared — kraft, not pill)
+- Pressed: background `#8C1210`, scale 0.98
+- Disabled: background `#E8DCC4`, text `#B49A82`
+- Often shows a trailing price: "ADD TO BAG · $9.65"
+
+**Secondary / Outline ("CUSTOMIZE", "ADD A SIDE")**
+- Background: transparent
+- Border: 2pt solid `#451400`
+- Text: `#451400`, Archivo 14pt weight 700, ALL CAPS, 0.6pt tracking
+- Padding: 12pt vertical, 22pt horizontal
+- Corner radius: 8pt
+- Pressed: background `#F4E8D0`
+
+**Text Button ("Skip", "Edit")**
+- Font: Avenir Next 14pt weight 700
+- Color: `#A81612`
+- No underline, 44pt hit area
+
+**Quantity Control (on cart line)**
+- Squared 8pt-radius outline group: "−" | qty | "+"
+- Border 1.5pt `#E8DCC4`, glyphs `#451400`, qty Avenir 16pt weight 700 tabular
+- Pressed glyph: background `#F4E8D0`
+
+### Cards & Containers
+
+**Menu Item Card**
+- Layout: food photo top (4:3, 8pt radius) or leading 72pt square thumbnail → name + calorie + price
+- Background: `#FFFFFF`, 8pt radius, soft warm shadow
+- Name: Avenir 17pt weight 700 `#451400`
+- Calorie line: "630 Cal" Avenir 13pt weight 400 `#8A6B4F`
+- Price: Avenir 16pt weight 700 `#451400`
+- Pressed: scale 0.98
+
+**Foil Hero (Featured Item)**
+- Full-width banner, ~200pt tall, 12pt radius
+- Background: brushed-metal gradient (`#D9D4C9` → `#A8A296`, diagonal) with a subtle vertical streak texture (evokes burrito foil)
+- Overlaid ALL-CAPS Archivo Narrow header (32pt weight 800 `#451400`) + subtitle + red CTA
+- Used for "BUILD YOUR OWN" and limited-time items
+
+**Rewards Points Ring**
+- Circular progress ring, ~120pt diameter
+- Track: `#E8DCC4`; progress arc: `#A81612` (conic, from top)
+- Center: points value (Archivo 34pt weight 800 `#A81612`, tabular) + "POINTS" label (Archivo 11pt weight 700 caps `#8A6B4F`)
+- Below: "1,375 points until your next free entrée" (Avenir 13pt `#8A6B4F`)
+
+**Cart Line Row**
+- Layout: 56pt photo thumbnail → item name + customizations summary → price + quantity control
+- Customizations: "White Rice, Black Beans, Chicken, Mild" Avenir 13pt weight 400 `#8A6B4F`, 2-line clamp
+- Divider `#E8DCC4` between rows
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 56pt + safe area
+- Background: `#FFFFFF`, hairline top border `#E8DCC4`
+- Tabs: Order, Scan, Delivery, More
+- Icon size: 24pt
+- Active color: `#A81612` (filled icon + label)
+- Inactive: `#8A6B4F` (outlined icon)
+- Labels: Avenir 11pt weight 700, ALL CAPS-friendly, always shown
+- The Scan tab is visually centered/emphasized (in-store pay)
+
+**Top Nav**
+- Height: 52pt + safe area
+- Pickup/delivery toggle + location top-left (Avenir 15pt weight 700 + chevron)
+- Screen title center: Archivo 26pt weight 800 ALL CAPS `#451400`
+- Bag icon top-right (24pt) with a red count badge
+
+**Step Progress Bar (Build Flow)**
+- A slim segmented bar pinned below the nav during the build-your-burrito flow
+- Segments: equal-width pills, 4pt tall, 2pt gap
+- Completed/active: `#A81612`; upcoming: `#E8DCC4`
+- Slides the active segment fill forward as the user advances steps
+
+### Input Fields
+
+**Search Field**
+- Background: `#FFFFFF`, border 1.5pt `#E8DCC4`
+- Height: 44pt
+- Corner radius: 8pt
+- Leading SF Symbol `magnifyingglass` 18pt `#8A6B4F`
+- Placeholder: "Search the menu" Avenir 15pt weight 400 `#8A6B4F`
+- Focus: 2pt border `#A81612`
+
+**Filter / Diet Chip**
+- Background: `#FFFFFF` border 1.5pt `#E8DCC4` default / `#A81612` filled selected
+- Text: `#451400` default / `#FFFFFF` selected, Avenir 13pt weight 700
+- Padding: 8pt vertical, 16pt horizontal
+- Corner radius: 8pt (squared)
+- Examples: "Vegetarian", "Keto", "Whole30", "High Protein"
+
+### Distinctive Components
+
+**Build-Your-Burrito Ingredient Stepper**
+- The signature flow. A vertically scrolling list grouped by step section (RICE → BEANS → PROTEIN → TOPPINGS → SALSAS).
+- Each section has an ALL-CAPS Archivo header (18pt weight 700, 0.6pt tracking `#451400`) and a rule below.
+- **Single-select rows** (Rice, Beans): radio-style — selected shows a filled `#A81612` circular check at trailing; row gets `#F4E2E1` wash + 1.5pt `#A81612` left rule.
+- **Multi-select rows** (Toppings, Salsas): checkbox-style — selected shows a filled `#A81612` rounded-square check; can stack ("Extra" toggle adds a "+$2.00" tag in `#8A6B4F`).
+- Each row: ingredient name (Avenir 17pt weight 700 `#451400`), optional calorie/price meta (13pt `#8A6B4F`), trailing selector.
+- Tapping a row animates the check scaling 0 → 1 with a spring + light haptic.
+- A persistent footer shows the running total and a red "ADD TO BAG · $X" CTA.
+
+**Step Progress Slide**
+- As the user finishes a section and scrolls/advances, the segmented progress bar slides its red fill to the next segment over ~250ms ease-out.
+
+**Foil Texture**
+- The featured hero uses a brushed-metal gradient with thin diagonal streaks at low opacity to read as crinkled foil — a tactile, on-brand background reserved for hero moments only.
+
+**Rewards Ring Fill**
+- On the Rewards screen, the red progress arc animates from 0 to its value over ~700ms ease-out on appear, with the center points number counting up.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 54
+- Standard margin: 16pt horizontal
+- Ingredient row height: 56-64pt
+- Card padding: 16pt internal
+
+### Grid & Container
+- Content width: full device width with 16pt horizontal margins
+- Menu grid: single-column cards, or 2-column tiles for category browse (12pt gap)
+- Ingredient list: full-width single-column rows grouped by section
+
+### Whitespace Philosophy
+- **Generous around the build list**: Ingredient rows get 56-64pt height with comfortable padding — the build flow should feel unhurried and tactile
+- **Cards float on cream**: White cards sit on the `#FFF5E1` field with a soft warm shadow; the cream is the breathing room
+- **Headers get air**: ALL-CAPS section headers have 24pt above and a divider below — the menu-board rhythm depends on space around the shouting type
+
+### Border Radius Scale
+- Sharp (0pt): Full-bleed photography, very rare
+- Squared (8pt): Buttons, cards, chips, search field, quantity control — the kraft, slightly-squared default
+- Comfortable (12pt): Foil hero, bottom sheets
+- Large (16pt): Modal sheets
+- Pill (500pt): Progress segments, count badges
+- Circle (50%): Rewards ring, ingredient checkmarks, icon buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, divider only | Ingredient rows, grouped list content |
+| Card (Level 1) | `rgba(69,20,0,0.08) 0 2px 6px` | Menu cards lifting off the cream canvas |
+| Raised (Level 2) | `rgba(69,20,0,0.12) 0 4px 14px` | The persistent "ADD TO BAG" footer, sticky step bar |
+| Sheet (Level 3) | `rgba(69,20,0,0.18) 0 -8px 30px` | Bottom sheets (customize, item detail) |
+| Overlay Dim | `rgba(69,20,0,0.40)` | Modal scrim behind sheets |
+
+**Shadow Philosophy**: Shadows are warm — tinted from the espresso `#451400` ink rather than pure black — so a white card on cream reads as a gently raised paper layer, not a hard cutout. The most prominent elevation is the persistent "ADD TO BAG" footer during the build flow: a `4px 14px` warm raise that anchors the running total above the scrolling ingredient list. Menu cards lift just enough to separate from the cream.
+
+### Motion
+- **Ingredient select**: trailing check scales 0 → 1 with a spring (response 0.2, damping 0.7) + light haptic; row wash crossfades to `#F4E2E1`
+- **Step progress slide**: active red segment fill slides forward ~250ms ease-out on section advance
+- **Rewards ring fill**: red arc animates 0 → value over ~700ms ease-out; center number counts up
+- **Add to Bag**: button press scale 0.98 → 1.0 spring; bag-count badge bumps 1.0 → 1.2 → 1.0; success haptic
+- **Card tap**: scale 0.98 → 1.0 spring on release
+- **Sheet present**: bottom sheet slides up 0.3s ease-out with warm scrim fade
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the cream canvas (`#FFF5E1`) — the kraft-paper warmth is core to the brand
+- Reserve Chipotle Red (`#A81612`) for action: Add to Bag, order CTA, rewards, selected ingredients, active tab
+- Set headers in ALL-CAPS bold condensed Archivo with positive tracking — the menu-board voice
+- Keep body and ingredient names calm sentence-case Avenir — the quiet counterpoint
+- Use espresso brown (`#451400`) for text — never pure black
+- Render the build flow as a sectioned, scrollable ingredient stepper with single/multi-select rows
+- Keep the running total + red "ADD TO BAG" footer persistent during the build
+- Use slightly-squared 8pt radii on buttons and cards — kraft, not pill
+- Use tabular figures for prices, calories, and rewards points
+
+### Don't
+- Don't use stark white as the canvas — the cream warmth is the brand
+- Don't use red for decoration or non-action text — it's the action color
+- Don't set body copy in ALL CAPS — only headers and buttons shout
+- Don't use pure black for any text — brown carries the food-forward palette
+- Don't use fully-rounded pill buttons — Chipotle's buttons are squared 8pt
+- Don't break the build flow into disconnected screens with no progress indicator
+- Don't hide the running total during customization — the price must always be visible
+- Don't overuse the foil texture — it is a hero-only accent
+- Don't mix in cool grays — every neutral is warm (cream, tan, brown)
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Ingredient rows 56pt, single-column menu, tighter hero |
+| iPhone 13/14/15 | 390pt | Standard 60pt ingredient rows, 200pt foil hero |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the pickup/location selector |
+| iPhone 15/16 Pro Max | 430pt | 64pt ingredient rows, larger hero + food photos |
+| iPad | 768pt+ | Two-pane build: menu list left, live order summary right; 3-column category browse |
+
+### Dynamic Type
+- Item names, body, descriptions: full scale
+- ALL-CAPS headers and buttons: scale to a max, never wrap (condensed handles growth)
+- Prices, calories, points: scale but stay tabular and aligned
+- Tab labels and step segments: fixed (layout-sensitive)
+
+### Orientation
+- Order / Build / Scan / Delivery: **portrait-locked** on iPhone
+- iPad: supports landscape with the two-pane build layout
+
+### Touch Targets
+- Ingredient rows: full-row tappable, 56-64pt
+- Ingredient checkmark: 28pt glyph, 44pt effective hit (full row is the target)
+- Quantity − / +: 44pt hit each
+- "ADD TO BAG" footer button: 54pt tall, full width
+- Tab icons: 24pt glyph, 44pt effective hit
+
+### Safe Area Handling
+- Top: pickup/location selector + step progress bar respect the safe area and Dynamic Island
+- Bottom: persistent "ADD TO BAG" footer floats above the tab bar; both clear the home indicator
+- Sides: 16pt content insets throughout
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (cream): `#FFF5E1`
+- Surface (white): `#FFFFFF`
+- Cream deep (pressed): `#F4E8D0`
+- Divider: `#E8DCC4`
+- Text primary (espresso): `#451400`
+- Text secondary (chocolate): `#8A6B4F`
+- Chipotle Red (action): `#A81612`
+- Red pressed: `#8C1210`
+- Red tint: `#F4E2E1`
+- Tan (foil/decor): `#AC8C5B`
+- Success green: `#3C7A3C`
+
+### Example Component Prompts
+- "Create a SwiftUI Chipotle section header: the text 'PROTEIN' in Archivo 18pt weight 700, ALL CAPS, 0.6pt letter spacing, color #451400, with a 1pt #E8DCC4 divider rule directly below and 24pt of space above."
+- "Build the build-your-burrito ingredient row (single-select): full-width, 60pt tall, on a #FFFFFF card. Leading: ingredient name 'White Rice' Avenir 17pt weight 700 #451400 with a '210 Cal' Avenir 13pt weight 400 #8A6B4F line below. Trailing: a 28pt circular selector — when selected it fills #A81612 with a white check and the row gets an #F4E2E1 wash plus a 1.5pt #A81612 left rule. Tapping springs the check 0 → 1 with a light haptic."
+- "Design the primary CTA: full-width 54pt button, background #A81612, label 'ADD TO BAG · $9.65' in Archivo 16pt weight 800 ALL CAPS with 0.8pt tracking in #FFFFFF, 8pt corner radius. Pressed: background #8C1210, scale 0.98."
+- "Create the Chipotle rewards ring: a 120pt circular progress ring, track #E8DCC4, red #A81612 conic progress arc from the top. Center: '1,250' in Archivo 34pt weight 800 #A81612 tabular, with 'POINTS' in Archivo 11pt weight 700 ALL CAPS #8A6B4F below. The arc animates 0 → value over 700ms ease-out on appear while the number counts up."
+- "Build the foil hero banner: full-width, 200pt tall, 12pt corner radius, background a diagonal brushed-metal gradient from #D9D4C9 to #A8A296 with faint diagonal streaks (crinkled-foil feel). Overlay 'BUILD YOUR OWN' in Archivo Narrow 32pt weight 800 ALL CAPS #451400, a one-line subtitle in Avenir 15pt #8A6B4F, and a red 'START' CTA."
+
+### Iteration Guide
+1. Canvas is cream `#FFF5E1` — the kraft-paper warmth is the brand, never stark white
+2. Chipotle Red `#A81612` is the only action color: Add to Bag, order, rewards, selected ingredients, active tab
+3. Headers SHOUT in ALL-CAPS bold condensed Archivo with positive tracking; body whispers in sentence-case Avenir
+4. All text is espresso brown `#451400` or chocolate `#8A6B4F` — never pure black
+5. The build flow is a sectioned scrollable ingredient stepper — single-select (radio) and multi-select (checkbox) rows
+6. Keep the running total + red "ADD TO BAG" footer persistent through the build
+7. Buttons and cards are slightly squared (8pt radius) — kraft, not pill
+8. Prices, calories, and rewards points use tabular figures; shadows are warm (espresso-tinted), not black