System Requirements Document for icy-flower

1. Introduction

icy-flower is the delivery name for Bloom & Book — Flower Design and Scheduling System, a floral shop web product where customers create dream bouquets for special occasions, customize flower arrangements, explore available flowers, and schedule orders online with ease.

The product intent, derived from the authoritative requirement thread, is a celebratory, affectionate, slightly playful flower-gifting experience: a shopper arrives on a candy-gloss public entry surface, browses fresh blooms with Philippine-peso prices, designs a bouquet by choosing colors, sizes, and special details, schedules the order for a preferred date, and talks with the shop about the design. The shop side receives those scheduled orders and keeps the flower catalog and pricing current.

The audience is gift-givers and occasion-shoppers — mostly young, mostly mobile, buying on feeling rather than logic — together with the florist / shop owner who fulfills the scheduled bouquet orders and answers design questions.

2. System Overview

icy-flower is delivered as a first-party web application with a custom user interface and application-owned identity. The current delivery includes:

• A public Home entry surface with a hero (tagline, headline, body copy, two calls to action), a four-tile feature strip (Wide Selection, Custom Bouquets, Easy Scheduling, Personal Service), a Featured Flowers grid with names and\x20\xe2\x82\xb1 prices, a call-to-action block, and a footer.
• A Flowers catalog page listing available flowers and prices.
• A Customize page where a customer builds a bouquet design by choosing colors, sizes, and special details.
• An Orders page for viewing and scheduling flower orders.
• A Chat page for customer communication about bouquet designs.
• Sign Up and Login identity-access surfaces for customer self-service enrollment and returning verification.
• A Catalog Management surface where the florist maintains the available flower catalog and pricing.

Actors are the Customer and the Florist / Shop Owner. Backend persistence supports bouquet designs, scheduled orders, catalog data, prices, and chat continuity.

Narrow exclusions: no dark mode, no glassmorphism panels, no gradient-blob hero, no stock photography or photorealistic 3D renders for the hero subject, no cool-tone (blue/indigo/violet) palette substitution, and no replacement of the committed heading and body typefaces.

2a. Product Interpretation and Delivery Boundary

The product is delivered as a first-party application with its own custom interface and its own identity continuity. Customers begin with self-service enrollment and return through verification before their saved designs, scheduled orders, and chat threads are available to them. The florist is provisioned or invited into the shop side and returns through verification before protected shop operations — shop orders, catalog management, and florist chat responsibilities — are available.

Public browsing of the Home entry surface and the Flowers catalog is available without establishing identity. The Customize, Orders, and Chat surfaces and the Catalog Management surface are protected, and the identity-access surfaces (Sign Up, Login) are anonymously reachable so that access to protected destinations is never established from inside the protected destination itself.

Current scope covers the Home, Flowers, Customize, Orders, Chat, Sign Up, Login, and Catalog Management surfaces and the backend persistence that makes them work. No future-horizon capabilities are accepted in the current scope.

2b. Source Content Inventory

The reference directive images/flower-background.jpg is declared with uses: ["visual_inspiration"] and is explicitly noted as not supplied. It is not a content_source, so no Source Content Inventory is produced. The image is referenced as the page background under a soft rose wash for text readability.

2c. Page Content and Component Coverage

Home

• Information / state: Public entry surface. Uppercase rose tagline "FRESH FLOWERS · CUSTOM DESIGNS · SPECIAL MOMENTS"; hero headline "Welcome to Our" with "Flower Design and Scheduling System" on its own line in the serif-italic accent; hero body copy about creating a dream bouquet for every special occasion, customizing flower arrangements, exploring available flowers, and scheduling orders online with ease; four feature tiles (Wide Selection — "Beautiful flowers for every occasion."; Custom Bouquets — "Choose colors, sizes, and special details."; Easy Scheduling — "Choose your preferred order date."; Personal Service — "Make every special moment memorable."); Featured Flowers section title "\xe2\x9c\xbf Featured Flowers\x20\xe2\x9c\xbf" with subtitle "Fresh blooms, beautiful moments."; four featured flower cards with names and\x20\xe2\x82\xb1 prices (Red Roses\x20\xe2\x82\xb1650.00, Pink Tulips\x20\xe2\x82\xb1500.00, Sunflowers\x20\xe2\x82\xb1480.00, Mixed Bouquet\x20\xe2\x82\xb1600.00); call-to-action block "Make Someone's Day Special\x20\xf0\x9f\x8c\xb8" with supporting copy and a "Create Your Bouquet →" action; footer with "© 2026 Bloom & Book | Flower Design and Scheduling System" and "Made with\x20\xf0\x9f\x92\x97 for every special occasion."
• Primary actions: "\xe2\x9c\xbf Shop Flowers →" (primary) and "\xf0\x9f\x8e\xa8 Create a Design" (secondary) in the hero; "Customize" on each featured flower card; "Create Your Bouquet →" in the call-to-action block; navigation links to Home, Flowers, Customize, Orders, and Chat.
• Supporting actions: Sticky glass navbar with logo and subtitle; hover lift on nav links, buttons, feature tiles, and product cards.
• Domain entities: Featured flower (name, price in\x20\xe2\x82\xb1, emoji imagery, Customize link); feature highlight (icon, title, description); navigation destination.

