Resy DESIGN.md

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

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

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.

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

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