avec-moi

byJohn M

Build me a classic French recipe sit titled AVEC MOI. Create extensive textual content with accuracy, use real French standard and procedures for every recipe. Include real French classics like ratatouille, coq au vin, bordelaise sauce, etc

LandingRecipe DetailsRecipes
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for avec-moi

1. Introduction

AVEC MOI is a classic French recipe site. Its purpose is to present extensive, accurate textual recipe content that follows real French standards and procedures for every recipe, and to include real French classics such as ratatouille, coq au vin, and bordelaise sauce.

The audience is the home cook who wants to prepare authentic French classics at home from trustworthy written method, and the recipe browser who wants to explore the collection of French classics to decide what to cook. The site is a reading and reference experience: its value is craft, accuracy, and complete procedure rather than video, community, or commerce.

The product is delivered as a public, no-account website. Visitors arrive anonymously, learn what AVEC MOI is, browse the recipe collection, and open a recipe to read its full ingredients and step-by-step method.

Page 1 of 28

2. System Overview

AVEC MOI is a three-destination public website:

  • Landing — the anonymous first impression: the AVEC MOI wordmark, a statement that this is a classic French recipe site, who it is for, what it offers, and a route into the collection.
  • Recipes — the browse surface: the collection of real French classics, including ratatouille, coq au vin, and bordelaise sauce, presented so a visitor can decide what to cook.
  • Recipe Details — the read surface: one recipe's extensive textual content, with ingredients and a step-by-step procedure written to real French standards, plus real facts and interesting background information that give the site personality.

Two active human personas use the site: the Home cook, who reads a full recipe and follows its method, and the Recipe browser, who explores the collection to decide what to cook. Both personas reach all three destinations without an account.

Delivery uses a React frontend, a shared FastAPI backend process for application APIs and domain modules, and MariaDB for application-owned persistent recipe data. No identity, session, or permission layer is part of the product.

Removed from scope

  • None. The authoritative requirement thread contains no removed concepts.
Page 2 of 28

2a. Product Interpretation and Delivery Boundary

AVEC MOI is a first-party, publicly readable recipe publication. All three destinations are application-owned custom pages with no access requirement: a visitor can land, browse, and read without signing in, and nothing in the accepted requirements creates durable visitor-specific state that would need an account to own or resume.

The product boundary is deliberately narrow. AVEC MOI publishes recipes and their method; it does not host accounts, comments, ratings, shopping lists, meal planning, video, or commerce. Recipe content is application-owned data served by the shared backend and stored in MariaDB, so the collection and each recipe's full text are available on every visit and to every visitor equally.

Every published recipe is a complete, authored record — not a placeholder — and each one carries real facts and interesting background information alongside its method, so the site reads with personality rather than as a bare procedure sheet. That personality content is authored and stored as application data with the rest of the recipe; it is never generated at request time.

There is no future-horizon requirement in the authoritative thread; everything described here is current.

2c. Page Content and Component Coverage

Page 3 of 28

Landing

  • Information and state. The AVEC MOI wordmark; the headline statement that this is a classic French recipe site; the French subline La cuisine française, faite chez vous; a short statement of who the site is for (home cooks and recipe browsers) and what it offers (accurate, extensive, standard-procedure French classics); a warm food/kitchen photograph; a route into the collection.
  • Personality content. The editorial passage on the site's standards carries real, specific French culinary facts (for example the origin of a dish, its region, or the standard technique that defines it) rather than generic marketing copy; each featured classic in the strip shows its name, category tag, and a one-line real fact about the dish.
  • Primary action. "Explorer les recettes" — navigate to Recipes.
  • Supporting actions. Navigate to Recipes from the top bar's "Recettes" pill; navigate to any section link in the top bar.
  • Domain entities. Site introduction content; a featured recipe or featured recipe set drawn from the published collection (read-only), each featured entry exposing its name, category, and one-line fact.
  • Component responsibilities. Sticky slim top bar (wordmark left, section links centre, red "Recettes" pill right); full-bleed cream hero band with oversized flush-left wordmark, Fraunces subline, mustard half-circle motif, and a tall 4:5 rounded photograph panel overlapping the type block and bleeding off the right edge; Eames textile pattern divider band; a short editorial passage on the site's standards; a small selection of named classics (ratatouille, coq au vin, bordelaise sauce) linking to their Recipe Details; a closing note.
