This document specifies an additive WhatsApp notification layer for The Kitchen24 by FIT BISTRO, a neighbourhood restaurant whose existing live website (https://the-kitchen24-by-fit-bistro.ai.studio) already handles menu browsing, room booking, banquet booking, checkout, and an admin panel. The product intent is narrow and deliberate: when a customer places an order, the restaurant should automatically send that customer a WhatsApp confirmation through the WhatsApp Business Cloud API, and the restaurant operator should be able to move each order through Preparing → Ready → Delivered from the existing admin panel, with each status change automatically sending the matching WhatsApp message to the customer.
The audience is twofold: hungry customers who want a warm, human confirmation of their order on the phone number they entered at checkout, and the restaurant operator who wants a calm, legible status control that already looks like their restaurant rather than a SaaS dashboard. The overriding constraint is that nothing that already exists on the website may change — no design, layout, colours, text, menu, pages, room booking, banquet booking, or existing code styling. The work is invisible infrastructure plus a small, humane addition.
The current delivery is an additive integration on top of the existing live site. It introduces:
Actors. The closed active-human catalog is Customer and Admin / Restaurant Operator. The WhatsApp Business Cloud API is a typed non-persona external provider that owns message delivery.
Ownership. The Customer's ordering and checkout experience remains owned by the existing site and is not modified. The Customer's receipt of WhatsApp messages is owned by the WhatsApp Business Cloud API (external provider surface). The Admin / Restaurant Operator's status work is owned by the existing Admin Panel page. Identity continuity for the operator is owned by a Login page. The public entry is the existing Landing page, unchanged.
Narrow exclusions. No redesign, rebuild, rewrite, or refactor of any existing file. No change to checkout page design. No change to the admin panel's current look. No change to room booking, banquet booking, menus, colours, fonts, or layout. No new ordering, payment, or account-management capabilities.
The existing website is treated as a fixed, authoritative surface. All new behaviour lives in new code or new files wherever possible, and the only visible additions are (a) the automatic WhatsApp confirmation that fires after an order is saved, and (b) a small status control next to each order in the existing admin panel, plus the inline error line shown when a send fails.
Message delivery is owned by the WhatsApp Business Cloud API, invoked from a backend/server function. The API token is held in environment variables and never exposed to the frontend. Phone numbers are normalised to the +91 country code before sending.
The operator reaches the admin panel through a Login page (returning verification). The admin panel itself is role-restricted to the verified operator. The Customer does not log in to receive WhatsApp messages; the confirmation is sent to the phone number entered at checkout.
Current vs. future. Everything in this document is current. No future-horizon features are accepted. The file-touch approval gate ("tell me which files you will touch and wait for my approval") is a delivery-process constraint that applies before any change is made.
Not applicable. The reference directive for https://the-kitchen24-by-fit-bistro.ai.studio declares uses: ["domain_context", "feature_reference"] and does not declare content_source; the source could not be loaded (timeout) and no verified factual entities were extracted. No inventory is produced.
Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.
FR-1 — Automatic WhatsApp order confirmation. As a Customer, I should receive a WhatsApp message automatically after I place an order, so that I have a warm, human confirmation of what I ordered.
Thank you for your order at The Kitchen24 by FIT BISTRO. Order #ID: items, total ₹amount.FR-2 — Send only after the order is saved. As the system, I should invoke the WhatsApp send-message call only after the order has been saved, so that the confirmation always references a persisted order.
FR-3 — Checkout page design unchanged. As the Customer, I should see the checkout page exactly as it is today, so that nothing about my ordering experience changes.
FR-4 — WhatsApp status updates from the admin panel. As an Admin / Restaurant Operator, I should be able to set each order's status to Preparing, Ready, or Delivered from the existing admin panel, so that the customer is automatically told what is happening.
Your order #ID is being prepared.Your order #ID is ready.Your order #ID has been delivered. Enjoy your meal!FR-5 — Status control keeps the admin panel's current look. As an Admin / Restaurant Operator, I should see the new status control sitting naturally inside the existing admin panel, so that the panel still looks like my restaurant.
FR-6 — Backend-only Cloud API calls. As the system, I should send all WhatsApp messages through the WhatsApp Business Cloud API from a backend/server function, so that credentials and provider calls never touch the frontend.
FR-7 — API token in environment variables. As the system, I should read the WhatsApp Business Cloud API token from environment variables, so that the secret is never hard-coded or exposed.
FR-8 — Send failures surface in the admin panel without breaking the order flow. As an Admin / Restaurant Operator, I should see the exact send error beneath the affected order and be able to retry, so that I know a customer was not messaged and can recover.
FR-9 — +91 country code for phone numbers. As the system, I should normalise customer phone numbers to the +91 country code before sending, so that messages reach Indian numbers correctly.
FR-10 — File-touch approval gate. As the site owner, I should be told which files will be touched before any change is made, and my approval should be awaited, so that the strict no-change rule is honoured.
FR-11 — Operator verification before admin access. As an Admin / Restaurant Operator, I should verify my identity before reaching the admin panel, so that only the restaurant's operator can change order statuses and trigger customer messages.
FR-12 — Additive-only implementation. As the site owner, I should have all new behaviour delivered in new code or new files wherever possible, so that existing files are not rebuilt, rewritten, or refactored.
Thank you for your order at The Kitchen24 by FIT BISTRO. Order #ID: items, total ₹amount.Your order #ID is being prepared.Your order #ID is ready.Your order #ID has been delivered. Enjoy your meal!Your order #ID is being prepared.Your order #ID is ready.Your order #ID has been delivered. Enjoy your meal!The creative direction is Warm editorial calm for a restaurant's quiet WhatsApp layer, after the muse Frank Chimero. The headline idea: the new surfaces should read as restaurant hospitality — a note from the kitchen — while staying visually quiet enough to sit beside the existing site untouched. All new UI lives in new components and new files only; the existing site's colours, fonts, layout, menus, and checkout design are not changed.
Palette (light mode).
| Role | Hex | Usage |
|---|---|---|
| Background | #F7F1E6 | Cream ground, ~70% of surface |
| Surface | #FFFBF3 | Message cards, admin status cell |
| Text (ink) | #2A2622 | All body text |
| Primary | #8C4A2F | Buttons, focus rings, active status pill |
| Accent | #C8963E | Small rules, tags, WhatsApp sent tick |
| Muted | #7A7268 | Timestamps, secondary metadata |
| Hairline border | #E4DCCD | 1px warm-tint borders, dashed rules |
No blue anywhere. No WhatsApp-green brand imitation.
Typography.
clamp(28px, 4vw, 40px) for the largest heading and 16px body at 1.6 line-height.Shape language. Soft, honest rectangles: 10px radius on cards, 8px on controls; 1px hairline borders in #E4DCCD. No blobs, no glass, no shadows beyond a 0 1px 2px rgba(42,38,34,0.06) lift. Status pills are full-round capsules so they read as stamps, not buttons.
Layout. Single readable column at max-width 680px for confirmation/status copy. The admin status control docks to the right of each existing order row on a 12-column grid at ≥768px and stacks beneath the order summary at 375px. Generous 32px section padding; nothing sits closer than 16px to a neighbour.
Motion. Restrained: one 200ms fade-and-rise when the WhatsApp send result appears, and a 120ms colour transition on the status pill. No spinners beyond a single hairline progress line, no bounce, no marquees.
Imagery. No photography in scope. Illustration is limited to a small hand-drawn WhatsApp-style speech-bubble glyph and a 1px dashed rule that separates the message preview from the order summary, echoing Chimero's essay openers.
Readability. Headlines, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit. Decoration may be cropped or bled; readable text and controls never are.
The first screen of the new confirmation surface is a single warm cream card, 680px wide, centred on a #F7F1E6 ground:
Order #1042 confirmed.#E4DCCD running the full width of the card, separating "what the kitchen sees" from "what the customer receives".#C8963E) speech-bubble glyph pinned to its left margin.#8C4A2F) pill reading Sent to +91 ••••• 43210.No centred headline stack, no gradient, no illustration blob. The composition is a menu card, not a SaaS hero. The message is shown as a live preview card before it sends, with a rust Delivered tick that fades in over 200ms once the Cloud API returns 200.
In the admin panel, the status control is a three-segment capsule (Preparing / Ready / Delivered) built from the existing panel's row height, using rust for the active segment and warm cream for the inactive ones — it reads as a rubber stamp, not a dropdown. Send failures appear as a single 14px Karla line in rust beneath the order row, prefixed by a small hollow circle glyph, with the exact API error string truncated to one line and a Retry text link — never a modal, never a toast that hides the order. The admin order ID is set in Literata 600 tabular figures, slightly larger than surrounding metadata, so the number the customer will hear on WhatsApp is the loudest thing in the row.
Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: flat
Landing Hero Motion Brief. The public entry is the existing Landing page, which is unchanged; the "hero" of the new layer is the confirmation card described in Section 7. Its focal subject is the verbatim WhatsApp message body in Literata 18px with the mustard speech-bubble glyph in the left margin. The input→transformation→outcome thesis: the operator's status change (input) triggers the backend send (transformation), and the rust Delivered tick fades in over 200ms once the Cloud API returns 200 (outcome). Motion vocabulary: a single 200ms fade-and-rise when the send result appears, a 120ms colour transition on the status pill, and a single hairline progress line while a send is in flight. Composed first frame: the cream card at 680px on the #F7F1E6 ground, the Literata headline flush-left, the dashed hairline, the quoted message, and the rust "Sent to +91 ••••• 43210" pill — all static until a send result arrives. Reduced-motion state: the fade-and-rise and colour transition are removed; the send result appears instantly and the status pill changes colour without transition, while the hairline progress line remains as the only motion cue.
prefers-reduced-motion, the new surfaces provide a usable static arrangement. Provenance: creative direction.

No comments yet. Be the first!