System Requirements Document for lep-etitd-ejeuner

1. Introduction

This document defines the requirements for a premium, modern, high-converting, and fully responsive restaurant website for Le Petit Dejeuner by LPD Café in Toronto. The product intent is to deliver a professional hospitality experience that reflects the restaurant's Belgian-Canadian identity, seasonal ingredients, and all-day dining service. The primary audience includes prospective diners, reservation requesters, and the restaurant owner/site maintainer.

2. System Overview

The system is a public-facing website designed to showcase the restaurant's menu, story, and location while facilitating table requests and contact inquiries. It features a cinematic video hero, an editorial food gallery, and a structured menu system. The delivery is a custom web application with server-side handling for reservation and contact requests.

2a. Product Interpretation and Delivery Boundary

The website is a first-party application owned by the restaurant. It provides an anonymous public entry for all visitors. Identity is not required for browsing; however, reservation and contact requests involve server-side handling to process user-submitted data. The current delivery focuses on the public website; future requirements are not defined in the current scope.

2b. Source Content Inventory

• Business Name: Le Petit Dejeuner by LPD Café
• Address: 191 King St E, Toronto, ON M5A 1J5, Canada
• Phone: +1 416-703-1560
• Rating: 4.3 ★ from 2,092 Google reviews
• Price Range: 20–30 CAD/person
• Description: "Brasserie dotée de murs en brique servant toute la journée des plats belgo-canadiens réconfortants à base de produits de saison."
• Google Maps Link: https://www.google.com/maps/place/Le+Petit+Dejeuner+by+LPD+Caf%C3%A9/@43.65072,-98.8820078,5z/data=!4m11!1m3!2m2!1zQ2FuYWRhLCBjYWbDqQ!6e5!3m6!1s0x89d4cb308fb262e3:0x68137a388b2bee04!8m2!3d43.65072!4d-79.3702891
• Menu Items: Breakfast Crepe, Scrambled Eggs & Home Fries, Poached Egg & Hollandaise, Eggs Benny, Waffle Benny, Blueberry Pancakes with Scrambled Eggs, Croque Madame, Chicken Crêpe, Latte, Cappuccino, French Toast, fresh juice.
• Review Excerpts:
  • "Mention spéciale pour les jus et les fruits, très frais et bien présentés."
  • "Très bon service avec des serveurs souriants et attentionnés."
  • "Déjeuner délicieux ! Une carte où tout donne envie d’être dégusté."
• Opening Hours:
  • REGULAR: Mon 09:00–14:30; Tue Closed; Wed–Fri 09:00–14:30 / 17:00–23:00; Sat–Sun 09:00–15:00.
  • BREAKFAST: Mon 09:00–14:30; Tue Closed; Wed–Fri 09:00–14:30; Sat–Sun 09:00–15:00.
  • BRUNCH: Mon 09:00–14:30; Tue Closed; Wed–Fri 09:00–14:30; Sat–Sun 09:00–15:00.
  • HAPPY HOURS: Wed–Fri 17:00–21:00; Sat–Tue Closed.
  • DINNER: Wed–Fri 17:00–23:00; Sat–Tue Closed.

2c. Page Content and Component Coverage

Home

• Information/State: Hero video, story headline, signature menu items, food gallery, why-us pillars, reviews, hours, location, contact form, final CTA.
• Primary Actions: View Our Menu, Reserve a Table, Get Directions, Discover Our Story, Plan Your Visit, Read More Reviews, Send Request.
• Domain Entities: Menu items, reviews, hours, location details.
• Component Responsibilities: Hero video player, reservation card, menu grid, gallery, review strip, hours accordion, location card, contact form.
• States: Loading (video poster), Empty (no reviews), Success (form submission), Error (form validation).

Our Story

• Information/State: Headline "Comfort food, made for slow mornings and good company.", supplied copy, large photography.
• Primary Actions: Discover Our Story.
• Domain Entities: Restaurant description.
• Component Responsibilities: Editorial layout, image display.
• States: Loading (image), Error (image fallback).