Page 4 of 28
  • States. Loading: hero text and layout render immediately; the featured-classics strip shows a quiet placeholder until recipe data resolves. Empty: if no featured recipes are available, the hero, editorial passage, and "Explorer les recettes" action remain, and the featured strip is omitted rather than shown blank. Success: hero, divider, editorial passage, featured classics, and closing note all present. Error: if featured recipe data fails, the page still renders fully and the featured strip is replaced by a plain link to Recipes. Recovery: reloading the page re-requests featured data; the Recipes destination is always reachable from the top bar regardless of featured-data state.
Page 5 of 28

Recipes

  • Information and state. The full published collection of French classics, each entry showing its number (01, 02, 03…), name, category tag, and a short description; the collection's extent and the fact that every entry leads to a complete recipe with real facts and background information.
  • Primary action. Select a recipe to open its Recipe Details.
  • Supporting actions. Navigate back to Landing via the wordmark; navigate to Recipes from the top bar.
  • Domain entities. Recipe (name, category, index number, short description, one-line fact); the recipe collection.
  • Component responsibilities. Sticky top bar; page title and short introduction; modular 12-column index grid of numbered tiles, each with a walnut hairline top rule, Jost small-caps number, recipe name, teal category tag, and a short description line; Eames textile divider band; each tile is a link to that recipe's Recipe Details.
  • States. Loading: grid skeleton of numbered tile outlines while the collection loads. Empty: if the collection returns no recipes, an explicit message states that no recipes are currently published and offers a route back to Landing. Success: all published recipes appear as numbered tiles. Error: a plain error message with a retry action that re-requests the collection. Recovery: retry re-fetches; the top bar keeps Landing reachable throughout.
Page 6 of 28

Recipe Details

  • Information and state. One recipe's full textual content: name, category, a short introduction, ingredient list with quantities, and a step-by-step method written to real French standards and procedures; each method step carries its step number. Alongside the method, the page carries real facts and interesting background information that give the recipe and the site personality — for example the dish's origin and region, the standard technique or term that defines it, a note on a key ingredient, and a serving or storage note.
  • Primary action. Read the recipe — ingredients and method — in full.
  • Supporting actions. Return to Recipes; navigate to Landing via the wordmark; keep the ingredient panel in view while reading the method.
  • Domain entities. Recipe (name, category, introduction, ingredients with quantities, ordered method steps, facts and background notes).
  • Component responsibilities. Sticky top bar; full-bleed image band opening the recipe; floating cream ingredients panel that docks to the left column on scroll; single-column reading measure (max 68ch) for the method on the right; method steps with large tomato-red Fraunces numerals hanging in the left margin connected by a thin walnut rule; a facts and background block (labelled with a Jost small-caps eyebrow) presenting the recipe's real facts and interesting notes in the same reading measure; Eames textile divider band before the closing note.
  • States. Loading: image band and title frame render with a quiet placeholder for ingredients, method, and facts. Empty: not applicable — a recipe is only reachable when it has published content; an unknown recipe reference shows a not-found message with a link to Recipes. Success: image band, ingredients panel, full method, and facts and background block all present. Error: if recipe content fails to load, an explicit error message with a retry action and a link to Recipes. Recovery: retry re-requests the recipe; the Recipes destination remains reachable from the top bar.
Page 7 of 28

3. Functional Requirements

FR-1 — Site identity and purpose on arrival As a Recipe browser, I should arrive at a page that names the site AVEC MOI and states that it is a classic French recipe site, so that I understand what I have found before browsing.

  • Provenance: explicit (site title and classic French recipe site) with required_inference entry surface.
  • Lifecycle: Trigger — visitor opens the site root. Input — none. Observable result — the AVEC MOI wordmark and a statement of the site's purpose and audience are visible. Access — anonymous. Failure/recovery — if supporting recipe data fails, the identity and purpose content still render. Continuation — a visible route into the recipe collection.
  • Acceptance: the Landing page displays "AVEC MOI" and describes the site as a classic French recipe site for home cooks and recipe browsers.

FR-2 — Route from arrival into the collection As a Recipe browser, I should be able to go from the Landing page into the recipe collection in one action, so that I can start exploring.

  • Provenance: required_inference (indispensable continuation of the accepted browse journey).
  • Lifecycle: Trigger — visitor activates "Explorer les recettes" or the top-bar "Recettes" pill. Observable result — the Recipes page opens showing the collection. Access — anonymous. Failure/recovery — the top-bar route remains available if the hero action's target data is unavailable. Continuation — selecting a recipe.
  • Acceptance: activating either control navigates to Recipes.