• Component responsibilities: Sticky navbar (logo block, nav links, nav button); hero (text stack, two capsule buttons, flower-art composition with glossy flower-orb, two tilted elliptical orbits, three floating flower emoji, blurred radial pink glow); features strip (four neumorphic icon tiles); products grid (four product cards with emoji image tile, name, price, Customize link); CTA block; footer; fixed falling-petal field.
• States: Loading — page shell with navbar, hero text, and section skeletons while featured flower data resolves. Empty — if no featured flowers are available, the Featured Flowers section shows a soft "Fresh blooms arriving soon" placeholder while the hero, features, and CTA remain fully usable. Success — hero, features, featured flowers with\x20\xe2\x82\xb1 prices, CTA, and footer all render. Error — if featured flower data fails, the Featured Flowers section shows a retry affordance and the rest of the page remains usable. Recovery — retry reloads featured flowers without a full page reload.

Login

• Information / state: Anonymous identity-access surface for returning verification. Fields for the returning user's credentials; a link to Sign Up for users who have not yet enrolled; a note that florist access may also be established through invitation or provisioning.
• Primary actions: Submit returning credentials to verify identity and continue to the intended protected destination.
• Supporting actions: Navigate to Sign Up; return to Home.
• Domain entities: Returning identity (customer or florist); intended protected destination.
• Component responsibilities: Credential form; submit control; Sign Up link; error region.
• States: Loading — submit control shows a pending state while verification runs. Empty — form fields empty with inline guidance. Success — identity verified and the user continues to the intended protected destination (Customize, Orders, Chat, or Catalog Management). Error — invalid credentials show an inline message and the form remains editable. Recovery — the user can correct credentials and resubmit, or navigate to Sign Up.

Sign Up

• Information / state: Anonymous identity-access surface for customer self-service enrollment. Fields for the new customer's enrollment details; a link to Login for users who already have an identity.
• Primary actions: Submit enrollment to establish a customer identity and continue into the customer lifecycle.
• Supporting actions: Navigate to Login; return to Home.
• Domain entities: New customer identity.
• Component responsibilities: Enrollment form; submit control; Login link; error region.
• States: Loading — submit control shows a pending state while enrollment runs. Empty — form fields empty with inline guidance. Success — customer identity established and the customer continues to the intended customer destination. Error — enrollment failure (for example, an already-enrolled identity) shows an inline message and the form remains editable. Recovery — the customer can correct the details and resubmit, or navigate to Login.

Flowers

• Information / state: Public catalog surface listing available flowers with names and\x20\xe2\x82\xb1 prices, presented in the same glossy card language as the Home featured grid.
• Primary actions: Open a flower's Customize entry to begin a bouquet design from that flower.
• Supporting actions: Navigate to Home, Customize, Orders, and Chat; hover lift on cards.
• Domain entities: Available flower (name, price in\x20\xe2\x82\xb1, emoji imagery); catalog listing.
• Component responsibilities: Catalog grid of flower cards; section title and subtitle; navigation.
• States: Loading — catalog grid skeleton while flower data resolves. Empty — a soft "Fresh blooms arriving soon" placeholder when the catalog has no available flowers. Success — all available flowers render with names and\x20\xe2\x82\xb1 prices. Error — a retry affordance replaces the grid when catalog data fails. Recovery — retry reloads the catalog without a full page reload.

Customize

• Information / state: Protected customer surface for creating a bouquet design. Controls for choosing colors, sizes, and special details; a live design summary; the selected flower context when the customer arrived from a featured flower or catalog card.
• Primary actions: Choose colors; choose a size; add special details; save the bouquet design; continue to schedule the order.
• Supporting actions: Return to Flowers to change the starting flower; navigate to Orders and Chat.
• Domain entities: Bouquet design (colors, size, special details, starting flower); saved design.
• Component responsibilities: Color chooser; size chooser; special-details input; live design summary; save control; continue-to-schedule control.
• States: Loading — design controls and summary skeleton while any referenced flower data resolves. Empty — a fresh design with no colors, size, or special details chosen yet, with inline guidance. Success — the design is saved and the customer can continue to schedule the order. Error — a save failure shows an inline message and preserves the customer's in-progress choices. Recovery — the customer can retry the save without losing the design.

Orders

• Information / state: Protected surface for viewing and scheduling flower orders. For the customer: their own orders with scheduled dates and the bouquet designs attached to them. For the florist: the shop's incoming orders with scheduled dates and the designs to fulfill.
• Primary actions: Customer — schedule an order for a preferred date from a saved bouquet design; view personal orders. Florist — view shop orders and their scheduled dates.
• Supporting actions: Navigate to Customize to revise a design; navigate to Chat about an order; navigate to Home and Flowers.
• Domain entities: Order (bouquet design, scheduled date, status); scheduled date.
• Component responsibilities: Order list; schedule control with preferred-date selection; order detail with attached design; navigation.
• States: Loading — order list skeleton while order data resolves. Empty — customer sees a soft "No orders yet — create a bouquet to schedule one" placeholder with a link to Customize; florist sees a soft "No shop orders yet" placeholder. Success — orders render with their scheduled dates and attached designs. Error — a retry affordance replaces the list when order data fails. Recovery — retry reloads orders without a full page reload.