Menu

• Information/State: Categorized menu items (Breakfast, Brunch, Eggs, Waffles, Pancakes, Crepes, French Toast, Comfort Food, Dinner, Desserts, Drinks).
• Primary Actions: View item details.
• Domain Entities: Menu items with names, descriptions, and prices (only when known).
• Component Responsibilities: Category tabs, item cards with images.
• States: Loading (images), Empty (category with no items).

Reviews

• Information/State: 4.3 rating, 2,092 reviews, authentic excerpts.
• Primary Actions: Read More Reviews.
• Domain Entities: Review excerpts.
• Component Responsibilities: Review cards, rating display.
• States: Loading, Empty (no reviews).

Visit Us

• Information/State: Address, phone, hours, map embed or location card.
• Primary Actions: Get Directions, Call Us.
• Domain Entities: Location details, hours.
• Component Responsibilities: Map embed, hours accordion, contact buttons.
• States: Loading (map), Error (map unavailable).

Contact

• Information/State: Contact form (Name, Email, Phone, Guests, Date, Preferred Time, Message), phone, address.
• Primary Actions: Send Request.
• Domain Entities: Contact form data.
• Component Responsibilities: Form validation, submission handling.
• States: Loading (submission), Success (request sent), Error (validation).

Privacy Policy

• Information/State: Sections: Information Collected, Use of Information, Contact/Reservation Requests, Cookies & Analytics, Third Parties, Retention, Security, User Rights, Children's Privacy, Policy Updates. "Last updated: September 2026."
• Primary Actions: None.
• Domain Entities: Policy text.
• Component Responsibilities: Static content display.
• States: None.

3. Functional Requirements

1. As a Prospective Diner, I should view a cinematic hero video on the Home page so that I can immediately experience the restaurant's atmosphere.

   • Provenance: explicit
   • Lifecycle: Initiator: Prospective Diner; Trigger: Page load; Result: Video plays with overlay; Failure: Poster image fallback; Continuation: Scroll to story.
   • Acceptance: Video autoplays, muted, loop, playsInline, cover, no controls, with dark/warm overlay.

2. As a Prospective Diner, I should see the hero text "BREAKFAST • BRUNCH • DINNER", headline "Good mornings start here.", and subcopy on the Home page.

   • Provenance: explicit
   • Lifecycle: Initiator: Prospective Diner; Trigger: Page load; Result: Text visible with staggered animation; Failure: N/A; Continuation: Click buttons.
   • Acceptance: Text animates from opacity 0 + translateY 30px to visible.

3. As a Prospective Diner, I should use the hero reservation card to request a table.

   • Provenance: explicit
   • Lifecycle: Initiator: Reservation Requester; Trigger: Form submission; Result: Request sent, no instant confirmation; Failure: Validation error; Continuation: Call restaurant.
   • Acceptance: Fields: Name, Email, Phone, Guests, Date, Preferred Time, Special Request. Button: "Request a Table". Text: "Reservations are subject to availability."

4. As a Prospective Diner, I should view the Story section with headline and copy.

   • Provenance: explicit
   • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: Story content visible; Failure: N/A; Continuation: Click "Discover Our Story".
   • Acceptance: Headline: "Comfort food, made for slow mornings and good company." Copy as supplied.

5. As a Prospective Diner, I should view the Signature Menu section with featured items.

   • Provenance: explicit
   • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: Menu items displayed; Failure: N/A; Continuation: Click "View Full Menu".
   • Acceptance: Items: Breakfast Crepe, Scrambled Eggs & Home Fries, Poached Egg & Hollandaise, Eggs Benny, Waffle Benny, Blueberry Pancakes with Scrambled Eggs, Croque Madame, Chicken Crêpe, Latte, Cappuccino, French Toast, fresh juice. Price only when known.