Page 8 of 28

FR-3 — Browse the collection of French classics As a Recipe browser, I should see the site's collection of real French classics presented as a browsable index, so that I can decide what to cook.

  • Provenance: explicit (collection includes real French classics) with required_inference browse surface.
  • Lifecycle: Trigger — visitor opens Recipes. Input — none required. Observable result — every published recipe appears as a numbered tile with its name and category. Access — anonymous. Failure/recovery — a load error shows a message and a retry action. Continuation — selecting a tile.
  • Acceptance: the Recipes page lists the published recipes, including ratatouille, coq au vin, and bordelaise sauce, each as a distinct numbered entry.

FR-4 — Open a recipe from the collection As a Recipe browser, I should be able to select any recipe in the collection and open its full content, so that I can evaluate it before cooking.

  • Provenance: required_inference (indispensable handoff from browse to read).
  • Lifecycle: Trigger — visitor selects a recipe tile. Observable result — that recipe's Recipe Details page opens with its own name and content. Access — anonymous. Failure/recovery — an unknown or unavailable recipe reference shows a not-found or error message with a route back to Recipes. Continuation — reading the recipe.
  • Acceptance: selecting a tile opens the corresponding recipe, not a generic or mismatched one.
Page 9 of 28

FR-5 — Read extensive, accurate recipe content As a Home cook, I should be able to read a recipe's extensive textual content — introduction, ingredients with quantities, and a complete step-by-step method — so that I can cook the dish correctly.

  • Provenance: explicit (extensive textual content; accuracy; real French standards and procedures).
  • Lifecycle: Trigger — visitor opens a Recipe Details page. Input — none. Observable result — the full recipe text is displayed in a readable single-column measure with numbered method steps. Access — anonymous. Failure/recovery — a content load error shows a message, a retry action, and a link to Recipes. Continuation — following the method, or returning to the collection.
  • Acceptance: each recipe presents an ingredient list with quantities and an ordered method whose steps are individually numbered and written as real French procedure.
Page 10 of 28

FR-5a — Real facts and personality on every recipe As a Home cook or Recipe browser, I should find real facts and interesting background information on each recipe page, so that the site has personality and I understand the dish rather than only its steps.

  • Provenance: explicit (add real facts and other interesting info to give the site personality).
  • Lifecycle: Trigger — visitor opens a Recipe Details page. Input — none. Observable result — the recipe page shows a facts and background block with real, specific information about that dish (for example its origin and region, the standard technique or French term that defines it, a note on a key ingredient, and a serving or storage note), presented in the same readable measure as the method. Access — anonymous. Failure/recovery — if the facts block is unavailable for a recipe, the introduction, ingredients, and method still render in full and the block is omitted rather than shown empty; a content load error shows a message, a retry action, and a link to Recipes. Continuation — following the method, or returning to the collection.
  • Acceptance: every published recipe carries at least one real fact or background note beyond its ingredients and method, the facts are specific to that dish rather than generic site copy, and no fact is invented at request time.
Page 11 of 28

FR-5b — Complete authored recipe records As the application, I should hold every published recipe as a complete authored record — introduction, ingredients with quantities, ordered method, and facts and background notes — so that no recipe page is ever a stub.

  • Provenance: explicit (create recipes and recipe pages; no recipe may be published as a stub) with required_inference delivery mechanics.
  • Lifecycle: Trigger — the collection is authored and seeded into application storage. Input — authored recipe records. Observable result — each published recipe resolves to a full Recipe Details page with all four content parts present. Access — anonymous. Failure/recovery — a recipe missing any required part is not published and therefore does not appear in the collection. Continuation — browsing and reading.
  • Acceptance: the published collection includes at least ratatouille, coq au vin, and bordelaise sauce, and every published recipe has an introduction, an ingredient list with quantities, an ordered numbered method, and at least one real fact or background note.