Chat

• Information / state: Protected surface for customer communication about bouquet designs. For the customer: their design conversation with the shop. For the florist: the customer design conversations they answer.
• Primary actions: Customer — send a message about a bouquet design. Florist — read and answer customer design questions.
• Supporting actions: Navigate to Customize, Orders, Home, and Flowers.
• Domain entities: Chat thread; message; referenced bouquet design.
• Component responsibilities: Thread view; message composer; send control; navigation.
• States: Loading — thread skeleton while chat continuity resolves. Empty — a soft "Start the conversation about your design" placeholder for a new thread. Success — messages render in order and new messages appear in the thread. Error — a send failure shows an inline message and preserves the composed text. Recovery — the customer or florist can resend without retyping.

Catalog Management

• Information / state: Protected florist surface for maintaining the available flower catalog and pricing that customers browse. Lists current catalog entries with their names and\x20\xe2\x82\xb1 prices.
• Primary actions: Add a catalog entry; update an entry's name and\x20\xe2\x82\xb1 price; remove an entry.
• Supporting actions: Navigate to Orders, Chat, Home, and Flowers.
• Domain entities: Catalog entry (name, price in\x20\xe2\x82\xb1, imagery).
• Component responsibilities: Catalog list; entry editor; add control; remove control; navigation.
• States: Loading — catalog list skeleton while catalog data resolves. Empty — a soft "No catalog entries yet — add your first flower" placeholder with an add control. Success — catalog entries render with names and\x20\xe2\x82\xb1 prices and changes are reflected for customers. Error — a save or remove failure shows an inline message and preserves the florist's in-progress edit. Recovery — the florist can retry the save or removal without losing the edit.

3. Functional Requirements

FR-1 — Public entry surface. As a Customer or Florist / Shop Owner, I should land on the Home entry surface and see the hero tagline, headline, body copy, two calls to action, the four feature highlights (Wide Selection, Custom Bouquets, Easy Scheduling, Personal Service), the Featured Flowers grid with names and\x20\xe2\x82\xb1 prices, the call-to-action block, and the footer, so that I understand the shop and can choose where to go next. Provenance: explicit. Lifecycle: initiator — visitor; trigger — opening the site; observable result — the full Home composition renders; failure/recovery — if featured flower data fails, the Featured Flowers section shows a retry affordance while the rest of the page remains usable; continuation — the visitor follows a hero button, a featured flower's Customize link, or a navigation link.

FR-2 — Featured flowers with prices. As a Customer, I should see Red Roses at\x20\xe2\x82\xb1650.00, Pink Tulips at\x20\xe2\x82\xb1500.00, Sunflowers at\x20\xe2\x82\xb1480.00, and Mixed Bouquet at\x20\xe2\x82\xb1600.00 in the Featured Flowers grid, each with a Customize link, so that I can start a design from a flower I like. Provenance: explicit. Lifecycle: initiator — Customer; trigger — viewing the Featured Flowers grid; observable result — each featured flower shows its name,\x20\xe2\x82\xb1 price, and Customize link; failure/recovery — a failed featured-flower load shows a retry affordance; continuation — the Customer opens Customize from a featured flower.

FR-3 — Flower catalog browsing. As a Customer, I should browse the Flowers page listing available flowers with their names and\x20\xe2\x82\xb1 prices, so that I can explore what the shop offers before designing. Provenance: explicit. Lifecycle: initiator — Customer; trigger — opening Flowers; observable result — the catalog renders with names and\x20\xe2\x82\xb1 prices; failure/recovery — a failed catalog load shows a retry affordance; continuation — the Customer opens Customize from a catalog entry.

FR-4 — Bouquet design customization. As a Customer, I should create a bouquet design on the Customize page by choosing colors, sizes, and special details, so that the arrangement expresses my feelings for the occasion. Provenance: explicit. Lifecycle: initiator — Customer; trigger — opening Customize (directly or from a featured flower or catalog entry); observable result — the chosen colors, size, and special details are reflected in the live design summary; failure/recovery — a save failure shows an inline message and preserves the in-progress choices; continuation — the Customer saves the design and continues to schedule the order.

FR-5 — Saving a bouquet design. As a Customer, I should save my bouquet design so that it persists and can be attached to a scheduled order. Provenance: required_inference. Lifecycle: initiator — Customer; trigger — saving the design on Customize; observable result — the design is persisted and available for scheduling; failure/recovery — a save failure shows an inline message and the Customer can retry without losing the design; continuation — the Customer continues to Orders to schedule.

