designmd-forge 1.2.0

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

@@ -0,0 +1,412 @@
+# Design System Inspiration of Resy (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Resy's iOS app reads like a curated dining magazine that happens to book tables. The canvas is **pure black** (`#000000`) — Resy is dark-first by design, not as a dark-mode option but as the brand. Black makes full-color restaurant photography and the editorial serif headlines pop the way ink does on a glossy printed page. The whole personality is *taste + access*: editorial restaurant write-ups, a curated "Hit List", and the tension of a hard-to-get reservation. The single brand color — **Resy Red** (`#C73E3A`) — is used with discipline on the "Book Now" CTA, the selected reservation slot, and the active tab, and almost nowhere else.
+
+The two signature UI moments are the **reservation calendar + time-slot picker** and the **editorial restaurant detail page**. The picker is a horizontal date strip (Wed 21 / Thu 22 / Fri 23 …) where the selected day is filled Resy Red, sitting above a grid of time-slot chips. Resy's slot treatment is distinctive: **available slots are outlined in red** (transparent fill, red 1pt border, the time + seating type like "Dining Room" / "Bar" / "Counter"), the recommended/primary slot is **solid red**, and when nothing is available the slot becomes a **dashed amber "Notify" chip** that joins the waitlist. The restaurant detail page is the editorial conversion surface: a full-bleed photo carousel, the restaurant name set in a **high-contrast display serif**, a gold rating ("★ 9.4"), cuisine/price/neighborhood metadata, an italic editorial tagline, the date strip, and the slot grid. Search → restaurant → date → slot → confirm is the spine, and **Notify** (waitlist for sold-out tables) is a first-class parallel path.
+
+The color system around the red is editorial and restrained: an **amber Notify accent** (`#D99A2B`) for waitlist/alerts, a **muted gold** (`#C9A24B`) for ratings and "Hit List" curation, and otherwise pure black, near-black surfaces, and high-contrast white text. There is no decorative color — Resy's "color" is photography and typographic contrast.
+
+Typography is the soul of the brand: a **high-contrast display serif** for restaurant names and editorial titles (Resy's brand voice is a refined didone/transitional serif; **Playfair Display** is the closest free analog) paired with a clean neutral sans for UI, metadata, and slots (**Inter**). On iOS the sans falls back to SF Pro and the serif to New York / Georgia. Hierarchy is magazine-like: a serif display name, an italic serif editorial note, then crisp sans metadata and slot times. The type system should feel like a Condé Nast dining feature, not a generic booking utility.
+
+**Key Characteristics:**
+- Pure black canvas (`#000000`) — dark-first by design, not a dark-mode toggle; photography and serif type pop like print
+- Editorial display serif (Playfair Display / Resy serif) for restaurant names + titles; clean sans (Inter) for UI/slots
+- A single disciplined brand color: Resy Red `#C73E3A` (bright `#E2504B`) for Book, selected slot, active tab
+- Reservation date strip + slot grid — selected day solid red; **available slots red-outlined**, primary slot solid red
+- Notify (waitlist) as a first-class path — dashed **amber** `#D99A2B` "Notify" chip when sold out
+- Editorial restaurant detail — photo carousel + serif name + gold rating + italic tagline + date/slot picker
+- Muted gold `#C9A24B` for ratings and the curated "Hit List"
+- Seating-type labels on slots ("Dining Room" / "Bar" / "Counter" / "Patio") — Resy books specific seatings
+- High typographic contrast does the work of color — restrained, magazine-grade
+- Square-ish 8–10pt radii (not pill-soft) — Resy's geometry is crisp and editorial
+- Minimal navigation chrome: 5-tab bottom bar — Search / Hit List / Reservations / Notify / Account
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Resy Red** (`#C73E3A`): Primary interactive color — "Book Now" button, selected/primary reservation slot, active tab.
+- **Resy Red Bright** (`#E2504B`): Active-tab tint and emphasis on pure black, error.
+- **Resy Red Pressed** (`#A8302D`): Pressed state for primary buttons and slots.
+- **Red Outline** (`#C73E3A` @ 1pt border, transparent fill): Available reservation slots — Resy's signature.
+
+### Canvas & Surfaces (Dark — primary brand)
+- **Resy Black** (`#000000`): Primary canvas — pure black, the brand.
+- **Surface 1** (`#121212`): Cards, sheets, grouped rows.
+- **Surface 2** (`#1C1C1C`): Pressed rows, secondary panels, search field fill.
+- **Surface 3** (`#242424`): Elevated chips, hovered states.
+- **Divider** (`#262626`): Hairline dividers between rows and around slots.
+
+### Canvas & Surfaces (Light — secondary inversion)
+- **Canvas White** (`#FFFFFF`): Light canvas (light mode is supported but black is the brand).
+- **Surface Gray** (`#F4F4F4`): Cards, grouped rows.
+- **Surface Pressed** (`#EAEAEA`): Pressed rows.
+- **Divider Light** (`#E2E2E2`): Hairline dividers.
+
+### Text
+- **Text Primary Dark** (`#F5F5F5`): Primary text on black — near-white for editorial contrast.
+- **Text Secondary Dark** (`#9E9E9E`): Metadata, captions, seating labels.
+- **Text Tertiary Dark** (`#6A6A6A`): Disabled, separators.
+- **Text Primary Light** (`#101010`): Primary text on white.
+- **Text Secondary Light** (`#6B6B6B`): Secondary on white.
+
+### Brand / Functional Accents
+
+| Role | Dark Mode | Light Mode |
+|------|-----------|-----------|
+| Notify Amber (waitlist / alerts) | `#D99A2B` | `#B97E16` |
+| Hit Gold (rating / curation) | `#C9A24B` | `#A6802F` |
+| Available-slot border | `#C73E3A` | `#C73E3A` |
+| Confirmed Green | `#4FA773` | `#2F8C56` |
+
+### Semantic
+- **Success Green** (`#4FA773` dark / `#2F8C56` light): Reservation confirmed.
+- **Error Red** (`#E2504B` dark / `#C73E3A` light): Booking failed, slot just lost.
+- **Notify / Waitlist Amber** (`#D99A2B`): On the Notify list, table alert.
+- **Info Surface** (`#1C1C1C` dark / `#F4F4F4` light): Neutral informational background.
+
+## 3. Typography Rules
+
+### Font Family
+- **Editorial / Display**: a high-contrast transitional/didone serif (Resy's brand voice). **Playfair Display** (by Claus Eggers Sørensen, SIL OFL) is the closest free analog and recommended substitute — used for restaurant names, editorial titles, and feature headlines.
+- **UI / Body**: `Inter` (by Rasmus Andersson, SIL OFL) — clean neutral sans for metadata, slots, buttons, navigation.
+- **Fallback Stack (serif)**: `'New York', Georgia, 'Times New Roman', serif`
+- **Fallback Stack (sans)**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **iOS**: SF Pro / New York are the system fallbacks when Inter / Playfair aren't bundled — preserve the high-contrast editorial tone.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Title | Playfair Display | 34pt | 800 | 1.15 | -0.5pt | "Tonight in NYC", feature headlines |
+| Restaurant Name | Playfair Display | 27pt | 700 | 1.15 | -0.3pt | Detail-page restaurant title |
+| Section Header | Inter | 22pt | 700 | 1.3 | -0.2pt | "The Hit List", "Reservations" |
+| Card Title | Inter | 18pt | 600 | 1.3 | -0.1pt | Restaurant name in list cards |
+| Body | Inter | 16pt | 400 | 1.5 | 0pt | Paragraph copy, descriptions |
+| Editorial Note | Playfair Display | 15pt | 400 (italic) | 1.55 | 0pt | Italic restaurant tagline |
+| Meta | Inter | 14pt | 400 | 1.4 | 0pt | "Italian · $$$ · Williamsburg" |
+| Slot Time | Inter | 14pt | 700 | 1.2 | 0pt | "6:30" inside a slot chip |
+| Seating Label | Inter | 9pt | 600 | 1.0 | 0.3pt (uppercase) | "DINING ROOM" / "BAR" under time |
+| Eyebrow | Inter | 12pt | 700 | 1.0 | 0.8pt (uppercase) | "SELECT A DATE" section eyebrow |
+| Button | Inter | 16pt | 700 | 1.0 | 0.2pt | Primary/secondary buttons |
+| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+| Caption | Inter | 12pt | 500 | 1.4 | 0pt | Fine print, policy text |
+
+### Principles
+- **Serif for the name, sans for the system**: the restaurant name and editorial titles are always the high-contrast display serif; everything functional (metadata, slots, buttons, nav) is Inter. This split *is* the brand.
+- **Italic serif for editorial voice**: restaurant taglines/notes are italic Playfair — the "magazine writer" voice.
+- **Typographic contrast replaces color**: weight and serif/sans contrast carry hierarchy on the black canvas — there is almost no decorative color.
+- **Near-white, not pure white**: body text is `#F5F5F5` on black for a refined, non-glaring editorial feel.
+- **Dynamic Type first-class**: display titles, restaurant names, body, metadata scale; tab labels, seating labels, slot times stay fixed (the slot grid is layout-sensitive).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button ("Book Now")**
+- Shape: Rounded rectangle, 8pt corner radius (crisp, not pill)
+- Background: `#C73E3A` (Resy Red)
+- Text: `#FFFFFF`
+- Padding: 14pt vertical, 28pt horizontal (sticky/full-width variant: full-width, 16pt vertical)
+- Font: Inter 16pt weight 700
+- Pressed: background `#A8302D` + scale 0.98
+
+**Secondary / Outline Button ("Add to Hit List")**
+- Background: transparent
+- Text: `#F5F5F5` dark / `#101010` light
+- Border: 1pt `#9E9E9E` dark / `#6B6B6B` light
+- Padding: 12pt vertical, 22pt horizontal
+- Corner radius: 8pt
+- Font: Inter 14pt weight 600
+- Pressed: background `#1C1C1C` dark / `#EAEAEA` light
+
+**Notify Button ("Notify Me")**
+- Background: transparent
+- Text + border: `#D99A2B` (Notify Amber), 1pt border
+- Padding: 12pt vertical, 22pt horizontal
+- Corner radius: 8pt
+- Font: Inter 14pt weight 700
+- Pressed: background `rgba(217,154,43,0.12)`
+
+**Text Button ("View full menu" / "See all")**
+- Font: Inter 14pt weight 600
+- Color: `#F5F5F5` dark / `#101010` light
+- Underline, 3pt underline offset (editorial link style)
+- Pressed: 60% opacity
+
+### Core Atoms
+
+**Reservation Slot Chip (the core atom — Resy's signature)**
+- Shape: rounded rectangle, 10pt corner radius
+- Size: flexible width (≥ 70pt) × 56pt tall in a row/grid
+- **Available**: transparent fill, 1pt `#C73E3A` border, time in Inter 14pt w700 `#F5F5F5`, seating label below in Inter 9pt w600 uppercase `#9E9E9E`
+- **Primary/recommended**: solid `#C73E3A`, no border, white time + 82%-white seating label
+- **Notify (sold out)**: transparent fill, 1pt `#262626` **dashed** border, "Notify" + time window in `#D99A2B`
+- Pressed: scale 0.97 + soft haptic
+- Seating types: "Dining Room", "Bar", "Counter", "Patio", "Chef's Counter"
+
+**Reservation Date Strip**
+- Horizontal row of day cells, 60pt tall, 10pt radius, 8pt gap
+- Each cell: weekday Inter 10pt w600 uppercase `#9E9E9E` + date number Inter 17pt w700 `#F5F5F5`
+- Default: `#121212` fill, 1pt `#262626` border
+- Selected: solid `#C73E3A`, white text
+- Scrolls horizontally; tap a "calendar" affordance to open a full month picker sheet
+
+**Restaurant Card (list)**
+- Layout: full-bleed photo (16:9), serif name overlaid or below, gold rating, meta line, a row of 3–4 slot chips
+- Photo corner radius: 8pt
+- Name: Playfair Display 18–20pt w700
+- Rating: "★ 9.4" gold `#C9A24B` Inter 13pt w700
+- Meta: Inter 14pt w400 `#9E9E9E`, dot-separated
+- Embedded slot row: 3–4 red-outlined chips + "+N more"
+- Divider: 0.5pt `#262626`
+
+**Rating Mark**
+- "★ 9.4" — single star glyph + numeric (Resy uses a /10 score), gold `#C9A24B`
+- Inter 13pt w700
+- Used on cards and detail page; gold is reserved for ratings + Hit List curation
+
+**Editorial Tagline**
+- Italic Playfair Display 15pt `#9E9E9E`, 1–2 lines
+- The "magazine writer" voice describing the restaurant — a Resy signature
+
+**Notify Chip / Row**
+- Pill or row, transparent, 1pt `#D99A2B` border, leading 🔔 glyph
+- "Notify when available" / "On the Notify list" Inter 13pt w700 `#D99A2B`
+- The waitlist primitive — appears inline in the slot grid and as a dedicated tab
+
+**Seating-Type Tag**
+- Small uppercase label under a slot time: "DINING ROOM" / "BAR" / "COUNTER"
+- Inter 9pt w600, `#9E9E9E` (82% white when slot is solid red)
+- Resy books specific seatings, so the type is always shown
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 52pt + safe area
+- Background: `#000000` at 96% with blur, 0.5pt top border `#262626`
+- Tabs (5): Search, Hit List, Reservations, Notify, Account
+- Icon size: 21pt
+- Active color: `#C73E3A` (uses bright `#E2504B` for clear contrast on pure black)
+- Inactive: `#6A6A6A`
+- Labels: Inter 10pt w600, always shown
+
+**Top Nav (Restaurant detail)**
+- Height: 44pt + safe area, transparent over hero photo (scrolls to opaque black)
+- Leading: back chevron in a 32pt translucent dark circle over photo
+- Trailing: heart (Hit List) + share, same translucent circle treatment
+- Title: restaurant name appears Playfair Display 18pt w700 when scrolled past hero
+
+**Search / Discover**
+- Editorial home: large serif feature headline, curated collection rows ("The Hit List", "Booking up fast", "New on Resy"), each a horizontal card carousel
+
+### Input Fields
+
+**Search Bar ("Restaurants, cuisines, locations")**
+- Height: 46pt
+- Background: `#1C1C1C` dark / `#F4F4F4` light
+- Border: none
+- Corner radius: 8pt
+- Leading `magnifyingglass` 16pt `#9E9E9E`
+- Placeholder: Inter 14pt w500 `#9E9E9E`
+- Focus: 1pt `#C73E3A` border
+
+**Guest / Date / Time Selector**
+- Inline pill/segment row above slots: "2 guests · Thu May 22 · Dinner"
+- Tapping each opens a bottom sheet (guests stepper, calendar, daypart toggle)
+- Red "Apply" button pinned bottom of each sheet
+
+**Calendar Sheet**
+- Month grid, selected date filled `#C73E3A` circle, unavailable dates dimmed
+- Today marked with a thin red ring
+- Red "Apply" button pinned bottom
+
+### Distinctive Components
+
+**Reservation Slot Grid (red-outline system)** — the product's heartbeat; available = red-outlined, primary = solid red, sold-out = dashed amber Notify (see Core Atoms).
+
+**Editorial Restaurant Detail**
+- Full-bleed photo carousel (with page dots), 220–260pt tall, translucent back/heart/share circles
+- Serif restaurant name + gold "★ 9.4" + meta + italic editorial tagline
+- "SELECT A DATE" eyebrow + date strip + guest/date/daypart context line + slot grid
+
+**Notify (Waitlist) Surface**
+- Dedicated Notify tab listing restaurants you're waitlisted for
+- Each row: restaurant (serif name), requested date/time window, amber "On the list" status
+- Push when a table opens; tapping books instantly
+
+**The Hit List**
+- Resy's signature curated/saved collection — editorial tile grid of bookmarked restaurants
+- Gold accent on the bookmark/curation glyph
+
+**Guest / Daypart Context Line**
+- "2 guests · Thu May 22 · Dinner" above the slot grid
+- Each token tappable to change the booking parameters
+
+**Confirmation Card**
+- Post-booking: serif restaurant name, date/time, party size, seating type, confirmation code
+- Green confirmed header; "Add to Calendar" / "Modify" / "Cancel" / "Add to Hit List" actions
+- Cancellation policy in caption text
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 9, 12, 16, 18, 20, 22, 24, 32, 40
+- Slot chip gap: 9pt; date cell gap: 8pt
+- Section top margin: 22pt
+- Screen content inset: 18–20pt horizontal (generous editorial margins)
+
+### Grid & Container
+- iPhone: content at 18–20pt horizontal insets; hero photo full-bleed
+- iPad: content at max-width 720pt centered, 32pt insets; restaurant list 2-column editorial grid
+- Restaurant list: single column of editorial cards; slot chips wrap 4-up
+- Slot grid: 4 chips per row on phone, wraps; equal flex widths
+
+### Whitespace Philosophy
+- **Black is the whitespace**: pure black gives photography and serif type room to breathe like a magazine spread
+- **Editorial margins**: generous 18–20pt side insets and 22pt section spacing — never cramped
+- **The slot grid is the focal point**: a clear eyebrow + date strip + context line lead the eye to the times
+- **Restrained dividers**: 0.5pt `#262626` hairlines; only photos and slot chips have visible containers
+
+### Border Radius Scale
+- Square (0pt): Full-bleed hero photos, dividers
+- Hairline (2pt): Tiny tags, the rating mark container
+- Subtle (4pt): Small badges, inline chips
+- Standard (8pt): Buttons, search bar, photo cards
+- Slot (10pt): Reservation slot chips, date cells
+- Sheet (16pt): Bottom-sheet top corners, modals
+- Pill (999pt): Notify chip, daypart toggle only
+- Circle (50%): Nav circles, avatars, selected-date marker
+
+## 6. Depth & Elevation
+
+Resy is editorial-flat. Depth comes from the pure-black canvas and photography, not heavy shadows.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | All content on black — cards, slots, rows |
+| Lifted (Level 1) | `rgba(0,0,0,0.5) 0 2px 12px` + 0.5pt `#262626` border | Sheets, floating panels (border is the real cue) |
+| Sheet (Level 2) | `rgba(0,0,0,0.6) 0 -4px 24px` + 1pt `#262626` top border | Calendar / guest / Notify sheets |
+| Modal Overlay | `rgba(0,0,0,0.7)` | Dim behind sheets and modals |
+
+**Shadow Philosophy**: on a pure-black canvas, drop-shadows are nearly invisible — so Resy uses **hairline borders** (`#262626`) as the primary elevation cue. Sheets and floating panels get a subtle shadow plus a 0.5–1pt border so they read as layered above the black. Photography and serif contrast carry visual weight; the UI itself stays radically flat and editorial. In the light inversion, a faint neutral shadow returns for cards/sheets.
+
+### Motion
+- **Book**: tapping the red CTA shows an inline spinner then a 300ms push to the confirmation card; success haptic on confirm
+- **Slot select**: an available (outlined) slot animates its fill to solid red 150ms ease-out + scale 0.97 bounce + soft haptic; the Book button enables/updates
+- **Date strip**: selecting a day fills it red 150ms; the slot grid cross-fades to that day's availability
+- **Slot grid load**: chips fade-in + 4pt slide-up staggered 30ms, 200ms ease-out
+- **Notify toggle**: the dashed slot/chip fills amber 150ms + a soft haptic; "On the list" confirms
+- **Restaurant detail open**: hero photo shared-element-style expand, 300ms (iOS push); serif name fades up
+- **Sheet present**: guest/calendar sheets slide up 300ms ease-out; backdrop dims to 0.7
+- **Carousel**: photo pager swipes 1:1 with finger; page dots cross-fade
+- **Haptic feedback**: soft impact on slot select, date select, Notify toggle, guest stepper; success on reservation confirmed
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure black (`#000000`) as the canvas — Resy is dark-first by design, this is the brand
+- Set restaurant names + editorial titles in a high-contrast display serif (Playfair Display / Resy serif)
+- Use a clean sans (Inter) for everything functional — metadata, slots, buttons, nav
+- Keep Resy Red (`#C73E3A`, bright `#E2504B`) as the single reservation color — Book, selected slot, active tab
+- Render available slots as **red-outlined** chips and the primary slot as **solid red** — this is Resy's signature
+- Show the seating type ("Dining Room" / "Bar" / "Counter") under every slot time
+- Use dashed **amber** (`#D99A2B`) Notify chips when a slot is sold out; make Notify a first-class path
+- Use italic serif for the editorial restaurant tagline — the magazine voice
+- Use muted gold (`#C9A24B`) for the rating mark and the Hit List only
+- Use hairline borders (`#262626`) as the elevation cue — shadows are invisible on black
+- Use crisp 8–10pt radii — Resy's geometry is editorial, not pill-soft
+
+### Don't
+- Don't make the app light-first — black is the brand; the light inversion is secondary
+- Don't set restaurant names in a sans — the serif name is the brand voice
+- Don't introduce a second reservation color — red is the only booking color
+- Don't fill available slots solid by default — available = outlined, primary = solid (the contrast is the signal)
+- Don't omit the seating-type label — Resy books specific seatings, the type matters
+- Don't use a generic gray for Notify — amber `#D99A2B` is the dedicated waitlist color
+- Don't use pure white (`#FFFFFF`) for body text on black — `#F5F5F5` near-white is the editorial choice
+- Don't add decorative color — typographic + photographic contrast carries hierarchy
+- Don't use pill-soft buttons — Resy buttons are crisp 8pt rectangles
+- Don't rely on drop-shadows on black — use hairline borders for layering
+- Don't animate aggressively — motion is restrained 150–300ms ease-out
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Hero photo 200pt; 3 slot chips per row + "+N more"; 5 date cells visible |
+| 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 260pt; 5 slot chips per row; serif name 30pt |
+| iPad (portrait) | 768pt | 2-column editorial restaurant grid; detail in split (photo + booking panel) |
+| iPad (landscape) | 1024pt+ | List + detail master-detail; slot grid 6-up |
+
+### Dynamic Type
+- Display titles, restaurant names (serif), body, metadata: full scale
+- Tab labels, seating labels, slot-time text: FIXED (the slot grid is layout-sensitive)
+- Slot chip minimum width preserved; chips wrap to more rows at large scales; serif scales with reading size
+
+### Orientation
+- All screens support rotation
+- iPad split: editorial restaurant list + detail/booking panel side-by-side
+- Hero photo carousel rotates freely; slot grid reflows
+
+### Touch Targets
+- Reservation slot chip: ≥ 70pt × 56pt (full chip tappable)
+- Date cell: ≥ 56pt wide × 60pt tall (full cell tappable)
+- Tab bar icons: 21pt glyph, 44pt hit area
+- Guest/date context tokens: 36pt+ tap targets
+- Primary button: 48pt tall minimum
+
+### Safe Area Handling
+- Top: transparent nav respects safe area and Dynamic Island over hero photo
+- Bottom: tab bar and any sticky Book button respect home indicator
+- Keyboard: search and guest entry scroll above keyboard; sheets sit above keyboard
+- Sides: 18–20pt editorial content inset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (brand): `#000000` (pure black, dark-first)
+- Surface 1: `#121212`
+- Surface 2: `#1C1C1C`
+- Divider: `#262626`
+- Canvas (light inversion): `#FFFFFF`
+- Text primary: `#F5F5F5` dark / `#101010` light
+- Text secondary: `#9E9E9E` dark / `#6B6B6B` light
+- Resy Red (primary): `#C73E3A`
+- Resy Red Bright (active tab / emphasis on black): `#E2504B`
+- Resy Red Pressed: `#A8302D`
+- Available-slot border: `#C73E3A` (1pt, transparent fill)
+- Notify Amber (waitlist): `#D99A2B`
+- Hit Gold (rating / Hit List): `#C9A24B`
+- Confirmed green: `#4FA773`
+- Error: `#E2504B` dark / `#C73E3A` light
+
+### Example Component Prompts
+- "Build the Resy reservation slot grid in SwiftUI on a pure-black background. A wrapping row of rounded-rect chips (10pt corner radius, ≥ 70pt wide, 56pt tall, 9pt gap). Available slot: transparent fill, 1pt `#C73E3A` border, time in Inter 14pt w700 `#F5F5F5`, seating label below in Inter 9pt w600 uppercase `#9E9E9E` ('DINING ROOM'). Primary slot: solid `#C73E3A`, no border, white time + 82%-white seating label. Sold-out slot: transparent, 1pt `#262626` *dashed* border, 'Notify' + time window in `#D99A2B`. Tap available → fill animates to solid red 150ms + scale 0.97 bounce + soft haptic."
+
+- "Create the Resy editorial restaurant detail page: full-bleed photo carousel 240pt tall with page dots and 32pt translucent dark back/heart/share circles. Below on `#000000`: restaurant name in Playfair Display 27pt w700 `#F5F5F5`; a meta row '★ 9.4' in gold `#C9A24B` Inter 13pt w700, then 'Italian · $$$ · Williamsburg' Inter 14pt `#9E9E9E'; an italic editorial tagline in Playfair Display 15pt italic `#9E9E9E`. Then 'SELECT A DATE' eyebrow Inter 12pt w700 uppercase `#9E9E9E`, the date strip, a context line '2 guests · Thu May 22 · Dinner', the slot grid."
+
+- "Render the Resy date strip: a horizontal row of 60pt-tall cells (10pt radius, 8pt gap). Each cell: weekday Inter 10pt w600 uppercase `#9E9E9E` over date number Inter 17pt w700 `#F5F5F5`, fill `#121212`, 1pt `#262626` border. Selected day: solid `#C73E3A`, white text. Scrolls horizontally; a trailing calendar icon opens a month sheet (16pt top radius, selected date a filled red circle)."
+
+- "Build the Resy Notify chip: a pill (or slot variant) with transparent fill, 1pt `#D99A2B` border, a leading 🔔 glyph, text 'Notify when available' Inter 13pt w700 `#D99A2B`. Tapping fills it amber 150ms + soft haptic and switches to 'On the list'. Notify is a first-class waitlist path with its own bottom tab."
+
+- "Build the Resy primary button: crisp rounded rectangle (8pt radius — NOT pill), background `#C73E3A`, white text Inter 16pt w700, 14pt vertical / 28pt horizontal padding. Pressed: background `#A8302D` + scale 0.98 + soft haptic."
+
+- "Render the Resy bottom tab bar on pure black: 52pt + safe area, background `#000000` at 96% with blur, 0.5pt top border `#262626`. 5 tabs — Search, Hit List, Reservations, Notify, Account — 21pt icons, active `#E2504B` (bright red for contrast on black) solid fill, inactive `#6A6A6A`, Inter 10pt w600 labels always shown."
+
+### Iteration Guide
+1. Canvas is pure black `#000000` — dark-first by design, this IS the brand (light is a secondary inversion)
+2. Restaurant names + editorial titles are a high-contrast display serif (Playfair Display); UI is Inter — the split is the brand
+3. Resy Red `#C73E3A` (bright `#E2504B` on black) is the ONLY reservation color — Book, selected slot, active tab
+4. Available slots are red-OUTLINED, the primary slot is SOLID red — the contrast is the signal (never fill all slots solid)
+5. Always show the seating type ("Dining Room" / "Bar" / "Counter") under the slot time — Resy books specific seatings
+6. Sold-out slots become dashed **amber** `#D99A2B` Notify chips — Notify (waitlist) is a first-class path with its own tab
+7. Muted gold `#C9A24B` is the rating mark ("★ 9.4", /10) and the Hit List only
+8. The booking spine is search → editorial detail (carousel + serif name + tagline) → date strip → slot → confirm
+9. Use hairline `#262626` borders for elevation — drop-shadows are invisible on pure black; geometry is crisp 8–10pt
+10. Motion is restrained 150–300ms ease-out; soft haptics on slot/date/Notify select, success on confirm