FR-6 — Keep quantities visible while reading the method As a Home cook, I should be able to see the ingredient quantities while I read the method, so that I do not lose my place or the measurements.

  • Provenance: required_inference (indispensable reading aid for the accepted cook-and-follow outcome; realized as the docking ingredients panel).
  • Lifecycle: Trigger — visitor scrolls the Recipe Details method. Observable result — the ingredients panel remains docked in the left column while the method reads on the right. Access — anonymous. Failure/recovery — at narrow viewports where docking is not possible, ingredients remain fully readable in normal document order above the method. Continuation — continuing the method.
  • Acceptance: ingredients and their quantities are reachable without leaving the recipe page, and no readable text or control is covered by the panel.
Page 12 of 28

FR-7 — Return to the collection As a Home cook or Recipe browser, I should be able to return from a recipe to the collection, so that I can choose another dish.

  • Provenance: required_inference (indispensable continuation).
  • Lifecycle: Trigger — visitor activates the return-to-Recipes control or the top-bar "Recettes" pill. Observable result — the Recipes page opens. Access — anonymous. Continuation — selecting another recipe.
  • Acceptance: a return route to Recipes is present on every Recipe Details page.

FR-8 — Serve the recipe collection and recipe content As the application, I should serve the published recipe collection and each recipe's full content from application-owned storage, so that every visitor sees the same accurate content.

  • Provenance: required_inference (delivery mechanics for explicit content requirements).
  • Lifecycle: Trigger — a page requests collection or recipe data. Observable result — the shared backend returns the stored recipe records. Failure/recovery — the frontend surfaces the error states defined in 2c. Continuation — none for the visitor beyond retry.
  • Acceptance: recipe content is read from MariaDB through the shared FastAPI backend; no recipe text is hardcoded only in the frontend.
Page 13 of 28

FR-9 — Serve recipe facts and background notes As the application, I should serve each recipe's facts and background notes from application-owned storage together with its method, so that the personality content is consistent for every visitor.

  • Provenance: required_inference (delivery mechanics for the explicit real-facts requirement).
  • Lifecycle: Trigger — a Recipe Details page requests a recipe. Observable result — the shared backend returns the recipe record including its facts and background notes. Failure/recovery — the frontend surfaces the error states defined in 2c; a missing facts field omits the block without breaking the page. Continuation — none for the visitor beyond retry.
  • Acceptance: facts and background notes are stored in MariaDB and returned by the shared FastAPI backend; they are not hardcoded only in the frontend and are not generated at request time.

4. User Personas

Page 14 of 28

Home cook

The Home cook comes to AVEC MOI to actually make a French classic — ratatouille, coq au vin, or a bordelaise sauce — and needs a recipe they can trust to be accurate and to follow real French standards and procedures. Their work is reading with intent: they open a specific recipe, read the introduction to understand the dish, check the ingredient quantities, and then follow the method step by step, keeping the quantities in view as they go.

Their primary goal is to complete a dish correctly from written instruction. Their inputs are the recipe's ingredient list, ordered method, and the real facts and background notes that explain the dish; their decisions are whether the recipe matches what they intend to cook and whether they have understood each step. They interact with the Recipe browser only indirectly — the browser's collection is how the Home cook's recipe was found — and with the site itself through the Recipe Details page. Their observable success is having read a complete, coherent method with quantities at hand and being able to follow it without ambiguity. What distinguishes them from the Recipe browser is depth: they consume one recipe exhaustively rather than surveying many.

Page 15 of 28

Recipe browser

The Recipe browser comes to AVEC MOI to explore what French classics the site offers and to decide what to cook. Their work is comparative and shallow-per-item: they scan the numbered index, read names and category tags, and open a recipe to judge whether it is the one they want.

Their primary goal is to reach a decision about which dish to cook. Their inputs are the collection's entries — each with its name, category tag, and short description — and each recipe's introduction, content, and real facts and background notes; their decision is which recipe to commit to. They interact with the Home cook's territory when they open a Recipe Details page, and they depend on the collection being complete and clearly labelled. Their observable success is opening a recipe whose full content answers their question, or returning to the collection to compare another. What distinguishes them from the Home cook is that browsing, not cooking, is their accepted responsibility.

5. Core User Flows

Page 16 of 28