FR-6 — Scheduling an order. As a Customer, I should schedule a flower order for a preferred date from a saved bouquet design, so that the bouquet arrives for the special occasion. Provenance: explicit. Lifecycle: initiator — Customer; trigger — choosing a preferred date and confirming the schedule on Orders; observable result — the order appears in the Customer's orders with its scheduled date and attached design; failure/recovery — a scheduling failure shows an inline message and preserves the selected date and design; continuation — the Customer can view the order, revise the design on Customize, or open Chat.

FR-7 — Viewing personal orders. As a Customer, I should view my own orders with their scheduled dates and attached bouquet designs, so that I can track what I have scheduled. Provenance: explicit. Lifecycle: initiator — Customer; trigger — opening Orders; observable result — the Customer's orders render with scheduled dates and attached designs; failure/recovery — a failed order load shows a retry affordance; continuation — the Customer revises a design on Customize or opens Chat about an order.

FR-8 — Florist order visibility. As a Florist / Shop Owner, I should view the shop's incoming orders with their scheduled dates and attached bouquet designs, so that I can fulfill scheduled bouquet orders. Provenance: required_inference. Lifecycle: initiator — Florist / Shop Owner; trigger — opening Orders; observable result — the shop's orders render with scheduled dates and attached designs; failure/recovery — a failed order load shows a retry affordance; continuation — the Florist answers design questions in Chat or updates the catalog in Catalog Management.

FR-9 — Customer design chat. As a Customer, I should send messages about my bouquet design on the Chat page, so that I can communicate my design intent to the shop. Provenance: explicit. Lifecycle: initiator — Customer; trigger — composing and sending a message on Chat; observable result — the message appears in the design conversation; failure/recovery — a send failure shows an inline message and preserves the composed text for resend; continuation — the Customer continues the conversation or returns to Customize or Orders.

FR-10 — Florist design chat response. As a Florist / Shop Owner, I should read and answer customer design questions on the Chat page, so that customers get the design communication they need. Provenance: required_inference. Lifecycle: initiator — Florist / Shop Owner; trigger — opening Chat and reading a customer design question; observable result — the Florist's answer appears in the customer's design conversation; failure/recovery — a send failure shows an inline message and preserves the composed text for resend; continuation — the Florist returns to Orders or Catalog Management.

FR-11 — Customer self-service enrollment. As a Customer, I should enroll myself on the Sign Up page before saving designs, scheduling orders, viewing personal orders, or continuing chat, so that my work is bound to me and can be resumed. Provenance: required_inference. Lifecycle: initiator — Customer; trigger — choosing to enroll from Sign Up; observable result — a customer identity is established and the Customer continues into the customer lifecycle; failure/recovery — an enrollment failure shows an inline message and the form remains editable; continuation — the Customer continues to the intended customer destination.

FR-12 — Returning verification. As a Customer or Florist / Shop Owner, I should verify my returning identity on the Login page before accessing saved customer work and orders or protected shop operations, so that my saved designs, orders, and shop responsibilities remain bound to me. Provenance: required_inference. Lifecycle: initiator — Customer or Florist / Shop Owner; trigger — submitting returning credentials on Login; observable result — identity is verified and the user continues to the intended protected destination; failure/recovery — invalid credentials show an inline message and the form remains editable; continuation — the user corrects credentials and resubmits, or navigates to Sign Up.

FR-13 — Florist invitation or provisioning. As a Florist / Shop Owner, I should be invited or provisioned into the shop side before accessing shop orders, catalog management, and florist chat responsibilities, so that protected shop operations remain with the shop operator. Provenance: required_inference. Lifecycle: initiator — Florist / Shop Owner; trigger — accepting an invitation or provisioning; observable result — florist access is established; failure/recovery — an invalid or expired invitation shows an inline message; continuation — the Florist verifies on Login and continues to protected shop operations.

FR-14 — Catalog and pricing maintenance. As a Florist / Shop Owner, I should maintain the available flower catalog and pricing on Catalog Management, so that the flowers and\x20\xe2\x82\xb1 prices customers browse stay current. Provenance: required_inference. Lifecycle: initiator — Florist / Shop Owner; trigger — adding, updating, or removing a catalog entry; observable result — the catalog entry and its\x20\xe2\x82\xb1 price are saved and reflected for customers; failure/recovery — a save or remove failure shows an inline message and preserves the in-progress edit; continuation — the Florist continues managing the catalog or returns to Orders.

FR-15 — Backend persistence. As the system, I should persist bouquet designs, scheduled orders, catalog data, prices, and chat continuity, so that customer and florist work survives across sessions. Provenance: required_inference. Lifecycle: initiator — system; trigger — any save, schedule, catalog change, or chat message; observable result — the data is stored and available on return; failure/recovery — a persistence failure surfaces an inline error at the originating surface; continuation — the actor retries the originating action.

FR-16 — Improved 3D CSS delivery. As a Customer or Florist / Shop Owner, I should experience the delivered CSS with deeper 3D depth (perspective, preserve-3d, translateZ layering), defined :root variables, background-image handling with images/flower-background.jpg, the missing @keyframes, and responsive breakpoints, so that the interface reads as the committed candy-gloss 3D surface at every viewport. Provenance: explicit. Lifecycle: initiator — visitor; trigger — loading any surface; observable result — the 3D depth, background image, keyframe motion, and responsive breakpoints render; failure/recovery — under prefers-reduced-motion, all keyframe animations stop, petals are hidden, and hover transforms are replaced with a simple shadow change; continuation — the visitor uses the page normally.