6. As a Prospective Diner, I should view the Food Experience gallery.

   • Provenance: explicit
   • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: Gallery images with reveals; Failure: N/A; Continuation: Scroll.
   • Acceptance: Images of waffles, Eggs Benedict, French toast, pancakes, coffee, fresh fruit, atmosphere. Copy: "Made fresh.", "Served with care.", "Built around good ingredients."

7. As a Prospective Diner, I should view the Why Us section with four pillars.

   • Provenance: explicit
   • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: Pillars displayed; Failure: N/A; Continuation: Click "Plan Your Visit".
   • Acceptance: Pillars: 01 Seasonal Ingredients, 02 Belgian-Canadian Comfort, 03 All-Day Experience, 04 Downtown Toronto (191 King St E).

8. As a Prospective Diner, I should view the Reviews section with rating and excerpts.

   • Provenance: explicit
   • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: Reviews displayed; Failure: N/A; Continuation: Click "Read More Reviews".
   • Acceptance: 4.3 ★ / 2,092 Google reviews. Excerpts as supplied.

9. As a Prospective Diner, I should view the Opening Hours component.

   • Provenance: explicit
   • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: Hours displayed; Failure: N/A; Continuation: N/A.
   • Acceptance: Tabs/accordion for REGULAR, BREAKFAST, BRUNCH, HAPPY HOURS, DINNER. No holiday hours.

10. As a Prospective Diner, I should view the Location section with address and buttons.

    • Provenance: explicit
    • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: Location displayed; Failure: Map embed unavailable → premium location card; Continuation: Click "Get Directions" or "Call Us".
    • Acceptance: Address: 191 King St E, Toronto, ON M5A 1J5, Canada. Phone: +1 416-703-1560.

11. As a Reservation Requester, I should submit the Contact form.

    • Provenance: explicit
    • Lifecycle: Initiator: Reservation Requester; Trigger: Form submission; Result: Request sent; Failure: Validation error; Continuation: Call restaurant.
    • Acceptance: Fields: Name, Email, Phone, Guests, Date, Preferred Time, Message. Button: "Send Request".

12. As a Prospective Diner, I should view the Final CTA section.

    • Provenance: explicit
    • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: CTA displayed; Failure: N/A; Continuation: Click "View Menu" or "Reserve a Table".
    • Acceptance: Headline: "Your table is waiting." Copy: "Join us for breakfast, brunch, dinner, coffee, and good moments in downtown Toronto."

13. As a Prospective Diner, I should navigate using the sticky desktop nav.

    • Provenance: explicit
    • Lifecycle: Initiator: Prospective Diner; Trigger: Scroll; Result: Nav becomes semi-transparent blurred; Failure: N/A; Continuation: Click links.
    • Acceptance: Links: Logo | Home | Our Story | Menu | Reviews | Visit Us | Contact | Reserve a Table.

14. As a Prospective Diner, I should use the mobile hamburger menu.

    • Provenance: explicit
    • Lifecycle: Initiator: Prospective Diner; Trigger: Tap hamburger; Result: Full-height menu slides from right; Failure: N/A; Continuation: Click links.
    • Acceptance: Smooth animation, large typography, reservation CTA.

15. As a Prospective Diner, I should view the Menu page with categorized items.

    • Provenance: explicit
    • Lifecycle: Initiator: Prospective Diner; Trigger: Navigate to Menu; Result: Categories displayed; Failure: N/A; Continuation: Browse items.
    • Acceptance: Categories: Breakfast, Brunch, Eggs, Waffles, Pancakes, Crepes, French Toast, Comfort Food, Dinner, Desserts, Drinks. Supplied items only.

16. As a Prospective Diner, I should view the Our Story page.

    • Provenance: explicit
    • Lifecycle: Initiator: Prospective Diner; Trigger: Navigate to Our Story; Result: Story content displayed; Failure: N/A; Continuation: N/A.
    • Acceptance: Supplied facts only. No invented founders, chefs, history, or awards.

17. As a Prospective Diner, I should view the Reviews page.

    • Provenance: explicit
    • Lifecycle: Initiator: Prospective Diner; Trigger: Navigate to Reviews; Result: Rating and excerpts displayed; Failure: N/A; Continuation: N/A.
    • Acceptance: 4.3 rating, 2,092 reviews, authentic excerpts.