Flow A — Recipe browser arrives and enters the collection

  1. The Recipe browser opens the site root and lands on Landing.
  2. They see the AVEC MOI wordmark, the statement that this is a classic French recipe site, and the subline La cuisine française, faite chez vous, plus a short passage on the site's standards and a warm kitchen photograph.
  3. They decide to explore and activate the tomato-red "Explorer les recettes" capsule (or the top-bar "Recettes" pill).
  4. Recipes opens, showing the numbered index of French classics.
  5. Failure/recovery: if featured recipe data failed to load on Landing, the page still rendered and the route into Recipes was available; they proceed normally.
  6. Continuation: they begin scanning the index (Flow B).
Page 17 of 28

Flow B — Recipe browser surveys the collection and chooses a dish

  1. On Recipes, the Recipe browser reads the page title and introduction, then scans the numbered tiles — 01, 02, 03… — each with a walnut hairline rule, a Jost small-caps number, the recipe name, and a teal category tag.
  2. They locate the classics they came for, including ratatouille, coq au vin, and bordelaise sauce, and compare categories to narrow their choice.
  3. They select a tile.
  4. Recipe Details opens for that recipe, showing its image band, name, introduction, ingredients, method, and a facts and background block.
  5. They read enough to judge the dish — the introduction and the real facts about its origin, region, and defining technique give them the context to decide.
  6. Failure/recovery: if the collection failed to load, an error message with a retry action appeared; retrying re-fetched the collection. If a selected recipe could not be loaded, a not-found or error message offered a route back to Recipes.
  7. Continuation: they either commit to cooking it (Flow C) or activate the return-to-Recipes control and compare another dish (back to step 1).
Page 18 of 28

Flow C — Home cook reads and follows a recipe

  1. The Home cook arrives on Recipe Details for a chosen classic, either from the collection or directly.
  2. They read the recipe's introduction to understand the dish and its French standard.
  3. They read the ingredient list with quantities in the cream ingredients panel.
  4. They begin the method, reading down the single-column measure on the right; each step is marked by a large tomato-red Fraunces numeral hanging in the left margin and connected by a thin walnut rule.
  5. As they scroll, the ingredients panel docks to the left column so quantities stay visible beside the step they are on.
  6. They work through the numbered steps in order to the end of the method.
  7. They read the facts and background block to understand the dish's origin, region, defining technique, and serving or storage note.
  8. Failure/recovery: if the recipe content failed to load, an explicit error message with a retry action and a link to Recipes appeared; retrying re-requested the recipe. If the facts block is unavailable for a recipe, the introduction, ingredients, and method still render in full and the block is omitted. At narrow viewports the ingredients appear in normal document order above the method, fully readable.
  9. Continuation: they activate the return-to-Recipes control or the top-bar "Recettes" pill to choose another dish (Flow B).
Page 19 of 28

Flow D — Application serves recipe content

  1. A visitor's page requests the collection or a single recipe.
  2. The shared FastAPI backend reads the corresponding records from MariaDB, including each recipe's facts and background notes.
  3. The backend returns the recipe data to the React frontend, which renders the numbered tiles or the full recipe with its facts and background block.
  4. Failure: if the request fails, the frontend renders the error state defined for that page with a retry action; the visitor's route back to Landing or Recipes remains available.
Page 20 of 28

6. Visuals Colors and Theme

The visual direction is warm mid-century modernism for the French table, after Charles & Ray Eames: honest materials, joyful colour inside order, gallery-like sequencing, and film-like pacing. The register is generous, humane, and quietly authoritative — a well-made kitchen, not a glossy food blog.

Colour tokens (light mode)

RoleHexUse
Background#F4EBDDCream ground, ~60% of every page
Surface#FBF6ECCards, ingredients panel, tile surfaces
Text#2A211BWalnut-ink for all reading
Primary#B4472FTomato red — the single action colour: CTAs, active nav, step numbers, ~10%
Accent#1F6F6BTeal — category tags and rule accents, ~10%
Muted#8A7A66Secondary text, captions
Supporting — mustard#D9A441Panels, half-circle motif, pattern strips
Supporting — walnut#6B4A2FHairlines, borders, recipe numbering

No gradients. No blue anywhere.

Typography

Page 21 of 28
  • Headings: Jost, 500–600 weight, tight tracking (−0.02em), sentence case, generous leading.
  • Body and recipe prose: Fraunces, 400 weight, optical size tuned, 18–20px with 1.7 line-height.
  • Labels, times, section eyebrows: Jost 600 small caps at 12px with 0.14em tracking.
  • Modular scale 1.333: 96 / 72 / 54 / 40 / 28 / 20 / 18 / 16 / 14. Hero display clamp(56px, 9vw, 128px); section titles clamp(36px, 5vw, 72px); recipe body 18px; labels 12px.
  • Forbidden families: Inter, Roboto, Arial, Helvetica, Poppins, system-ui.