4. User Personas

Customer

Product context. The Customer is a gift-giver or occasion-shopper who arrives on the Home entry surface, usually on a mobile device, buying on feeling rather than logic. They are drawn in by the celebratory, affectionate tone of the hero and the featured blooms, and they want to turn a feeling into a bouquet.

Primary goal. A placed, scheduled flower order for a special occasion — a bouquet that expresses their feelings and arrives on the date that matters.

Distinct accepted responsibilities. The Customer browses the Flowers catalog and the Featured Flowers grid with its\x20\xe2\x82\xb1 prices; opens Customize from a featured flower or catalog entry; chooses colors, sizes, and special details to build a bouquet design; saves that design; schedules an order for a preferred date on Orders; views their own orders with scheduled dates and attached designs; and communicates about the design with the shop on Chat.

Relevant inputs or decisions. Which flower to start from; which colors, size, and special details to choose; which preferred date to schedule; whether to revise a design after scheduling; what to say to the shop about the design.

Interactions with other accepted participants. The Customer's design questions are answered by the Florist / Shop Owner on Chat, and the Customer's scheduled order is fulfilled by the Florist / Shop Owner. The Customer's saved designs and orders are bound to their own identity so they can be resumed.

Observable success. The Customer's order appears in their Orders list with its scheduled date and attached bouquet design, and their design conversation with the shop is available on Chat.

Source-backed constraints. Prices are displayed in Philippine pesos (\xe2\x82\xb1). The Customer must enroll before saving designs, scheduling orders, viewing personal orders, or continuing chat, and must verify on return.

Florist / Shop Owner

Product context. The Florist / Shop Owner is the shop operator behind Bloom & Book. They are provisioned or invited into the shop side rather than self-enrolling, and they work from the shop's incoming orders and the customer design conversations.

Primary goal. Fulfilling scheduled bouquet orders and keeping the flower catalog and pricing current.

Distinct accepted responsibilities. The Florist views the shop's incoming orders with their scheduled dates and attached bouquet designs; reads and answers customer design questions on Chat; and maintains the available flower catalog and\x20\xe2\x82\xb1 pricing on Catalog Management so that what customers browse stays current.

Relevant inputs or decisions. Which scheduled orders to fulfill and in what order; how to answer a customer's design question; which catalog entries to add, update, or remove and at what\x20\xe2\x82\xb1 price.

Interactions with other accepted participants. The Florist answers the Customer's design questions on Chat and fulfills the Customer's scheduled orders. The Florist's catalog and pricing changes are what the Customer browses on Flowers and Home.

Observable success. The shop's orders render with their scheduled dates and attached designs, customer design questions receive answers, and catalog changes with their\x20\xe2\x82\xb1 prices are reflected for customers.

Source-backed constraints. Prices are displayed in Philippine pesos (\xe2\x82\xb1). Florist access is established through invitation or provisioning and returning verification before protected shop operations.

5. Core User Flows

Flow 1 — Customer discovers the shop and browses flowers

1. The Customer opens the site and lands on Home without establishing identity.
2. The Customer reads the hero tagline, headline, body copy, and the four feature highlights (Wide Selection, Custom Bouquets, Easy Scheduling, Personal Service).
3. The Customer scrolls to the Featured Flowers grid and sees Red Roses\x20\xe2\x82\xb1650.00, Pink Tulips\x20\xe2\x82\xb1500.00, Sunflowers\x20\xe2\x82\xb1480.00, and Mixed Bouquet\x20\xe2\x82\xb1600.00, each with a Customize link.
4. The Customer selects "\xe2\x9c\xbf Shop Flowers →" or the Flowers navigation link and lands on Flowers, which lists available flowers with their names and\x20\xe2\x82\xb1 prices.
5. If the catalog has no available flowers, the Customer sees a soft "Fresh blooms arriving soon" placeholder; if the catalog fails to load, a retry affordance appears and the Customer retries without a full page reload.
6. Next step: the Customer opens Customize from a featured flower or catalog entry, or selects "\xf0\x9f\x8e\xa8 Create a Design" from the hero.

Flow 2 — Customer enrolls and designs a bouquet

1. The Customer selects "\xf0\x9f\x8e\xa8 Create a Design" from the Home hero or a Customize link from a featured flower or catalog entry, and is directed to establish identity because Customize is protected.
2. The Customer lands on Sign Up and submits their enrollment details.
3. If enrollment fails (for example, the identity is already enrolled), an inline message appears and the form remains editable; the Customer corrects the details and resubmits, or navigates to Login.
4. On success, the Customer's identity is established and they continue to Customize.
5. On Customize, the Customer chooses colors, chooses a size, and adds special details, watching the live design summary reflect each choice.
6. The Customer saves the bouquet design. If the save fails, an inline message appears and the in-progress choices are preserved; the Customer retries without losing the design.
7. Next step: the Customer continues to Orders to schedule the order.