18. As a Prospective Diner, I should view the Privacy Policy page.

    • Provenance: explicit
    • Lifecycle: Initiator: Prospective Diner; Trigger: Navigate to Privacy Policy; Result: Policy content displayed; Failure: N/A; Continuation: N/A.
    • Acceptance: Sections as specified. "Last updated: September 2026."

19. As a Restaurant Owner / Site Maintainer, I should ensure all content is accurate and no facts are invented.

    • Provenance: explicit
    • Lifecycle: Initiator: Restaurant Owner; Trigger: Content update; Result: Site reflects only supplied facts; Failure: N/A; Continuation: N/A.
    • Acceptance: No invented prices, awards, chefs, history, customer names, reviews, or statistics.

4. User Personas

Prospective Diner

• Product Context: A Toronto local or visitor exploring Le Petit Dejeuner's Belgian-Canadian breakfast, brunch, and dinner offering.
• Primary Goal: Decide whether to visit by browsing the hero, story, signature menu, food gallery, why-us pillars, reviews, hours, and location.
• Distinct Responsibilities: Browsing the menu, reading reviews, checking hours, and finding the location.
• Inputs/Decisions: Decides to view the full menu, request a table, call, or get directions.
• Interactions: Interacts with the website's public pages and forms.
• Observable Success: A confident decision to visit with a working path to reserve, call, or navigate there.

Reservation Requester

• Product Context: A guest who has decided to book and submits the hero reservation card or contact form.
• Primary Goal: Submit a table request with accurate expectations about confirmation.
• Distinct Responsibilities: Providing name, email, phone, guests, date, preferred time, and special request/message.
• Inputs/Decisions: Submits the form and understands that the request is subject to availability.
• Interactions: Interacts with the reservation card and contact form.
• Observable Success: A submitted request with clear expectations about confirmation.

Restaurant Owner / Site Maintainer

• Product Context: The party responsible for the restaurant's public presence.
• Primary Goal: Ensure the site reflects only supplied facts and remains trustworthy and conversion-focused.
• Distinct Responsibilities: Maintaining accurate hours, address, phone, menu items, and Google review excerpts.
• Inputs/Decisions: Updates content as needed.
• Interactions: Manages the website content.
• Observable Success: A trustworthy site that never misrepresents the restaurant.

5. Core User Flows

Prospective Diner: Browse and Decide

1. Start: Prospective Diner lands on the Home page.
2. Action: Views the cinematic hero video and reads the headline "Good mornings start here."
3. Action: Scrolls to the Story section and reads the headline and copy.
4. Action: Scrolls to the Signature Menu section and views featured items.
5. Action: Scrolls to the Food Experience gallery and views images.
6. Action: Scrolls to the Why Us section and reads the four pillars.
7. Action: Scrolls to the Reviews section and reads the rating and excerpts.
8. Action: Scrolls to the Opening Hours component and checks hours.
9. Action: Scrolls to the Location section and views the address and buttons.
10. Action: Clicks "Get Directions" to open Google Maps.
11. Result: Prospective Diner has enough information to decide to visit.
12. Next Step: Clicks "Reserve a Table" or "View Our Menu".

Reservation Requester: Submit a Table Request

1. Start: Reservation Requester lands on the Home page.
2. Action: Fills out the hero reservation card with Name, Email, Phone, Guests, Date, Preferred Time, and Special Request.
3. Action: Clicks "Request a Table".
4. Result: Request is submitted. No instant confirmation is claimed.
5. Next Step: Calls the restaurant at +1 416-703-1560 for confirmation.

Reservation Requester: Submit a Contact Request

1. Start: Reservation Requester navigates to the Contact page.
2. Action: Fills out the contact form with Name, Email, Phone, Guests, Date, Preferred Time, and Message.
3. Action: Clicks "Send Request".
4. Result: Request is submitted.
5. Next Step: Waits for a response or calls the restaurant.

