designmd-forge 1.2.0

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

@@ -0,0 +1,411 @@
+# Design System Inspiration of OpenTable (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+OpenTable's iOS app is a clean, confident restaurant-reservation utility. The canvas is bright white (`#FFFFFF`), the chrome is minimal, and the single brand color — **OpenTable Red** (`#DA3743`) — is used with discipline: it appears on the primary "Reserve Now" button, the selected time-slot chip, the active tab, and almost nowhere else. Everything is engineered to move the diner from "I want to eat out" to a confirmed booking in as few taps as possible. The product's whole personality is *trust + speed*: real review stars, "Booked N times today" social proof, and a grid of tappable reservation times that turn a restaurant page into a one-tap booking.
+
+The two signature UI moments are the **reservation time-slot grid** and the **restaurant detail page**. The time-slot grid is the product's heartbeat: a horizontal row (or grid) of pill/rounded-rect chips — `6:45`, `7:00`, `7:15`, `7:30` — each optionally annotated with a teal "+1,000 Points" reward for off-peak times. The selected/recommended slot is filled OpenTable Red; the rest are neutral surface with a hairline border. The restaurant detail page is the conversion surface: a full-bleed hero photo, the restaurant name in a heavy display weight, a gold star rating + review count, cuisine/price/neighborhood metadata, "Booked 38 times today" social proof, the time-slot grid, a party-size + date selector, and a sticky red "Reserve for 7:00 PM" bar pinned to the bottom. Search → restaurant list → restaurant detail → time slot → confirm is the spine.
+
+The color system around the red is small and purposeful: a **gold review star** (`#E8A33D`) for ratings, a **teal Points accent** (`#1F8A8A`) for the OpenTable Dining Rewards / loyalty points program, and a **diner green** (`#2FA86A`) for positive availability and "Booked" social proof. Backgrounds are clean white with subtle gray surfaces; there is no decorative color. The loyalty system uses teal as "earn points / 1,000-point slot" and the gold star purely for restaurant ratings.
+
+Typography is a clean, friendly grotesque sans (OpenTable uses a custom "OpenTable Sans" family; **Inter** is the closest free analog) with confident heavy weights for restaurant names and screen titles. On iOS it falls back to SF Pro. Hierarchy is utility-forward: large bold screen titles, a heavy restaurant name, readable metadata, prominent slot times, and a clear sticky CTA. The type system stays trustworthy and legible — it should read like a polished booking utility, not an editorial magazine.
+
+**Key Characteristics:**
+- Bright white canvas (`#FFFFFF`) light / neutral charcoal (`#121212`) dark — clean, minimal chrome
+- A single disciplined brand color: OpenTable Red `#DA3743` (bright `#F2545B`) for Reserve, selected slot, active tab
+- Reservation time-slot grid — rounded chips (`6:45` / `7:00` / `7:15`) with selected slot filled red — the product's heartbeat
+- Restaurant detail page — hero photo + heavy name + gold stars + social proof + slot grid + sticky Reserve bar
+- Gold review star `#E8A33D` for ratings; teal Points accent `#1F8A8A` for Dining Rewards; diner green `#2FA86A` for availability/social proof
+- "Booked N times today" social-proof pill — trust + urgency
+- Party-size + date selector chips as the booking parameters
+- Sticky red "Reserve for {time}" bar pinned to the bottom of restaurant detail
+- Clean grotesque sans (OpenTable Sans / Inter) with heavy restaurant names
+- No decorative color — every hue carries a function (book / rate / earn / available)
+- Minimal navigation chrome: 5-tab bottom bar — Discover / Saved / Reservations / Rewards / Profile
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **OpenTable Red** (`#DA3743`): Primary interactive color — "Reserve Now" button, selected/recommended time slot, active tab.
+- **OpenTable Red Bright** (`#F2545B`): Dark-mode CTA / emphasis variant, active-tab tint on dark.
+- **OpenTable Red Pressed** (`#B92C37`): Pressed state for primary buttons and slots.
+- **Red Tint Surface** (`#FCEBEC`): 8% red wash behind selected filter rows / focused booking fields (light).
+
+### Canvas & Surfaces (Light Mode)
+- **Canvas White** (`#FFFFFF`): Primary light canvas.
+- **Surface Gray** (`#F6F6F7`): Card backgrounds, grouped rows, search field fill.
+- **Surface Raised** (`#FBFBFC`): Subtle elevated panels.
+- **Surface Pressed** (`#ECECEE`): Pressed/selected rows.
+- **Divider** (`#E4E4E7`): Hairline dividers between list rows and around slot chips.
+
+### Canvas & Surfaces (Dark Mode)
+- **Dark Canvas** (`#121212`): Primary dark canvas — clean neutral charcoal.
+- **Dark Surface 1** (`#1C1C1E`): Cards, grouped rows, elevated surfaces.
+- **Dark Surface 2** (`#262629`): Pressed rows, unselected slot chips.
+- **Dark Divider** (`#2E2E31`): Hairline dividers.
+
+### Text
+- **Text Primary Light** (`#1A1A1C`): Primary body text — near-black neutral.
+- **Text Secondary Light** (`#6B6B70`): Metadata, cuisine/price, captions.
+- **Text Tertiary Light** (`#9A9A9F`): Disabled, very low-emphasis.
+- **Text Primary Dark** (`#EDEDED`): Primary body on dark.
+- **Text Secondary Dark** (`#A2A2A6`): Secondary on dark.
+- **Text Tertiary Dark** (`#6E6E73`): Disabled on dark.
+
+### Brand / Functional Accents
+
+| Role | Light Mode | Dark Mode |
+|------|-----------|-----------|
+| Gold Review Star | `#E8A33D` | `#E8A33D` |
+| Points Teal (Dining Rewards) | `#1F8A8A` | `#2FA8A8` |
+| Diner Green (availability / social proof) | `#2FA86A` | `#3FBF7C` |
+| Notify / Waitlist Amber | `#E08A2F` | `#F0A04A` |
+
+### Semantic
+- **Success Green** (`#2FA86A` light / `#3FBF7C` dark): Reservation confirmed, table available.
+- **Error Red** (`#D6342F` light / `#F2545B` dark): Booking failed, no availability.
+- **Warning Amber** (`#E08A2F`): Almost fully booked, waitlist only.
+- **Info Teal Tint** (`#E4F2F2` light / `#0F2424` dark): Points-earned / rewards background.
+
+## 3. Typography Rules
+
+### Font Family
+- **Brand / UI**: `OpenTable Sans` (OpenTable's custom grotesque sans) — clean, friendly, confident. **Inter** (by Rasmus Andersson, SIL OFL) is the closest free analog and the recommended substitute.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **iOS**: SF Pro is the system fallback when OpenTable Sans / Inter aren't bundled — keep the clean, trustworthy tone.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | Inter | 32pt | 800 | 1.2 | -0.5pt | "Discover", "Reservations" |
+| Restaurant Name | Inter | 26pt | 800 | 1.2 | -0.4pt | Detail-page restaurant title |
+| Section Header | Inter | 22pt | 700 | 1.3 | -0.3pt | "Available tonight", "Select a time" |
+| Card / List Title | Inter | 18pt | 700 | 1.3 | -0.2pt | Restaurant card name in list |
+| Body | Inter | 16pt | 400 | 1.5 | 0pt | Descriptions, paragraph copy |
+| List Subtitle | Inter | 15pt | 600 | 1.35 | 0pt | "Booked 38 times today" |
+| Meta | Inter | 14pt | 400 | 1.4 | 0pt | "Steakhouse · $$$$ · Downtown" |
+| Slot Time | Inter | 14pt | 700 | 1.2 | 0pt | "7:00" inside time-slot chip |
+| Points Tag | Inter | 12pt | 700 | 1.0 | 0.3pt | "+1,000 POINTS" reward annotation |
+| Button | Inter | 16pt | 700 | 1.0 | 0pt | Primary/secondary buttons |
+| Pill / Chip | Inter | 13pt | 600 | 1.0 | 0.1pt | Filter chips, party-size, date |
+| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+| Caption | Inter | 12pt | 500 | 1.4 | 0pt | Fine print, policy text |
+
+### Principles
+- **Utility-forward hierarchy**: the restaurant name and the slot times are the boldest elements — the user is here to pick a place and a time.
+- **One family, many weights**: a single grotesque sans (OpenTable Sans / Inter) at 400 / 500 / 600 / 700 / 800 carries the whole product — body regular, subtitles semibold, names and CTAs bold/extrabold.
+- **Slot times read big**: time-slot chips use a heavy 14pt so a grid of times is instantly scannable.
+- **Neutral near-black text**: body text is `#1A1A1C`, clean and high-contrast — this is a trust utility.
+- **Dynamic Type first-class**: screen titles, restaurant names, body, metadata scale; tab labels, points tags, slot times stay fixed (the slot grid is layout-sensitive).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button ("Reserve Now" / "Reserve for 7:00 PM")**
+- Shape: Fully rounded pill, 999pt corner radius
+- Background: `#DA3743` (OpenTable Red) light / `#F2545B` dark
+- Text: `#FFFFFF`
+- Padding: 14pt vertical, 28pt horizontal (sticky variant: full-width, 16pt vertical, 50pt tall)
+- Font: Inter 16pt weight 700
+- Pressed: background `#B92C37` + scale 0.98
+- Sticky variant: full-width, pinned bottom above tab bar, "Reserve for {time}"
+
+**Secondary / Outline Button ("Add to Favorites" / "Notify Me")**
+- Background: transparent
+- Text: `#1A1A1C` light / `#EDEDED` dark
+- Border: 1pt `#6B6B70` light / `#A2A2A6` dark
+- Padding: 12pt vertical, 22pt horizontal
+- Corner radius: 999pt (pill)
+- Font: Inter 14pt weight 600
+- Pressed: background `#F6F6F7` light / `#262629` dark
+
+**Pill / Filter Button (cuisine, "Outdoor", party-size, date)**
+- Background: `#F6F6F7` light / `#262629` dark (selected: `#FCEBEC` / red border)
+- Text: `#1A1A1C` / `#EDEDED` (selected: `#DA3743` / `#F2545B`)
+- Border: 1pt `#E4E4E7` / `#2E2E31` (selected: 1.5pt `#DA3743`)
+- Padding: 10pt vertical, 18pt horizontal
+- Corner radius: 999pt
+- Font: Inter 13pt weight 600
+
+**Text Button ("See all 412 reviews" / "View menu")**
+- Font: Inter 14pt weight 600
+- Color: `#DA3743` light / `#F2545B` dark
+- No underline; chevron `›` optional trailing
+- Pressed: 60% opacity
+
+### Core Atoms
+
+**Reservation Time-Slot Chip (the core atom)**
+- Shape: rounded rectangle, 10pt corner radius
+- Size: flexible width (≥ 64pt) × 52pt tall in a grid/row
+- Default: background `#F6F6F7` / `#262629`, 1pt `#E4E4E7` / `#2E2E31` border
+- Selected/recommended: background `#DA3743` / `#F2545B`, no border, white text
+- Time text: Inter 14pt w700, centered
+- Optional points annotation: "+1,000" Inter 9–12pt w700 in teal `#1F8A8A` (white at 85% when selected) below the time
+- Pressed: scale 0.97 + soft haptic
+
+**Restaurant Card (list)**
+- Layout: leading photo (full-width hero on cards, or thumbnail in compact list), name, gold-star rating + review count, cuisine/price/neighborhood meta, a row of 3–4 time-slot chips
+- Photo corner radius: 14pt
+- Name: Inter 18pt w700
+- Star rating: gold `#E8A33D` filled stars + numeric (e.g. "4.7") + "(412)" in `#6B6B70`
+- Meta: Inter 14pt w400 `#6B6B70`, dot-separated
+- Embedded slot row: 3–4 chips, "+N more"
+- Divider: 0.5pt `#E4E4E7`
+
+**Star Rating**
+- 5 stars, filled `#E8A33D`, partial fill for fractional
+- Trailing numeric rating Inter 14pt w600 + review count "(412)" Inter 14pt w400 `#6B6B70`
+- Used on cards and detail page only — gold is reserved for ratings
+
+**Social-Proof Pill ("Booked 38 times today")**
+- Pill, background `rgba(47,168,106,0.16)` (diner-green tint), text `#2FA86A`
+- Leading 🔥 / flame glyph for urgency
+- Inter 11pt w700
+- Signals popularity + urgency on the detail page
+
+**Party-Size / Date Selector Chip**
+- Pill, `#F6F6F7` / `#262629`, 1pt border
+- Leading icon (person.2 / calendar) `#6B6B70`
+- Label: "2 people" / "May 21" Inter 13pt w600
+- Tap opens a stepper sheet (party size) or calendar (date)
+
+**Points / Rewards Chip**
+- Pill, background `rgba(31,138,138,0.16)`, 1pt `rgba(31,138,138,0.4)` border
+- Leading ★ glyph teal
+- Text: "1,000 Dining Points" Inter 13pt w700 `#1F8A8A`
+- Used for OpenTable Dining Rewards balance and 1,000-point slot rewards
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 52pt + safe area
+- Background: `#FFFFFF` / `#121212` at 94% with blur, 0.5pt top border `#E4E4E7` / `#2E2E31`
+- Tabs (5): Discover, Saved, Reservations, Rewards, Profile
+- Icon size: 21pt
+- Active color: `#DA3743` light / `#F2545B` dark (icon fills solid)
+- Inactive: `#9A9A9F` light / `#6E6E73` dark
+- Labels: Inter 10pt w600, always shown
+
+**Top Nav (Restaurant detail)**
+- Height: 44pt + safe area, transparent over hero photo (scrolls to opaque white/charcoal)
+- Leading: back chevron in a 32pt translucent dark circle over photo
+- Trailing: heart (save) + share, same translucent circle treatment
+- Title: restaurant name appears Inter 17pt w700 when scrolled past hero
+
+**Search / Filter Bar (Discover)**
+- Full-width pill search field (see Input Fields) + horizontal filter chip row (cuisine, time, party, "Outdoor", "Top rated")
+
+### Input Fields
+
+**Search Bar ("Date · Time · 2 people" / "Location, restaurant, cuisine")**
+- Height: 48pt
+- Background: `#F6F6F7` / `#1C1C1E`
+- Border: 0.5pt `#E4E4E7` / `#2E2E31`
+- Corner radius: 999pt (pill)
+- Leading `magnifyingglass` 16pt `#6B6B70` / `#A2A2A6`
+- Placeholder/value: Inter 14pt w500 `#6B6B70` / `#A2A2A6`
+- Focus: 1.5pt `#DA3743` border
+
+**Party-Size Stepper Sheet**
+- Bottom sheet with − / + stepper, count Inter 22pt w700 centered
+- Quick chips: 1, 2, 3, 4, 5, 6, "7+"
+- Red "Apply" pill pinned bottom
+
+**Date / Time Picker Sheet**
+- Calendar grid (selected date filled red circle) + time wheel
+- Today highlighted; unavailable dates dimmed
+- Red "Apply" pill pinned bottom
+
+### Distinctive Components
+
+**Reservation Time-Slot Grid** — the product's heartbeat; a row/grid of rounded chips with the recommended slot filled red and teal points annotations (see Core Atoms).
+
+**Restaurant Detail Page**
+- Full-bleed hero photo (carousel), 168–220pt tall, translucent back/save/share circles
+- Heavy restaurant name + gold-star rating + meta + social-proof pill
+- "Select a time" header + date/party context line + slot grid
+- Party-size + date selector chips
+- Sticky red "Reserve for {time}" bar pinned bottom
+
+**Notify Me / Waitlist Row**
+- When no slots are available: an amber `#E08A2F` "Notify me if a table opens" row with a bell glyph
+- Replaces the slot grid; tapping joins the waitlist
+
+**Booked Social Proof + Recently Viewed**
+- "Booked N times today" pill (diner-green tint) drives urgency
+- Detail page also surfaces "Recently viewed" restaurant carousel
+
+**Dining Rewards Points Surface**
+- Rewards tab shows accumulated Dining Points balance in a teal hero
+- 1,000-point slots are flagged inline in the slot grid with "+1,000" teal annotation
+- "Redeem for a $X Dining Reward" rows
+
+**Confirmation Card**
+- Post-booking: a card with restaurant name, date/time, party size, confirmation number, "Add to Calendar" + "Modify" + "Cancel" actions
+- Green check header for confirmed state
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 9, 12, 14, 16, 20, 24, 28, 32, 40
+- Slot chip gap: 9pt (tight grid so multiple times fit a row)
+- Section top margin: 20pt
+- Screen content inset: 16–18pt horizontal
+
+### Grid & Container
+- iPhone: content at 16pt horizontal insets; hero photos full-bleed
+- iPad: content at max-width 720pt centered, 24pt insets; restaurant list in 2-column grid
+- Restaurant list: single column of cards; slot chips wrap in a 4-up row
+- Slot grid: 4 chips per row on phone, wraps; equal flex widths
+
+### Whitespace Philosophy
+- **The slot grid is the focal point**: it gets clear space above ("Select a time" + context line) and a tight, scannable chip layout
+- **Photography leads the detail page**: a generous hero photo sits above all booking controls
+- **The sticky Reserve bar never crowds**: pinned with 12–16pt padding above the tab bar, always reachable
+- **Clean dividers, not boxes**: list rows separated by 0.5pt hairlines; only photos and slot chips have visible containers
+
+### Border Radius Scale
+- Square (0pt): Full-bleed hero photos, dividers
+- Subtle (4pt): Small badges, inline tags
+- Standard (8–10pt): Time-slot chips, thumbnails
+- Comfortable (14pt): Restaurant photo cards
+- Sheet (20pt): Bottom-sheet top corners, modals
+- Pill (999pt): Buttons, filter chips, search bar, points chip, party/date selectors
+- Circle (50%): Nav circles, avatars, selected-date marker
+
+## 6. Depth & Elevation
+
+OpenTable uses restrained, neutral elevation — clean shadows that lift cards and the sticky CTA without visual noise.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | List rows, page content, dividers |
+| Raised (Level 1) | `rgba(0,0,0,0.05) 0 2px 8px` | Restaurant cards, slot grid container |
+| Floating (Level 2) | `rgba(0,0,0,0.10) 0 -2px 16px` | Sticky Reserve bar |
+| Sheet (Level 3) | `rgba(0,0,0,0.14) 0 -4px 24px` | Party/date sheets, filter sheet |
+| Modal Overlay | `rgba(0,0,0,0.4)` | Dim behind sheets and modals |
+
+**Shadow Philosophy**: shadows are neutral gray and subtle — OpenTable is a clean utility, not a skeuomorphic app. Cards get a light raise so the list reads as discrete results; the sticky Reserve bar gets a top shadow so it clearly floats above the scrolling content and stays the obvious next action. On dark mode, shadows nearly vanish, so a 0.5pt `#2E2E31` top divider becomes the elevation cue on the sticky bar and sheets.
+
+### Motion
+- **Reserve**: tapping the red CTA shows an inline spinner then a 300ms push to the confirmation card; success haptic on confirm
+- **Slot select**: tapping a slot animates its fill to red 150ms ease-out + scale 0.97 bounce-back + soft haptic; the Reserve bar label updates to the chosen time
+- **Slot grid load**: chips fade-in + 4pt slide-up staggered 30ms each, 200ms ease-out
+- **Filter chip toggle**: border/fill cross-fades 150ms; result list cross-fades
+- **Restaurant detail open**: hero photo shared-element-style expand, 300ms (iOS push)
+- **Party/date sheet**: slides up 300ms ease-out; backdrop dims simultaneously
+- **Search focus**: search pill expands and reveals recent searches 200ms ease-out
+- **Pull to refresh (Discover)**: OpenTable mark spinner
+- **Haptic feedback**: soft impact on slot select, filter toggle, party stepper; success on reservation confirmed
+
+## 7. Do's and Don'ts
+
+### Do
+- Use bright white (`#FFFFFF`) in light, clean charcoal (`#121212`) in dark — minimal chrome
+- Keep OpenTable Red (`#DA3743`, bright `#F2545B`) as the single booking color — Reserve, selected slot, active tab
+- Make the time-slot grid the focal point of the restaurant page — it's the product's heartbeat
+- Fill the selected/recommended slot solid red; keep the rest neutral with a hairline border
+- Annotate 1,000-point slots with a teal "+1,000" — it's the rewards hook for off-peak times
+- Use the gold star (`#E8A33D`) only for review ratings
+- Use the teal accent (`#1F8A8A`) only for Dining Rewards / points
+- Show "Booked N times today" social proof for trust + urgency
+- Pin a sticky red "Reserve for {time}" bar on the detail page
+- Use one grotesque sans (OpenTable Sans / Inter) with heavy restaurant names and CTAs
+- Use fully-rounded pills for buttons, filters, and the search bar
+
+### Don't
+- Don't introduce a second brand action color — red is the only booking color
+- Don't use decorative color — every hue must carry a function (book / rate / earn / available)
+- Don't use the gold star for anything but ratings, or teal for anything but points
+- Don't make the slot grid secondary — never bury the times below the fold without context
+- Don't use pure black (`#000000`) for body text — `#1A1A1C` neutral near-black is correct
+- Don't let the red CTA disappear on dark — use `#F2545B` so it stays legible on `#121212`
+- Don't add heavy borders around list rows — use 0.5pt hairlines; only photos/slots get containers
+- Don't crowd the sticky Reserve bar — it must always be reachable with breathing room
+- Don't use sharp rectangular buttons — OpenTable buttons are pills
+- Don't animate aggressively — motion is clean 150–300ms ease-out
+- Don't hide the points annotation on reward slots — it's the loyalty incentive
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Hero photo 150pt; 3 slot chips per row + "+N more" |
+| iPhone 13/14/15 | 390pt | Standard layout; 4 slot chips per row |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in transparent top nav |
+| iPhone 15/16 Pro Max | 430pt | Hero photo 220pt; 5 slot chips per row |
+| iPad (portrait) | 768pt | 2-column restaurant grid; detail in split (photo + booking panel) |
+| iPad (landscape) | 1024pt+ | List + detail master-detail; slot grid 6-up |
+
+### Dynamic Type
+- Screen titles, restaurant names, body, metadata: full scale
+- Tab labels, points tags, slot-time text: FIXED (the slot grid is layout-sensitive)
+- Slot chip minimum width preserved; chips wrap to more rows at large scales
+
+### Orientation
+- All screens support rotation
+- iPad split: restaurant list + detail/booking panel side-by-side
+- Hero photos rotate freely; sticky Reserve bar stays pinned bottom
+
+### Touch Targets
+- Time-slot chip: ≥ 64pt × 52pt (full chip tappable)
+- Tab bar icons: 21pt glyph, 44pt hit area
+- Party/date selector chip: 40pt tall, full-chip tap
+- Restaurant card: full-card tap to detail
+- Primary buttons: 48–50pt tall minimum
+
+### Safe Area Handling
+- Top: transparent nav respects safe area and Dynamic Island over hero photo
+- Bottom: sticky Reserve bar and tab bar respect home indicator
+- Keyboard: search and party/date entry scroll above keyboard; sheets sit above keyboard
+- Sides: 16–18pt content inset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FFFFFF`
+- Surface gray (light): `#F6F6F7`
+- Canvas (dark): `#121212`
+- Surface (dark): `#1C1C1E`
+- Divider: `#E4E4E7` light / `#2E2E31` dark
+- Text primary: `#1A1A1C` light / `#EDEDED` dark
+- Text secondary: `#6B6B70` light / `#A2A2A6` dark
+- OpenTable Red (primary): `#DA3743`
+- OpenTable Red Bright (dark CTA / accent): `#F2545B`
+- OpenTable Red Pressed: `#B92C37`
+- Red tint surface: `#FCEBEC` light / red-08 dark
+- Gold review star: `#E8A33D`
+- Points teal (Dining Rewards): `#1F8A8A`
+- Diner green (availability / social proof): `#2FA86A`
+- Notify amber: `#E08A2F`
+- Error: `#D6342F` light / `#F2545B` dark
+
+### Example Component Prompts
+- "Build the OpenTable reservation time-slot grid in SwiftUI: a wrapping row of rounded-rect chips (10pt corner radius, ≥ 64pt wide, 52pt tall, 9pt gap). Default chip: background `#F6F6F7` (dark `#262629`), 1pt `#E4E4E7` border, time in Inter 14pt w700 `#1A1A1C` centered. Recommended/selected chip: solid `#DA3743` (dark `#F2545B`), no border, white time. If a slot earns 1,000 points, add a second line '+1,000' in Inter 9pt w700 teal `#1F8A8A` (white 85% when selected). Tap: fill animates to red 150ms + scale 0.97 bounce + soft haptic; updates the sticky Reserve bar label."
+
+- "Create the OpenTable restaurant detail page: full-bleed hero photo 200pt tall with a 32pt translucent dark back circle and heart/share circles. Below: restaurant name Inter 26pt w800 `#1A1A1C`; a row of 5 gold `#E8A33D` stars + '4.7' + '(412)' in `#6B6B70`; meta 'Steakhouse · $$$$ · Downtown' Inter 14pt `#6B6B70`; a diner-green-tint pill '🔥 Booked 38 times today' Inter 11pt w700 `#2FA86A`. Then 'Select a time' Inter 22pt w700, a context line 'Tonight · Wed May 21 · Party of 2', the slot grid, party/date selector chips. Sticky bottom bar: full-width `#DA3743` pill 50pt tall, 'Reserve for 7:00 PM' Inter 16pt w700 white, top shadow `rgba(0,0,0,0.10) 0 -2px 16px`."
+
+- "Render the OpenTable restaurant card: 14pt-radius hero photo, name Inter 18pt w700, gold `#E8A33D` star rating + '4.7 (412)', meta line `#6B6B70`, then an embedded row of 4 time-slot chips with a trailing '+6 more'. 0.5pt `#E4E4E7` divider below."
+
+- "Build the OpenTable party-size selector: a pill chip (background `#F6F6F7` / `#262629`, 1pt `#E4E4E7` border) with a leading person.2 icon `#6B6B70` and '2 people' Inter 13pt w600. Tapping opens a bottom sheet (20pt top radius) with a − / + stepper, count Inter 22pt w700 centered, quick chips 1–6 and '7+', and a red `#DA3743` 'Apply' pill pinned bottom."
+
+- "Build the OpenTable primary button: fully-rounded pill (999pt radius), background `#DA3743` (dark `#F2545B`), white text Inter 16pt w700, 14pt vertical / 28pt horizontal padding. Pressed: background `#B92C37` + scale 0.98 + soft haptic."
+
+- "Render the OpenTable bottom tab bar: 52pt + safe area, background `#FFFFFF` / `#121212` at 94% with blur, 0.5pt top border. 5 tabs — Discover, Saved, Reservations, Rewards, Profile — 21pt icons, active `#DA3743` (dark `#F2545B`) solid fill, inactive `#9A9A9F` (dark `#6E6E73`), Inter 10pt w600 labels always shown."
+
+### Iteration Guide
+1. Canvas is bright white `#FFFFFF` in light, clean charcoal `#121212` in dark — minimal chrome
+2. Text primary is neutral near-black `#1A1A1C` — NOT pure black; one grotesque sans, heavy names
+3. OpenTable Red `#DA3743` (bright `#F2545B` for dark) is the ONLY booking color — Reserve, selected slot, active tab
+4. The reservation time-slot grid is the product's heartbeat — selected slot solid red, rest neutral with hairline
+5. Annotate 1,000-point slots with a teal "+1,000" — the rewards hook for off-peak booking
+6. Gold star `#E8A33D` is ratings only; teal `#1F8A8A` is Dining Rewards points only
+7. "Booked N times today" social proof drives trust + urgency on the detail page
+8. The booking spine is search → list → detail (hero + slot grid + party/date) → sticky Reserve → confirmation
+9. Buttons, filters, and the search bar are fully-rounded pills
+10. Motion is clean 150–300ms ease-out; soft haptics on slot select / filter / stepper, success on confirm