Flow 3 — Customer schedules an order for a preferred date

1. The Customer arrives on Orders with a saved bouquet design.
2. The Customer selects a preferred date for the order and confirms the schedule.
3. If scheduling fails, an inline message appears and the selected date and design are preserved; the Customer retries.
4. On success, the order appears in the Customer's orders with its scheduled date and attached bouquet design.
5. The Customer can revise the design on Customize and return, or open Chat about the order.
6. Next step: the Florist / Shop Owner sees the scheduled order on their Orders view.

Flow 4 — Customer communicates about a design

1. The Customer opens Chat and sees their design conversation with the shop.
2. If the thread is new, the Customer sees a soft "Start the conversation about your design" placeholder.
3. The Customer composes a message about the bouquet design and sends it.
4. If the send fails, an inline message appears and the composed text is preserved; the Customer resends without retyping.
5. On success, the message appears in the design conversation.
6. Next step: the Florist / Shop Owner reads and answers the question, and the Customer sees the answer in the same thread.

Flow 5 — Customer returns and resumes saved work

1. The Customer returns to the site and opens Login.
2. The Customer submits their returning credentials.
3. If the credentials are invalid, an inline message appears and the form remains editable; the Customer corrects them and resubmits, or navigates to Sign Up.
4. On success, the Customer continues to the intended protected destination — Customize, Orders, or Chat.
5. The Customer sees their saved bouquet designs, their orders with scheduled dates and attached designs, and their design conversation.
6. Next step: the Customer revises a design, schedules another order, or continues the conversation.

Flow 6 — Florist is provisioned and verifies

1. The Florist / Shop Owner accepts an invitation or is provisioned into the shop side.
2. If the invitation or provisioning is invalid or expired, an inline message appears.
3. The Florist opens Login and submits their returning credentials.
4. If the credentials are invalid, an inline message appears and the form remains editable; the Florist corrects them and resubmits.
5. On success, the Florist continues to protected shop operations — Orders, Catalog Management, or Chat.
6. Next step: the Florist reviews the shop's incoming orders.

Flow 7 — Florist fulfills scheduled orders

1. The Florist / Shop Owner opens Orders and sees the shop's incoming orders with their scheduled dates and attached bouquet designs.
2. If there are no shop orders yet, a soft "No shop orders yet" placeholder appears; if the order load fails, a retry affordance appears and the Florist retries without a full page reload.
3. The Florist reviews each order's scheduled date and attached design to plan fulfillment.
4. If a design question arises, the Florist opens Chat and answers the customer's question; if the send fails, an inline message appears and the composed text is preserved for resend.
5. Next step: the Florist returns to Orders or updates the catalog on Catalog Management.

Flow 8 — Florist maintains the catalog and pricing

1. The Florist / Shop Owner opens Catalog Management and sees the current catalog entries with their names and\x20\xe2\x82\xb1 prices.
2. If there are no catalog entries yet, a soft "No catalog entries yet — add your first flower" placeholder appears with an add control.
3. The Florist adds a catalog entry, or updates an entry's name and\x20\xe2\x82\xb1 price, or removes an entry.
4. If a save or remove fails, an inline message appears and the in-progress edit is preserved; the Florist retries without losing the edit.
5. On success, the catalog entry and its\x20\xe2\x82\xb1 price are saved and reflected for customers browsing Flowers and Home.
6. Next step: the Florist returns to Orders or continues managing the catalog.

6. Visuals Colors and Theme

The creative direction is authoritative for this section: Sensual pop minimalism after Karim Rashid — glossy pink blobs, petals in orbit, candy-3D softness. The muse is Karim Rashid; the headline register is celebratory, affectionate, and slightly playful — the interface should feel like a gift already unwrapped.

Colour tokens (light mode).

Proportion: 60% rose-cream ground, 25% white gloss surfaces, 12% rose/deep-rose, 3% lime or orange accent.

Typography. Headings: Quicksand 700 — a rounded geometric sans with soft terminals matching the blob/capsule shape language. Body: Varela Round. The hero h1 span stays on its own line in Georgia italic at the same size, coloured #D81B60 with the double drop-shadow #F4A9C6 then #F9D6E4 — the single warm-human gesture inside an otherwise rounded-geometric page.

Type scale (1.333 modular). 65 / 43 / 24 / 18 / 16 / 14 / 13. Hero h1 clamp(36px, 4.5vw, 65px), line-height 1.08, tracking -0.01em. Section title clamp(30px, 4vw, 43px). Card h3 18px. Feature h3 16px. Nav links and body 14px. Feature body 13px. Tagline 13px at 800 weight, letter-spacing 2px, uppercase.