Restaurant Owner / Site Maintainer: Update Content

1. Start: Restaurant Owner logs into the content management system.
2. Action: Updates menu items, hours, or review excerpts.
3. Result: Changes are reflected on the website.
4. Next Step: Verifies the changes are accurate and no facts are invented.

6. Visuals Colors and Theme

• Muse: Charles & Ray Eames
• Headline: Warm mid-century modernism for a Toronto brasserie — order, colour and craft, served like a good breakfast.
• Palette (Light Mode):
  • Background: #F7F1E8 (Cream)
  • Surface: #FFFDF9 (White)
  • Text: #241A17 (Deep Espresso)
  • Primary: #B76545 (Terracotta)
  • Accent: #C7A46A (Muted Gold)
  • Muted: #8A7A6C
  • Charcoal: #151210
• Typography:
  • Headings: Cormorant Garamond (500–600 weight, tight leading 0.95–1.05, large display sizes, sentence case for editorial headlines, all-caps with 0.14em tracking for eyebrows and menu category labels).
  • Body: Manrope (400/500 weight, 1.7 line-height, 0.01em tracking; 600 for buttons and nav).
  • Scale: 1.333 modular on 16px base — 128/96/72/54/40/28/20/16/14.
  • Headline clamp: clamp(2.5rem, 7vw, 8rem) for hero display; section headlines clamp(2rem, 4.5vw, 4.5rem); menu item names 20–28px; body 16–18px; micro-labels 12–13px uppercase.
• Shape Language: Organic-modern: soft 2–4px radii on buttons, 12–16px on cards and reservation panel, 0px on full-bleed photography and colour blocks. Thin 1px hairline rules in Muted Gold or espresso at 12% opacity. One recurring organic shape: a large quarter-circle or elongated arc used as a decorative colour block behind the story headline and clipped into the gallery. Dotted leaders between menu item name and price. No drop shadows except one soft 0 24px 60px rgba(36,26,23,0.12) under the hero reservation panel.
• Imagery Style: High-end food and interior photography only — no illustration, no stock-people clichés, no 3D renders. Natural window light, warm shadows, shallow depth of field, food shot at 30–45° on ceramic or directly overhead on a wooden table. Required subjects: coffee pour with visible crema, waffle with syrup mid-drizzle, Eggs Benedict with broken yolk, French toast with berries, blueberry pancakes, fresh-juice glass with visible fruit, latte in a cup on a saucer, brick-wall interior with warm pendant light, wide shot of a table mid-meal. Treatment: consistent warm grade (slight amber lift in highlights, espresso shadows), 4:5 portrait crops for menu items and 16:9 or 3:2 for editorial gallery images.

7. Signature Design Concept

The public entry (Home page) features an oversized Cormorant Garamond headline "Good mornings start here." at up to 120px on desktop with the second line indented 56px, sitting bottom-left over the cinematic video while the glass reservation panel floats bottom-right. This asymmetric editorial composition is anchored by a gold hairline rule and small-caps eyebrow label "BREAKFAST • BRUNCH • DINNER". The hero video plays continuously at 0.9x with a slow 20-second warm-overlay opacity drift. The reservation panel is the only elevated object on screen, with a 1px rgba(255,253,249,0.22) border, backdrop-filter blur(20px) saturate(140%), background rgba(255,253,249,0.08), and a soft top glow (inset 0 1px 0 rgba(255,253,249,0.35)).

8. Interaction Model & Motion Direction

