OpenTable DESIGN.md

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

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

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.

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

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