Shape language. Organic-modern geometry: 12–20px radii on cards and panels, capsule tags, thin 1px walnut hairlines, occasional half-circle and quarter-round motifs borrowed from Eames house frames. Hard edges only on full-bleed image bands and rule dividers. No blobs, no glass, no neon.

Layout rhythm. Gallery-like sequence: full-bleed hero band, then alternating asymmetric two-column spreads, a modular recipe index on a visible 12-column grid with numbered tiles, and a single-column reading measure (max 68ch) on recipe detail pages. Section gaps of 96–128px. Sticky slim top bar: wordmark left, section links centre, red "Recettes" pill right.

Imagery. Warm, natural-light food and kitchen photography — enamelware, copper pans, linen, walnut boards, market produce in woven baskets — with a slightly desaturated film grade and cream highlights. Eames textile geometry appears as small decorative panels behind section titles. No glossy studio renders, no stock smiling people, no 3D blobs.

Readability constraint. Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit; no other element covers any part of them. Imagery and decoration may crop, bleed, rotate, or overlap freely.

Page 22 of 28

7. Signature Design Concept

The public entry is a full-bleed cream band composed on a 12-column grid. The wordmark AVEC MOI is set flush left in Jost 600 at clamp(56px, 9vw, 128px), spanning nine of twelve columns, with a small mustard half-circle motif sitting behind it. Beneath, in Fraunces at 24–28px, runs La cuisine française, faite chez vous. To the right, a tall 4:5 photograph of a copper saucepan and market vegetables, cropped with a 20px radius, overlaps the type block by one column and bleeds off the right edge. A single tomato-red capsule, "Explorer les recettes", is pinned beneath the subline. There is no centred stack, no gradient, and no blue button.

The gesture continues down the page: a 64px Eames textile pattern strip in mustard and teal on cream divides the hero from the collection preview, and the collection preview itself is a modular 12-column grid of numbered tiles — 01, 02, 03… in Jost small caps, each with a walnut hairline top rule and a teal category tag — reading like an Eames exhibition catalogue rather than a card wall. The same catalogue logic carries into the Recipes page, and the recipe detail page opens with a full-bleed image band and a floating cream ingredients panel that docks to the left column while the method reads on the right, its steps numbered by large tomato-red Fraunces numerals hanging in the left margin.

Page 23 of 28

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

  • Focal subject: the oversized flush-left AVEC MOI wordmark and the tall rounded copper-saucepan photograph overlapping it and bleeding off the right edge.
  • Input → transformation → outcome thesis: as the Landing page loads, the wordmark and subline fade in and rise 20px into place over 400–600ms ease-out; the photograph panel settles at 1.05 scale and holds; the mustard half-circle motif sits behind the wordmark as a static layer. The outcome is a composed, gallery-like first frame with the red "Explorer les recettes" capsule as the single action focus.
  • Motion vocabulary: slow 400–600ms ease-out fades and 20px upward reveals as sections enter; images pan at 1.05 scale over 8s on hover; step numbers count in with a 120ms stagger on recipe pages; Eames textile divider bands are static. No bounce, no spring, no marquees, no parallax excess.
  • Composed first frame: cream ground, wordmark flush left across nine columns, mustard half-circle behind it, Fraunces subline beneath, tall rounded photograph to the right overlapping one column and bleeding off the edge, red capsule CTA beneath the subline.
  • Reduced-motion state: with prefers-reduced-motion, all reveals and image pans are disabled and the page renders instantly in its final static arrangement; every readable element and control remains whole and fully visible at 375px, 768px, and 1280px.
Page 24 of 28