• Interaction Model: Animated
• Motion Tempo: restrained
• Hero Dimensionality: layered_2d
• Landing Hero Motion Brief:
  • Focal Subject: Cinematic video of coffee pour, waffles, Eggs Benedict, pancakes, French toast, fresh ingredients, restaurant interior, and guests enjoying brunch.
  • Input→Transformation→Outcome Thesis: On page load, hero content enters in a stagger: eyebrow (0ms), headline (120ms), subcopy (240ms), buttons (360ms), trust row (480ms) — each from opacity 0 / translateY 30px over 700ms cubic-bezier(0.16,1,0.3,1). The video plays continuously with a slow warm-overlay opacity drift.
  • Motion Vocabulary: Restrained, film-like and purposeful. Scroll reveals: images clip from a 100% inset mask to 0 with a 1.1s ease-out and a 1.04→1 scale settle. Subtle parallax of ±24px on gallery images only. Image hover zoom to 1.05 over 600ms. Buttons lift 1px and shift background from terracotta to a 6% darker terracotta on hover. Nav blur transition over 400ms. Anchor scrolling smooth with a 88px offset.
  • Composed First Frame: The hero video is visible with a dark/warm overlay. The headline "Good mornings start here." is bottom-left, and the glass reservation panel is bottom-right.
  • Reduced-Motion State: All motion disabled under prefers-reduced-motion (video pauses, reveals become instant, parallax removed).

9. Non-Functional Requirements

• Performance: Lazy-load images, compress media, optimize video, use responsive images, optimize fonts, minimize JavaScript, and keep animations GPU-friendly. Hero video must have poster and mobile fallback.
• SEO: Title: "Le Petit Dejeuner by LPD Café | Breakfast & Brunch in Toronto". Description: "Le Petit Dejeuner by LPD Café serves Belgian-Canadian comfort food, breakfast, brunch and dinner at 191 King St E in Toronto." Use semantic headings, descriptive alt text, and Restaurant/LocalBusiness structured data with address, phone, hours, and menu URL.
• Accessibility: Use semantic HTML, keyboard navigation, visible focus states, accessible labels/forms, strong contrast, alt text, reduced-motion support, and accessible mobile navigation.
• Responsive: Mobile-first and optimized for mobile portrait/landscape, tablets, and desktop. Stack hero/form on mobile, simplify galleries, maintain readable typography and touch-friendly controls. No horizontal overflow.
• Functional Links: Every CTA must work: View Menu → Menu page; Reserve → reservation/contact section; Directions → supplied Google Maps; Call → +1 416-703-1560; Our Story → About; Reviews → Reviews/Google; Contact → Contact; Privacy → Privacy Policy. Never use dead "#" buttons.

10. Tech Stack

• Frontend: React
• Backend: Python/FastAPI
• Storage: Appropriate storage for reservation and contact requests.
• Deployment: Docker/docker-compose.

11. Assumptions and Constraints

• Assumptions:
  • The restaurant owner will provide all necessary content and images.
  • The website will be hosted on a standard web server.
• Constraints:
  • Never invent prices; show price only when known.
  • Never fabricate reviews, names, awards, or statistics.
  • Use only authentic supplied review excerpts.
  • Do not invent holiday hours.
  • Use supplied menu items only.
  • About page: use only supplied facts; do not invent founders, chefs, history, or awards.
  • Content rule: only use facts supplied in this prompt; never invent prices, awards, chefs, history, customer names, reviews, or statistics.
  • If no booking API is connected, make it a reservation request form and do not claim instant confirmation.
  • Privacy Policy: do not make unsupported legal claims; present it as general website policy content suitable for review.
  • Include exactly "Last updated: September 2026." on the Privacy Policy page.
  • Never use dead "#" buttons; every CTA must work.
  • Avoid generic templates, excessive cards, neon colors, clutter, and gimmicky animation.
  • Respect prefers-reduced-motion.
  • No horizontal overflow.
  • Hero video must have poster and mobile fallback.
  • If map embedding is unavailable, create a premium location card.

12. Glossary

• Brasserie: A type of restaurant that serves beer and food, often in a casual setting.
• Belgian-Canadian: A fusion of Belgian and Canadian culinary traditions.
• Hero Video: A large, cinematic video displayed at the top of the Home page.
• Glassmorphic: A design style featuring a frosted glass effect with transparency and blur.
• CTA: Call to Action, a button or link that prompts the user to take a specific action.
• Structured Data: A standardized format for providing information about a page and classifying its content.