Radius and shape language. Organic and glossy: blob and capsule silhouettes, no sharp corners anywhere. The hero flower-orb uses the committed irregular 48% 52% 50% 50% radius inside two tilted elliptical orbits. Buttons are capsules — 999px for the nav button, 15px for hero buttons, 12px for product links — every radius treated as a soft curve, never a right angle. Cards use 22px radius with a hard offset drop-shadow (8px 10px 0 #F2CCDC) that reads as a physical glossy block. Section boundaries are curved: the features strip and CTA block get a soft 28px radius or a curved top edge rather than a straight rule. Feature icons are 62px rounded-square tiles with a white-to-#FFC8DD gradient and a neumorphic double shadow (5px 5px 12px #D98AA633, -4px -4px 10px white).

Spacing rhythm. Navbar 18px 7%; hero 70px 8% with 40px gap; features 45px 7% with 20px gap; products 65px 7% with 24px gap; CTA 45px 25px with 20px 7% 65px margins; footer 28px 15px.

Imagery style. The hero subject is the emoji bouquet\x20\xf0\x9f\x92\x90 at clamp(130px, 20vw, 210px) inside the glossy flower-orb — a deliberately toy-like, low-fi 3D object, not a photograph. Around it: two thin tilted elliptical orbits (#E91E6355 and #FF7EAF66) and three small floating flower emoji (\xf0\x9f\x8c\xb7\x20\xf0\x9f\x8c\xb8\x20\xf0\x9f\x8c\xbc) at 35px. Product imagery uses the flower emoji at 100px on a radial-gradient(circle, #FFF, #FFDBE8) tile. images/flower-background.jpg sits under the 0.82 rose wash as a fixed, full-cover texture reading as blush atmosphere, never as a competing subject. Feature icons are emoji (\xf0\x9f\x92\x90\x20\xf0\x9f\x8e\xa8\x20\xf0\x9f\x93\x85\x20\xf0\x9f\x92\x97) in glossy neumorphic tiles. No stock photography, no gradient-blob hero, no grid of identical hover-lift cards.

7. Signature Design Concept

The public entry is a candy-gloss bouquet in orbit: a 2-column hero on the rose-washed images/flower-background.jpg. On the left, the text stack — uppercase rose tagline, then a 36→65px Quicksand 700 headline "Welcome to Our" with "Flower Design and Scheduling System" on its own line in Georgia italic #D81B60 carrying the stacked double pink drop-shadow, then body copy in Varela Round #755766 at max-width 490px, then two capsule buttons (primary: white on #FF5D9A→#D4145A gradient with a 7px #A50F49 offset shadow; secondary: #C2185B on white with a #F5B4CE border).

On the right, the hero-art: a 360px glossy flower-orb (irregular 48/52/50/50 radius, radial-gradient white→#FFC4DB→#F56EAA→#C2185B, 10px white border, inner and outer pink shadows) floating on a 5s loop, with a 210px\x20\xf0\x9f\x92\x90 at translateZ(65px) rotate(-8deg), two tilted elliptical orbits crossing behind it, and three small flower emoji drifting at staggered delays. A 420px blurred radial pink glow (#FFB4D0) sits behind the orb at right. The whole composition is candy-gloss, not SaaS — no centred headline, no blue button, no gradient blob.

The signature moves that carry the concept across every surface: the glossy irregular-radius flower-orb with its toy-like 3D bouquet; the stacked double drop-shadow on the hero h1 span; hard offset shadows instead of soft blur on every card and button (8px 10px 0 #F2CCDC on product cards, 7px 0 #A50F49 on primary buttons, 5px 0 #880E4F on the nav button); neumorphic feature-icon tiles; and the falling petal field — four fixed-position flower emoji (🌸\x20\xf0\x9f\x8c\xb7\x20\xf0\x9f\x8c\xba\x20\xf0\x9f\x8c\xb8) at #ED4D8B opacity 0.35 drifting from top:-40px down the viewport on a 12s linear loop behind all content.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: dimensional_css

Landing Hero Motion Brief. Focal subject: the emoji bouquet\x20\xf0\x9f\x92\x90 at clamp(130px, 20vw, 210px) inside the glossy flower-orb, with two tilted elliptical orbits and three small floating flower emoji around it. Input→transformation→outcome thesis: as the page loads, the hero text stack slides in and the flower-orb settles into its float, so the visitor's first frame resolves from a soft blush ground into a lifted, glossy bouquet in orbit — the gift already unwrapped. Motion vocabulary: the flower-orb floats on a 5s ease-in-out loop (float3d); the bouquet inside rotates -8deg and blooms on a 4s alternating loop (bloom); the three floating flowers drift on staggered 4s loops (floatPetal, delays 0/1/2s); petals fall on a 12s linear loop; hover on buttons lifts -5px and scales 1.03; hover on product cards rotates rotateY(-7deg) rotateX(5deg) translateY(-10px) with the offset shadow growing from 8px 10px to 12px 18px. All motion is soft-eased, never snappy. Composed first frame: the rose-washed background, the text stack at rest, and the flower-orb centred in the right column with its orbits crossing behind it and the blurred radial pink glow at right. Reduced-motion state: all keyframe animations stop, the petals are hidden, and hover transforms are replaced with a simple shadow change so the page is fully usable and static.

9. Non-Functional Requirements

NFR-1 — Currency display. Prices are displayed in Philippine pesos (\xe2\x82\xb1). Provenance: explicit. Rationale: hard constraint in the authoritative user evidence.

NFR-2 — Background image handling. The page background is referenced as images/flower-background.jpg with a soft overlay for text readability — specifically the rgba(255,247,250,0.82) wash over the image, background-size: cover, background-position: center, background-repeat: no-repeat, and background-attachment: fixed. Provenance: explicit. Rationale: hard constraint in the authoritative user evidence.

NFR-3 — 3D CSS depth. The delivered CSS provides deeper 3D depth through perspective, transform-style: preserve-3d, and translateZ layering, with defined :root variables, the missing @keyframes, and responsive breakpoints. Provenance: explicit. Rationale: the user requested the CSS be improved into 3D with background images.

NFR-4 — Responsive breakpoints. At 768px the hero collapses to a single column with the flower-orb centred above the text, features and product grid go to 2 columns, and the nav wraps. At 375px everything is single-column, the flower-orb uses width: min(360px, 85vw), the hero h1 sits at its 36px floor, and the nav links wrap into two rows with the links still fully visible and tappable. Provenance: explicit. Rationale: the user requested responsive breakpoints as part of the improved CSS.

NFR-5 — Readable text and controls stay whole. Every headline, wordmark, label, number, card's text and control stays entirely inside the viewport and its container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. Provenance: explicit. Rationale: the creative direction's readability rule.

NFR-6 — Reduced motion. Under prefers-reduced-motion, all keyframe animations stop, the petals are hidden, and hover transforms are replaced with a simple shadow change so the page is fully usable and static. Provenance: explicit. Rationale: the creative direction's motion rule.

NFR-7 — Persistence. Backend persistence supports bouquet designs, scheduled orders, catalog data, prices, and chat continuity so that customer and florist work survives across sessions. Provenance: required_inference. Rationale: required to make the accepted current journeys executable.

10. Tech Stack

• Frontend: React with the committed custom CSS (3D depth via perspective, transform-style: preserve-3d, translateZ; :root variables; @keyframes; responsive breakpoints). [Default — not specified by user]
• Backend: Python / FastAPI serving the catalog, bouquet designs, scheduled orders, and chat continuity. [Default — not specified by user]
• Storage: A relational database for catalog entries, bouquet designs, orders with scheduled dates, identities, and chat threads. [Default — not specified by user]
• Containerization: Docker and docker-compose for the frontend and backend services. [Default — not specified by user]
• Kubernetes: Not required for the current deployment. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions.

• The customer self-service enrollment and returning verification are required before saving designs, scheduling orders, viewing personal orders, or continuing chat. [required_inference]
• Florist access is established through invitation or provisioning and returning verification before protected shop operations. [required_inference]
• Backend persistence is required for bouquet designs, scheduled orders, catalog data, prices, and chat continuity. [required_inference]
• The images/flower-background.jpg asset is referenced as the page background image and is not supplied with the requirement thread. [explicit]

Constraints.

• Prices are displayed in Philippine pesos (\xe2\x82\xb1). [explicit]
• The background image is referenced as images/flower-background.jpg with a soft overlay for text readability. [explicit]
• The committed palette (#FFF7FA / #D4145A / #FF5792 / #4B2638) is preserved; no cool-tone substitution. [explicit]
• The committed typefaces (Quicksand headings, Varela Round body, Georgia italic hero span) are preserved; no substitution to Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui. [explicit]
• The 2-column text/orb hero composition is preserved; no centred headline + gradient blob. [explicit]
• Every surface is a soft-curved, glossy block with a hard offset shadow; no sharp corners, hairline borders, or flat neutral cards. [explicit]
• No stock photography or photorealistic 3D renders for the hero subject; the emoji bouquet in the glossy orb is the committed imagery. [explicit]
• No soft blurred drop-shadows; the signature shadow is a solid offset colour. [explicit]
• The flower-background.jpg must stay under the rgba(255,247,250,0.82) wash so text contrast holds. [explicit]
• No dark mode, glassmorphism panels, or gradient-blob heroes. [explicit]

12. Glossary

• Bloom & Book — The product name shown in the logo and footer; the flower design and scheduling system delivered as icy-flower.
• Bouquet design — A customer's saved arrangement defined by chosen colors, size, special details, and starting flower.
• Catalog entry — A flower available in the shop, with a name and a\x20\xe2\x82\xb1 price, maintained by the Florist / Shop Owner.
• Customize — The protected customer surface where a bouquet design is created by choosing colors, sizes, and special details.
• Featured flower — One of the four flowers shown on Home with its name,\x20\xe2\x82\xb1 price, and Customize link.
• Florist / Shop Owner — The shop operator who fulfills scheduled orders, answers design questions, and maintains the catalog and pricing.
• Flower-orb — The glossy irregular-radius hero object containing the emoji bouquet, floating on a 5s loop with two tilted elliptical orbits.
• Order — A scheduled flower order with a preferred date and an attached bouquet design.
• Petal field — The fixed-position falling flower emoji drifting down the viewport behind all content.
• Preferred date — The date a customer chooses when scheduling an order.
• \xe2\x82\xb1 — Philippine peso, the currency in which all prices are displayed.