9. Non-Functional Requirements

  • Content accuracy (explicit). Every recipe must be accurate and must use real French standards and procedures. Recipe text is authored and stored as application data, not generated at request time.
  • Content depth (explicit). Every recipe must carry extensive textual content: an introduction, an ingredient list with quantities, and a complete ordered method. No recipe may be published as a stub.
  • Real facts and personality (explicit). Every published recipe must carry at least one real fact or interesting background note specific to that dish — origin and region, the standard technique or French term that defines it, a key-ingredient note, or a serving or storage note — so the site has personality. Facts are authored and stored as application data, never generated at request time.
  • Classics coverage (explicit). The published collection must include real French classics, at minimum ratatouille, coq au vin, and bordelaise sauce.
  • Public readability (required_inference). All three destinations are readable without an account; no authentication, session, or permission layer is introduced.
  • Readable measure (required_inference). Recipe prose is set to a maximum 68ch measure at 18–20px with 1.7 line-height for sustained reading.
  • Responsive integrity (explicit design constraint). Readable text and controls remain whole and inside the viewport and their container at 375px, 768px, and 1280px; imagery and decoration may crop or bleed.
  • Accessibility of motion (explicit design constraint). prefers-reduced-motion yields a usable static arrangement with no loss of content or controls.
  • Data integrity (required_inference). Recipe records are stored in MariaDB and served by the shared backend so that every visitor sees the same content; the frontend does not hold the only copy of any recipe text.
Page 25 of 28

10. Tech Stack

  • Frontend: React application UI, implementing the three destinations and the visual system in Section 6.
  • Backend: a single shared FastAPI process hosting the application APIs and domain modules for the recipe collection and individual recipes.
  • Database: MariaDB for application-owned persistent recipe data, including each recipe's introduction, ingredients, ordered method, and facts and background notes.
  • Infrastructure: the provisioned backend, database, and frontend services; no additional services are required for the accepted workflows.
Page 26 of 28

11. Assumptions and Constraints

  • Assumption: the recipe collection is authored and curated by the site owner and stored as application data; the site does not accept visitor-submitted recipes. (required_inference — no submission capability is accepted.)
  • Assumption: "real French standards and procedures" means each recipe's method reflects established French technique and terminology for that dish, written in full rather than summarized. (explicit constraint, interpreted for authoring.)
  • Assumption: "real facts and other interesting info" means verifiable, dish-specific background — origin and region, defining technique or French term, key-ingredient notes, serving or storage notes — authored by the site owner alongside the recipe, not generic filler or invented trivia. (explicit constraint, interpreted for authoring.)
  • Constraint: no accounts, sign-in, comments, ratings, shopping lists, meal planning, video, or commerce are part of the product. (required_inference from the accepted scope; no such capability is accepted.)
  • Constraint: the palette, typography, shape language, layout, motion, and imagery rules in Sections 6–8 are binding; blue, gradients, glassmorphism, neon, and the forbidden typefaces must not appear.
  • Constraint: the three destinations are Landing, Recipes, and Recipe Details, all publicly accessible; no additional pages are introduced.
Page 27 of 28

12. Glossary

  • AVEC MOI — the site's title and wordmark; a classic French recipe site.
  • Classic — a recognized traditional French dish, such as ratatouille, coq au vin, or bordelaise sauce.
  • Recipe Details — the page presenting one recipe's full textual content: introduction, ingredients with quantities, and ordered method.
  • Recipes — the page presenting the numbered index of the published collection.
  • Landing — the anonymous entry page introducing AVEC MOI and routing visitors into the collection.
  • Method — the ordered, numbered step-by-step procedure of a recipe.
  • Facts and background notes — the real, dish-specific information shown on a Recipe Details page (origin and region, defining technique or French term, key-ingredient notes, serving or storage notes) that gives the site personality.
  • French standard and procedure — the established technique and terminology a French recipe follows for its dish.
  • Eames textile divider — the 64px repeating mustard-and-teal pattern strip used between major page sections.
Page 28 of 28
Live
Landing design preview
Landing: Read site purpose
Landing: Explore recipes
Recipes: 1. Select a classic
Recipe Details: 2. Read introduction
Recipe Details: 3. Check ingredient quantities
Recipe Details: 4. Follow numbered method
Recipe Details: 5. Keep quantities in view
Recipe Details: 6. Read facts and background
Recipe Details: 7. Retry recipe load
Recipe Details: 8. Return to collection
Live
Landing design preview
Landing: Read site purpose
Landing: Explore recipes
Recipes: 1. Select a classic
Recipe Details: 2. Read introduction
Recipe Details: 3. Check ingredient quantities
Recipe Details: 4. Follow numbered method
Recipe Details: 5. Keep quantities in view
Recipe Details: 6. Read facts and background
Recipe Details: 7. Retry recipe load
Recipe Details: 8. Return to collection